.track{display:grid;grid-template-columns:minmax(0,720px) 200px;justify-content:center;align-items:start;gap:1.5rem}@media(max-width:960px){.track{grid-template-columns:minmax(0,720px)}}.sprites{position:absolute}.cockpit{padding:.75rem;border:1px solid #7f1d1d;border-radius:1rem;background:linear-gradient(160deg,#27272a,#09090b);box-shadow:0 20px 50px -20px #000c;color:#fafafa;user-select:none;outline:none;cursor:pointer}.cockpit:focus-visible{box-shadow:0 0 0 3px #facc15}#screen{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:.5rem;font-family:ui-monospace,SF Mono,Menlo,monospace}.road{display:block;width:100%;height:100%}.road .sky{fill:url(#sky)}.road .sun{fill:#fef3c7}.road .mountains.far{fill:#6d83a8}.road .mountains.near{fill:#4b6b5a}.road .grass.light{fill:#4ade80}.road .grass.dark{fill:#22c55e}.road .rumble.light{fill:#f8fafc}.road .rumble.dark{fill:#dc2626}.road .asphalt.light{fill:#6b7280}.road .asphalt.dark{fill:#646a75}.road .asphalt.start{fill:#f8fafc}.road .lane{fill:#f1f5f9}.road .smoke ellipse{fill:url(#smoke)}.road .moo rect,.road .moo path{fill:#fff;stroke:#1e293b;stroke-width:1.5}.road .moo .join{stroke:none;transform:translateY(-1.5px)}.road .moo text{font:900 13px sans-serif;fill:#1e293b}.road .flash{fill:#fff}.car.red{color:#dc2626}.car.blue{color:#2563eb}.car.yellow{color:#eab308}.car.green{color:#16a34a}.car.purple{color:#9333ea}.car.orange{color:#ea580c}.car.white{color:#e5e7eb}.hud{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;gap:.25rem;padding:.4rem .6rem;background:linear-gradient(rgb(0 0 0 / .55),transparent);pointer-events:none}.hud .stat{display:flex;flex-direction:column;align-items:center;min-width:0}.hud span{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#fde68a}.hud strong{font-size:clamp(.8rem,2.4vw,1.15rem);text-shadow:0 1px 2px #000}.hud .time strong{font-size:clamp(1rem,3.5vw,1.6rem);color:#facc15}.hud .time.low strong{color:#f87171;animation:blink .5s steps(2) infinite}@keyframes blink{50%{opacity:.3}}.speedo{position:absolute;right:.6rem;bottom:.6rem;display:grid;justify-items:end;padding:.3rem .6rem;border-radius:.5rem;background:#0000008c;pointer-events:none}.speedo strong{font-size:clamp(1rem,3.5vw,1.6rem);line-height:1}.speedo span{font-size:.65rem;color:#fde68a}.speedo i{width:5rem;height:.3rem;margin-top:.2rem;border-radius:1rem;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444) 0 0 / 5rem 100% no-repeat,#3f3f46;clip-path:inset(0 calc((1 - var(--speed)) * 100%) 0 0 round 1rem)}.lights{position:absolute;top:22%;left:50%;display:flex;gap:.5rem;padding:.5rem .7rem;border-radius:.6rem;background:#18181b;transform:translate(-50%)}.lights i{width:1.6rem;height:1.6rem;border-radius:50%;background:#3f3f46}.lights i.red{background:#ef4444;box-shadow:0 0 12px #ef4444}.lights i.green{background:#22c55e;box-shadow:0 0 12px #22c55e}.overlay{position:absolute;inset:35% 15% auto;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 1rem;border:1px solid #facc15;border-radius:.75rem;background:#09090be0;text-align:center}.overlay strong{font-size:1.5rem;color:#facc15}.overlay span{font-size:.9rem}.pad{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"start start" "left right" "down up" "help help";gap:.4rem}.pad .key{margin:0;padding:.8rem .6rem;border:1px solid #3f3f46;border-radius:.6rem;background:#18181b;color:#fafafa;font-size:1.1rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.pad .key:hover,.pad .key.held{border-color:#facc15}.pad .key.held{background:#3f3f46}.pad .start{grid-area:start;font-size:.9rem;background:#facc15;color:#18181b}.pad .left{grid-area:left}.pad .right{grid-area:right}.pad .down{grid-area:down;font-size:.9rem}.pad .up{grid-area:up;font-size:.9rem;background:#166534}.pad .help{grid-area:help;margin:.5rem 0 0;font-size:.85rem}