/* VESPOTR mobile visual system: compact landscape lobby and quiet arena chrome. */
body.mobile-ui{--m-bg:#07121c;--m-panel:#101f2d;--m-line:#294052;--m-accent:#b5ff70;--m-text:#e9f4ff;--m-muted:#839aae;color:var(--m-text)}
body.mobile-ui button,body.mobile-ui a,body.mobile-ui input,body.mobile-ui select{transition:background .15s,border-color .15s,box-shadow .15s}
body.mobile-ui button:active{filter:brightness(1.15)}
body.mobile-ui button:focus-visible,body.mobile-ui a:focus-visible{outline:2px solid var(--m-accent);outline-offset:3px}
body.mobile-ui #lobby{background:radial-gradient(ellipse at 0 0,#1b423c66,transparent 48%),radial-gradient(ellipse at 100% 100%,#16374f66,transparent 55%),#07121cf5}
body.mobile-ui #lobby .panel{background:linear-gradient(140deg,#152a37,#0c1926);border:1px solid #2b4453;box-shadow:0 12px 35px #0003;border-radius:18px}
body.mobile-ui #lobby input,body.mobile-ui #lobby select{border:1px solid #345164;border-radius:11px;background:#091722;color:#e9f4ff;box-shadow:none}
body.mobile-ui #lobby input:focus,body.mobile-ui #lobby select:focus{border-color:#a5f16b;outline:2px solid #a5f16b22}
body.mobile-ui .card-kicker,body.mobile-ui .label{color:#8faaa9!important;font-size:9px!important;letter-spacing:1.5px!important}
body.mobile-ui .side-title{font-size:18px;font-weight:750;letter-spacing:-.5px}.tiny-badge{border-radius:6px}
body.mobile-ui #mobileLobbyTools button,body.mobile-ui .account-nav button,body.mobile-ui .account-nav a{background:#112532;border:1px solid #2c4556;color:#bed1df;border-radius:10px}
body.mobile-ui #mobileLaunch{background:none!important;border:0!important;backdrop-filter:none!important}
body.mobile-ui #mobilePlay{background:linear-gradient(130deg,#c7ff80,#8fea60)!important;border-color:#d7ffa2!important;box-shadow:0 6px 24px #94ef6026;color:#112418!important;letter-spacing:1px;border-radius:13px!important}
body.mobile-ui #mobileWatch{background:#172c3b!important;border-color:#395465!important;border-radius:13px!important}
body.mobile-ui #roomTitleBar{background:linear-gradient(120deg,#10252df5,#0b1924ed);border:1px solid #466d5d;border-radius:13px;box-shadow:0 6px 22px #0003}
body.mobile-ui #roomTitle{color:#d9efdf;font-weight:750}body.mobile-ui #roomCountdown{color:#b9ff7d;font-variant-numeric:tabular-nums;letter-spacing:1px}
body.mobile-ui #stats .stat{border-radius:12px;background:#10212de8;border:1px solid #2a4251;box-shadow:none}
body.mobile-ui #stats small{color:#8ea6b8;letter-spacing:1.5px}body.mobile-ui #stats strong{color:#f1f8ff;font-variant-numeric:tabular-nums}
body.mobile-ui #connectionBadge{background:#0a1c25d9;border-color:#294d50;border-radius:20px;color:#9bd2bb}
body.mobile-ui #pause{background:#102330;border:1px solid #35505f;color:#c3d7e4;box-shadow:none}
body.mobile-ui #mobileQuickBar{padding:5px;background:#0b1824d9;border:1px solid #263d4e;border-radius:16px;gap:4px}
body.mobile-ui #mobileQuickBar button{height:49px;border:1px solid transparent;border-radius:11px;background:transparent;color:#9fb6c8;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;font-size:10px;font-weight:650;letter-spacing:.2px}
body.mobile-ui #mobileQuickBar button::before{font:19px Arial;color:#c9e0ec;line-height:18px;content:'≡'}
body.mobile-ui #mobileQuickBar button[data-panel=gold]::before{content:'◇';color:#f6d078}body.mobile-ui #mobileQuickBar button[data-panel=chat]::before{content:'☷'}body.mobile-ui #mobileQuickBar button[data-panel=board]::before{content:'▥'}body.mobile-ui #mobileQuickBar button[data-panel=menu]::before{content:'☰'}
body.mobile-ui #mobileQuickBar button[aria-expanded=true]{background:#b5ff701a;color:#c7ff8d;border-color:#b5ff7044}body.mobile-ui #mobileQuickBar button[aria-expanded=true]::before{color:#c7ff8d}
body.mobile-ui.game-active .controls{background:transparent!important;border:0;box-shadow:none;padding:0;align-items:center;gap:10px}
body.mobile-ui.game-active .controls button{width:60px;height:60px;min-width:60px;min-height:60px;border-radius:50%;background:linear-gradient(145deg,#203a4b,#102330);border:1px solid #486778;color:#c3d9e7;box-shadow:0 5px 18px #0005;font-size:11px;font-weight:650}
body.mobile-ui.game-active .controls #split{width:74px;height:74px;background:linear-gradient(145deg,#c3ff85,#8de762);border:2px solid #d4ffa7;color:#173019;box-shadow:0 0 0 5px #a5ff7410,0 6px 24px #0006;font-size:13px}
body.mobile-ui.game-active .controls #eject{background:linear-gradient(145deg,#214b5b,#123342);border-color:#508ba0}
body.mobile-ui.game-active #joystick{border:2px solid #5f97a4;background:radial-gradient(circle,#22495855,#102d3a66);box-shadow:inset 0 0 0 8px #adcdd005,0 0 0 6px #88cbd008,0 8px 24px #0004}
body.mobile-ui #joystickKnob{background:radial-gradient(circle at 35% 25%,#81b7c8,#376a7e);border:2px solid #b6ecf5;box-shadow:0 4px 14px #0005}
body.mobile-ui #mobileGameMenu,body.mobile-ui #goldHUD,body.mobile-ui #chatBox,body.mobile-ui #board{border:1px solid #385866!important;border-radius:17px!important;background:linear-gradient(145deg,#142b39f7,#0a1a28fa)!important;box-shadow:0 18px 45px #0007!important}
body.mobile-ui #mobileGameMenu strong{font-size:10px;letter-spacing:2px;color:#90baab;padding-bottom:8px;border-bottom:1px solid #2b4653}
body.mobile-ui #mobileGameMenu button,body.mobile-ui #mobileGameMenu a{background:#183240;border-color:#315263;border-radius:11px;color:#c7dce7;font-size:11px}
body.mobile-ui #goldHUD strong{color:#f5d583}body.mobile-ui #goldHUD button{background:#3b331e;border-color:#7b6838;color:#ffe6a3;border-radius:10px}
body.mobile-ui #settings .card,body.mobile-ui #help .card,body.mobile-ui #end .card,body.mobile-ui .hubDialog,body.mobile-ui .opsDialog{background:linear-gradient(135deg,#142b38,#0b1927)!important;border:1px solid #395a69!important;box-shadow:0 18px 70px #0008;border-radius:20px!important}
body.mobile-ui #settings h2,body.mobile-ui #help h2,body.mobile-ui #end h2{font-size:25px;letter-spacing:-.7px;margin-top:0}
body.mobile-ui #settings input[type=range]{accent-color:#b5ff70;min-height:40px}body.mobile-ui #settings label{color:#b7cbd9;font-size:12px}
body.mobile-ui #settingsClose{background:linear-gradient(130deg,#c7ff80,#8fea60);color:#132718;border-radius:12px;min-height:46px}
body.mobile-ui .hubCard,body.mobile-ui .opsCard{background:#0d202e;border-color:#2b4657;border-radius:14px}
body.mobile-ui #landscapeGate{max-width:none!important;max-height:none!important;width:100dvw!important;height:100dvh!important;border-radius:0!important;background:radial-gradient(ellipse at 50% 30%,#1e493e,#07121c 70%)!important}
body.mobile-ui #landscapeGate .fullscreenToggle{background:#b5ff70;color:#132719;border:0;border-radius:12px;padding:14px 25px;font-weight:750;margin-top:8px}
@media(orientation:landscape){
body.mobile-ui #lobby{padding:12px 16px;height:100dvh;overflow:hidden}
body.mobile-ui .lobby-shell{height:100%;max-width:1150px;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:48px minmax(0,1fr) 48px;gap:10px 14px}
body.mobile-ui .lobby-heading{grid-area:1/1;margin:0;display:flex;align-items:center;justify-content:start}body.mobile-ui .vespotr-lobby-logo{width:170px!important;max-width:100%!important}body.mobile-ui .lobby-heading p{display:none}
body.mobile-ui .account-nav{grid-area:1/2;margin:0;display:flex;justify-content:end;gap:6px;align-items:center;flex-wrap:nowrap;min-width:0}
body.mobile-ui .account-nav button,body.mobile-ui .account-nav a{font-size:10px!important;min-height:36px;padding:8px 10px;white-space:nowrap}body.mobile-ui .account-nav span{display:none}
body.mobile-ui .lobby-grid{grid-area:2/1/3/3;display:grid;grid-template-columns:230px minmax(0,1fr);height:100%;gap:14px;min-height:0}
body.mobile-ui .rooms-column{grid-column:1;grid-row:1;height:100%;min-height:0;overflow:auto;display:block}
body.mobile-ui .room-panel{padding:16px;min-height:100%}body.mobile-ui #roomSelect{min-height:44px;font-size:12px!important}body.mobile-ui #inviteCode{min-height:40px;font-size:12px!important;padding:10px;margin:5px 0 10px}body.mobile-ui .roomManage{font-size:10px;display:inline-block;margin-top:10px}body.mobile-ui #lobbyRoomLive{font-size:10px;line-height:1.6;color:#92b6a8}
body.mobile-ui .player-card{grid-column:2;grid-row:1;height:100%;min-height:0;overflow:auto;position:relative;padding:16px!important}
body.mobile-ui .player-card h2{font-size:22px;margin:5px 85px 14px 0;letter-spacing:-.6px}body.mobile-ui .player-sub{display:none}body.mobile-ui #cellPreview{position:absolute;right:18px;top:14px;width:58px;height:58px;margin:0}
body.mobile-ui #name{width:calc(100% - 80px)!important;min-height:42px!important;font-size:14px!important;padding:10px 12px;margin:5px 0 12px}
body.mobile-ui .player-card .skins{margin:5px 0 12px;gap:8px}body.mobile-ui .player-card .skin{width:28px;height:28px;min-height:28px;padding:0;border-width:2px}
body.mobile-ui #appearance{min-height:42px;padding:9px;font-size:13px!important;margin:5px 0 10px}body.mobile-ui #skinGallery{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}body.mobile-ui #skinGallery button{min-height:63px;padding:6px;border-radius:10px;background:#0c1e2d;border-color:#2b4555}body.mobile-ui #skinGallery button[aria-checked=true]{border-color:#b5ff70;background:#213c30}body.mobile-ui #skinGallery span{font-size:9px}body.mobile-ui #skinGallery img{width:32px;height:32px}
body.mobile-ui .player-card .entry-actions,body.mobile-ui #modeInfo{display:none}body.mobile-ui .options{margin:12px 0 0;gap:18px;font-size:11px}
body.mobile-ui #mobileLobbyTools{grid-area:3/1/4/3;display:flex;align-items:center;gap:6px;margin:0;padding-right:245px;overflow-x:auto;min-width:0}body.mobile-ui #mobileLobbyTools button{flex:0 0 auto;min-height:39px;padding:8px 12px;font-size:10px;white-space:nowrap}
body.mobile-ui:not(.game-active) #mobileLaunch{left:auto;right:16px;bottom:12px;width:230px;padding:0;grid-template-columns:1fr 65px;gap:8px}body.mobile-ui #mobileLaunch button{min-height:45px;font-size:12px}
body.mobile-ui .lobby-caption{display:none}
body.mobile-ui.game-active #roomTitleBar{left:16px;top:12px;right:auto;width:min(355px,45vw);min-height:42px}
body.mobile-ui.game-active #roomTitle{font-size:12px}body.mobile-ui.game-active #roomCountdown{font-size:21px}
body.mobile-ui.game-active #stats{left:16px;top:64px}body.mobile-ui.game-active #stats .stat{min-width:82px;padding:7px 11px}
body.mobile-ui.game-active #connectionBadge{right:76px;top:19px;font-size:9px}
body.mobile-ui.game-active #pause{right:16px;top:12px;width:44px;min-height:42px}
body.mobile-ui.game-active #mobileQuickBar{right:16px;bottom:calc(110px + var(--mobile-safe-bottom));width:280px}
body.mobile-ui.game-active .controls{right:22px!important;bottom:calc(18px + var(--mobile-safe-bottom))!important}
body.mobile-ui.game-active #joystick:not([hidden]){left:24px;bottom:calc(24px + var(--mobile-safe-bottom))}
body.mobile-ui.game-active[data-mobile-panel=menu] #mobileGameMenu{left:190px;right:16px;top:70px;bottom:180px;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px;gap:7px}
body.mobile-ui.game-active[data-mobile-panel=gold] #goldHUD,body.mobile-ui.game-active[data-mobile-panel=chat] #chatBox,body.mobile-ui.game-active[data-mobile-panel=board] #board{left:190px!important;right:16px!important;top:70px!important;max-height:calc(100dvh - 250px)!important;padding:14px!important}
body.mobile-ui #settings .card,body.mobile-ui #help .card{max-width:680px!important}
body.mobile-ui .hubContent,body.mobile-ui .opsContent{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(orientation:landscape) and (max-width:700px){body.mobile-ui .lobby-shell{grid-template-columns:190px minmax(0,1fr)}body.mobile-ui .lobby-grid{grid-template-columns:190px minmax(0,1fr)}body.mobile-ui #skinGallery{grid-template-columns:repeat(3,minmax(0,1fr))}body.mobile-ui .account-nav button,body.mobile-ui .account-nav a{padding:7px;font-size:9px!important}body.mobile-ui.game-active #mobileQuickBar{width:240px}body.mobile-ui.game-active[data-mobile-panel=menu] #mobileGameMenu{left:165px;grid-template-columns:repeat(2,minmax(0,1fr))}body.mobile-ui .hubContent,body.mobile-ui .opsContent{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body.mobile-ui *{transition:none!important}}
.mobileProfileBasics,.mobileProfileLooks{display:contents}
body.mobile-ui *{scrollbar-width:thin;scrollbar-color:#426172 transparent}body.mobile-ui ::-webkit-scrollbar{width:5px;height:4px}body.mobile-ui ::-webkit-scrollbar-thumb{background:#426172;border-radius:5px}body.mobile-ui ::-webkit-scrollbar-track{background:transparent}
@media(orientation:landscape){
body.mobile-ui .vespotr-account-links{grid-area:1/2;align-self:center;justify-self:end;margin:0}body.mobile-ui .vespotr-account-links a{font-size:9px;padding:9px;display:block;border-radius:10px;background:#20392c;border:1px solid #4e6b45;color:#c6ff9c}
body.mobile-ui .account-nav{padding-right:118px}
body.mobile-ui .player-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:18px;row-gap:4px}
body.mobile-ui .player-card .card-kicker,body.mobile-ui .player-card h2{grid-column:1/-1}body.mobile-ui .player-card h2{margin-bottom:8px}
body.mobile-ui .mobileProfileBasics,body.mobile-ui .mobileProfileLooks{display:block;min-width:0;grid-row:3;overflow:auto;padding-right:3px}body.mobile-ui .mobileProfileBasics{grid-column:1}body.mobile-ui .mobileProfileLooks{grid-column:2;border-left:1px solid #294350;padding-left:16px}
body.mobile-ui #name{width:100%!important;margin-bottom:8px}body.mobile-ui #skinGallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}body.mobile-ui #skinGallery button{min-height:50px;padding:4px}body.mobile-ui #skinGallery img{width:26px;height:26px}body.mobile-ui #skinGallery span{font-size:8px}
body.mobile-ui #appearance{margin-top:5px;margin-bottom:7px;min-height:38px;padding:7px;font-size:12px!important}
body.mobile-ui .player-card #team{grid-column:2;grid-row:4;font-size:11px!important;min-height:35px}body.mobile-ui .player-card .options{grid-column:1;grid-row:4;margin:6px 0 0;font-size:10px}
body.mobile-ui #publicAccountId{font-size:10px;margin:5px 0}
}
body.mobile-ui #lobby{box-sizing:border-box!important;min-height:0!important}
body.mobile-ui.game-active #rightHudRail #pause{position:fixed!important;left:auto!important;bottom:auto!important;right:16px!important;top:calc(12px + var(--mobile-safe-top))!important;margin:0!important;width:44px!important;z-index:42}
body.mobile-ui.game-active #rightHudRail #connectionBadge{position:fixed!important;left:auto!important;bottom:auto!important;right:76px!important;top:calc(19px + var(--mobile-safe-top))!important;margin:0!important;width:auto!important;z-index:40}
body.mobile-ui #settings .card{display:flex;flex-direction:column;gap:8px}body.mobile-ui #settings .card>h2{order:-2;margin-bottom:8px}body.mobile-ui #joystickSettings{order:-1;border-top:0;border-bottom:1px solid #294754;padding:0 0 16px;margin:0 0 10px}body.mobile-ui #joystickPreview{width:min(var(--joystick-size,144px),110px);height:min(var(--joystick-size,144px),110px)}
body.mobile-ui #settingsClose{position:sticky;bottom:0;box-shadow:0 -8px 20px #0b1927;margin-top:10px}
#mobilePanelClose{display:none}body.mobile-ui.game-active:not([data-mobile-panel=none]) #mobilePanelClose{display:grid;place-items:center;position:fixed;right:25px;top:76px;width:32px;height:32px;min-height:32px;border-radius:10px;border:1px solid #527180;background:#193441;color:#d8eaf4;font:24px Arial;z-index:70}
body.mobile-ui #mobileGameMenu strong,body.mobile-ui #board h3{padding-right:40px}
@media(orientation:landscape){body.mobile-ui.game-active[data-mobile-panel=menu] #mobileGameMenu{bottom:110px}body.mobile-ui.game-active[data-mobile-panel=gold] #goldHUD,body.mobile-ui.game-active[data-mobile-panel=chat] #chatBox,body.mobile-ui.game-active[data-mobile-panel=board] #board{max-height:calc(100dvh - 175px)!important}body.mobile-ui #chatMessages{padding-top:16px}body.mobile-ui #goldHUD{padding-right:54px!important}}