@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#11251e;--lime:#def49c;--paper:#f4f4e9;--muted:#b9c9bd;font-family:'DM Sans',sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper)}button,select{font:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled,select:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f4d188;outline-offset:3px}a{color:inherit}button,select{border-radius:8px}button{color:var(--paper)}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}#canvas-host,#canvas-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block}canvas{touch-action:none}.topbar{position:absolute;z-index:6;top:max(25px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left));right:max(30px,env(safe-area-inset-right));display:flex;gap:23px;align-items:flex-start;text-shadow:0 2px 10px #15251e80}.wordmark{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.04em;font-size:20px}.wordmark span{font-weight:400}.wordmark a{display:block;text-decoration:none;font-size:8px;font-weight:600;letter-spacing:.2em;margin-top:8px}.score-box{margin-left:auto;text-align:right}.score-box>span{display:block;font-size:8px;letter-spacing:.2em}.score-box strong{display:block;font-family:Manrope,sans-serif;font-size:34px;line-height:1.2}.score-box small{font-size:8px;letter-spacing:.1em;color:#d1dfd3}.tools{display:flex;gap:8px}.tools button{width:42px;height:42px;border:1px solid #e5eedc55;background:#172d265c;border-radius:50%;font-size:22px;backdrop-filter:blur(8px)}.route-strip{position:absolute;top:117px;left:32px;z-index:2;width:240px;text-shadow:0 2px 8px #13251eaa}.route-strip span{display:block;font-size:9px;font-weight:700;letter-spacing:.17em}.route-strip b{display:block;font-size:13px;margin:9px 0 5px}.route-strip small{display:block;font-size:10px;line-height:1.4;color:#f7e7bd}.progress-track{position:relative;width:100%;height:3px;background:#f5edd841;margin-top:15px}.progress-track i{position:absolute;left:0;top:0;height:3px;background:var(--lime);width:0}.progress-track em{position:absolute;top:-2px;width:6px;height:6px;border:1px solid #f8e8c9;border-radius:50%;background:#766f54}.toast{position:absolute;left:50%;top:28%;transform:translate(-50%,-12px);max-width:80%;padding:13px 20px;border-radius:28px;background:#173d30d9;border:1px solid #dff3b844;backdrop-filter:blur(8px);font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}#takeover{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:3;background:#243c31ed;border:1px solid #def39b66;color:#e5f4b4;padding:10px 16px;border-radius:20px;font-size:10px;letter-spacing:.03em}#air-display{position:absolute;right:34px;top:31%;text-align:center;text-shadow:0 3px 8px #14291e99}#air-display>span,#air-display small{display:block;font-size:8px;letter-spacing:.22em}#air-display strong{display:block;font-size:54px;font-family:Manrope;font-weight:800}.instruments{position:absolute;left:32px;bottom:86px;display:flex;gap:26px;align-items:center;text-shadow:0 3px 12px #26322177}.speed strong{font-size:68px;font-weight:600;letter-spacing:-.07em;font-family:Manrope}.speed>span{font-size:9px;letter-spacing:.15em;margin-left:8px}.instrument-detail>span{display:block;font-size:9px;letter-spacing:.14em}.instrument-detail small{display:block;margin-top:8px;font-size:8px;letter-spacing:.13em;color:#f2ecd6}.wheel-lights{display:flex;gap:4px;margin-top:9px}.wheel-lights i{width:11px;height:3px;background:#edc99250}.wheel-lights i.on{background:var(--lime)}#control-bar{position:absolute;left:32px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:20px;align-items:center}#cruise{padding:11px 16px;border:1px solid #ebf0de44;border-radius:24px;background:#173d31c9;font-size:10px;backdrop-filter:blur(10px)}#cruise span{font-weight:700;margin-left:9px;color:var(--lime)}.keyboard-hint{font-size:9px;letter-spacing:.06em;text-shadow:0 2px 8px #000}.touch-controls{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;gap:12px;touch-action:none;user-select:none}.steering-pair,.pedal-pair{display:flex;gap:8px}.touch-controls button{width:64px;height:62px;border:1px solid #f2f4df60;border-radius:15px;background:#193a32cc;backdrop-filter:blur(10px);font-size:40px;touch-action:none;user-select:none}.pedal-pair button{font-size:9px;font-weight:700;letter-spacing:.08em}.pedal-pair .gas{background:#e2f6a0e8;color:#173021}.gas span{display:block;font-size:23px}.touch-controls .held{background:#dcf798;color:#183522;transform:scale(.96)}.overlay{position:absolute;z-index:5;inset:0;display:flex;align-items:center;padding:92px 44px 24px;background:linear-gradient(90deg,#122820f5 0%,#122820eb 29%,#12282085 53%,transparent 79%)}.panel{width:420px;max-width:100%}.intro-panel{max-height:100%;overflow-y:auto;scrollbar-width:thin;padding:3px 12px 8px 0}.eyebrow{font-size:9px;letter-spacing:.22em;font-weight:700;color:var(--lime);margin:0 0 10px}h1{font-family:Manrope,sans-serif;font-size:58px;font-weight:700;letter-spacing:-.07em;line-height:1.06;margin:0 0 23px}h1 em{font-style:normal;color:var(--lime)}h2{font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-.05em;line-height:1.15}.level-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.level-card{padding:0 0 8px;overflow:hidden;text-align:left;border:1px solid #baceb83d;background:#203a30aa;position:relative}.level-card[aria-pressed=true]{border-color:var(--lime);box-shadow:0 0 0 1px #dff5a035}.level-art{display:block;height:43px;position:relative;overflow:hidden;background:linear-gradient(160deg,#c6d9d4 0 42%,#bd9264 43% 61%,#815435 62%)}.redwoods .level-art{background:repeating-linear-gradient(88deg,transparent 0 15%,#594732 16% 20%,transparent 21% 29%),linear-gradient(#385642,#789773)}.beach .level-art{background:linear-gradient(170deg,#bad8db 0 45%,#417f88 46% 68%,#dbcf9d 70%)}.level-art:after{content:'';position:absolute;left:44%;bottom:-15px;width:30%;height:55px;background:#d6c4a1;transform:skewX(-17deg);border-right:2px solid #f5e6b7;border-left:2px solid #f5e6b7;opacity:.8}.redwoods .level-art:after{background:#80765b}.level-card strong{display:block;font-size:11px;margin:7px 9px 3px}.level-card small{font-size:9px;color:#b7c7b9;display:block;margin:0 9px}.level-description{font-size:11px;line-height:1.5;min-height:32px;color:#c3cec0;margin:12px 0 18px}.vehicle-label{display:block;font-size:8px;letter-spacing:.18em;margin:0 0 7px;color:#c3d1bc}select{color:var(--paper);background:#17352b;border:1px solid #b6c9b751;padding:11px 12px;max-width:100%}#vehicle-select{width:100%;font-size:13px}.vehicle-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;margin:10px 0 17px}.vehicle-caption strong{color:#dfedbb}.vehicle-caption span{color:#bfcbbd;text-align:right;font-size:9px}.primary,.secondary{width:100%;padding:14px 18px;border-radius:6px;font-weight:600;font-size:12px;line-height:1.3}.primary{background:var(--lime);border:1px solid var(--lime);color:#193122}.secondary{background:#243e325c;border:1px solid #c3d0be44;color:var(--paper);margin-top:9px}.primary:hover{background:#eaffb8}.secondary:hover{background:#43614473}.practice-row{display:flex;gap:8px;margin:8px 0;align-items:stretch}.practice-row select{font-size:11px;flex:1;min-width:0}.practice-row .secondary{width:92px;margin:0;padding:10px}.scout-button{background:transparent;border:0;color:#dcefa9;font-size:10px;padding:8px 0;text-align:left}.help{font-size:10px;color:#c3d1bf;margin:10px 0 17px;line-height:1.55}.help summary{cursor:pointer;font-size:10px;color:#e2edcc}.help p{font-size:10px;margin:9px 0}.build-label{display:block;font-size:7px;letter-spacing:.15em;color:#94a998}.compact-overlay{background:#142b24ed;backdrop-filter:blur(9px);justify-content:center;padding:24px}.compact-overlay .panel{width:360px;text-align:center;max-height:100%;overflow-y:auto}.compact-overlay .eyebrow{margin-top:7px}.compact-overlay h2{margin:17px 0}.compact-overlay p{font-size:13px;color:#c0cfc1;line-height:1.55}.quality-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin-top:11px}.quality-label select{font-size:11px;max-width:60%;padding:9px}.air-help{font-size:10px!important}.diagnostics{font-size:8px!important;white-space:pre-line;color:#93aa99!important}.arcade-link{font-size:10px;display:inline-block;margin:9px 0;color:#bacaad}.final-score{font-family:Manrope;font-size:60px;color:var(--lime);font-weight:800;letter-spacing:-.04em}.personal-best{font-size:10px!important}.score-box,.route-strip,.instruments,.tools,#control-bar,.touch-controls{transition:opacity .2s}body[data-mode=intro] .score-box,body[data-mode=loading] .score-box,body[data-mode=intro] .tools,body[data-mode=loading] .tools,body[data-mode=intro] .route-strip,body[data-mode=loading] .route-strip,body[data-mode=intro] .instruments,body[data-mode=loading] .instruments,body[data-mode=intro] #control-bar,body[data-mode=loading] #control-bar,body[data-mode=intro] .touch-controls,body[data-mode=loading] .touch-controls{visibility:hidden}.topbar .wordmark{z-index:6}.garage-overlay~.overlay{z-index:7}
@media(max-width:760px),(pointer:coarse){.touch-controls{display:flex}.keyboard-hint{display:none}.instruments{bottom:157px;left:20px}.speed strong{font-size:52px}#control-bar{bottom:93px;left:20px}#cruise{font-size:9px;padding:8px 12px}.instrument-detail>span{font-size:8px}.instrument-detail small{font-size:7px}.instruments{gap:20px}}
@media(max-width:600px){.topbar{left:20px;right:20px;top:max(20px,env(safe-area-inset-top));gap:12px}.wordmark{font-size:14px}.wordmark a{font-size:6px;margin-top:6px}.score-box strong{font-size:25px}.score-box>span,.score-box small{font-size:6px}.tools{gap:5px}.tools button{width:34px;height:34px;font-size:18px}.route-strip{left:20px;top:98px;width:178px}.route-strip b{font-size:11px;margin:7px 0 4px}.route-strip span{font-size:8px}.route-strip small{font-size:8px}.toast{font-size:10px;padding:10px 14px;top:33%;max-width:90%}#air-display{right:20px;top:27%}#air-display strong{font-size:38px}#takeover{top:186px;font-size:8px;padding:8px 11px;white-space:nowrap}.overlay{padding:77px 20px 14px;background:linear-gradient(90deg,#122820f5,#122820d9 68%,#12282091)}.panel{width:100%}.intro-panel{padding:0 2px 7px 0}h1{font-size:41px;margin-bottom:16px}.eyebrow{font-size:7px;letter-spacing:.17em;margin-bottom:10px}.level-card strong{font-size:10px;margin:6px 7px 2px}.level-card small{font-size:8px;margin:0 7px}.level-art{height:33px}.level-description{font-size:10px;min-height:0;margin:10px 0 12px}.vehicle-label{font-size:7px}#vehicle-select{font-size:11px;padding:10px}.vehicle-caption{margin:8px 0 12px}.vehicle-caption span{font-size:8px}.primary,.secondary{padding:12px 14px;font-size:11px}.help{margin:7px 0 12px}.help summary,.scout-button{font-size:9px}.build-label{font-size:6px}.compact-overlay{padding:18px;background:#142b24ef}.compact-overlay h2{font-size:28px}.touch-controls{left:14px;right:14px}.touch-controls button{width:60px;height:60px}.steering-pair,.pedal-pair{gap:7px}}
@media(max-width:350px){.touch-controls button{width:53px;height:57px}.topbar{gap:7px}.tools button{width:31px;height:31px}.wordmark{font-size:12px}h1{font-size:35px}.level-art{height:27px}.level-card strong{font-size:9px}.level-description{font-size:9px}.vehicle-caption{display:block}.vehicle-caption span{display:block;text-align:left;margin-top:3px}.help{margin-bottom:10px}.practice-row select{font-size:9px}.practice-row .secondary{width:73px}.intro-panel .primary{padding:11px}.overlay{padding-top:68px}}
@media(max-height:540px) and (min-width:600px){.overlay{padding:68px 28px 15px}.intro-panel{width:420px}h1{font-size:36px;margin-bottom:12px}.level-art{height:24px}.level-description{margin:8px 0;font-size:10px}.vehicle-caption{margin:8px 0}.intro-panel .primary{padding:10px}.intro-panel .help{margin:5px 0}.topbar{top:17px}.route-strip{top:90px;width:190px}.instruments{bottom:90px;left:26px}.speed strong{font-size:45px}.touch-controls button{height:48px}.touch-controls{bottom:14px}#control-bar{left:auto;right:27px;bottom:73px}#air-display{top:27%;right:29px}.compact-overlay{padding:17px}.compact-overlay .panel{width:min(700px,94vw);display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}.compact-overlay .panel>h2,.compact-overlay .panel>.eyebrow,.compact-overlay .panel>p,.compact-overlay .panel>.final-score,.compact-overlay .panel>.arcade-link{grid-column:1/-1}.compact-overlay .panel>h2,.compact-overlay .panel>.eyebrow,.compact-overlay .panel>p{margin:4px 0}.compact-overlay h2{font-size:24px}.compact-overlay .panel>button{margin:0;padding:8px}.compact-overlay .quality-label{margin:2px 0}.quality-label select{padding:6px}.compact-overlay .air-help{font-size:8px!important}.compact-overlay .final-score{font-size:44px}#takeover{top:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Alpine route preview: cool glacier blue with a white ridge silhouette. */
.snow .level-art{background:linear-gradient(145deg,transparent 48%,#ecf6fc 49% 66%,#91aec3 67%),linear-gradient(25deg,#9bb7cd 30%,#eff7ff 31% 49%,#b9d5e8 50%)}
.snow .level-art:after{background:#b9d8e8;border-color:#eff8ff}

/* A readable HUD over bright snow, without changing the other worlds. */
body[data-level=snow] .route-strip{background:#17394ac9;border:1px solid #dceaf32e;border-radius:10px;padding:11px 12px;width:264px;backdrop-filter:blur(8px)}
body[data-level=snow] .instruments{background:#e9f3f6df;border:1px solid #ffffff7a;border-radius:12px;padding:5px 12px;color:#193846;text-shadow:none;max-width:calc(100% - 40px)}
body[data-level=snow] .instrument-detail small{color:#345263}
body[data-level=snow] .wheel-lights i{background:#788d99}
body[data-level=snow] .wheel-lights i.on{background:#3d745b}
body[data-level=snow] .topbar,body[data-level=snow] #air-display{text-shadow:0 2px 5px #153243,0 0 16px #16394cbf}
@media(max-width:600px){body[data-level=snow] .route-strip{width:202px;padding:9px 11px}}
