/* Standalone mobile selector artwork. Keep the original button logic/position. */
#lobbyButtonMobile.buttonMobile,
#roomButtonMobile.buttonMobile,
.HD #lobbyButtonMobile.buttonMobile,
.HD #roomButtonMobile.buttonMobile {
    width: 54px;
    height: 46px;
    margin-left: -10px;
    margin-top: -5px;
    overflow: visible;
    background-image: url('/static/images/select_mobile_icon.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    filter: drop-shadow(0 0 4px rgba(39, 220, 255, .9));
    transition: transform .14s ease, filter .14s ease;
}

#lobbyButtonMobile.buttonMobile:hover,
#roomButtonMobile.buttonMobile:hover,
.HD #lobbyButtonMobile.buttonMobile:hover,
.HD #roomButtonMobile.buttonMobile:hover {
    background-position: center center !important;
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 0 7px rgba(39, 220, 255, 1));
}

#lobbyButtonMobile.buttonMobile:active,
#roomButtonMobile.buttonMobile:active,
.HD #lobbyButtonMobile.buttonMobile:active,
.HD #roomButtonMobile.buttonMobile:active {
    background-position: center center !important;
    transform: translateY(1px) scale(.97);
}

#lobbyButtonMobile.buttonMobile::after,
#roomButtonMobile.buttonMobile::after {
    content: 'Mobile';
    position: absolute;
    left: 50%;
    top: 41px;
    transform: translateX(-50%);
    color: #fff;
    font: 700 12px/1 Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: -1px -1px 0 #071322, 1px -1px 0 #071322,
                 -1px 1px 0 #071322, 1px 1px 0 #071322,
                 0 0 4px #00dfff;
}