/* Phone-first controls, safe areas, and a fixed 16:9 playfield in either orientation. */
button{touch-action:manipulation}
@media(max-width:900px), (pointer:coarse){
 body{padding:max(10px,env(safe-area-inset-top)) env(safe-area-inset-right) max(10px,env(safe-area-inset-bottom)) env(safe-area-inset-left);min-height:var(--browser-height,100svh)}
 main{width:min(100%,calc((var(--browser-height,100svh) - 118px)*1.77778));margin:auto}
 .cockpit{display:none}
 .arcade{border:0;border-radius:0;box-shadow:none;--instrument-height:98px}
 .arcade::after{display:none}
 .viewport{border-radius:0}
 .screen-corners{padding:0 8px;min-height:44px;gap:8px}
 .screen-corners button{min-height:44px;padding:8px;font-size:9px;border-color:transparent;background:transparent}
 .grok-credit{font-size:8px;gap:5px}.grok-credit img{width:49px;height:20px}
 .title-tagline{top:24%;padding:0 8px;font-size:clamp(9px,2.1cqw,13px);line-height:1.2;letter-spacing:.08cqw}
 .title-screen #start{top:82%;min-height:44px;min-width:160px;font-size:clamp(17px,3.2cqw,24px);padding:8px 16px}
 .console{padding:3px 5px;gap:3px}
 .console-right{display:none}
 .console-right button,.console-right #sound,.console-right #fullscreen{min-width:44px;min-height:44px;padding:8px}
 .live-tip{font-size:clamp(9px,1.7cqw,12px);letter-spacing:.4px;bottom:8px;padding:3px 8px;background:#06090b99;border-radius:2px}
 .intro.result-screen{gap:8px}
 .result-screen .title-logo{min-width:0!important;width:55%!important}
 .result-screen #start{min-height:44px;min-width:140px;font-size:12px}
 #run-stats{padding-inline:11px;gap:0}
 #run-stats>div{flex:1 1 0;width:auto;max-width:none;min-width:0;text-align:center}
 #run-stats span{font-size:7px;letter-spacing:0}
 #run-stats strong{font-size:clamp(18px,4.7vw,26px)}
 #leaderboard-dialog{max-height:calc(var(--browser-height,100dvh) - 20px);width:min(1000px,calc(100vw - 20px));padding:16px}
 #leaderboard-close,.board-pagination button,#leaderboard-refresh,#score-submit{min-height:44px;min-width:44px}
 #player-name{font-size:16px;min-height:44px}
 .board-table-wrap{max-height:calc(var(--browser-height,100dvh)*.52)}
 .board-caption{margin-bottom:10px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:550px){
 body{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
 main{width:min(100%,calc((var(--browser-height,100svh) - 76px)*1.77778))}
 .arcade{--instrument-height:64px}
 #telemetry,#run-stats{height:58px}
 .console-right{flex-direction:row}
 #run-stats span{margin-bottom:5px}
 .title-tagline{top:20%}
 .title-screen #start{top:81%}
 .intro:not(.title-screen):not(.result-screen){inset:12% 8%;max-width:none}
 .intro:not(.title-screen):not(.result-screen) h1{font-size:30px;margin:8px 0}
 .intro:not(.title-screen):not(.result-screen) p{margin:4px 0;font-size:10px}
 #leaderboard-dialog{max-height:calc(var(--browser-height,100dvh) - 12px);padding:12px 18px}
 .board-content{min-height:0}.board-heading{margin-bottom:0}.board-caption{margin-bottom:6px}
 .board-table-wrap{max-height:calc(var(--browser-height,100dvh)*.49)}
 #score-entry{margin-top:10px;padding:10px}#score-entry label,#leaderboard-run{margin-bottom:4px}
 .board-bottom{padding-top:4px}
}
/* iPhone browsers without element fullscreen still get a usable expanded view. */
body.game-expanded{overflow:hidden;padding:0}
.arcade.expanded,.arcade:fullscreen{position:fixed;inset:0;width:100%;height:var(--browser-height,100dvh);border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#030506;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);z-index:100}
.arcade.expanded::after{display:none}
.arcade.expanded .viewport,.arcade:fullscreen .viewport{width:min(100%,calc((var(--browser-height,100svh) - var(--instrument-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.77778));max-height:none;flex:none;margin:0}
.arcade.expanded .console,.arcade:fullscreen .console{width:min(100%,calc((var(--browser-height,100svh) - var(--instrument-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.77778));flex-shrink:0}

/* A continuous arcade atmosphere fills the unused phone viewport during every phase. */
.mobile-atmosphere{display:none}
@media(max-width:900px), (pointer:coarse){
 .mobile-atmosphere{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#321019 0%,#100b13 48%,#06070c 100%)}
 .ambient-grid{position:absolute;left:-65%;right:-65%;top:50%;height:100%;transform-origin:center top;transform:perspective(45vh) rotateX(57deg);background-image:linear-gradient(#f03d3b44 1px,transparent 1px),linear-gradient(90deg,#f03d3b44 1px,transparent 1px);background-size:64px 48px;animation:ambient-grid-drift 7s linear infinite;opacity:.65}
 .ambient-grid-ceiling{top:auto;bottom:50%;transform-origin:center bottom;transform:perspective(45vh) rotateX(-57deg);animation-direction:reverse;opacity:.4}
 .mobile-atmosphere::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 14% 9%,#b9dadd80 0 1px,transparent 1.5px),radial-gradient(circle at 76% 17%,#b9dadd55 0 1px,transparent 1.5px),radial-gradient(circle at 42% 82%,#b9dadd55 0 1px,transparent 1.5px),radial-gradient(circle at 88% 91%,#b9dadd55 0 1px,transparent 1.5px)}
 .mobile-atmosphere::after{content:'';position:absolute;inset:0;background:linear-gradient(#03050722,transparent 25% 75%,#03050722),repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 4px)}
 .arcade.expanded,.arcade:fullscreen{background:transparent}
}
@keyframes ambient-grid-drift{to{background-position:0 48px}}
@media(prefers-reduced-motion:reduce){.ambient-grid{animation:none}}

/* A compact resume card survives short in-app-browser windows and rotation. */
.intro.browser-paused{inset:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center;background:#030609b8}
.browser-paused .eyebrow,.browser-paused #description,.browser-paused .start-hint{display:none}
.browser-paused h1{margin:0;font:500 clamp(16px,3cqw,25px)/1.2 'IBM Plex Mono',monospace;letter-spacing:2px}
.browser-paused #start{min-height:44px;min-width:168px;text-align:center;font:500 12px 'IBM Plex Mono',monospace}

/* Portrait phones have room for navigation above the centered game. */
.screen-corners.portrait-chrome{position:fixed;inset:env(safe-area-inset-top) 0 auto;z-index:101;min-height:52px;padding:4px max(12px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left));background:linear-gradient(#05070dcc,transparent)}
.screen-corners.portrait-chrome button{min-height:44px;font-size:10px}
.screen-corners.portrait-chrome .grok-credit{font-size:9px;gap:7px}
.screen-corners.portrait-chrome .grok-credit img{width:57px;height:auto}

/* Keep Safari long-press/image selection out of the gameplay surfaces. */
.arcade,.mobile-touch-pad{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mobile-drive-panel,.mobile-touch-pad,.mobile-touch-extension{display:none}
/* The mobile shell blends into in-app browser chrome; the title keeps its own grid. */
@media(max-width:900px), (pointer:coarse){
 body{background:#050607}
 .mobile-atmosphere{display:none}
 .screen-corners.portrait-chrome{background:#050607}
}
@media(max-width:900px) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){
 body{padding-top:max(60px,calc(env(safe-area-inset-top) + 52px))}
 main{width:min(100%,calc((var(--browser-height,100svh) - 260px)*1.77778))}
 .arcade{--drive-height:90px}
 /* Keep the same footprint during title, reveal, play and results. */
 .arcade .console{height:var(--instrument-height);transition:opacity .3s}
 .arcade:has(.title-screen:not([hidden]):not(.leaving)) .console{height:var(--instrument-height);padding-top:3px;padding-bottom:3px;border-top-width:1px;opacity:0}
 .arcade:has(.title-screen:not([hidden])){background:#050607}
 .mobile-drive-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;height:var(--drive-height);padding:4px 16px 12px;background:#090d0e;overflow:hidden;transition:opacity .25s}
 .mobile-touch-pad{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 8px;border:1px solid #566064;border-bottom:2px solid #bd473d;border-radius:5px;background:linear-gradient(#272e31,#202628);box-shadow:0 3px 12px #e43e2017;color:#edf1ef;touch-action:none;font:600 clamp(12px,3.6vw,16px)/1.2 'IBM Plex Mono',monospace;letter-spacing:1.2px;cursor:pointer;transition:background .1s,box-shadow .1s,transform .1s}
 .mobile-touch-pad span{pointer-events:none}
 .mobile-touch-pad:active,.mobile-touch-pad.is-held{background:linear-gradient(#343637,#382923);border-bottom-color:#ff6d58;box-shadow:0 0 17px #f04d3540,inset 0 -3px 9px #fa57331f;transform:translateY(1px)}
 .mobile-touch-pad:disabled{opacity:.35;pointer-events:none}
 .mobile-drive-hint{text-align:center;color:#7d888a;font:400 9px/1 'IBM Plex Mono',monospace;letter-spacing:.8px;pointer-events:none}
 .arcade:has(.title-screen:not([hidden]):not(.leaving)) .mobile-drive-panel{visibility:hidden;opacity:0;pointer-events:none}
 .mobile-drive-panel:has(.result-controls)>:not(.result-controls){display:none}
 .mobile-drive-panel .result-controls{display:flex;gap:10px;align-items:center;height:100%;width:100%}
 .mobile-drive-panel .result-controls #start,.mobile-drive-panel .result-controls #result-submit{display:block;flex:1;min-width:0;min-height:52px;padding:12px 8px;border:0;border-radius:5px;background:#eeeae3;color:#192121;box-shadow:0 3px 0 #6b3932;font:600 clamp(10px,2.8vw,13px)/1.2 'IBM Plex Mono',monospace;letter-spacing:.6px;text-align:center}
 .mobile-drive-panel .result-controls #start:disabled{opacity:.6}
 .mobile-drive-panel .result-controls button:focus-visible{outline:2px solid #ff655c;outline-offset:3px}
 .console:has(#run-stats:not([hidden])) #run-stats{animation:result-arrival .25s ease-out both}
 .result-screen .title-logo{top:24%}
 .result-screen h1{top:60%}
 body:has(.mobile-touch-pad:not(:disabled)) .live-tip{visibility:hidden}
 .mobile-touch-extension{display:block;position:fixed;left:env(safe-area-inset-left);right:env(safe-area-inset-right);z-index:2;padding:0;border:0;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
 .mobile-touch-extension:disabled{visibility:hidden;pointer-events:none}
 .arcade.expanded .viewport,.arcade:fullscreen .viewport,.arcade.expanded .console,.arcade:fullscreen .console,.arcade.expanded .mobile-drive-panel,.arcade:fullscreen .mobile-drive-panel{width:min(100%,calc((var(--browser-height,100svh) - var(--instrument-height) - var(--drive-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.77778))}
 .arcade.expanded .mobile-drive-panel,.arcade:fullscreen .mobile-drive-panel{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.mobile-drive-panel,.mobile-touch-pad{transition:none}}

/* The lap result uses the same red accent as the Roadster identity. */
#run-stats #result-lap{color:#ff4b43}

/* Give the standings the remaining in-app-browser height, including during typing. */
@media(max-width:900px),(pointer:coarse){
 #leaderboard-dialog{height:min(680px,calc(var(--browser-height,100dvh) - 20px));padding:12px 14px}
 #leaderboard-dialog .board-content{height:100%;min-height:0}
 .board-heading{flex-shrink:0;margin-bottom:4px}
 #leaderboard-dialog .board-table-wrap{flex:1 1 auto;min-height:90px;max-height:none}
 #leaderboard-dialog #score-entry{flex-shrink:0;padding:8px 0 0;margin:8px 0 0}
 #leaderboard-dialog.score-entry-first #score-entry{margin:0 0 10px}
 #score-entry:not([hidden]){display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 6px}
 #score-entry label{font-size:10px;letter-spacing:0;margin:0}
 #leaderboard-run{font-size:10px;margin:0;text-align:right}
 .score-inputs{grid-column:1/-1}
 #player-name{padding:8px 10px}
 .board-pagination{padding:4px 6px;gap:6px;font-size:9px;flex-wrap:nowrap}
 .board-pagination div{gap:5px}
 .board-pagination button{font-size:10px;padding:4px 7px}
 .board-bottom{flex-shrink:0;padding-top:0;gap:8px}
}

/* Desktop utilities sit outside the tablet, but remain within its fullscreen root. */
@media(min-width:901px) and (pointer:fine){
 .arcade .console-right,.arcade:has(.title-screen:not([hidden])) .console-right{position:fixed;right:24px;bottom:24px;z-index:110;gap:4px;padding:0;border:0;opacity:1;transform:none;transition:none}
 .arcade .console-right button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;border-radius:4px;color:#7b8c8b}
 .arcade .console-right #inspect,.arcade .console-right #pause{display:none}
 .arcade .console-right button:hover{color:#edf3ef;background:#ffffff08}
 .arcade .console{padding-inline:8px}
}