:root{font-family:Arial,Helvetica,sans-serif;color:#f2f4e9;background:#172c32;font-synthesis:none;--lime:#d9f568;--ink:#11292e;--muted:#b1c5c4;--line:#b9d9d32d}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,a,select,input,summary{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a,summary,select{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}button:disabled{opacity:.5}button[hidden],[hidden]{display:none!important}#race-world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.race-vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#091d28b0,transparent 75%),linear-gradient(0deg,#091c2477,transparent 35%)}
#race-loading{position:fixed;inset:0;z-index:30;display:grid;place-content:center;text-align:center;font-weight:900;font-size:38px;letter-spacing:-2px;background:#122d33}#race-loading span{font-size:10px;letter-spacing:3px;margin-top:20px;color:var(--lime)}
#race-header{position:absolute;top:0;left:0;width:100%;padding:30px max(38px,env(safe-area-inset-right)) 0 max(38px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;z-index:2}.brand{font-size:25px;font-weight:900;letter-spacing:-1.4px;white-space:nowrap}.brand>span{color:var(--lime);padding:0 4px}.brand small{display:block;font-size:8px;letter-spacing:3px;font-weight:400;margin-top:4px}.trial-link{font-size:12px;border-bottom:1px solid #c6d7d474;padding-bottom:6px}
#race-menu{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 390px;align-content:center;align-items:center;gap:8vw;padding:125px 6vw 80px;max-width:1600px;margin:auto}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--lime);display:flex;gap:10px;align-items:center}.eyebrow i{height:6px;width:6px;background:var(--lime);border-radius:50%}.race-intro h1{font-size:clamp(48px,6.7vw,105px);font-weight:900;line-height:.95;letter-spacing:-.065em;margin:24px 0}.race-intro h1 em{color:var(--lime);font-style:normal}.race-intro p{color:#d1ded9;font-size:16px;line-height:1.7}.course-tags{display:flex;flex-wrap:wrap;gap:15px;margin-top:34px;font-size:9px;letter-spacing:1px}.course-tags span{border-left:2px solid var(--lime);padding-left:9px}
.race-setup{background:#0c252ee8;border:1px solid var(--line);padding:25px;box-shadow:0 16px 80px #0003;backdrop-filter:blur(12px)}.setup-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:var(--muted);margin-bottom:17px}.setup-heading span:last-child{color:#6c8e94}.vehicle-choices{display:grid;gap:8px}.vehicle-choice{width:100%;padding:13px 11px;display:flex;align-items:center;gap:13px;background:#7fabb30c;border:1px solid var(--line);text-align:left}.vehicle-choice[aria-pressed=true]{border-color:var(--lime);background:#d9f5680d}.vehicle-choice>span:nth-child(2){flex:1}.vehicle-choice strong{font-size:20px;display:block;letter-spacing:-.5px}.vehicle-choice small{font-size:11px;color:var(--muted);display:block;margin-top:4px}.vehicle-choice>b{font-size:10px;color:#809ca1}.car-swatch{width:48px;height:34px;display:grid;place-content:center;font-size:32px;font-weight:900;transform:skew(-12deg);background:#cf5449}.car-swatch.chrono{background:#b8c6c1;color:#24373b}.race-options{display:flex;align-items:center;gap:7px;margin:19px 0;font-size:9px;color:var(--muted);letter-spacing:.5px}.race-options select,.setting-row select{background:#1d3b43;border:1px solid #6b929555;border-radius:2px;color:#f0f4ea;padding:8px 5px;font-size:12px}.race-options>span{margin-left:auto;font-size:9px;text-align:right;line-height:1.5;max-width:120px;color:var(--lime)}.primary{width:100%;background:var(--lime);color:var(--ink);font-size:13px;letter-spacing:1px;font-weight:800;padding:19px 22px;text-align:left;display:flex;justify-content:space-between;align-items:center}.primary span{font-size:24px;line-height:1}.primary:hover{background:#e8ff92}.control-lesson{font-size:10px;text-align:center;color:var(--muted);line-height:1.8;margin:15px 0 0}kbd{font:inherit;font-size:9px;border:1px solid #8aadaa6b;padding:2px 3px;border-radius:2px;margin-right:3px}.touch-lesson{display:none}.race-settings{font-size:11px;margin-top:15px;border-top:1px solid var(--line);padding-top:13px;color:var(--muted)}.race-settings summary{list-style-position:inside}.race-settings p{line-height:1.6}.setting-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.setting-row label{display:flex;gap:5px;align-items:center}.setting-row input{accent-color:var(--lime)}.race-menu-footer{position:absolute;bottom:28px;left:6vw;font-size:8px;letter-spacing:1.5px;color:var(--muted)}
#race-hud{position:fixed;inset:0;pointer-events:none;padding:max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));font-variant-numeric:tabular-nums;text-shadow:0 2px 10px #0007}.hud-top{display:flex;gap:24px;align-items:center;background:linear-gradient(#102a33b8,#102a3300);margin:-20px -28px;padding:20px 28px 32px}.position>span,.race-timing>span{display:block;font-size:9px;letter-spacing:1.5px;color:#d1dfd9}.position>strong{font-size:49px;line-height:1.1;letter-spacing:-2px}.position small{font-size:20px;color:#b4c8c7;font-weight:400;letter-spacing:-1px}.route-status{width:min(320px,35vw);font-size:9px;letter-spacing:1px}.route-status>span{color:var(--lime)}.route-status>b{display:block;font-size:13px;letter-spacing:0;margin:7px 0 11px}.progress-track{background:#d5ece23d;height:3px}.progress-track>i{display:block;height:100%;width:0;background:var(--lime)}.race-timing{margin-left:auto;text-align:right}.race-timing b{font-size:24px;font-weight:400;line-height:1.5}#race-pause{pointer-events:auto;align-self:flex-start;border:1px solid #d2efdf65;background:#102a3370;width:44px;height:44px;font-size:17px;border-radius:50%}.turn-cue{display:flex;align-items:center;gap:12px;margin-top:20px;max-width:260px}.turn-cue>b{font-size:36px;color:var(--lime);line-height:1}.turn-cue strong{font-size:13px;letter-spacing:.8px;display:block}.turn-cue span{display:block;font-size:10px;color:#d4e5df;margin-top:5px}.drive-instruments{position:absolute;right:max(30px,env(safe-area-inset-right));bottom:45px;display:flex;align-items:center;gap:20px}.race-speed>strong{display:block;font-size:70px;line-height:.9;font-weight:400;letter-spacing:-4px;font-style:italic}.race-speed>span{display:block;font-size:8px;letter-spacing:2px;text-align:right;margin-top:8px}.nitro-instrument{width:180px}.nitro-instrument>div:first-child{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-bottom:7px}.nitro-instrument b{color:var(--lime)}.nitro-track{height:7px;background:#0a212acc;border:1px solid #b1d3c942}.nitro-track>i{display:block;width:60%;height:100%;background:var(--lime)}.nitro-instrument>small{display:block;font-size:10px;color:#d2e4d9;margin-top:8px}.race-key-help{position:absolute;left:28px;bottom:27px;font-size:9px;letter-spacing:.5px;color:#d2e1dc}.race-key-help span{margin-left:22px}#race-countdown{position:absolute;inset:0;display:grid;place-content:center;font-size:clamp(100px,18vw,210px);font-weight:900;font-style:italic;color:var(--lime);text-shadow:0 10px 55px #0006;letter-spacing:-8px}#race-notice{position:absolute;top:25%;left:20%;right:20%;text-align:center;font-size:15px;font-weight:800;letter-spacing:1px;color:var(--lime)}
.race-touch{display:none;position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));justify-content:space-between;align-items:flex-end;pointer-events:none}.race-touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #e3f4e78c;background:#132f3bbd;backdrop-filter:blur(5px);border-radius:17px;width:66px;height:66px;display:flex;align-items:center;justify-content:center;font-size:43px}.touch-steering,.touch-actions{display:flex;gap:9px}.touch-actions button{flex-direction:column;gap:3px;font-size:21px;width:69px;height:69px}.touch-actions span{font-size:9px;letter-spacing:.7px}.touch-actions [data-control=nitro]{background:#d9f568dd;color:var(--ink);border-color:var(--lime)}.race-touch button.held{transform:scale(.94);border-color:#fff;box-shadow:0 0 20px #d9f56850;background:#49606ccc}.touch-actions [data-control=nitro].held{background:#f3ffc7}
dialog.panel,.panel{background:#102a33f5;color:#f1f4e8;padding:30px;border:1px solid #729b9d55;width:min(440px,calc(100vw - 32px));box-shadow:0 20px 120px #0007;max-height:calc(100svh - 32px);overflow:auto}dialog::backdrop{background:#061b257a;backdrop-filter:blur(7px)}.panel h2{font-size:35px;line-height:1.05;letter-spacing:-1.5px;margin:18px 0}.panel p{font-size:13px;color:var(--muted);line-height:1.6}.panel .primary{margin-top:22px}.secondary{width:100%;margin-top:10px;padding:14px;background:transparent;border:1px solid var(--line);font-size:13px}.text-button{width:100%;background:transparent;padding:17px 0 0;font-size:12px;color:var(--muted)}.result-hero{display:flex;align-items:center;gap:28px;margin:20px 0}.result-hero>strong{font-size:84px;color:var(--lime);line-height:1;font-style:italic;font-weight:800;letter-spacing:-5px}.result-hero>strong small{font-size:20px;letter-spacing:-1px}.result-hero>div>span{font-size:9px;letter-spacing:1px;display:block;color:var(--muted)}.result-hero b{display:block;font-size:33px;font-weight:400;margin-top:4px}.result-hero>div>small{font-size:9px;color:var(--lime);display:block;margin-top:7px}#race-result-order{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}#race-result-order li{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line);font-size:12px}#race-result-order li.player{color:var(--lime)}#race-result-order li span:last-child{color:var(--muted)}.save-note{font-size:10px!important;margin-bottom:0}#race-unsupported{position:relative;margin:20vh auto;z-index:50}#race-unsupported a{display:block;margin-top:20px}
body[data-playing=true]{overflow:hidden}body[data-playing=true] .race-vignette{background:linear-gradient(0deg,#0e253e40,transparent 30%,transparent 60%,#10272e44)}
@media(pointer:coarse){.race-touch{display:flex}.desktop-lesson{display:none}.touch-lesson{display:block}.drive-instruments{bottom:110px;right:22px}.race-speed>strong{font-size:51px}.nitro-instrument{width:140px}}
@media(max-width:760px){#race-header{padding:22px 24px 0}.brand{font-size:22px}.brand small{font-size:7px}.trial-link{font-size:11px}#race-menu{grid-template-columns:1fr;gap:20px;padding:112px 24px 55px;max-width:540px;align-content:start}.race-intro h1{font-size:64px;margin:18px 0 13px}.race-intro p{font-size:13px;line-height:1.6;margin:0}.eyebrow{font-size:9px}.course-tags{margin-top:19px;font-size:8px;gap:10px}.race-setup{padding:19px}.vehicle-choices{grid-template-columns:1fr 1fr;gap:8px}.vehicle-choice{padding:12px 8px;gap:9px}.vehicle-choice>b{display:none}.car-swatch{width:28px;height:27px;font-size:24px}.vehicle-choice strong{font-size:16px}.vehicle-choice small{font-size:9px;white-space:nowrap}.setup-heading{font-size:8px;margin-bottom:12px}.race-options{margin:13px 0}.primary{padding:16px 19px}.race-settings{margin-top:10px;padding-top:10px}.control-lesson{margin-top:10px}.race-menu-footer{bottom:20px;left:24px;font-size:7px}.hud-top{gap:14px}.route-status{width:auto;flex:1;min-width:0}.route-status>span{font-size:8px;letter-spacing:.2px}.route-status>b{font-size:11px}.position>strong{font-size:40px}.race-timing b{font-size:18px}#race-hud{padding:18px}.hud-top{margin:-18px;padding:18px 18px 25px}.race-timing>span,.position>span{font-size:8px}#race-pause{width:36px;height:36px;flex-shrink:0}.turn-cue{margin-top:24px}.turn-cue strong{font-size:11px}.turn-cue span{font-size:9px}.drive-instruments{right:19px;gap:14px}.nitro-instrument{width:145px}.race-speed>strong{font-size:53px}.race-touch button{width:63px;height:63px}.touch-actions button{width:64px;height:64px}.touch-steering,.touch-actions{gap:7px}#race-notice{top:30%;left:8%;right:8%;font-size:12px}}
@media(max-width:360px){#race-header{padding:17px 17px 0}.brand{font-size:20px}#race-menu{padding:89px 17px 43px;gap:17px}.race-intro h1{font-size:53px;margin:13px 0 11px}.race-intro p{font-size:12px}.course-tags{margin-top:13px;font-size:7px;gap:9px}.race-setup{padding:14px}.vehicle-choice{gap:6px;padding:9px 6px}.car-swatch{width:23px}.vehicle-choice strong{font-size:15px}.vehicle-choice small{font-size:8px}.race-options{font-size:8px}.race-options>span{font-size:8px;max-width:95px}.control-lesson{font-size:9px}.race-menu-footer{left:17px}.race-touch{left:11px;right:11px;bottom:14px}.race-touch button{width:57px;height:59px}.touch-actions button{width:61px}.hud-top{gap:10px}.route-status>span{font-size:7px}.route-status>b{font-size:10px}.race-timing b{font-size:16px}.position>strong{font-size:35px}.position small{font-size:16px}#race-pause{width:32px;height:32px}.drive-instruments{bottom:96px;right:16px}.nitro-instrument{width:130px}.nitro-instrument>small{font-size:9px}.race-speed>strong{font-size:47px}.panel{padding:22px!important}.panel h2{font-size:29px}.result-hero>strong{font-size:65px}.result-hero b{font-size:28px}}
@media(max-height:500px) and (min-width:500px){#race-header{padding:14px 22px 0}.brand{font-size:19px}.brand small{display:none}#race-menu{max-width:none;grid-template-columns:1fr 310px;padding:75px 24px 42px;gap:30px}.race-intro h1{font-size:50px;margin:14px 0}.race-intro p{font-size:12px}.course-tags{margin-top:14px;font-size:7px;gap:10px}.race-setup{padding:13px}.setup-heading{margin-bottom:8px}.vehicle-choice{padding:8px 6px}.race-options{margin:10px 0}.race-options select{padding:5px}.race-setup .primary{padding:12px 16px}.control-lesson{font-size:9px;margin-top:8px}.race-settings{font-size:10px;margin-top:8px;padding-top:8px}.race-menu-footer{bottom:16px}#race-hud{padding:12px 20px}.hud-top{padding:12px 20px 15px;margin:-12px -20px;gap:16px}.position>strong{font-size:32px}.position>span,.race-timing>span{font-size:7px}.route-status{max-width:260px}.route-status>b{margin:4px 0 7px}.race-timing b{font-size:19px}.turn-cue{margin-top:15px;gap:8px}.turn-cue>b{font-size:25px}.turn-cue strong{font-size:10px}.turn-cue span{font-size:8px}.drive-instruments{bottom:20px;right:50%;transform:translateX(50%);gap:13px}.race-speed>strong{font-size:43px}.race-speed>span{font-size:7px}.nitro-instrument{width:130px}.nitro-instrument>small{font-size:8px}.nitro-instrument>div:first-child{font-size:8px}.race-touch{bottom:14px}.race-touch button{width:57px;height:55px;border-radius:13px}.touch-actions button{width:59px;height:59px}.race-key-help{bottom:8px;font-size:8px}#race-notice{top:34%}dialog.panel{width:400px;padding:22px}.panel h2{font-size:28px;margin:10px 0}.panel p{margin:8px 0}.panel .primary{margin-top:13px;padding:13px 18px}.secondary{padding:10px}.text-button{padding-top:12px}.result-hero{margin:11px 0}.result-hero>strong{font-size:57px}.result-hero b{font-size:26px}#race-result-order li{padding:7px 2px}}
@media(max-height:380px) and (min-width:500px){#race-menu{grid-template-columns:1fr 275px;gap:18px;padding:66px 20px 38px}.race-intro h1{font-size:43px}.race-intro p{font-size:11px}.course-tags{font-size:6px;gap:7px}.race-setup{padding:11px}.vehicle-choice strong{font-size:14px}.vehicle-choice small{font-size:8px}.car-swatch{width:23px}.race-menu-footer{left:20px}.nitro-instrument{width:104px}.drive-instruments{gap:9px}.race-speed>strong{font-size:36px}.race-touch{left:12px;right:12px}.race-touch button{width:49px;height:51px}.touch-actions button{width:53px}.touch-steering,.touch-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Keep the pause hit area usable even when its surrounding type gets smaller. */
@media(pointer:coarse){#race-pause{width:44px;height:44px}}
@media(max-height:500px) and (min-width:500px){.vehicle-choices{grid-template-columns:1fr 1fr;gap:8px}.vehicle-choice>b{display:none}.vehicle-choice{gap:8px}.vehicle-choice strong{font-size:16px}.vehicle-choice small{font-size:9px;white-space:nowrap}.car-swatch{width:26px;height:27px;font-size:24px}}
/* Flight shares the right thumb with drift and nitro; steering stays left. */
.touch-actions{display:grid;grid-template-columns:repeat(2,auto)}
.touch-actions [data-control=lift]{background:#72dfdfda;color:#123136;border-color:#b0ffff}
.touch-actions [data-control=lift].held{background:#c1ffff}
.touch-actions button[data-control=stunt]{gap:1px}
.touch-actions button>small{font-size:7px;font-weight:700;letter-spacing:.3px;color:#c2e9e6;min-height:8px}
.touch-actions button[data-control=stunt]>b{font-size:23px;line-height:1}
.nitro-instrument .pressure-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin:9px 0 5px}
.pressure-label b{color:#8ce7e9}
.pressure-track{height:5px;background:#0a212acc;border:1px solid #b1d3c942}
.pressure-track>i{display:block;width:100%;height:100%;background:#8ce7e9}
.race-speed>small{display:block;font-size:9px;letter-spacing:.4px;text-align:right;margin-top:9px;color:#a6efed}
.result-flight{font-size:10px!important;color:#8ce7e9!important;letter-spacing:.7px}
@media(pointer:coarse){.drive-instruments{bottom:188px}}
@media(max-width:360px){.drive-instruments{bottom:160px}.nitro-instrument .pressure-label{font-size:8px;margin-top:6px}.race-speed>small{font-size:8px}}
/* Short portrait screens need the gauges above the chase car, clear of stunts. */
@media(max-width:360px) and (max-height:650px) and (orientation:portrait){.drive-instruments{top:157px;bottom:auto}#race-notice{top:45%}}
@media(max-height:500px) and (min-width:500px){.drive-instruments{bottom:20px}.nitro-instrument .pressure-label{font-size:8px;margin-top:6px}.race-speed>small{font-size:7px}.race-key-help span{margin-left:12px}}
/* The second mode belongs to the garage layout, never over the race HUD. */
#race-menu{grid-template-areas:"intro setup" "trials setup";row-gap:22px}
.race-intro{grid-area:intro;align-self:end}.race-setup{grid-area:setup}
.flight-mode-card{grid-area:trials;align-self:start;display:block;max-width:360px;padding:16px 18px;border:1px solid #9ae5e879;border-left:3px solid #9ae5e8;background:#10303be8;box-shadow:0 8px 30px #0002}
.flight-mode-card:hover{background:#194551;border-color:#c8ffff}.flight-mode-card .mode-kicker{display:block;color:#9ae5e8;font-size:8px;font-weight:700;letter-spacing:1.7px}.flight-mode-card strong{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:7px 0;font-size:22px;letter-spacing:-.5px}.flight-mode-card strong>span{font-size:25px;font-weight:400;color:#a8f3ef}.flight-mode-card .mode-description{display:block;max-width:30ch;color:#c3dcda;font-size:12px;line-height:1.5}
@media(max-width:760px) and (min-height:501px){#race-menu{grid-template-areas:"intro" "setup" "trials";padding-top:94px;row-gap:15px;padding-bottom:80px}.race-intro h1{font-size:48px;margin:13px 0 12px}.race-intro p{font-size:12px}.course-tags{margin-top:14px}.flight-mode-card{max-width:none;padding:13px 16px}.flight-mode-card strong{font-size:20px;margin:5px 0}.flight-mode-card .mode-description{max-width:none;font-size:11px}.race-menu-footer{bottom:19px}}
@media(max-width:360px) and (max-height:650px) and (orientation:portrait){#race-menu{padding:79px 17px 55px;row-gap:11px}.race-intro h1{font-size:36px;margin:9px 0}.race-intro p{font-size:11px;line-height:1.45}.race-intro .eyebrow{font-size:8px;letter-spacing:1.6px}.course-tags{display:none}.race-setup{padding:11px 13px}.setup-heading{margin-bottom:8px}.vehicle-choice{padding:8px 6px}.race-options{margin:9px 0}.race-options select{padding:6px 5px}.race-launch-row>.primary{padding:13px 17px}.race-setup>.control-lesson{display:none}.race-settings{margin-top:8px;padding-top:8px}.flight-mode-card{padding:10px 13px}.flight-mode-card strong{font-size:19px;margin:4px 0}.flight-mode-card .mode-description{font-size:10px;line-height:1.4}.flight-mode-card .mode-kicker{font-size:7px}.race-menu-footer{font-size:6px;letter-spacing:.9px;bottom:13px}}
@media(max-height:500px) and (min-width:500px){#race-menu{grid-template-areas:"intro setup" "trials setup";padding-top:63px;row-gap:10px;align-content:center}.race-intro h1{font-size:42px;margin:9px 0}.race-intro p{font-size:11px;line-height:1.5}.course-tags{display:none}.flight-mode-card{max-width:300px;padding:11px 13px}.flight-mode-card .mode-kicker{font-size:7px;letter-spacing:1.2px}.flight-mode-card strong{font-size:19px;margin:4px 0}.flight-mode-card .mode-description{font-size:10px;line-height:1.4}.race-menu-footer{position:static;grid-column:1/-1;margin-top:3px}}
@media(max-height:380px) and (min-width:500px){#race-menu{padding:57px 20px 12px;row-gap:9px;align-content:start}.race-intro h1{font-size:34px;margin:7px 0}.race-intro p{font-size:10px;line-height:1.4}.race-intro .eyebrow{font-size:7px;letter-spacing:1.3px}.flight-mode-card{padding:9px 11px}.flight-mode-card strong{font-size:18px}.flight-mode-card .mode-description{font-size:10px}.race-menu-footer{font-size:6px}.race-setup>.control-lesson{display:none}.race-setup .primary{padding:12px 15px}}
/* Course selection keeps its own records and explains the loop before launch. */
.race-track-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.track-choice{position:relative;min-width:0;min-height:54px;padding:10px 8px;background:#17353f;border:1px solid #7ba9a95c;text-align:left}
.track-choice strong{display:block;font-size:12px;line-height:1.3;letter-spacing:-.2px}
.track-choice small{display:block;margin-top:4px;color:#a6c8c7;font-size:10px;line-height:1.3}
.track-choice[aria-pressed=true]{border-color:#9ff5eb;background:#255057;box-shadow:inset 0 -3px #9ff5eb}
.track-choice[aria-pressed=true] strong{color:#cffff2}
.track-choice:hover{background:#2b5059}
.overdrive-choice{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-left:3px solid #d9f568}
.overdrive-choice small{margin-top:0;text-align:right}
body[data-race-track="clocktower-overdrive"] .turn-cue{max-width:300px}
body[data-race-track="clocktower-overdrive"] #race-distance{line-height:1.5}
.race-intro p{max-width:35ch}
.touch-actions #race-grip{grid-column:1/-1;flex-direction:row;width:100%;height:44px;min-height:44px;gap:8px;border-color:#9ff5eb;background:#387f82ef;color:#fff}
.touch-actions #race-grip>b{font-size:24px;line-height:1}.touch-actions #race-grip>span{font-size:11px;font-weight:800}.touch-actions #race-grip>small{font-size:8px;color:#cbfff4}
.touch-actions #race-grip.held{background:#b0f6e8;color:#143435}.touch-actions #race-grip.held>small{color:#143435}
body[data-race-track="clocktower-overdrive"] .touch-actions #race-grip{grid-column:auto;flex-direction:column;width:100%;height:52px;min-height:52px;gap:1px}
body[data-race-track="clocktower-overdrive"] .touch-actions #race-grip>b{font-size:18px}
body[data-race-track="clocktower-overdrive"] .touch-actions #race-grip>span{font-size:9px}
body[data-race-track="clocktower-overdrive"] .touch-actions #race-grip>small{font-size:7px}
.touch-actions #race-brake{height:52px;min-height:52px;background:#624839e8;border-color:#e7b99a;color:#fff1df}
.touch-actions #race-brake>b{font-size:21px;line-height:1}
.touch-actions #race-brake.held{background:#b57651}
.touch-actions #race-brake.brake-needed{border:2px solid #f5cc8b;background:#875333;color:#fff3d7}
#race-grip-prompt{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 9px;width:max-content;max-width:240px;border:1px solid #a6f6e5;background:#163f43ec;color:#dcfff1;font-size:10px;letter-spacing:.4px}
#race-grip-prompt kbd{display:grid;place-items:center;min-width:25px;min-height:25px;margin:0;background:#d9f568;color:#102f32;border:0;font-size:17px;font-weight:800}
.pause-grip-note{padding:9px 11px;border:1px solid #a6f6e580;color:#c8fff0;background:#1d4449;font-size:11px;line-height:1.5}
.auto-grip-setting{display:flex;align-items:flex-start;gap:8px;margin:13px 0;font-size:12px;line-height:1.4}
.auto-grip-setting input{accent-color:var(--lime);margin-top:3px}
.auto-grip-setting small{display:block;margin-top:4px;font-size:10px;line-height:1.5;color:var(--muted)}
#race-grip-warning{position:absolute;top:29%;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 20px;border:2px solid var(--lime);background:#153536f2;color:#efffb1;font-size:clamp(18px,2.2vw,28px);font-weight:900;letter-spacing:.8px;text-align:center;text-shadow:none;box-shadow:0 8px 30px #0004}
.touch-actions #race-grip.grip-needed{background:#efffa9;color:#163537;border:2px solid #fff;box-shadow:0 0 0 4px #d9f56855}
.touch-actions #race-grip.grip-needed>small{color:#163537}
@media(max-height:500px){#race-grip-warning{top:33%;font-size:18px;padding:9px 14px}}
@media(max-width:360px) and (max-height:650px) and (orientation:portrait){#race-grip-warning{top:44%;font-size:18px;padding:10px 14px}}
@media(max-height:500px){#race-grip-prompt{font-size:8px;padding:4px 7px;margin-top:6px}#race-grip-prompt kbd{min-width:22px;min-height:22px;font-size:15px}}
@media(pointer:coarse) and (max-width:360px) and (max-height:650px) and (orientation:portrait){#race-grip-prompt{display:none}}
@media(pointer:coarse) and (min-width:361px) and (min-height:501px){body[data-race-track="skyloop-run"] .drive-instruments{bottom:239px}}
@media(max-width:760px){.race-track-choice{margin-top:11px}.track-choice{min-height:50px;padding:8px 7px}.track-choice small{font-size:9px}}
@media(max-width:360px) and (max-height:650px) and (orientation:portrait){#race-menu{padding-top:73px;row-gap:8px}.race-intro h1{font-size:32px;margin:7px 0}.race-intro p{display:none}.race-track-choice{margin-top:8px;gap:6px}.track-choice{min-height:47px;padding:7px 5px}.track-choice strong{font-size:10px}.track-choice small{font-size:8px}.race-options{margin:7px 0}.flight-mode-card{padding:8px 12px}}
@media(max-height:500px) and (min-width:500px){.race-track-choice{margin-top:8px;gap:6px}.track-choice{min-height:44px;padding:6px}.track-choice strong{font-size:10px}.track-choice small{font-size:8px;margin-top:3px}}
@media(max-height:380px) and (min-width:500px){.race-setup .setup-heading{display:none}.race-track-choice{margin-top:7px}.race-options{margin:7px 0}.race-settings{margin-top:7px;padding-top:7px}}
/* A narrow tall screen still needs room for the longer Skyloop coaching. */
@media(max-width:360px) and (min-height:651px) and (orientation:portrait){
  #race-menu{row-gap:12px}
  .race-intro h1{font-size:42px;margin:10px 0}
}
/* Safari's expanded bars leave about 714 CSS px on a 402px phone. Keep the
   second mode in view without shrinking course or launch touch targets. */
@media(min-width:361px) and (max-width:430px) and (max-height:760px) and (orientation:portrait){
  #race-menu{padding-top:82px;row-gap:12px}
  .race-intro h1{font-size:36px;margin:8px 0}
  .race-intro p,.course-tags{display:none}
  .race-intro .eyebrow{font-size:8px;letter-spacing:1.6px}
  .race-setup{padding:15px}
  .setup-heading{margin-bottom:9px}
  .vehicle-choice{padding:10px 8px}
  .race-track-choice{margin-top:9px}
  .race-options{margin:10px 0}
  .race-setup>.control-lesson{display:none}
  .race-settings{margin-top:9px;padding-top:9px}
  .flight-mode-card{padding:11px 14px}
  .flight-mode-card .mode-description{font-size:10px;line-height:1.4}
}
/* Portrait instruments occupy the top-right beside the route cue, leaving the
   chase car, active wing and all seven thumb controls clear below. */
@media(pointer:coarse) and (max-width:760px) and (orientation:portrait){
  .drive-instruments,body[data-race-track] .drive-instruments{top:92px;bottom:auto;right:max(18px,env(safe-area-inset-right));width:128px;display:block;transform:none}
  .race-speed{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:6px}
  .race-speed>strong{font-size:36px;line-height:1;letter-spacing:-2px;text-align:right}
  .race-speed>span{margin:0 0 4px;font-size:7px;letter-spacing:1px}
  .race-speed>small{grid-column:1/-1;margin-top:3px;font-size:8px;line-height:1.2}
  .nitro-instrument{width:100%;margin-top:8px}
  .nitro-instrument>div:first-child{font-size:8px;margin-bottom:4px}
  .nitro-track{height:5px}
  .nitro-instrument .pressure-label{font-size:8px;margin:6px 0 4px}
  .pressure-track{height:4px}
  .nitro-instrument>small{font-size:8px;line-height:1.25;margin-top:5px}
  .turn-cue{width:calc(100% - 154px);max-width:none;gap:8px;align-items:flex-start}
  .turn-cue>b{font-size:25px}
  .turn-cue>div{min-width:0}
  #race-grip-prompt{width:auto;max-width:100%;font-size:8px;line-height:1.4;padding:6px 7px}
}
@media(pointer:coarse) and (min-width:361px) and (max-width:760px) and (orientation:portrait){
  #race-grip-warning{top:max(235px,29%)}
  #race-notice{top:max(235px,30%)}
}

/* Sensor setup shares the existing launch row, without pushing the mode card.
   The larger drag pad keeps an eight-pixel gap below tilt recentering. */
.race-launch-row{display:flex;gap:8px;align-items:stretch}.race-launch-row>.primary{flex:1;min-width:0}.steering-choice{flex:0 0 80px;min-height:44px;padding:8px 5px;border:1px solid #9ccecc80;background:#183a43;color:var(--lime);display:flex;flex-direction:column;justify-content:center;gap:5px}.steering-choice small{font-size:7px;letter-spacing:.8px;color:var(--muted)}.steering-choice strong{font-size:13px;letter-spacing:1px}
.tilt-panel #race-tilt-status{border:1px solid var(--line);padding:11px;color:var(--lime);min-height:52px}.tilt-sensitivity{display:block;font-size:12px;color:var(--muted);margin:15px 0}.tilt-sensitivity>span{display:flex;justify-content:space-between}.tilt-sensitivity input{width:100%;height:44px;accent-color:var(--lime);margin:0}.tilt-panel .primary,.tilt-panel .secondary,.tilt-panel .text-button{min-height:44px}.tilt-panel .text-button{padding:12px 0 0}
#race-steering-pad{width:156px;height:76px;padding:0 10px;position:relative;display:flex;flex-direction:column;gap:7px;overflow:hidden;transform:none;cursor:ew-resize}#race-steering-pad.held{transform:none}.steering-rail{position:relative;display:block;height:32px;width:100%;border-bottom:1px solid #a9e2d64d;margin-top:-5px}.steering-rail:before,.steering-rail:after{position:absolute;top:7px;font-size:17px;color:#b7d6d1}.steering-rail:before{content:'‹';left:0}.steering-rail:after{content:'›';right:0}#race-steering-thumb{position:absolute;left:calc(50% - 17px);top:0;width:34px;height:34px;border:1px solid #e3ffbf;border-radius:50%;background:#bfdc9b3d;box-shadow:0 2px 8px #0003}#race-steering-pad small{font-size:8px;letter-spacing:.5px;color:#d5e8dc}.race-recenter{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 84px);width:156px;height:44px;border:1px solid #a1cec080;border-radius:9px;background:#132f3bd9;color:#d5e8dc;font-size:9px;letter-spacing:.3px;pointer-events:auto}
#race-world,#race-hud{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
@media(max-width:360px){.race-launch-row>.primary{padding-left:13px;padding-right:13px;font-size:12px}.steering-choice{flex-basis:73px}#race-steering-pad{width:min(132px,41.25vw);height:70px}.race-recenter{left:11px;bottom:92px;width:min(132px,41.25vw)}}
@media(max-height:500px) and (min-width:500px){#race-steering-pad{width:152px;height:72px}.race-recenter{bottom:94px;width:152px}.tilt-panel h2{margin:8px 0}.tilt-panel .tilt-sensitivity{margin:6px 0}.tilt-panel .primary{margin-top:8px}}
@media(max-height:380px) and (min-width:500px){#race-steering-pad{width:140px;height:64px}.race-recenter{left:12px;bottom:86px;width:140px}}

/* Larger landscape action targets; gameplay holds suppress double-tap zoom. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){.touch-actions button{width:64px;height:64px}.touch-actions button[data-control=grip]{height:44px;min-height:44px}.touch-actions{gap:7px}.race-touch button{touch-action:none;-webkit-touch-callout:none}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:350px){.touch-actions button{width:58px;height:58px}.touch-actions{gap:6px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){.drive-instruments{bottom:14px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:350px){
  .race-speed>span{margin-top:3px}
  .race-speed>small{margin-top:4px}
  .nitro-instrument>div:first-child{margin-bottom:4px}
  .nitro-instrument .pressure-label{margin:3px 0}
  /* Keep longer coaching below the gauges, across their full combined width,
     so a two-line corner cue cannot expand upward across the car. */
  .nitro-instrument>small{position:absolute;top:100%;right:0;width:100%;margin-top:2px;font-size:7px;line-height:8px;text-align:right;white-space:nowrap}
}

/* Short portrait screens keep the car above the six right-thumb actions.
   Three 44px rows plus two 7px gaps start at y=408 in a 320x568 viewport. */
@media(pointer:coarse) and (orientation:portrait) and (max-height:620px){
  .touch-actions{gap:7px}
  .touch-actions button,.touch-actions #race-grip,.touch-actions #race-brake,
  body[data-race-track="clocktower-overdrive"] .touch-actions #race-grip{height:44px;min-height:44px;gap:1px}
  .touch-actions button>b,.touch-actions button[data-control=stunt]>b{font-size:20px;line-height:20px}
  .touch-actions button>span{font-size:9px;line-height:10px}
  .touch-actions button>small{font-size:7px;line-height:8px;min-height:8px}
}

#race-start:disabled{opacity:.55;cursor:wait}
#race-course-loading{position:relative;font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}
#race-course-loading progress{display:block;width:100%;height:4px;margin-top:7px;overflow:hidden;border:0;border-radius:2px;background:var(--line);color:var(--lime);accent-color:var(--lime);appearance:none}
#race-course-loading progress::-webkit-progress-bar{background:var(--line)}
#race-course-loading progress::-webkit-progress-value{background:var(--lime)}
#race-course-loading progress::-moz-progress-bar{background:var(--lime)}
#race-course-loading progress[hidden]{display:none}
.course-loading-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#race-course-retry{margin-top:8px;min-height:44px;padding:8px 18px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer}

/* Put the two steering choices ahead of optional tuning on short screens. */
.tilt-adjustments{margin-top:10px;color:var(--muted);font-size:11px}.tilt-adjustments>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;border-top:1px solid var(--line);touch-action:manipulation}.tilt-adjustments>summary:after{content:'+';margin-left:auto;font-size:18px}.tilt-adjustments[open]>summary:after{content:'−'}.tilt-adjustments .tilt-sensitivity{margin:0}.tilt-actions .primary{margin-top:12px}
@media(max-height:500px) and (min-width:500px){
  dialog.tilt-panel{width:min(536px,calc(100vw - 32px));padding:14px 16px;max-height:calc(100svh - 24px)}
  .tilt-panel>.eyebrow{display:none}.tilt-panel h2{display:flex;align-items:center;min-height:44px;margin:0 48px 0 0;font-size:26px}
  .tilt-panel>p{font-size:11px;line-height:1.4;margin:6px 0}.tilt-panel #race-tilt-status{min-height:36px;padding:8px;margin:6px 0}
  .tilt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.tilt-actions .primary,.tilt-actions .secondary{margin:0;padding:10px 12px;min-height:44px;font-size:12px}
  .tilt-panel #race-tilt-close{position:absolute;top:14px;right:12px;width:44px;height:44px;min-height:44px;padding:0;font-size:11px}
  .tilt-panel .tilt-adjustments{margin-top:6px}.tilt-adjustments>summary{font-size:11px}
}
