:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f8f7ff;color-scheme:dark;--gold:#ffdf8e;--navy:#12172d;--text:#f7f5ff}
*{box-sizing:border-box}body{margin:0;background:#0e1426;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffedba;outline-offset:4px}.hidden{display:none!important}
#gameShell{position:relative;width:100vw;height:100dvh;min-height:450px;background:linear-gradient(#727f9f,#28304b);overflow:hidden}#renderHost{position:absolute;inset:0}#renderHost canvas{display:block;width:100%;height:100%}#speedLines{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050b20a6 0%,transparent 34%,transparent 69%,#171c3360 100%)}
.header{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:26px clamp(20px,3vw,50px);pointer-events:none}.brand{display:flex;gap:11px;align-items:center;text-shadow:0 3px 14px #090b228c}.brandMark{display:grid;place-items:center;border-radius:10px;background:var(--gold);color:#29213f;font-size:32px;font-weight:900;width:43px;height:43px;box-shadow:0 5px 0 #9f7a49}.brand strong{display:block;font-size:26px;letter-spacing:-1.6px;line-height:1;font-weight:1000}.brand strong em{font-style:normal;color:var(--gold)}.brand small{display:block;font-size:9px;letter-spacing:1.65px;color:#e1deeb;margin-top:5px;font-weight:800}.brand small b{color:var(--gold)}.edition{padding:11px 14px;background:#151b34b9;border:1px solid #ffffff55;border-radius:7px;font-size:10px;letter-spacing:1.5px;font-weight:950;backdrop-filter:blur(9px)}.statusDot{display:inline-block;background:#a9facd;width:7px;height:7px;border-radius:100%;box-shadow:0 0 12px #8cf1b5;margin-right:6px}.editionDivider{color:#c3b2ea;margin:0 6px}
.screen{position:absolute;inset:0;z-index:8}.startScreen{display:flex;align-items:center;justify-content:space-between;padding:105px clamp(30px,7vw,130px) 65px;gap:35px;background:linear-gradient(90deg,#0b1024f5 0%,#111831df 39%,#17203d78 73%,#18203f25)}.content{max-width:650px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2.4px;font-weight:1000}.tinyBolt{border-radius:5px;border:1px solid #ffdf8eb0;padding:4px 7px;margin-right:6px}.startScreen h1,.finishPanel h2{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(90px,12vw,190px);font-style:italic;letter-spacing:-.055em;line-height:.76;margin:30px 0 29px;color:#f9f6ff;text-shadow:0 10px 0 #31324d,0 19px 35px #080c1aaa}.startScreen h1 em,.finishPanel h2 em{font-style:inherit;color:var(--gold)}.pill{display:inline-block;padding:9px 12px;background:#e6d9ff16;border:1px solid #d5c7ee7e;border-radius:6px;color:#ffe7ab;font-size:11px;font-weight:1000;letter-spacing:1.5px}.pill span{color:#aaa4c2;margin:0 9px}.content p{color:#d4d6e7;font-size:14px;max-width:550px;line-height:1.8;margin:20px 0 26px}.primaryButton{border:0;color:#242035;background:linear-gradient(120deg,#fff0bd,#ffc361);border-radius:7px;font-size:13px;font-weight:1000;letter-spacing:1.4px;padding:19px 23px;box-shadow:0 6px 0 #947345,0 14px 28px #ffc7652d;transition:transform .15s,box-shadow .15s}.primaryButton:hover{transform:translateY(3px);box-shadow:0 3px 0 #947345,0 9px 23px #ffc7653b}.primaryButton span{font-size:22px;margin-left:22px}.controls{display:flex;gap:13px;flex-wrap:wrap;margin-top:25px;color:#b9b5cb;font-size:10px;font-weight:850;align-items:center}.controls>span{display:inline-flex;align-items:center;gap:5px}kbd{font:800 10px/1 ui-monospace,monospace;border:1px solid #a9a5bbad;padding:6px 7px;border-radius:5px;color:#f3e6c8;background:#ffffff14}
.briefing{width:min(300px,26vw);align-self:center;border:1px solid #d4cced5f;border-radius:11px;padding:22px 19px;background:#0a1028a8;backdrop-filter:blur(12px);box-shadow:0 12px 30px #0005}.briefingHead{display:flex;justify-content:space-between;font-size:10px;color:var(--gold);font-weight:950;letter-spacing:1.5px;border-bottom:1px solid #aaa2b15e;padding-bottom:16px}.briefingHead span{color:#a4a0bb}.briefingRow{display:flex;gap:14px;align-items:center;border-bottom:1px solid #a1a1bf30;padding:18px 0}.briefingRow b{font:italic 29px Impact,sans-serif;color:#d0c4ed}.briefingRow span{font-size:9px;line-height:1.9;color:#c7c4dc;letter-spacing:1px}.briefingRow strong{font-size:12px;color:#fff4d1}.briefing p{font-size:11px;line-height:1.7;color:#aeaac8;margin:18px 0 0}
.hud{position:absolute;inset:0;pointer-events:none;z-index:5}.hudTop{position:absolute;left:clamp(20px,3vw,50px);right:clamp(20px,3vw,50px);top:101px;display:flex;gap:15px;justify-content:space-between}.raceClock,.routeInfo{border:1px solid #dad9f45c;background:#111a37c7;backdrop-filter:blur(10px);padding:13px 17px;border-radius:9px;box-shadow:0 12px 22px #10102729}.raceClock{display:flex;flex-direction:column;min-width:160px}.raceClock small,.routeInfo small,.finalTime small{font-size:9px;letter-spacing:2px;font-weight:1000;color:#d3cbe5}.raceClock strong{font-size:32px;letter-spacing:-1.5px;line-height:1.2;font-variant-numeric:tabular-nums}.raceClock span{color:var(--gold);font-size:9px;letter-spacing:1.1px;font-weight:900}.routeInfo{width:min(320px,38vw)}.routeInfo strong{display:block;margin:4px 0;font:italic 31px Impact,sans-serif;letter-spacing:.4px;color:var(--gold)}.routeInfo strong span{font:850 10px system-ui,sans-serif;letter-spacing:1px;color:#e4dcf3;margin-left:5px}.routeTrack{height:5px;border-radius:9px;background:#414860;overflow:hidden;margin-top:8px}.routeTrack>div{width:0;height:100%;background:linear-gradient(90deg,#8de0e8,var(--gold))}.eventBanner{position:absolute;top:33%;left:50%;transform:translateX(-50%) rotate(-5deg);font:italic 110px Impact,sans-serif;color:var(--gold);text-shadow:0 7px 0 #373b55,0 0 45px #ffdfa1a8}.hudBottom{position:absolute;bottom:31px;left:clamp(20px,3vw,50px);right:clamp(20px,3vw,50px);display:flex;align-items:end;justify-content:space-between;gap:18px}.speedPanel{border-left:4px solid var(--gold);padding:8px 0 7px 19px;text-shadow:0 2px 16px #030819}.speedPanel>div{display:flex;align-items:baseline;gap:8px}.speedPanel strong{font:italic 76px/.9 Impact,sans-serif;letter-spacing:-3px}.speedPanel small{font-size:12px;font-weight:950;letter-spacing:1.4px}.speedPanel>span{font-size:10px;color:#b5f8d5;font-weight:950;letter-spacing:1.5px}.hintPanel{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:end;color:#e5deed;font-size:10px;letter-spacing:.6px;font-weight:900;background:#111a37ad;border:1px solid #ffffff39;border-radius:9px;padding:13px 15px;backdrop-filter:blur(10px)}.hintPanel>span{display:flex;gap:5px;align-items:center}.hintPanel .locked{color:#a9a7bb;font-size:9px}.hudRestart{position:absolute;top:33px;right:clamp(20px,3vw,50px);padding:9px 12px;pointer-events:auto;border:1px solid #e6ddff72;border-radius:7px;background:#19213eb0;color:#e8dff7;font-size:10px;letter-spacing:1.4px;font-weight:1000;z-index:12}
.finishScreen{display:grid;place-items:center;text-align:center;background:#0b1027df;backdrop-filter:blur(10px)}.finishPanel{padding:25px;max-width:600px}.finishPanel h2{font-size:clamp(100px,14vw,180px)}.finishPanel>p{color:#d6d3e5;font-size:14px;margin-bottom:25px}.finalTime{display:flex;flex-direction:column;padding:18px 35px;background:#191e36;border:1px solid #d4bc86a2;border-radius:9px;width:max-content;margin:0 auto 26px;gap:5px}.finalTime strong{font-size:38px;font-variant-numeric:tabular-nums;color:var(--gold)}.loading{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:#0d1329;color:var(--gold);font-weight:1000;letter-spacing:2px;font-size:13px;text-align:center;padding:30px}
.touchControls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:0;right:0;padding:0 15px;display:none;justify-content:space-between;z-index:7;pointer-events:none}.touchControls>div{display:flex;gap:8px;pointer-events:auto}.touchControls button{touch-action:none;min-width:68px;height:64px;background:#121a34c9;border:2px solid #d1c5e9a4;border-radius:10px;color:#f8f1ff;font-size:23px;font-weight:1000;backdrop-filter:blur(10px)}.touchControls button[data-hold="brake"]{font-size:12px}.touchControls .gas{background:#ffdc81dc;border-color:#fff3cf;color:#1b1a31;font-size:13px}
@media(max-width:950px){.briefing{display:none}.content{max-width:650px}.startScreen{justify-content:flex-start}.hintPanel .locked{display:none}}
@media(max-width:680px){.header{padding:14px}.brandMark{width:35px;height:35px;font-size:28px}.brand strong{font-size:21px}.brand small{font-size:7px;letter-spacing:.8px}.edition{font-size:8px;padding:8px}.startScreen{padding:100px 24px 55px;background:linear-gradient(0deg,#080e25f6 0%,#11152fd6 54%,#181e3874)}.startScreen h1{font-size:clamp(85px,21vw,135px)}.content p{font-size:12px;max-width:460px}.eyebrow{font-size:9px;letter-spacing:1px}.controls{font-size:9px}.hudTop{top:80px;left:12px;right:12px}.raceClock,.routeInfo{padding:9px 11px}.raceClock{min-width:115px}.raceClock strong{font-size:22px}.routeInfo{width:170px}.routeInfo strong{font-size:22px}.routeInfo strong span{font-size:7px}.hudBottom{bottom:90px;left:13px;right:13px}.speedPanel strong{font-size:47px}.hintPanel{display:none}.touchControls{display:flex}.hudRestart{right:12px;top:52px;font-size:8px}.eventBanner{font-size:70px}.finishPanel h2{font-size:100px}}
.movementHud{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;gap:9px;align-items:stretch;width:min(500px,52vw)}.chargePanel,.driftPanel{flex:1;background:#121a34cf;border:1px solid #cec6e158;border-radius:9px;padding:12px 14px;backdrop-filter:blur(12px)}.chargeLabel{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:9px;font-weight:950;letter-spacing:1.05px}.chargeLabel strong{color:#fff0b5}.chargeLabel span{font-size:8px;color:#b8b9d2}.boostSegments{display:flex;gap:7px;margin-top:11px}.boostSegments span{height:9px;flex:1;display:block;border-radius:12px;background:#292d4e;box-shadow:inset 0 0 0 1px #ccc3e02c;transition:background .14s}.boostSegments span.ready{background:linear-gradient(90deg,#ffe4a0,#ffb657);box-shadow:0 0 14px #f4c56a99}.boostSegments span.charging{background:linear-gradient(90deg,#ffe4a0 var(--fill),#34334e var(--fill))}.heatTrack{height:9px;border-radius:10px;background:#34334e;margin-top:11px;overflow:hidden}.heatTrack>div{width:0;height:100%;background:linear-gradient(90deg,#68e5fd,#ffd58d,#f586df);box-shadow:0 0 11px #8af4fa;transition:width .06s}.driftPanel.primed{border-color:#94f9f6;box-shadow:0 0 25px #72daec4f}.driftPanel.super{border-color:#ffe49a;box-shadow:0 0 28px #f9cb6669}.driftPanel.ultra{border-color:#f7a4f2;box-shadow:0 0 30px #f497ec7a}.hudBottom{pointer-events:none}.hintPanel button{pointer-events:auto;background:#3b3155;border:1px solid #c8b9e770;color:#eae0ff;border-radius:5px;padding:7px 8px;font-size:8px;letter-spacing:.6px;font-weight:950}.hintPanel button.active{color:#231933;background:#ffe19d;border-color:#fbe6bc}#speedLines{transition:opacity .09s}#gameShell.boosting #speedLines{box-shadow:inset 0 0 100px #fce8a553, inset 0 -80px 100px #74edff2c}#gameShell.boosting .speedPanel strong{color:#ffe9a4;text-shadow:0 0 28px #ffc45aa6}.eventBanner{font-size:clamp(50px,8vw,110px);white-space:nowrap}.finalTime span{color:#b6ffdc;font-size:11px;font-weight:1000;letter-spacing:1px}#bestTime{color:#e0d2ed}
.touchControls .driftTouch{font-size:11px;border-color:#8ef2fd;color:#b4f6fd}.touchControls .boostTouch{background:#ffe2a6e0;border-color:#fff2d0;color:#171b32;font-size:30px}.touchControls button:active{transform:scale(.96);filter:brightness(1.2)}
.headerTools{display:flex;gap:7px;align-items:center;pointer-events:auto}.soundToggle{color:#f5e6c7;border:1px solid #d5c5e563;background:#171e39b9;font-size:9px;font-weight:900;letter-spacing:.7px;border-radius:7px;padding:11px 12px;backdrop-filter:blur(9px)}.soundToggle:hover{background:#2e3158}
@media(max-width:1120px){.movementHud{bottom:120px;width:min(500px,70vw)}.hintPanel{max-width:340px}.hintPanel>span{display:none}}
@media(max-width:680px){.movementHud{left:12px;right:12px;bottom:158px;width:auto;transform:none}.chargePanel,.driftPanel{padding:8px}.chargeLabel{font-size:8px}.chargeLabel span{font-size:7px}.boostSegments,.heatTrack{margin-top:7px}.hudBottom{bottom:85px}.touchControls button{min-width:53px;height:58px}.touchControls>div{gap:5px}.touchControls .driftTouch{font-size:10px}.touchControls .boostTouch{font-size:26px}.soundToggle{font-size:8px;padding:8px}.headerTools .edition{display:none}}
.movementHud{width:min(700px,62vw)}
.momentumPanel{flex:1.22;background:#101d34e8;border:1px solid #86dfea88;border-radius:9px;padding:12px 14px;backdrop-filter:blur(12px);box-shadow:inset 0 0 20px #4dd7ed14}
.momentumPanel .chargeLabel strong{color:#b5f6ff}
.momentumPanel .chargeLabel span{font-size:12px;color:#fff0ac}
.momentumPanel .heatTrack{height:12px;background:#1b3449}
.momentumPanel #momentumFill{height:100%;background:linear-gradient(90deg,#4fbcf4,#7cfff2,#fff2a1);box-shadow:0 0 20px #78eefa9c;transition:width .08s}
.momentumPanel small{display:block;margin-top:5px;color:#a4f8ed;font-size:8px;font-weight:950;letter-spacing:1.3px}
#gameShell.flowing .momentumPanel{box-shadow:0 0 26px #73e9f94d,inset 0 0 25px #69ffed12}
#gameShell.flowing .speedPanel strong{text-shadow:0 0 28px #7ceaf9aa}
#gameShell.flowing #speedLines{background:radial-gradient(ellipse at center,transparent 28%,#98e7f80d 58%,#98e7f83b 100%),linear-gradient(0deg,#050b20a6 0%,transparent 34%,transparent 69%,#171c3360 100%)}
@media(max-width:1120px){.movementHud{width:min(700px,85vw);bottom:120px}}
@media(max-width:680px){.movementHud{width:auto;bottom:158px;gap:5px}.momentumPanel,.chargePanel,.driftPanel{padding:7px 6px;min-width:0}.momentumPanel .chargeLabel strong{font-size:8px}.momentumPanel .chargeLabel span{font-size:10px}.momentumPanel small{font-size:7px;letter-spacing:0}.chargeLabel{gap:4px}.chargeLabel span{font-size:6px}}
.movementHud{width:min(370px,38vw)}
.movementHud .driftPanel{padding:13px 17px}
@media(max-width:1120px){.movementHud{width:min(370px,55vw)}}
@media(max-width:680px){.movementHud{width:calc(100% - 26px);left:13px;right:13px;bottom:158px;transform:none}}
.tuningToggle{position:absolute;right:22px;top:91px;z-index:12;background:#151d35d9;border:1px solid #e4d29688;color:#ffdf9b;border-radius:7px;padding:10px 13px;font-size:10px;font-weight:900;letter-spacing:.9px;backdrop-filter:blur(9px)}
.tuningPanel{position:absolute;right:22px;top:132px;bottom:170px;z-index:12;width:min(325px,calc(100vw - 30px));overflow:auto;background:#10182af2;border:1px solid #d5c5e576;border-radius:10px;padding:17px;box-shadow:0 10px 30px #080c20c2;backdrop-filter:blur(10px)}
.tuningHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}.tuningHeader strong{font-size:12px;letter-spacing:1.5px;color:#ffe2a6}.tuningHeader button{font-size:9px;background:#253654;border:1px solid #7185a9;color:#fff1cf;border-radius:5px;padding:7px}.tuningPanel p{font-size:11px;color:#b6c8df;line-height:1.55;margin:12px 0 16px}.tuningPanel label{display:block;font-size:11px;color:#f5f0ff;font-weight:700;margin-bottom:15px}.tuningPanel output{float:right;color:#ffd88e;font-variant-numeric:tabular-nums}.tuningPanel input{display:block;width:100%;margin-top:7px;accent-color:#ffcf7b}
@media(max-width:680px){.tuningToggle{right:12px;top:77px;padding:8px;font-size:9px}.tuningPanel{right:12px;top:111px;bottom:180px}}
.sectorReadouts{padding-top:8px;color:#9ee4e8;font:850 9px/1.4 ui-monospace,monospace;white-space:nowrap;letter-spacing:.3px;border-top:1px solid #8fa3b249;margin-top:5px}
.finishLaps{color:#e5d8ad;font:900 12px/1.9 ui-monospace,monospace;max-width:600px;margin:-3px auto 19px;white-space:normal}
#totalTime{color:#d5deee}
@media(max-width:680px){.sectorReadouts{font-size:7px;letter-spacing:-.2px}.raceClock{min-width:140px}.routeInfo{width:155px}.routeInfo small{font-size:7px;letter-spacing:1px}}
.splitFeedback{margin-top:6px;color:#d3e3fa;font:900 9px/1.4 ui-monospace,monospace;letter-spacing:.5px}
.splitFeedback.ahead{color:#8dffc7}.splitFeedback.behind{color:#ffd09b}
.positionReadout{color:#ffe59e;font:900 12px/1.4 system-ui,sans-serif;letter-spacing:1px;margin-top:9px}
.cornerReadout{color:#adecf5;font:900 9px/1.45 system-ui,sans-serif;letter-spacing:1px;margin-top:4px}
@media(max-width:680px){.positionReadout{font-size:10px}.cornerReadout,.splitFeedback{font-size:7px}}
/* Race UI: glanceable position/lap at left, actual course map at right. */
.hudTop{top:94px;align-items:flex-start}
.raceClock{min-width:210px;max-width:245px;gap:3px}
.raceClock .positionMain{font:italic 58px/.93 Impact,sans-serif;letter-spacing:-1.5px;color:#ffdc8b}
.raceClock .positionMain span{font:800 15px system-ui,sans-serif;color:#cdd9eb;letter-spacing:0}
.raceClock #lapCounter{color:#fff4cb;font-size:13px;letter-spacing:1.4px;margin-top:4px}
.raceClockDetails{display:flex;flex-direction:column;gap:3px;border-top:1px solid #9bacc345;padding-top:8px;margin-top:7px}
.raceClockDetails #time{font:900 18px/1 ui-monospace,monospace;letter-spacing:-.5px;color:#e7e8f5}
.raceClockDetails #totalTime,.raceClockDetails #bestTime,.raceClockDetails #sectorReadouts{font-size:8px;opacity:.85}
.raceClockDetails #sectorReadouts{border:0;padding:0;margin:0}
.routeInfo{width:260px;padding:12px 13px}
#minimap{display:block;width:100%;height:auto;aspect-ratio:260/204;margin:5px auto 0;background:#121e34a8;border-radius:8px}
.minimapLegend{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:5px 0 9px;font-size:8px;font-weight:900;letter-spacing:.4px;color:#e3e7f0}
.minimapLegend span{display:flex;align-items:center;gap:4px}
.mapDot{width:7px;height:7px;display:inline-block;border-radius:100%}.playerDot{background:#ffd578}.seaDot{background:#55d9ff}.hadesDot{background:#d48bff}
.routeInfo #distance{font-size:20px;margin:0}.routeInfo #distance span{font-size:8px}
.routeInfo #cornerReadout{font-size:9px}.positionReadout{display:none}
.speedPanel #drivingDebug[hidden]{display:none!important}
.speedPanel strong{transition:color .15s,text-shadow .15s}
.atSpeed .speedPanel strong{color:#ffe8ac;text-shadow:0 0 25px #ffda7a70}
/* Only peripheral, speed-responsive streaks: the racing line remains clear. */
#speedLines:after{content:"";position:absolute;inset:0;opacity:var(--speed-intensity,0);pointer-events:none;background:
 repeating-linear-gradient(108deg,transparent 0 34px,#b2e7ff27 35px,transparent 36px 77px) left/18% 100% no-repeat,
 repeating-linear-gradient(72deg,transparent 0 34px,#b2e7ff27 35px,transparent 36px 77px) right/18% 100% no-repeat;
 mask-image:linear-gradient(to right,#000 0%,transparent 24%,transparent 76%,#000 100%);animation:speedStream .42s linear infinite}
@keyframes speedStream{from{background-position:left 0 top -75px,right 0 top -75px}to{background-position:left 0 top 75px,right 0 top 75px}}
@media(max-width:850px){.hudTop{top:79px;left:12px;right:12px}.raceClock{min-width:132px;padding:9px;max-width:165px}.raceClock .positionMain{font-size:42px}.routeInfo{width:180px;padding:9px}.minimapLegend{font-size:6px}.raceClockDetails #bestTime,.raceClockDetails #sectorReadouts{display:none}.routeInfo #distance{font-size:17px}}
@media(max-width:520px){.routeInfo{width:148px}.raceClock{min-width:123px;max-width:138px}.raceClock .positionMain{font-size:39px}.minimapLegend{flex-wrap:wrap;justify-content:start}.routeInfo #distance{display:none}.routeInfo .routeTrack{margin-top:6px}.routeInfo #cornerReadout{font-size:7px}.raceClock .splitFeedback{font-size:7px}}
.positionMain.rankFlash{color:#b4fff3;text-shadow:0 0 25px #6cfde0a1}
@media(max-height:620px){.hudTop{top:66px}.raceClockDetails{display:none}.routeInfo #minimap{max-width:128px}.routeInfo #cornerReadout{display:none}.routeInfo .minimapLegend{margin:4px 0}.movementHud{bottom:90px}.hudBottom{bottom:19px}.tuningToggle{top:57px}.tuningPanel{top:95px}}
@media(max-width:680px) and (max-height:620px){.hudTop{top:58px}.routeInfo #minimap{max-width:98px}.movementHud{bottom:87px}.hudBottom{bottom:70px}.touchControls{bottom:7px}}
/* Layout fix: the tune button used to sit directly over the live minimap. */
.headerTools .tuningToggle{position:static;right:auto;top:auto;z-index:auto;flex:0 0 auto;padding:10px 11px;pointer-events:auto;white-space:nowrap}
.tuningPanel{pointer-events:auto}
.headerTools{gap:8px;justify-content:flex-end}
.headerTools .soundToggle{white-space:nowrap}
/* Race announcements must never stretch beyond the screen edge. */
.eventBanner{max-width:calc(100vw - 30px);overflow:hidden;text-overflow:ellipsis;font-size:clamp(25px,6vw,72px);text-align:center}
@media(max-width:920px){.header{padding:14px 16px}.headerTools .edition{display:none}.headerTools .tuningToggle{font-size:8px;padding:8px}.headerTools .soundToggle{font-size:8px;padding:8px}}
@media(max-width:520px){.header{align-items:flex-start;padding:11px}.brand{gap:6px}.brandMark{width:30px;height:30px;font-size:24px}.brand strong{font-size:18px}.brand small{font-size:6px}.headerTools{gap:5px}.headerTools .tuningToggle,.headerTools .soundToggle{padding:7px 6px;font-size:7px}.hudTop{top:65px}.raceClock .splitFeedback{max-width:100%;white-space:normal;overflow-wrap:break-word}.routeInfo .minimapLegend{font-size:6px}}
@media(max-height:620px){.startScreen{padding-top:67px;padding-bottom:12px;align-items:center}.startScreen h1{font-size:clamp(60px,11vh,93px);margin:14px 0}.startScreen .content p{line-height:1.35;margin:8px 0 12px}.startScreen .primaryButton{padding:12px 15px}.startScreen .controls{margin-top:11px}.briefing{display:none}}
@media(max-width:520px) and (max-height:620px){.startScreen{padding:65px 16px 8px}.startScreen .controls{gap:6px}.startScreen .controls>span{font-size:8px}.startScreen h1{font-size:clamp(58px,15vh,82px)}}
/* Corrective HUD pass: separate gameplay zones, no bottom-row competition. */
.headerTools #autoButton{background:#202d4a;color:#ffe6ad;border:1px solid #d1b97b88;border-radius:7px;padding:10px;font-size:9px;font-weight:900;letter-spacing:.5px;pointer-events:auto;white-space:nowrap}
.headerTools #autoButton.active{color:#16243a;background:#f8d58b}
.hudBottom{left:clamp(18px,3vw,50px);right:auto;bottom:25px}
.hintPanel{display:none!important}
.movementHud{left:50%;bottom:24px;width:min(330px,29vw);transform:translateX(-50%)}
.movementHud .driftPanel{padding:12px 15px;min-width:0}
.raceClock{max-width:202px;min-width:185px}
.raceClock .positionMain{font-size:52px}
.routeInfo{width:228px}
.headerTools .edition{font-size:9px}
#speedFx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:1}
#speedLines:after{display:none!important}
@media(max-width:1100px){.headerTools .edition{display:none}.movementHud{width:min(280px,31vw)}.raceClock{max-width:178px;min-width:145px}.routeInfo{width:190px}}
@media(max-width:680px){.headerTools #autoButton{font-size:7px;padding:7px 5px}.hudBottom{bottom:79px;left:13px}.movementHud{bottom:143px;width:calc(100% - 24px);left:12px;transform:none}.raceClock{max-width:140px;min-width:122px}.routeInfo{width:142px}.raceClock .positionMain{font-size:40px}}
@media(max-width:680px) and (max-height:620px){.hudBottom{bottom:66px}.movementHud{bottom:125px;width:calc(100% - 24px)}.movementHud .driftPanel{padding:7px 11px}.routeInfo{width:127px}}
@media(max-height:620px) and (min-width:681px){.movementHud{bottom:15px}.hudBottom{bottom:16px}}

/* HUD correction: never ellipsize or cut off mid-race announcements. */
.eventBanner{width:min(880px,calc(100vw - 32px));max-width:calc(100vw - 32px);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;line-height:1.08;font-size:clamp(24px,5vw,70px);text-align:center;pointer-events:none}
/* Eliminate the decorative rectangle occupying the upper-right racing view. */
.headerTools .edition{display:none!important}
.headerTools{flex-wrap:wrap;max-width:min(62vw,520px)}
@media(max-width:620px){.eventBanner{font-size:clamp(22px,6.5vw,42px)}.headerTools{max-width:65vw}}

/* Hidden opt-in audio lab: no collision with normal race HUD. */
.audioPanel{position:absolute;z-index:50;top:78px;right:18px;width:min(370px,calc(100vw - 36px));max-height:calc(100dvh - 94px);overflow-y:auto;border:1px solid #d8c08a99;border-radius:12px;padding:15px;background:#131b30f5;box-shadow:0 18px 50px #0009;color:#f8f4e9;pointer-events:auto;font-size:12px}
.audioLabTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.audioLabTop strong{font-weight:900;letter-spacing:1px;color:#ffe0a0}
.audioPanel p{line-height:1.5;color:#c4cce0;margin:8px 0 12px}
.audioPanel button,.audioPanel select{background:#26324e;border:1px solid #7385ac80;color:#fff;border-radius:7px;padding:8px;font-weight:700}
.audioPanel button:hover,.audioPanel button:focus-visible{background:#385272}
.audioPanel .audioPreviews{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 14px}
.audioPanel .audioPreviews button{font-size:11px;text-align:left}
.audioPanel .audioLevels{display:grid;gap:9px}
.audioPanel .audioLevels label{display:grid;grid-template-columns:1fr 36px;gap:4px;align-items:center}
.audioPanel .audioLevels input{grid-column:1/3;width:100%;accent-color:#ffcc71}
.audioPanel output{text-align:right;color:#ffdf97;font-variant-numeric:tabular-nums}
.audioMode{display:flex;align-items:center;gap:9px}.audioMode select{flex:1;min-width:0}
.audioPanel small{display:block;margin-top:9px;color:#9dabc4;line-height:1.5}
#audioToggle{pointer-events:auto;position:static}
@media(max-height:640px){.audioPanel{top:52px;max-height:calc(100dvh - 64px)}}

.audioPanel .audioTuning{margin:14px 0 10px;padding-top:10px;border-top:1px solid #ffffff26;display:grid;gap:9px}.audioTuning label{display:grid;grid-template-columns:1fr 44px;gap:3px;align-items:center}.audioTuning input{grid-column:1/3;width:100%;accent-color:#ffcc71}.audioTuning output{color:#ffdc96;text-align:right}.audioStressReadout{display:flex;justify-content:space-between;background:#202b43;padding:8px;border-radius:6px}.audioStressReadout strong{color:#ffe3ac}