/* Keep the selection screen readable over the moving 3D garage. */
body:not(.in-race) .lobby-tools a,
body:not(.in-race) .lobby-tools button{background:#102432e8;border:1px solid #8ca8b04d;font-size:12px}
#lobby .race-setup{background:#0e2030f5;backdrop-filter:none;box-shadow:0 22px 60px #0008}
#lobby .setup-heading>span,#lobby .step-label,#lobby .scene-options button>span{font-size:10px}
#lobby .scene-options button>small,#lobby .scene-best,#lobby .mode-options small{font-size:10px}
#lobby .scene-options button>strong{font-size:18px}
#lobby .mode-options strong,#lobby .team-options button{font-size:12px}
#lobby .fleet-heading,#lobby .kart-options button>span,#lobby .kart-options small{font-size:10px}
#lobby .kart-options strong{font-size:12px}
@media(max-width:1024px){#lobby .race-setup{background:#0e2030f5}#lobby .scene-options button>strong{font-size:16px}}

/* Thumb-first mobile layout: stable targets, contextual boost, quiet HUD. */
.lobby-more{position:relative}.lobby-more summary{cursor:pointer;list-style:none;padding:12px;font-size:12px}.lobby-more summary::-webkit-details-marker{display:none}.lobby-more nav{position:absolute;right:0;top:100%;min-width:150px;padding:8px;background:#102634;border:1px solid #89bcc044;border-radius:12px;box-shadow:0 12px 35px #0006;z-index:30}.lobby-more nav a{display:block;white-space:nowrap;min-height:44px}

@media(max-width:1024px){.lobby-tools{gap:4px}.lobby-tools>a,.lobby-tools>button,.lobby-more summary{min-height:44px;padding:12px 10px!important}.lobby-tools .language-switch button{min-height:44px}.lobby-more nav a{padding:12px!important}#lobby .scene-options button{min-height:92px}#lobby .kart-options{scrollbar-width:none}#lobby .kart-options::-webkit-scrollbar{display:none}}
html.handheld-input .in-race #touchControls{--control-scale:1}
html.handheld-input #touchControls .steering-caption,html.handheld-input #touchControls .auto-drive,html.handheld-input #touchControls #mobileCenter{display:none!important}
html.handheld-input .in-race #driftMeter,html.handheld-input .in-race #empStatus{display:none}
html.handheld-input #touchControls button{box-shadow:inset 0 1px 0 #ffffff24,0 3px 12px #00121e30}
html.handheld-input #touchControls .touch-left{width:172px;height:150px;left:max(16px,env(safe-area-inset-left))}
html.handheld-input #touchControls .steering-pair{gap:8px}
html.handheld-input #touchControls .steering-pair button{width:76px;height:76px;border-radius:24px}
html.handheld-input #touchControls .steering-pair span{display:none}
html.handheld-input #touchControls .brake-control{left:0;bottom:90px;width:54px;height:54px}
html.handheld-input #touchControls .throttle-control{left:68px;bottom:90px;width:54px;height:54px}
html.handheld-input #touchControls .touch-right{width:208px;height:186px;right:max(16px,env(safe-area-inset-right))}
html.handheld-input #touchControls .drift-control{width:100px;height:100px}
html.handheld-input #touchControls .drift-control>span,html.handheld-input #touchControls .nitro-control>span{display:none}
html.handheld-input #touchControls .nitro-control{right:112px;bottom:0;width:80px;height:88px;border-radius:26px}
html.handheld-input #touchControls .mini-control{right:112px;bottom:100px;width:80px;height:60px;border-radius:20px;visibility:hidden;opacity:0;pointer-events:none}
html.handheld-input #touchControls .mini-control.ready{visibility:visible;opacity:1;pointer-events:auto}
html.handheld-input #touchControls .mini-control small{font-size:8px}
html.handheld-input #touchControls .emp-control{right:20px;bottom:120px;width:54px;height:54px}
html.handheld-input .in-race #stuntPrompt{bottom:185px;font-size:11px;max-width:48vw}
html.handheld-input .in-race .telemetry{bottom:22px}
@media(orientation:portrait){html.handheld-input .in-race #touchControls{--control-scale:.86}html.handheld-input .in-race .telemetry{bottom:190px}html.handheld-input .in-race #stuntPrompt{bottom:250px;max-width:85vw}html.handheld-input .in-race #rotateHint{top:180px}html.handheld-input .in-race #touchControls .touch-left{left:max(12px,env(safe-area-inset-left))}html.handheld-input .in-race #touchControls .touch-right{right:max(12px,env(safe-area-inset-right))}}
@media(orientation:landscape) and (max-height:420px){html.handheld-input .in-race #touchControls{--control-scale:.9}html.handheld-input .in-race #stuntPrompt{bottom:170px}}

#landscapeGate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:#07121bf5;touch-action:manipulation}
#landscapeGate[hidden]{display:none}.landscape-card{width:min(360px,100%);text-align:center;color:#f1f4ed}.rotate-device{display:block;font-size:72px;color:#edbb7b;line-height:1}.landscape-card h2{font-size:25px;margin:22px 0 12px}.landscape-card p{font-size:14px;line-height:1.8;color:#a9bcc8;margin-bottom:28px}.landscape-card button{display:block;width:100%;min-height:48px;margin-top:12px;border-radius:10px}.landscape-card .secondary{background:transparent;border:1px solid #728e9b66;color:#bccbd1}

#lobby .route-guide{display:block;color:#98cfc8;font-size:10px;line-height:1.6;margin-top:5px}
@media(orientation:landscape) and (max-height:550px){#lobby .route-guide{display:none}}

#lobby .scene-options button[data-scene="canyon"]{background:linear-gradient(125deg,#764931,#c99061)}
#lobby .scene-options button[data-scene="eleven"]{background:linear-gradient(125deg,#357689,#bdc9b5)}

/* Keep race actions outside the scrolling choices, including five-track layouts. */
#lobby .setup-content,#lobby .setup-footer{display:contents}
#lobby .setup-extras{margin-top:12px;border-top:1px solid #a6bdce26}
#lobby .setup-extras>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;color:#b6cdd4;font-size:12px}
#lobby .setup-extras>summary::-webkit-details-marker{display:none}
#lobby .setup-extras>summary::after{content:'+';font-size:18px;color:#e6bc83}
#lobby .setup-extras[open]>summary::after{content:'−'}
#lobby .setup-extras-content{display:grid;gap:8px;padding:0 0 8px}
#lobby .setup-extras .gate-practice,#lobby .setup-extras #practiceStart{display:block;margin:0;padding:12px 6px;min-height:44px;text-align:left;font-size:11px}
#lobby #openRoom>span{display:block}
#lobby #openRoom small{display:inline;margin-left:8px;font-size:10px;font-weight:400;color:#9ebdbb}

@media(min-width:1025px){
 #lobby .race-setup{display:flex!important;flex-direction:column;height:calc(100dvh - 186px);overflow:hidden}
 #lobby .setup-content{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#597981 #0a1a24;overscroll-behavior:contain;padding-right:4px}
 #lobby .setup-footer{display:block;flex:none;padding-top:12px;margin-top:8px;border-top:1px solid #a6bdce26}
 #lobby .setup-footer .launch-dock{margin-top:0}
 #lobby .setup-footer #openRoom{margin-top:8px}
 #lobby .scene-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #lobby .scene-options button{height:98px;padding:12px 8px}
 #lobby .scene-options button:last-child:nth-child(odd){grid-column:1/-1}
 #lobby .scene-options button>strong{font-size:15px;line-height:1.2}
 #lobby .scene-options button>small{font-size:9px;line-height:1.4}
 #lobby .route-outline{width:48px;height:38px;opacity:.25}
}
@media(min-width:1025px) and (max-height:740px){#lobby .race-setup{height:calc(100dvh - 115px)}}

@media(orientation:landscape) and (max-height:650px) and (max-width:1400px){
 #lobby{--setup-width:clamp(260px,42vw,430px);display:block;padding:0!important;overflow:hidden!important;background:linear-gradient(0deg,#08121bea,transparent 45%),linear-gradient(90deg,#08121b22 45%,#08121bf2 73%)}
 body:not(.in-race) .masthead{height:52px;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
 body:not(.in-race) .brand{font-size:17px}
 body:not(.in-race) .lobby-tools>a,body:not(.in-race) .lobby-tools>button{background:transparent;border:0;color:#bbc9d0}
 #lobby .club-profile,#lobby .showroom-caption{display:none}
 #lobby .lobby-copy{top:68px;left:max(20px,env(safe-area-inset-left));max-width:calc(100% - var(--setup-width) - 56px)}
 #lobby .lobby-copy h1,html[lang=zh-CN] #lobby .lobby-copy h1{font-size:34px}
 #lobby .race-setup{position:absolute!important;top:60px!important;right:max(16px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important;left:auto!important;width:var(--setup-width)!important;height:auto;max-height:none;display:flex!important;flex-direction:column;padding:0 0 0 14px!important;margin:0!important;border:0;border-left:1px solid #ffffff20;border-radius:0;background:#0b1b25d9;box-shadow:none;overflow:hidden;gap:0}
 #lobby .setup-content{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 2px 0;scrollbar-width:thin;scrollbar-color:#668982 #071820;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #lobby .setup-heading{margin:0 0 4px;min-height:14px}
 #lobby .setup-heading>span{font-size:10px;letter-spacing:.08em}
 #lobby .setup-heading>b{display:none}
 #lobby .scene-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 #lobby .scene-options button{height:44px;min-height:44px;padding:4px 22px 4px 7px;display:flex;align-items:center;flex-shrink:0;border-radius:6px}
 #lobby .scene-options button:last-child:nth-child(odd){grid-column:auto}
 #lobby .scene-options button>strong{font-size:11px;line-height:1.3;margin:0;overflow-wrap:anywhere}
 #lobby .scene-options button>span,#lobby .scene-options button>small,#lobby .scene-options .route-outline{display:none}
 #lobby .scene-options button.active::before{width:15px;height:15px;top:4px;right:4px}
 #lobby .scene-best,#lobby #sceneCaption,#lobby .route-guide,#lobby .step-label{display:none}
 #lobby .mode-options{margin:4px 0 0;gap:4px;border:0;display:flex}
 #lobby .mode-options button{min-height:44px;padding:7px 6px;border:1px solid #ffffff20;border-radius:6px}
 #lobby .mode-options button.active{border-color:#edbb7b;background:#edbb7b12}
 #lobby .mode-options strong{font-size:12px}
 #lobby .mode-options small{display:none}
 #lobby #teamChoice{margin-top:4px}
 #lobby .team-options{gap:4px}
 #lobby .team-options button{min-height:44px;padding:6px;font-size:11px;border-radius:6px}
 #lobby .setup-extras{margin-top:4px}
 #lobby .setup-extras>summary{font-size:11px}
 #lobby .setup-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:stretch;gap:6px;flex:none;margin-top:6px;padding:6px 0 0;border-top:1px solid #8ca8b044;background:#0b1b25}
 #lobby .setup-footer .launch-dock{position:static;width:auto;padding:0;margin:0;background:none;border:0;backdrop-filter:none}
 #lobby #raceStart{min-height:44px;height:100%;padding:8px 10px;margin:0;border-radius:6px;font-size:12px;gap:4px;justify-content:center}
 #lobby #raceStart::before{margin-right:0;width:16px;height:16px}
 #lobby #raceStart>span{width:16px;height:16px}
 #lobby .setup-footer #openRoom{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:5px 7px;margin:0;border-radius:6px;font-size:11px;line-height:1.4}
 #lobby #openRoom::before{width:16px;height:16px;margin:0}
 #lobby #openRoom small{display:block;margin:0;font-size:9px;white-space:nowrap}
 #lobby .race-disclosure{display:none}
 #lobby .fleet-dock{position:absolute;left:max(16px,env(safe-area-inset-left));right:calc(var(--setup-width) + max(32px,env(safe-area-inset-right)));bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none;margin:0;padding:0}
 #lobby .fleet-heading{margin-bottom:7px}
 #lobby .fleet-heading>b{font-size:11px}
 #lobby .kart-options{display:flex;overflow-x:auto;gap:6px;padding:0 0 6px;scrollbar-width:thin;scrollbar-color:#69847e #10212b;scroll-snap-type:x proximity}
 #lobby .kart-options button{flex:0 0 max(64px,calc((100% - 30px)/6));min-height:68px;padding:0 3px 6px;scroll-snap-align:start}
 #lobby .kart-options img{height:40px}
 #lobby .kart-options strong{font-size:9px}
 #lobby .kart-options button>span,#lobby .kart-options small,#lobby .fleet-count,#lobby .kart-detail h2{display:none}
 #lobby .kart-detail{margin-top:2px}
 #lobby .weekly-activity-trigger{top:auto;left:max(20px,env(safe-area-inset-left));right:auto;bottom:140px;min-height:36px;font-size:10px;padding:8px 12px}
 .controls-card,.results-card{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);overflow-y:auto}
}
@media(orientation:landscape) and (max-height:360px) and (max-width:1400px){
 #lobby .lobby-copy .eyebrow,#lobby .lobby-copy p{display:none}
 #lobby .lobby-copy h1,html[lang=zh-CN] #lobby .lobby-copy h1{font-size:26px;margin-top:0}
}

/* Small landscape phones need a centred score, separate from lap and time. */
@media(orientation:landscape) and (max-height:650px){
 html.handheld-input .in-race .top{width:clamp(168px,30vw,185px);padding:8px}
 html.handheld-input .in-race .race-stats{gap:8px}
 html.handheld-input .in-race .race-stats .value{font-size:13px}
 html.handheld-input .in-race #teamScore{left:50%;transform:translateX(-50%);top:max(12px,env(safe-area-inset-top));gap:8px;padding:6px 9px;font-size:10px}
 html.handheld-input .in-race #teamScore b{font-size:18px;margin:0 4px}
 html.handheld-input .in-race #teamScore>small{display:none}
 html.handheld-input .in-race #rank{font-size:42px}
}

/* Move the left thumb cluster inward and give steering a larger touch target. */
@media(orientation:landscape){
 html.handheld-input #touchControls .touch-left{width:204px;height:172px;left:max(clamp(36px,8vw,88px),env(safe-area-inset-left));bottom:max(48px,12dvh,env(safe-area-inset-bottom))}
 html.handheld-input #touchControls .steering-pair{gap:12px}
 html.handheld-input #touchControls .steering-pair button{width:96px;height:96px;border-radius:28px}
 html.handheld-input #touchControls .brake-control{bottom:108px;width:64px;height:64px}
 html.handheld-input #touchControls .throttle-control{left:80px;bottom:108px;width:64px;height:64px}
}
@media(orientation:landscape) and (max-height:650px){
 html.handheld-input .in-race #challengeHUD{top:84px}
 html.handheld-input .in-race #lapDelta{top:58px;left:50%;transform:translateX(-50%)}
}
@media(orientation:landscape) and (max-height:360px){
 html.handheld-input .in-race #challengeHUD{top:76px;padding:6px 8px}
 html.handheld-input .in-race .challenge-live{border:0;padding-bottom:0;gap:3px}
 html.handheld-input .in-race #challengeHUD .chain-live{display:none}
}
@media(orientation:landscape) and (max-height:300px){html.handheld-input .in-race #challengeHUD{display:none}}

/* Practice is a visible choice; the primary action always starts the race. */
#lobby .practice-shortcut{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px;border:1px solid #b9c8cb38;border-radius:5px;background:transparent;color:#c6d8d9;font:inherit;font-size:12px;cursor:pointer}
#lobby .practice-shortcut:hover{border-color:#edbd84;color:#ffe1bd}
.preparing-race #loadingScreen span{color:#dce9e7;max-width:28em;line-height:1.7}
@media(orientation:landscape) and (max-height:650px) and (max-width:1400px){#lobby .practice-shortcut{min-height:32px;font-size:10px;margin-top:2px;padding:4px}.preparing-race #loadingScreen{padding:16px}}

@media(orientation:landscape) and (max-height:650px) and (max-width:1400px){
 #lobby .setup-footer{grid-template-columns:1fr 1fr;grid-template-rows:44px 44px;gap:4px 6px}
 #lobby .setup-footer .launch-dock{display:contents}
 #lobby .setup-footer #raceStart{height:44px;grid-row:1;grid-column:1/-1}
 #lobby .setup-footer #practiceStart{grid-row:2;grid-column:1;min-height:44px;margin:0;text-decoration:none}
 #lobby .setup-footer #openRoom{grid-row:2;grid-column:2;height:44px;min-height:44px}
}
@media(max-width:1024px) and (orientation:portrait){#lobby{padding-bottom:170px!important}#lobby .launch-dock #practiceStart{margin-top:6px;min-height:44px}}