@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#eef0ff;background:#080c20;--cyan:#23f4cc;--purple:#a78bfa;--pink:#ff438c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffee8d;outline-offset:4px}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100dvh;display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#080c20ef 0%,#080c2099 40%,#080c2000 80%),linear-gradient(0deg,#080c20b0,transparent 40%)}header{position:relative;z-index:3;display:flex;align-items:center;gap:18px;padding:25px 4%;border-bottom:1px solid #ffffff14;height:88px}.brand{font-weight:800;font-size:24px;letter-spacing:-1px;text-decoration:none;color:#fff}.brand span{color:var(--cyan)}.brand small{color:var(--pink);margin-left:6px}.header-label{color:#a6abc9;font-size:9px;letter-spacing:2px;margin-right:auto}.quiet{border:1px solid #ffffff25;color:#e5e9fa;background:#141a34b0;border-radius:10px;padding:10px 13px;font-size:12px}.quiet:hover{background:#2c3156}main{position:relative;z-index:2;max-width:1400px;margin:auto;padding:48px 5% 35px}.hero{max-width:560px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--cyan);font-weight:700;margin:0 0 20px;display:flex;gap:10px;align-items:center}.eyebrow:before{content:'';width:6px;height:6px;background:var(--cyan);box-shadow:0 0 15px var(--cyan);border-radius:50%}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:0;font-weight:800;line-height:.88;letter-spacing:-1px}h1{font-size:clamp(65px,8vw,116px)}h1 em{font-style:normal;color:var(--cyan);display:block}h1 .outline{color:transparent;-webkit-text-stroke:1px #bbc8e8}h2{font-size:52px;line-height:1}.intro{color:#b1bad4;line-height:1.7;font-size:14px;max-width:380px;margin:23px 0}.race-panel{background:linear-gradient(145deg,#171d35ed,#101528ef);border:1px solid #56628b66;border-radius:18px;padding:24px;backdrop-filter:blur(14px);box-shadow:0 25px 80px #0006;max-width:460px}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:10px;letter-spacing:2px;color:#b2bcdd}.tag{border:1px solid #2cf6cd55;color:var(--cyan);padding:5px 8px;border-radius:5px;font-size:9px;letter-spacing:1px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;font-size:10px;font-weight:700;color:#aeb9d5;letter-spacing:1px}input,select{width:100%;min-width:0;min-height:44px;background:#0a1026;color:#edf1ff;border:1px solid #35415f;border-radius:8px;padding:11px 10px;margin-top:8px;font-size:13px}select{color-scheme:dark}.primary,.secondary{border:0;border-radius:9px;font-weight:800;min-height:46px;padding:13px 18px}.primary{background:var(--cyan);color:#08342e;box-shadow:0 4px 0 #0a8e7f,0 8px 24px #1df2c520}.primary:hover{background:#8cffe7}.secondary{color:#e8eaff;background:#283452;border:1px solid #455376}.primary.wide,.secondary.wide{width:100%;margin-top:14px}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.join{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #ffffff16;align-items:end}.join label{flex:1}.join input{text-transform:uppercase;letter-spacing:4px}.join button{height:44px}.fine{font-size:11px;color:#909dbf;line-height:1.6;margin-bottom:0}.text-button{border:0;background:none;color:var(--cyan);padding:10px 0;text-decoration:underline;font-size:12px}.specs{display:flex;gap:24px;margin-top:28px;font-size:10px;letter-spacing:1px;color:#a5b2cf}.specs b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:25px;color:#fff;margin-bottom:4px}.scene-caption{position:fixed;right:5%;bottom:7%;text-align:right;font-size:11px;letter-spacing:2px;color:#b2c9e2;pointer-events:none}.scene-caption b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:32px;color:#fff}.lobby{max-width:520px}.room-code{font-family:'Barlow Condensed',sans-serif;font-size:64px;letter-spacing:12px;color:var(--cyan);margin:20px 0 8px}.seats{list-style:none;padding:0;display:grid;gap:8px}.seat{display:flex;align-items:center;gap:12px;padding:12px;background:#0c1226;border:1px solid #2a3652;border-radius:9px}.seat i{width:26px;height:38px;border:2px solid #fff5;border-radius:8px;background:var(--car);box-shadow:0 0 15px color-mix(in srgb,var(--car),transparent 75%)}.seat b{font-size:13px}.seat small{display:block;font-size:10px;color:#93a4c2;margin-top:3px}.seat button{margin-left:auto;font-size:10px}.seat.empty{border-style:dashed;color:#7384a5;font-size:12px}.lobby .race-panel{margin-top:22px}.toast,#toast{position:fixed;z-index:30;bottom:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;border-radius:10px;background:#e5fff5;color:#102c37;box-shadow:0 10px 35px #0005;padding:12px 18px;font-size:13px}#toast:empty{display:none}
body.racing header{display:none}body.racing .vignette{background:linear-gradient(#070e2788,transparent 25%,transparent 60%,#070e2777)}#hud{position:fixed;inset:0;z-index:4;pointer-events:none;padding:20px}#hud button{pointer-events:auto}.hud-top{display:flex;gap:10px;align-items:start}.hud-chip{background:#0b1435dd;border:1px solid #65749255;padding:10px 17px;border-radius:10px;min-width:115px;backdrop-filter:blur(10px)}.hud-chip small{display:block;font-size:8px;letter-spacing:2px;color:#a6b8d4;margin-bottom:4px}.hud-chip strong{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700}.hud-chip.lap strong{color:var(--cyan)}.hud-top>#exit{margin-left:auto}.hud-bottom{position:absolute;bottom:45px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:end}.speed-panel{background:#0c153bd9;border:1px solid #3f567377;padding:15px 20px;border-radius:15px;min-width:190px}.speed-panel>strong{font-family:'Barlow Condensed',sans-serif;font-size:60px;font-style:italic;line-height:1}.speed-panel>small{font-size:10px;color:#b1c9df;margin-left:8px}.speed-panel>span{display:block;font-size:8px;letter-spacing:1.1px;margin-top:8px;color:#a4bfd6}.nitro-track{height:5px;background:#263451;margin-top:10px;overflow:hidden;border-radius:8px}.nitro-track i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 15px var(--cyan);width:100%}#map{width:180px;height:131px;background:#0d1535b8;border:1px solid #57658877;border-radius:15px}#countdown{position:absolute;top:32%;left:0;right:0;text-align:center;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:100px;font-weight:800;text-shadow:0 0 35px #3bffdb99;pointer-events:none}.reset{position:absolute;right:24px;top:95px;background:#111e3cba;border:1px solid #64759366;color:#d8e9ff;padding:9px 12px;border-radius:8px;font-size:11px}.keyboard-hint{position:absolute;bottom:8px;left:0;right:0;font-size:9px;letter-spacing:2px;text-align:center;color:#bac8dd}.touch-controls{display:none}#connection{position:absolute;top:100px;left:24px;font-size:11px;background:#0a112bbd;color:#ffcb72;border-radius:8px;padding:6px 10px}#connection:empty{display:none}dialog{color:#e9efff;background:#131b32;border:1px solid #647396;border-radius:20px;padding:28px;width:min(520px,92vw);max-height:88dvh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#030718be;backdrop-filter:blur(7px)}dialog p,dialog dd{font-size:13px;line-height:1.6;color:#bdc9e0}dialog dt{color:var(--cyan);font-weight:700;font-size:13px;margin-top:15px}dialog dd{margin:4px 0 0}.close{float:right;background:transparent;color:#fff;border:0;font-size:28px}.results{max-width:520px}.results h1{font-size:70px}.results .race-panel{margin-top:25px}.result-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff1a}.result-row>strong{color:var(--car);font-size:24px}.result-row>span{flex:1;font-size:14px}.result-row small{display:block;color:#849abb;font-size:10px}.result-row>b{font-size:12px}.error-screen{background:#0b1026;padding:30px;border:1px solid #5a6a91;border-radius:18px;max-width:550px}.error-screen p{line-height:1.7;color:#b5c4e1}
@media(max-width:760px){header{height:65px;padding:15px;gap:8px}.brand{font-size:21px;margin-right:auto}.header-label{display:none}.quiet{font-size:10px;padding:9px}.vignette{background:linear-gradient(90deg,#080c20d9,#080c2066),linear-gradient(0deg,#080c20aa,transparent)}main{padding:28px 20px 30px}.hero{max-width:460px;margin:auto}h1{font-size:76px}.intro{font-size:13px;margin:16px 0 20px}.eyebrow{font-size:9px;margin-bottom:16px;letter-spacing:2px}.race-panel{padding:18px}.specs{gap:25px;margin-top:22px}.scene-caption{display:none}.fields{gap:9px}.action-row{gap:8px}.action-row button{font-size:12px;padding-inline:9px}.lobby{margin:auto}.lobby h1{font-size:60px}.room-code{font-size:55px}.hud-chip{min-width:80px;padding:8px 10px}.hud-chip strong{font-size:25px}.hud-chip small{font-size:7px;letter-spacing:1px}#hud{padding:12px}.hud-top{gap:5px}#countdown{font-size:80px;top:36%}.hud-bottom{bottom:185px;left:14px;right:14px}.speed-panel{padding:10px 13px;min-width:130px}.speed-panel>strong{font-size:43px}.speed-panel>span{font-size:6px}.speed-panel>small{font-size:8px}#map{width:120px;height:87px}.keyboard-hint{display:none}.reset{right:14px;top:88px;font-size:10px}.touch-controls{display:flex;position:absolute;left:12px;right:12px;bottom:max(20px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;gap:15px;pointer-events:none}.steering{display:flex;gap:7px}.touch-controls button{touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto;border:1px solid #82a6d477;color:#e6f5ff;background:#152344dc;border-radius:13px;width:57px;height:62px;font-weight:800;font-size:20px;box-shadow:0 4px 0 #060c1dbb}.touch-controls button.active{background:#6a73bd;border-color:white;transform:translateY(3px);box-shadow:none}.pedals{display:grid;grid-template-columns:repeat(2,57px);gap:7px}.pedals button{font-size:10px;height:54px}.pedals button[data-control=nitro]{color:#22f8ce;border-color:#2beed48a}.pedals .gas{background:#20dabb;color:#07352f}.pedals .gas.active{background:#b1ffdc}#connection{top:86px;left:14px;font-size:9px;max-width:55%}.results h1{font-size:65px}}
@media(pointer:coarse) and (min-width:761px){.touch-controls{display:flex;position:absolute;bottom:18px;left:22px;right:22px;justify-content:space-between}.touch-controls button{width:65px;height:60px;border:1px solid #9dc2d799;border-radius:12px;background:#142344dc;color:white;touch-action:none;user-select:none}.touch-controls .pedals button{font-size:10px}.hud-bottom{bottom:100px}.keyboard-hint{display:none}}
@media(max-height:500px) and (orientation:landscape){.hud-bottom{bottom:100px}.speed-panel{padding:8px 12px}.speed-panel>strong{font-size:32px}.pedals{grid-template-columns:repeat(4,52px)}.pedals button{width:52px;height:50px}.touch-controls button{height:50px}.touch-controls{bottom:15px}#map{width:100px;height:73px}.hud-chip{padding:5px 10px}.hud-chip strong{font-size:22px}.reset{top:70px}.hud-top{gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Driver feedback stays readable above the 3D chase view. */
.pursuit-button{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:12px;padding:13px 15px;color:#ffe5ec;background:linear-gradient(110deg,#491b39,#142d58);border:1px solid #ce557c88;border-radius:10px;font-weight:700}.pursuit-button span{font-size:8px;letter-spacing:1.5px;color:#fbb9ce}
.drive-status{position:absolute;top:110px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;pointer-events:none}.drive-status span{padding:8px 12px;border:1px solid #6986ad66;background:#0b1737d9;border-radius:6px;color:#b6cbe3;font-size:10px;font-weight:800;letter-spacing:1.4px}#handling[data-state="DRIFT"]{color:#ffc761;border-color:#ffbb4a}#handling[data-state="boost"]{color:#20f3ce;border-color:#20f3ce}#pursuitStatus{color:#8bb8ff;border-color:#438bff}#pursuitStatus.danger{color:#ff8ea5;border-color:#ff3157}.racing .vignette{background:linear-gradient(0deg,#080c2055,transparent 35%)}
@media(max-width:760px){#camera{font-size:8px;padding:6px;max-width:68px}.drive-status{top:128px;gap:4px}.drive-status span{font-size:8px;padding:6px 8px;letter-spacing:.7px}}
@media(max-height:500px) and (orientation:landscape){.drive-status{top:72px}}