/* Phone and tablet layouts, including browser chrome and display cut-outs. */
html{scroll-padding-top:20px}body{overflow-x:hidden}button,a,input{touch-action:manipulation}#garage>header{height:auto;min-height:78px;gap:12px;flex-wrap:wrap;padding-block:14px}#garage>header>span{margin-right:auto}.keyboard-note{margin:12px 6vw}#race{height:100dvh}#road{width:100%;height:100%}#overlay{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}#dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.touch-controls button{overscroll-behavior:none}.touch-layout .rush-hero{height:auto;min-height:0}.touch-layout .rush-hero .hero-copy{width:100%}.touch-layout #race .actions>button{min-width:44px;min-height:44px}
@media(min-width:651px) and (max-width:1279px){.studio-layout{grid-template-columns:170px minmax(0,1fr)}.driver-profile{align-self:start}.setup-preview{position:static;align-self:start}.setup-options{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px}.setup-options fieldset:first-child{grid-row:auto;grid-column:1/-1}#choices-driver{grid-template-columns:repeat(4,minmax(0,1fr))}#choices-driver .racer-portrait{aspect-ratio:1.4;background-size:400% auto;background-position:calc(var(--portrait)*100%/3) 26%}.setup-options fieldset:has(#choices-car){grid-row:span 3}#choices-car{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-stage{max-height:380px;aspect-ratio:1}.setup-preview{max-width:510px;width:100%;justify-self:center}}
@media(min-width:1280px){.studio-layout{grid-template-columns:190px minmax(280px,1fr) minmax(350px,1fr)}}
@media(max-width:650px){#garage>header{margin-inline:5vw;gap:8px}#garage>header>span{font-size:9px}#garage>header .story-link{font-size:9px;padding:10px}#garage>header .brand{font-size:13px}#garage>header .sound{min-height:44px}.racer-studio{margin-inline:5vw}.rush-hero{padding:28px 5vw}.rush-hero h1{font-size:clamp(44px,12vw,65px)}.studio-layout{display:flex;flex-direction:column}.driver-profile{grid-template-columns:90px 1fr}.driver-profile .racer-portrait{min-height:145px}.driver-profile p{font-size:12px;line-height:1.4}.driver-profile h3{font-size:25px}.setup-preview{order:2;position:static}.setup-options{display:flex;order:1;gap:18px}.preview-stage{height:auto;aspect-ratio:1}.choices button{min-height:48px}.colour-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.colour-choices button{display:flex;gap:9px;align-items:center;justify-content:center}.colour-choices i{margin:0}.colour-choices span{font-size:12px}#choices-car button>span:last-child{font-size:11px}.route-options{grid-template-columns:1fr}.control-guide{display:grid;grid-template-columns:1fr 1fr;gap:20px}.welcome-driver{gap:15px}.welcome-driver .racer-portrait{width:70px}#dialog .welcome-driver h3{font-size:25px}#dialog{padding:20px}.touch-layout .rush-hero{min-height:0}.maze-app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}.maze-app header{height:auto;min-height:58px;gap:10px;flex-wrap:wrap;padding:8px 0}.maze-app .keyboard-open{font-size:10px;padding:8px}.board-wrap{width:100%}.maze-page .controls{grid-template-columns:1fr}.maze-page .dpad{width:190px;justify-self:center}.maze-page .controls p{display:none}.maze-page .dpad button{min-height:54px}.maze-page #curtain{padding:14px}.maze-page .card p{font-size:12px;line-height:1.4}}
@media(min-width:700px) and (max-width:1400px){.touch-layout .touch-controls button{height:76px;min-width:76px}.touch-layout .touch-pedals button{width:94px}.touch-layout .touch-pedals [data-drive=throttle]{height:92px;width:112px}.touch-layout #race .mobile-hud{font-size:12px;height:40px}.touch-layout #race .instruments{width:140px;bottom:max(124px,calc(env(safe-area-inset-bottom) + 116px))}.touch-layout .touch-controls{bottom:max(20px,env(safe-area-inset-bottom))}.touch-layout .rear-view{top:64px}}
@media(max-height:450px){.touch-layout .touch-controls button{height:56px;min-width:56px}.touch-layout .touch-pedals button{width:70px}.touch-layout .touch-pedals [data-drive=throttle]{height:68px;width:90px}.touch-layout #race .instruments{width:110px;bottom:max(94px,calc(env(safe-area-inset-bottom) + 84px))}.touch-layout #race .mobile-hud{font-size:10px;height:34px}.touch-layout #race .mobile-hud #mobileGuidance{max-width:180px;overflow:hidden;text-overflow:ellipsis}.touch-layout .touch-controls{bottom:max(12px,env(safe-area-inset-bottom))}.touch-layout .rear-view{width:120px;top:56px}.touch-layout .rear-window{height:42px}}
/* The maze stays usable in both orientations; only the briefing scrolls. */
#curtain{overflow:auto;overscroll-behavior:contain;align-items:safe center}.card{max-height:100%;overflow:auto;padding-bottom:3px}.maze-app header button{min-height:44px}.maze-page .dpad button{min-height:44px}
@media(min-width:600px) and (max-width:1100px) and (min-height:601px){.maze-layout{grid-template-columns:1fr 1fr;gap:20px;align-items:start;min-height:0}.maze-layout .info{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.maze-layout .info>.eyebrow,.maze-layout h1,.maze-layout .intro,.maze-layout #mazeProfile,.maze-layout .change-driver{display:none}.maze-layout .stats{display:flex;gap:25px;margin:0;padding:0;border:0}.maze-layout #sound,.maze-layout #pause{width:auto;min-width:100px;margin:0}.maze-layout #status{margin:0;flex:1}.board-wrap{grid-column:1/-1;width:min(100%,calc((100dvh - 300px)*19/15));min-width:300px}.maze-layout .controls{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:30px}.maze-layout .dpad{width:190px;margin:0}.maze-layout .legend,.maze-layout .controls>.eyebrow{display:none}}
@media(max-height:600px) and (min-width:600px){.maze-page header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.maze-page #curtain{align-items:start}.maze-page .card{padding:4px}.maze-page .dpad{width:140px}.maze-page .dpad button{min-height:44px}.maze-page .controls p{display:none}.maze-page header .keyboard-open{min-height:36px;font-size:9px;padding:4px 10px}}
.maze-page #play,.maze-page #restart,.maze-page #pause,.maze-page #sound,.maze-page header .keyboard-open{min-height:44px}.maze-page .card a{min-height:44px;display:flex;align-items:center;justify-content:center}.maze-page .back{min-height:44px;display:flex;align-items:center}

/* Revision 25: aligned thumb controls, compact motion settings, consistent pedals. */
.touch-layout #race{--drive-button:clamp(54px,15dvh,76px);--drive-bottom:max(12px,env(safe-area-inset-bottom));--drive-gap:10px}
.touch-layout.drive-active #race .touch-controls{align-items:flex-end;bottom:var(--drive-bottom);gap:20px}
.touch-layout #race .touch-steering,.touch-layout #race .touch-pedals{align-items:center;gap:var(--drive-gap)}
.touch-layout #race .touch-controls [data-drive]{height:var(--drive-button);min-height:var(--drive-button);min-width:var(--drive-button);width:var(--drive-button);padding:8px;border-radius:14px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.touch-layout #race .touch-pedals [data-drive]{width:clamp(88px,13vw,122px);font-size:clamp(10px,1.5vw,13px);letter-spacing:.25px}
.touch-steering svg{width:27px;height:27px;fill:currentColor;pointer-events:none}
.touch-left{position:relative;pointer-events:none}.tilt-options{position:absolute;left:0;bottom:calc(100% + 27px);display:flex;gap:8px;pointer-events:auto;white-space:nowrap}
.touch-layout #race .tilt-options button{height:44px;min-width:90px;width:auto;font-size:11px;padding:8px 12px;border-radius:10px;letter-spacing:.4px;background:#101e2be8}
.touch-layout #race .tilt-options button[hidden]{display:none}
.touch-layout #race #tiltStatus{position:absolute;bottom:calc(100% + 7px);left:0;width:min(300px,45vw);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;text-shadow:0 1px 3px #000,0 0 4px #000;color:white;pointer-events:none}
.touch-layout.tilt-enabled #tiltToggle{border-color:#ffcc82;color:#ffcc82}
.touch-layout #race .instruments{bottom:calc(var(--drive-bottom) + var(--drive-button) + 14px);width:clamp(90px,26dvh,130px)}
@media(max-height:330px){.touch-layout #race .tilt-options{bottom:calc(100% + 8px)}.touch-layout #race #tiltStatus{display:none}.touch-layout #race .instruments{width:90px}}

.screen-install-hint{margin:12px 6vw;padding:12px 16px;background:#1d2b36;border:1px solid #52616b;border-radius:10px;font-size:13px;line-height:1.5}.screen-install-hint[hidden]{display:none}.screen-install-hint button{min-height:44px;margin-left:10px;padding:8px;color:#ffcd88;border:1px solid #ffcd8870;border-radius:7px;background:transparent;font-weight:700}
#screenHelp{max-width:460px;width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#17212b;color:#f2f1ed;border:1px solid #60717c;border-radius:16px;padding:24px;box-sizing:border-box}#screenHelp::backdrop{background:#030a12c9}#screenHelp h2{font-size:24px;line-height:1.15}#screenHelp p{font-size:15px;line-height:1.5}#screenHelp button{min-height:44px;width:100%;background:#f43c2f;color:white;border:0;border-radius:8px;font-weight:bold;padding:12px}