/* Keep the HUD inside the visible Safari viewport without changing resolution. */
html,body{touch-action:manipulation}
#hud{bottom:auto;height:100vh;height:100dvh}
#lobby.menu-shell{bottom:auto;height:100vh;height:100dvh}
body:has(#hud:not([hidden])) #world{bottom:auto;height:100vh;height:100dvh}
.display-settings{margin-top:20px;border-top:1px solid #a5c4d855;padding-top:18px}
.fullscreen-setting{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fullscreen-toggle{background:#1688ce;color:#fff;border-radius:6px;padding:10px 16px;min-height:44px;font-weight:700}
.fullscreen-toggle:disabled{opacity:.6;cursor:default}
.fullscreen-status{font-size:13px;line-height:1.6;color:inherit;margin:10px 0 0}
@media(pointer:coarse){input,textarea,select{font-size:16px!important}}
@media(orientation:landscape) and (max-height:600px){
 #hud .boost-slots{left:max(12px,env(safe-area-inset-left));top:10px;gap:8px}
 #hud .slot{width:42px;height:46px}#hud .slot img{width:34px;height:38px}
 #hud .boost-slots>span{top:50px;font-size:10px;letter-spacing:1px}
 #hud .race-stats{top:8px;right:calc(max(8px,env(safe-area-inset-right)) + 54px);gap:16px}
 #hud .race-stats small{font-size:9px;letter-spacing:1px}
 #hud .race-stats strong{font-size:27px}#hud .race-stats em{font-size:16px;margin-left:3px}
 #hud #time{font-size:24px;margin-top:3px;min-width:104px}
 #hud #pause{right:max(8px,env(safe-area-inset-right));top:8px;width:44px;height:44px;padding:0;font-size:22px}
 #hud #pause span{display:none}
 #hud #ranking{top:76px;left:max(12px,env(safe-area-inset-left));font-size:10px;line-height:1.65;max-width:164px}
 #hud #ranking div{min-width:0;gap:7px;padding:0 7px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #hud #ranking div:nth-child(n+5):not(.me){display:none}
 #hud #ranking i{width:6px;height:6px;margin-right:3px}
 .updated-controls[data-control-method=touch] #hud #minimap,.test-game[data-control-method=touch] #hud #minimap{top:62px;right:max(8px,env(safe-area-inset-right));bottom:auto;width:100px;height:83px;opacity:.65}
 #hud #minimap{top:62px;right:max(8px,env(safe-area-inset-right));bottom:auto;width:100px;height:83px}
 .updated-controls #hud #testTouchControls,.test-game #hud #testTouchControls{--touch-size:clamp(60px,19dvh,90px)}
 .updated-controls #hud .test-touch-steering,.test-game #hud .test-touch-steering{left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));gap:6px}
 .updated-controls #hud .test-touch-actions,.test-game #hud .test-touch-actions{right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:170px;height:calc(var(--touch-size)*1.8)}
 .updated-controls #hud .test-touch-actions button,.test-game #hud .test-touch-actions button{min-width:44px;min-height:44px}
 .updated-controls[data-control-method=touch] #hud #v1Tachometer,.test-game[data-control-method=touch] #hud #v1Tachometer,#hud #v1Tachometer{width:190px;height:115px;bottom:max(4px,env(safe-area-inset-bottom))}
 #hud .v1-speed strong{font-size:42px}#hud .v1-speed small{font-size:10px}
 #hud .speedometer{width:190px;height:158px;bottom:-8px}#hud .speed-number{top:44px}#hud .speed-number strong{font-size:52px}#hud .speed-number small{font-size:12px}
 #hud .n2o{font-size:18px;bottom:26px;left:-5px}#hud .xmark{font-size:26px;bottom:26px;right:0}#hud #driftLabel{bottom:8px;font-size:9px}
 #hud #notice{font-size:16px;top:20%}#hud #countdown{font-size:88px}#hud .race-help{display:none}
 #lobby .page-settings{padding:12px 20px}#lobby .page-settings .account-settings-layout{height:auto;gap:16px}
 #lobby .page-settings .game-settings-panel,#lobby .offline-game-settings{padding:16px}
}
@media(orientation:landscape) and (max-height:300px){
 .updated-controls[data-control-method=touch] #hud #minimap,.test-game[data-control-method=touch] #hud #minimap,#hud #minimap{left:calc(max(12px,env(safe-area-inset-left)) + 110px);right:auto;top:8px;width:80px;height:66px}
}
@media(orientation:landscape) and (max-height:270px){
 #hud #ranking div:nth-child(n+3):not(.me){display:none}
}
/* Installed Safari: draw through the bottom strip, reserve the status bar for UI. */
:root{--app-height:100dvh;--app-safe-top:env(safe-area-inset-top,0px)}
html.ios-standalone{--app-safe-top:max(24px,env(safe-area-inset-top,0px))}
html,body{width:100%;height:var(--app-height);overscroll-behavior:none}
body>#world,body:has(#hud:not([hidden]))>#world{top:0;bottom:auto;height:var(--app-height)}
#lobby.menu-shell,#hud{top:var(--app-safe-top);bottom:auto;height:calc(var(--app-height) - var(--app-safe-top))}
#gameLoading,#themeRaceLoading{height:var(--app-height);bottom:auto}
/* Center the map on the right; keep the driving instruments near the bottom. */
#hud #minimap,.updated-controls[data-control-method=touch] #hud #minimap,.test-game[data-control-method=touch] #hud #minimap{left:auto;right:max(20px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%)}
#hud #v1Tachometer,.updated-controls[data-control-method=touch] #hud #v1Tachometer,.test-game[data-control-method=touch] #hud #v1Tachometer{bottom:max(4px,env(safe-area-inset-bottom))}
#hud .speedometer{bottom:calc(env(safe-area-inset-bottom,0px) - 8px)}
@media(orientation:landscape) and (max-height:600px){#hud #minimap,.updated-controls[data-control-method=touch] #hud #minimap,.test-game[data-control-method=touch] #hud #minimap{right:max(8px,env(safe-area-inset-right));top:50%;left:auto}}