:root{--race-lime:#d9ff61;--race-night:#102631;--race-dim:#a8c3c8}
body{background:#eaf1ef}.site-header{position:static}.race-shell{max-width:1240px;margin:auto;padding:24px 20px 48px}.race-back{color:#245b61;font-weight:750;text-underline-offset:4px}.race-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:18px 0}.race-heading h1{font-size:clamp(30px,5vw,52px);line-height:1;letter-spacing:-.045em;margin:0 0 10px}.race-heading p{margin:0;color:#486970}.race-heading .eyebrow{font-size:11px;color:#137b83;margin-bottom:10px}.race-tools{display:flex;gap:8px;flex-shrink:0}.race-tools button{border:1px solid #adc6c8;background:white;border-radius:10px;padding:10px 14px;min-height:44px;color:#163e46;font-weight:750;cursor:pointer}
.race-board{border-radius:22px;overflow:hidden;background:var(--race-night);box-shadow:0 16px 45px #10263128;color:white;outline-offset:4px}.race-hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#344c55;border-bottom:1px solid #38515a}.race-hud>div{background:#142f3a;padding:12px 16px;min-width:0}.race-hud span{display:block;font-size:10px;letter-spacing:.1em;font-weight:750;text-transform:uppercase;color:#aac8ce}.race-hud strong{font-size:clamp(17px,2vw,24px);font-variant-numeric:tabular-nums;display:block;line-height:1.35}.race-hud strong small{font-size:12px;color:#a8c3c8}
.race-stage{position:relative;height:clamp(370px,57vh,580px);isolation:isolate;overflow:hidden}.race-stage canvas{display:block;width:100%;height:100%;background:#72b9c3}.race-stage canvas:focus{outline:3px solid var(--race-lime);outline-offset:-3px}.race-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#051e315c;padding:18px;z-index:4}.race-overlay[hidden]{display:none}.race-panel{width:min(640px,100%);max-height:100%;overflow:auto;background:#102631f7;border:1px solid #6e9298;border-radius:20px;padding:26px;box-shadow:0 15px 50px #0005}.race-panel h2{font-size:clamp(25px,4vw,39px);line-height:1.05;letter-spacing:-.035em;margin:0 0 12px}.race-panel p{color:#c2d7da;font-size:14px;line-height:1.55;margin:10px 0}.race-tag{font-size:10px;letter-spacing:.13em;color:var(--race-lime);font-weight:850;margin-bottom:10px}.race-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.race-course{background:#213c47;border:1px solid #536c75;color:white;text-align:left;padding:12px;border-radius:12px;cursor:pointer;font:inherit;font-size:13px;font-weight:800}.race-course small{display:block;color:#bbd1d5;font-size:11px;font-weight:500;margin-top:4px}.race-course[aria-pressed=true]{border:2px solid var(--race-lime);padding:11px;background:#314d40}.race-play{border:0;border-radius:12px;background:var(--race-lime);color:#16342d;padding:14px 22px;min-height:48px;font-size:16px;font-weight:850;cursor:pointer}.race-play:hover{background:#ecffa8}.race-secondary{background:#27434e;color:white;border:1px solid #6b868e}.race-secondary:hover{background:#365561}.race-panel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.race-tips{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:#d9e6e9;margin:16px 0}.race-tips span{background:#ffffff0a;border-radius:8px;padding:8px 10px}.race-best{font-size:12px!important;color:#d9ff61!important}.race-countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:950;color:white;text-shadow:0 6px 0 #133a48;pointer-events:none;z-index:2}.race-countdown[hidden]{display:none}.race-toast{position:absolute;top:65px;left:50%;transform:translateX(-50%);background:#102631e8;color:var(--race-lime);padding:9px 18px;border-radius:30px;font-weight:850;font-size:16px;pointer-events:none;white-space:nowrap;z-index:2}.race-toast:empty{display:none}.race-route{position:absolute;top:15px;left:16px;right:16px;display:flex;align-items:center;gap:12px;pointer-events:none}.race-route label{font-size:11px;font-weight:850;color:white;text-shadow:0 1px 4px #000}.race-route progress{flex:1;height:8px;accent-color:var(--race-lime)}.race-drive-hint{position:absolute;left:16px;bottom:15px;border-radius:10px;padding:8px 12px;background:#102631d9;font-size:12px;color:white;max-width:75%;font-weight:750}.race-controls{display:grid;grid-template-columns:1fr 1fr 1.25fr 1.25fr 1.3fr;gap:9px;padding:12px;background:#102631;position:sticky;bottom:0;z-index:5}.race-control{border:1px solid #55717a;background:#27434e;color:white;border-radius:12px;min-height:64px;touch-action:none;user-select:none;cursor:pointer;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}.race-control small{font-size:10px;color:#c0d3d7;font-weight:550}.race-control[data-hold=gas]{background:#255f53}.race-control[data-hold=brake]{background:#743f37}.race-control[data-hold=boost]{background:#404680;border-color:#8792c8}.race-control.active{filter:brightness(1.45);box-shadow:inset 0 0 0 2px #fff8}.race-control:disabled{opacity:.45;cursor:default}.race-mission{padding:12px 16px;border-top:1px solid #3a545c;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b8cdd2}.race-mission strong{color:var(--race-lime)}.race-note{font-size:13px;line-height:1.6;color:#496971;margin-top:18px;max-width:900px}.race-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.race-result-grid div{padding:12px;background:#ffffff09;border-radius:10px;font-size:12px;color:#bdd3d6}.race-result-grid strong{display:block;font-size:23px;color:white}.race-stars{font-size:28px;letter-spacing:6px;color:var(--race-lime)}.race-panel button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:700px){.race-shell{padding:18px 10px 30px}.race-heading{align-items:start}.race-heading h1{font-size:34px}.race-heading p{font-size:13px}.race-tools{flex-direction:column}.race-tools button{font-size:12px;padding:7px 10px}.race-hud>div{padding:9px 7px}.race-hud span{font-size:8px;letter-spacing:.02em}.race-hud strong{font-size:17px}.race-hud strong small{font-size:9px}.race-stage{height:440px}.race-panel{padding:18px}.race-overlay{padding:10px}.race-panel h2{font-size:29px}.race-courses{gap:5px;margin:12px 0}.race-course{font-size:11px;padding:9px}.race-course[aria-pressed=true]{padding:8px}.race-course small{font-size:10px}.race-tips{gap:5px;font-size:11px;margin:10px 0}.race-tips span{padding:6px}.race-controls{gap:5px;padding:8px}.race-control{font-size:12px;min-height:62px}.race-control small{font-size:9px}.race-mission{flex-direction:column;gap:4px;padding:10px;font-size:11px}.race-toast{font-size:13px;max-width:95%;white-space:normal;text-align:center}.race-result-grid{gap:6px}.race-result-grid div{padding:9px}.race-result-grid strong{font-size:19px}.race-panel-actions .race-play{flex:1;font-size:14px;padding:12px}}

.race-topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;gap:12px}.race-topbar>strong{font-size:10px;letter-spacing:.12em;color:var(--race-dim)}.race-topbar .race-tools{flex-direction:row}.race-topbar button{background:#213c47;color:white;border-color:#536c75;padding:7px 12px}.race-topbar button:disabled{opacity:.45}

.race-engine{position:absolute;right:12px;top:44px;width:170px;border:1px solid #71959880;border-radius:14px;background:#0b222de8;padding:10px;z-index:1;pointer-events:none;box-shadow:0 6px 18px #00192333}.engine-heading{display:flex;justify-content:space-between;gap:5px;font-size:9px;letter-spacing:.04em;color:#acd4d9}.engine-heading strong{font-variant-numeric:tabular-nums;color:#d9ff61;font-size:10px;white-space:nowrap}.race-engine canvas{width:100%;height:152px;background:transparent}.engine-caption{text-align:center;font-size:9px;color:#b8cfd2}.race-toast{max-width:58%;white-space:normal;text-align:center}
@media(max-width:700px){.race-engine{right:8px;top:36px;width:112px;padding:7px;border-radius:10px}.engine-heading{flex-direction:column;font-size:8px;gap:2px}.engine-heading strong{font-size:10px}.race-engine canvas{height:112px}.engine-caption{font-size:8px;line-height:1.2}.race-toast{left:31%;max-width:55%;font-size:12px;padding:7px 10px}}

.race-learning{padding:10px 16px;background:#1b3c45;border-bottom:1px solid #45636a}.race-learning summary{cursor:pointer;color:#d9ff61;font-size:12px;line-height:1.5}.race-learning summary span{color:#d8e9e7;margin-left:12px;font-weight:400}.race-learning p{margin:10px 0 4px;color:#c9dfdf;font-size:12px;line-height:1.6;max-width:980px}.race-hud progress{display:block;width:100%;height:7px;margin:5px 0;border:0;border-radius:8px;overflow:hidden;appearance:none;background:#385660;accent-color:#d9ff61}.race-hud progress::-webkit-progress-bar{background:#385660;border-radius:8px}.race-hud progress::-webkit-progress-value{background:#d9ff61;border-radius:8px;transition:width .12s linear}.race-hud progress::-moz-progress-bar{background:#d9ff61;border-radius:8px}.race-hud progress.is-boosting::-webkit-progress-value{background:#9aeaff}.race-hud progress.is-boosting::-moz-progress-bar{background:#9aeaff}#boostStatus{display:block;font-size:9px;line-height:1.2;color:#bbd9dd}@media(max-width:700px){.race-learning{padding:8px 10px}.race-learning summary{font-size:11px}.race-learning summary span{display:block;margin-left:0}#boostStatus{font-size:8px}}@media(prefers-reduced-motion:reduce){.race-hud progress::-webkit-progress-value{transition:none}}

/* The learning content has its own readable space, outside the racing road. */
.race-learning{padding:18px 22px}.race-learning h2{margin:0 0 8px;color:#d9ff61;font-size:24px;line-height:1.2}.race-learning .race-learning-main{font-size:18px;line-height:1.5;margin:0;color:#f1faf7;max-width:1100px}.race-learning details{margin-top:8px}.race-learning summary{font-size:14px;color:#cbe5e4}.race-learning details p{font-size:16px;line-height:1.6}
.race-play-area{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:stretch}.race-driving{min-width:0}.race-stage{height:clamp(390px,58vh,590px)}.race-engine{position:static;width:auto;inset:auto;padding:20px 16px;border:0;border-left:1px solid #45636a;border-radius:0;box-shadow:none;pointer-events:auto;background:#102b36}.race-engine h2{margin:0 0 12px;font-size:22px;line-height:1.2;color:#d9ff61}.engine-heading{font-size:14px;letter-spacing:0;align-items:center;flex-direction:row}.engine-heading strong{font-size:17px}.race-engine canvas{display:block;width:100%;height:auto;aspect-ratio:300/320;margin:10px 0;background:transparent}.engine-stroke{padding:9px 12px;background:#274851;border-radius:8px;font-size:16px;font-weight:850;color:#d9ff61}.engine-explain{font-size:16px;line-height:1.5;color:#eef8f5;min-height:72px;margin:12px 0}.engine-caption{font-size:13px;line-height:1.5;text-align:left;margin:14px 0 0;color:#c0dadb}.race-engine-steps{display:grid;grid-template-columns:1fr 1fr;gap:6px}.race-engine-steps span{padding:8px;border-radius:6px;background:#ffffff08;color:#bed5d9;font-size:13px;text-align:center}.race-engine-steps span.active{background:#d9ff61;color:#173731;font-weight:850}.race-toast{left:50%;max-width:85%}.race-drive-hint{max-width:90%}
/* The start button lives in a visible footer, never at the bottom of a scrolled panel. */
.race-start-overlay{position:fixed;inset:0;z-index:1000;padding:24px;background:#051b2bde;align-items:center}.race-start-panel{width:min(1040px,100%);max-height:calc(100dvh - 48px);padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:22px}.race-start-heading{padding:26px 30px 12px;flex-shrink:0}.race-start-heading h2{font-size:38px;margin:0}.race-start-body{padding:8px 30px 18px;display:grid;grid-template-columns:1fr 1fr;gap:30px;min-height:0;overflow:auto}.race-start-body p{font-size:16px}.race-start-body h3{font-size:17px;margin:10px 0;color:#f3fbf7}.race-start-body .race-tips{grid-template-columns:1fr;font-size:14px}.race-start-body .race-courses{grid-template-columns:1fr;gap:8px;margin:0 0 12px}.race-start-body .race-course{font-size:15px;padding:12px}.race-start-body .race-course[aria-pressed=true]{padding:11px}.race-start-body .race-course small{font-size:12px}.race-start-body .race-loadout{font-size:14px!important}.race-start-footer{flex-shrink:0;padding:18px 30px;background:#193b45;border-top:1px solid #507078;display:flex;align-items:center;justify-content:space-between;gap:20px}.race-start-footer span{font-size:14px;color:#cbdfdc;max-width:440px}.race-start-footer .race-play{font-size:21px;min-height:60px;min-width:230px;white-space:nowrap}.race-start-panel:focus-within{outline:none}
@media(max-width:900px){.race-play-area{grid-template-columns:minmax(0,1fr) 285px}.race-engine{padding:16px 12px}.race-engine h2{font-size:20px}}
@media(max-width:700px){.race-learning{padding:15px 12px}.race-learning h2{font-size:21px}.race-learning .race-learning-main{font-size:16px;line-height:1.45}.race-learning summary{font-size:13px}.race-learning details p{font-size:15px}.race-play-area{display:flex;flex-direction:column}.race-stage{height:360px}.race-engine{width:100%;border-left:0;border-top:1px solid #45636a;padding:20px;}.race-engine canvas{max-width:380px;margin:12px auto}.race-engine h2{font-size:24px}.engine-heading,.engine-caption{font-size:14px}.engine-explain{font-size:17px;min-height:0}.race-engine-steps{grid-template-columns:repeat(4,1fr)}.race-start-overlay{padding:10px}.race-start-panel{max-height:calc(100dvh - 20px);border-radius:16px}.race-start-heading{padding:18px 18px 8px}.race-start-heading h2{font-size:29px}.race-start-body{padding:4px 18px 12px;grid-template-columns:1fr;gap:8px}.race-start-body p{font-size:14px;line-height:1.4;margin:8px 0}.race-start-body .race-tips{grid-template-columns:1fr 1fr;font-size:11px;margin:8px 0}.race-start-body .race-courses{grid-template-columns:repeat(3,1fr);gap:5px}.race-start-body .race-course{font-size:12px;padding:10px 8px}.race-start-body .race-course[aria-pressed=true]{padding:9px 7px}.race-start-body .race-course small{font-size:11px}.race-start-body .race-loadout{font-size:12px!important}.race-start-footer{padding:12px 18px;display:block}.race-start-footer span{display:none}.race-start-footer .race-play{width:100%;min-height:56px;font-size:20px}}

.race-start-heading h2{color:#f3fbf7}

/* Keep the driving hint clear of the detailed car on narrow screens. */
@media(max-width:700px){.race-drive-hint{top:40px;bottom:auto;max-width:calc(100% - 32px);font-size:10px}}

@media(min-width:701px){.race-learning{padding:12px 18px}.race-stage{height:clamp(240px,calc(100dvh - 475px),540px)}.race-engine canvas{max-width:260px;margin:10px auto}.race-engine{padding:16px}.engine-explain{min-height:0;line-height:1.4}.race-engine-steps{grid-template-columns:repeat(4,1fr)}.race-engine-steps span{font-size:11px;padding:7px 3px}.engine-caption{font-size:12px;line-height:1.4}}