:root{color-scheme:dark;--accent:#61e5fa;--muted:#9faec4;--panel:#101a30}*{box-sizing:border-box}body{margin:0;background:#090f22;color:#eef4ff;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;border:1px solid #ffffff24;background:#ffffff07;color:inherit;border-radius:10px;padding:11px 16px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{border-color:#ffffff65;background:#ffffff10}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}header{height:64px;padding:10px 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff12;background:#090f22}.brand{display:block;flex:none}.brand img{width:34px;height:38px;object-fit:contain;background:#e9f0f4;border-radius:8px;padding:3px}header>strong{font-size:17px;letter-spacing:1px;font-style:italic}header>strong span{color:var(--accent)}#hud{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}#hud-level{font-size:10px;letter-spacing:1px;color:var(--accent)}#hud-stats{font-size:12px;color:#ced8e6}#pause{font-weight:800;min-width:42px;padding:8px}#sound{font-size:11px;padding:9px 10px}main{position:relative;height:calc(100dvh - 64px);min-height:260px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#overlay{position:absolute;inset:0;z-index:3;overflow:auto;overscroll-behavior:contain;padding:24px;background:radial-gradient(ellipse at 90% 0%,#24375c80,transparent 65%),#090f22f5}.menu{max-width:1100px;margin:auto}.menu-top{display:flex;align-items:center;justify-content:space-between;gap:14px}.eyebrow{margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font-size:clamp(24px,3.5vw,40px);line-height:1.1;letter-spacing:-1.5px;font-weight:900;margin:0 0 22px;font-style:italic}h1 em{color:var(--accent);font-style:inherit}.wallet{display:grid;text-align:right;flex:none;line-height:1.3}.wallet b{font-size:24px;color:#ffda92;font-variant-numeric:tabular-nums}.wallet span{font-size:9px;letter-spacing:1px;color:var(--muted)}h2{font-size:23px;margin:0}h3{font-size:24px;margin:0}.muted{color:var(--muted)}.tabs{display:flex;border-bottom:1px solid #ffffff17;margin-bottom:18px;gap:8px}.tabs button{border-radius:0;border:0;border-bottom:2px solid transparent;padding:12px 16px;background:none;font-weight:700}.tabs button span{margin-left:10px;color:var(--muted);font-size:11px;font-weight:500}.tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent)}.worlds{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.worlds button{padding:10px 8px;text-align:left;border-radius:8px;font-size:11px;color:#c8d4e5;min-height:58px}.worlds b{display:block;font-size:9px;letter-spacing:1px;color:var(--color);margin-bottom:4px}.worlds button[aria-pressed=true]{background:#ffffff0e;border-color:var(--color)}.chapter-line{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;gap:16px}.chapter-line h2{font-size:22px}.chapter-line p:last-child{color:var(--muted);font-size:12px}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level{padding:14px;text-align:left;background:linear-gradient(130deg,#17273d,#111a2c);position:relative;overflow:hidden}.level[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 2px var(--accent),0 0 24px #0003}.level[aria-disabled=true]{opacity:.55}.level-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}.level-num{font-size:22px;font-weight:800;font-style:italic;color:var(--accent)}.level svg{display:block;width:100%;height:66px;margin:2px 0 6px}.level strong{display:block;font-size:16px}.level .medals{color:#ffd78a;font-size:14px;letter-spacing:3px}.level .lock-label{color:#c4c9d6;font-size:11px}.level .level-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:8px}.brief{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin:18px 0 0;padding:18px 20px;background:#ffffff04;border:1px solid #ffffff12;border-radius:12px}.brief h3{font-size:21px}#message{color:#bccbdd;margin:6px 0 0;font-size:13px;max-width:580px}.objectives{display:grid;gap:5px;font-size:12px;color:#c8d4e5;align-content:center}.objective{display:flex;gap:8px;align-items:center}.objective i{font-style:normal;font-size:15px;color:#556079}.objective.earned i{color:#ffda92}.actions{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}.primary{background:var(--accent);border-color:var(--accent);color:#091321;font-size:15px;font-weight:800;min-width:210px;padding:14px 24px}.primary:hover{background:#f1f9ff;color:#091321}.controls-guide{display:flex;gap:25px;font-size:11px;color:var(--muted);border-top:1px solid #ffffff14;padding-top:13px}.controls-guide b{color:#e7eef7;font-size:9px;letter-spacing:1px;display:block}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-bottom:10px;font-size:10px;color:#8293ac}footer a{color:#a8bbd5;text-underline-offset:3px}.cars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.cars button{text-align:left;background:linear-gradient(135deg,#1c3043,#101a2e)}.cars button[aria-pressed=true]{border-color:var(--accent)}.cars svg{display:block;width:100%;height:75px;margin-bottom:10px}.cars small{display:block;color:#adbed2;margin-top:5px}#garage-feedback{min-height:24px;color:#ffda92}#result{max-width:680px;margin:25px auto;text-align:center}#result h2{font-size:clamp(30px,5vw,48px);letter-spacing:-1px}#result-stars{font-size:48px;color:#ffda92;letter-spacing:10px;margin:14px 0}#result-message{color:#b5c5da}#result-stats{display:flex;justify-content:center;gap:24px;margin:20px 0}#result-stats b{display:block;font-size:24px;font-variant-numeric:tabular-nums}#result-stats span{font-size:11px;color:var(--muted)}#result-objectives{display:inline-grid;text-align:left}#overlay[data-mode=over] .actions,#overlay[data-mode=paused] .actions{justify-content:center}#run-tip{position:absolute;top:32px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);padding:7px 14px;border-radius:8px;background:#0b1426c9;border:1px solid #ffffff16;text-align:center;font-size:12px;color:#d6e9f5;pointer-events:none}.pedals{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none}.pedals button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;width:115px;height:76px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:40px;font-weight:600;border:1px solid #d5eeff66;background:#13243cd9;box-shadow:0 5px 0 #03081777}.pedals span{font-size:12px;letter-spacing:1px}.pedals #gas{background:var(--accent);color:#081525;border-color:var(--accent)}.pedals button.held{transform:translateY(3px);box-shadow:none}
@media(max-width:650px){header{padding:8px 10px;gap:8px}header>strong{font-size:12px;letter-spacing:0}.brand img{width:27px;height:31px}#hud-level{font-size:9px;letter-spacing:0}#hud-stats{font-size:10px}#sound{font-size:9px;padding:8px 5px}#pause{min-width:33px;padding:7px}#overlay{padding:18px 14px}.menu-top{align-items:flex-start}h1{font-size:27px;max-width:220px;line-height:1.05;margin-bottom:14px}.wallet b{font-size:21px}.tabs button{padding:11px 10px}.tabs button span{font-size:10px;margin-left:7px}.worlds{grid-template-columns:repeat(3,1fr)}.worlds button{min-height:48px;padding:7px 9px}.worlds b{margin-bottom:1px}.chapter-line{margin:16px 0 10px}.chapter-line h2{font-size:19px}.chapter-line p:last-child{font-size:10px}.levels{gap:7px}.level{padding:8px}.level-num{font-size:19px}.level-top{font-size:9px}.level svg{height:48px}.level strong{font-size:12px;min-height:36px;line-height:1.3}.level .level-bottom{display:block;margin-top:3px}.level .medals{font-size:12px;letter-spacing:1px}.level .lock-label{font-size:9px}.brief{grid-template-columns:1fr;gap:12px;padding:14px;margin-top:12px}.brief h3{font-size:19px}#message{font-size:12px}.objectives{font-size:11px;gap:3px}.primary{flex:1;min-width:150px}.actions{margin:14px 0}.controls-guide{gap:12px;justify-content:space-between;font-size:10px}.controls-guide b{font-size:8px}footer{display:block;font-size:9px;margin-top:12px}footer>span{display:block;margin-top:8px}.cars{grid-template-columns:repeat(2,1fr);gap:9px}.cars button{padding:12px}.cars svg{height:65px}.pedals{left:12px;right:12px}.pedals button{width:106px;height:74px}#result-stats{gap:20px}#result-stats b{font-size:21px}#run-tip{font-size:11px;top:25px;width:max-content}}
@media(max-height:500px){header{height:48px}main{height:calc(100dvh - 48px)}#overlay{padding:12px 20px}.pedals button{height:53px;width:100px}#run-tip{top:20px}.menu-top h1{font-size:26px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

#sound[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
@media(max-width:650px){.level-bottom .lock-label{display:block;margin-top:3px}.brief h3,.brief .eyebrow{display:none}.brief{gap:10px}.brief #message{margin-top:0}.level .medals{display:block}}

/* Header and score HUD reserve their real height before the driving canvas. */
html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column}body>header{flex:none;width:100%}body>main{height:auto;min-height:0;flex:1}
