:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; --acid:#d7ff27; --ink:#071013; --glass:rgba(6,14,17,.72); }
* { box-sizing:border-box; }
html,body,#app { width:100%; height:100%; margin:0; overflow:hidden; background:#071013; }
button { font:inherit; color:inherit; }
#game { display:block; width:100%; height:100%; outline:none; }
.vignette { pointer-events:none; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, transparent 48%, rgba(0,0,0,.65) 120%); }
.topbar { position:absolute; inset:24px 30px auto; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.08em; }
.brand .mark { display:grid; place-items:center; width:43px; height:43px; color:var(--ink); background:var(--acid); font:800 19px Impact, sans-serif; transform:skew(-8deg); box-shadow:0 0 24px rgba(215,255,39,.25); }
.brand b { display:block; font:800 18px/1 Impact, sans-serif; }
.brand small { font:600 8px/1 'Inter'; letter-spacing:.23em; color:#9bacb0; }
.top-actions { display:flex; gap:8px; pointer-events:auto; }
.top-actions button { border:1px solid rgba(255,255,255,.16); background:var(--glass); backdrop-filter:blur(12px); border-radius:3px; padding:10px 14px; font:700 11px 'Inter'; letter-spacing:.08em; cursor:pointer; }
.top-actions button:hover { color:var(--acid); border-color:var(--acid); }
.top-actions span { color:var(--acid); margin-left:4px; }
.telemetry { position:absolute; left:30px; bottom:48px; width:258px; padding:20px; background:linear-gradient(135deg, rgba(4,12,15,.88), rgba(9,19,22,.58)); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--acid); backdrop-filter:blur(12px); display:grid; grid-template-columns:1fr 70px; gap:6px 10px; clip-path:polygon(0 0,92% 0,100% 18%,100% 100%,0 100%); }
.speed { display:flex; align-items:baseline; gap:8px; }
.speed span { font:700 64px/.85 Impact, sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.speed small,.gear small { color:#8ca0a5; font:700 8px 'Inter'; letter-spacing:.16em; }
.gear { justify-self:end; text-align:center; border-left:1px solid rgba(255,255,255,.15); padding-left:14px; }
.gear span { display:block; color:var(--acid); font:800 36px/.95 Impact, sans-serif; }
.gear small { display:block; }
.bar-row { grid-column:1/-1; display:grid; grid-template-columns:48px 1fr 38px; align-items:center; gap:8px; margin-top:7px; }
.bar-row label,.bar-row output { font:700 8px Inter; color:#9bacb0; letter-spacing:.08em; }
.bar-row output { text-align:right; }
.bar { height:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.bar i { display:block; height:100%; width:10%; background:var(--acid); transition:width .08s linear; }
.damage .bar i { background:linear-gradient(90deg,#f4d13a,#ff4a36); }
.impact { position:absolute; inset:50% auto auto 50%; translate:-50% -50%; color:#fff; font:800 clamp(48px,10vw,140px)/1 Impact, sans-serif; letter-spacing:.06em; opacity:0; transform:scale(1.4); text-shadow:0 0 50px #ff3b20; pointer-events:none; }
.impact.show { animation:impact .45s ease-out; }
@keyframes impact { 0%{opacity:.85;transform:scale(1.35)} 100%{opacity:0;transform:scale(.95)} }
.intro { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-left:max(7vw,40px); background:linear-gradient(90deg,rgba(2,8,10,.88) 0%,rgba(2,8,10,.32) 48%,transparent 75%); transition:opacity .55s, visibility .55s; }
.intro.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.intro .eyebrow { color:var(--acid); font:700 10px Inter; letter-spacing:.28em; margin:0 0 10px; }
.intro h1 { margin:0; font:800 clamp(70px,12vw,165px)/.73 Impact, sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.intro h1 em { color:transparent; -webkit-text-stroke:2px var(--acid); font-style:normal; }
.intro>p:not(.eyebrow) { max-width:390px; color:#b6c2c5; font-size:13px; line-height:1.8; margin:32px 0; }
#startButton { color:var(--ink); background:var(--acid); border:0; padding:16px 23px; font:800 12px Inter; letter-spacing:.12em; cursor:pointer; box-shadow:0 0 30px rgba(215,255,39,.2); }
#startButton span { margin-left:35px; }
.controls-help { display:flex; flex-wrap:wrap; gap:16px; margin-top:35px; color:#7f9296; font:600 8px Inter; letter-spacing:.11em; }
kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; border:1px solid #607176; border-radius:2px; margin-right:2px; color:#b9c6c8; font:600 9px Inter; }
.toast { position:absolute; top:100px; left:50%; translate:-50%; padding:9px 18px; background:rgba(4,12,15,.8); border-bottom:2px solid var(--acid); font:700 10px Inter; letter-spacing:.2em; opacity:0; transform:translateY(-10px); transition:.25s; }
.toast.show { opacity:1; transform:translateY(0); }
.mobile { display:none; position:absolute; inset:auto 22px 25px; justify-content:space-between; pointer-events:none; }
.mobile>div { display:flex; gap:9px; pointer-events:auto; }
.mobile button { width:68px; height:68px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(5,14,17,.56); backdrop-filter:blur(8px); font:700 11px Inter; touch-action:none; }
.mobile .gas { color:var(--ink); background:rgba(215,255,39,.8); }
.mobile .brake { color:#ff7c68; }
footer { position:absolute; inset:auto 30px 18px; display:flex; justify-content:space-between; color:#66797e; font:600 8px Inter; letter-spacing:.13em; pointer-events:none; }
@media (pointer:coarse),(max-width:760px) { .mobile{display:flex}.telemetry{left:16px;bottom:112px;transform:scale(.76);transform-origin:left bottom}.topbar{inset:14px 16px auto}.brand small{display:none}.intro{padding:30px}.controls-help{display:none}footer{display:none}.top-actions button{padding:9px}.top-actions button:first-child{display:none} }
@media (max-width:480px) { .brand b{font-size:15px}.intro h1{font-size:78px}.intro>p:not(.eyebrow){max-width:270px}.telemetry{width:240px} }