:root{--amber: #ffb000;--amber-dim: #8a5e00;--crt-bg: #0b0600;--pink: #ff4fd8;--teal: #5fe0d6}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Courier New,ui-monospace,monospace;overflow:hidden}#app{width:100%;height:100%}button{font:inherit;cursor:pointer}input{font:inherit}.lobby{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 120%,#3a0f4a,#12062b 55%,#000);text-align:center;padding:20px}.lobby h1{font-size:clamp(48px,12vw,120px);margin:0;letter-spacing:.08em;color:var(--pink);text-shadow:0 0 18px var(--pink),0 0 60px #ff4fd855;font-style:italic}.lobby h1 span{color:var(--teal);text-shadow:0 0 18px var(--teal)}.lobby .tag{color:#cbb;margin:0}.lobby-card{display:flex;flex-direction:column;gap:14px;width:min(520px,100%)}.lobby .row{display:flex;gap:10px}.lobby input{flex:0 0 110px;text-align:center;font-size:28px;letter-spacing:.3em;text-transform:uppercase;background:#000;color:var(--amber);border:2px solid var(--amber-dim);padding:8px}button.big{flex:1;background:#000;color:#fff;border:2px solid var(--teal);padding:14px 18px;font-size:20px;letter-spacing:.1em;line-height:1.2}button.big small{display:block;color:#9aa;font-size:12px;letter-spacing:0}button.big:hover{background:#102}.lobby .fine{color:#887;font-size:12px;line-height:1.6;max-width:560px}.driver{position:relative;width:100%;height:100%;background:#000}.driver canvas.game{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}.hud{--hud-font: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;position:absolute;inset:0;pointer-events:none;font-family:var(--hud-font);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.85)}.hud .tr{position:absolute;right:28px;top:22px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hud .stars{display:flex;gap:3px;opacity:0;transition:opacity .4s}.hud.wanted .stars{opacity:1}.hud .stars i{display:block;width:26px;height:26px}.hud .stars svg{width:100%;height:100%;fill:#00000059;stroke:#ffffff8c;stroke-width:1.2}.hud .stars i.on svg{fill:#ffd23a;stroke:#7a4b00;filter:drop-shadow(0 0 6px rgba(255,190,40,.7))}.hud .stars i.blink{animation:blink .5s steps(2) infinite}@keyframes blink{to{opacity:.25}}.hud .score{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:#9dffb0;letter-spacing:.02em}.hud .score:before{content:"$";opacity:.8;margin-right:2px}.hud .br{position:absolute;right:28px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hud .speed{display:flex;align-items:baseline;gap:6px;font-style:italic}.hud .speed b{font-size:56px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.hud .speed small{font-size:14px;font-weight:800;color:var(--pink);letter-spacing:.12em}.hud .hp{width:150px;height:6px;background:#00000080;outline:1px solid rgba(255,255,255,.25)}.hud .hp b{display:block;height:100%;background:var(--teal);transition:width .25s}.hud .hp b.low{background:#ff3a3a;animation:blink .6s steps(2) infinite}.hud .log{position:absolute;left:28px;bottom:24px;max-width:46vw;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;line-height:1.6;color:var(--amber);text-shadow:0 0 6px rgba(255,176,0,.45),0 1px 0 #000}.hud .log div{animation:logIn .25s ease-out}.hud .log div:not(:last-child){opacity:.55}@keyframes logIn{0%{opacity:0;transform:translate(-8px)}}.hud .status{position:absolute;left:28px;top:22px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#ccc}.hud .status:empty{display:none}.hud .goal{position:absolute;left:50%;top:22px;transform:translate(-50%);font-size:15px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}.hud .goal b{color:var(--teal);margin-right:4px}.hud .goal .clock{margin-left:10px;font-size:22px;color:#fff}.hud .goal .clock.low{color:#ff5a5a;animation:blink .5s steps(2) infinite}.hud .status b{color:var(--amber);font-size:16px;letter-spacing:.2em;margin-right:8px}.hud .status .ok{color:var(--teal)}.hud .status .bad{color:#ff7070}.hud .card{position:absolute;left:50%;top:22px;transform:translate(-50%);display:none;flex-direction:column;align-items:center;gap:6px;padding:12px 18px;background:#0a0414c7;border:1px solid rgba(255,176,0,.5);font-size:12px;color:#ddd;pointer-events:auto}.hud .card.show{display:flex}.hud .card p{margin:0}.hud .card .share{font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--amber);user-select:all}.hud .hint{position:absolute;left:50%;bottom:26px;transform:translate(-50%);font-size:12px;font-weight:700;letter-spacing:.08em;color:#ffffffbf;white-space:nowrap;transition:opacity .8s}.hud .hint.gone{opacity:0}.hud .flash{position:absolute;left:50%;top:24%;transform:translate(-50%);font-size:44px;font-weight:900;font-style:italic;color:#ffd23a;opacity:0;letter-spacing:.04em;white-space:nowrap;text-shadow:0 3px 0 #000,0 0 18px rgba(255,160,0,.6)}.hud .flash.show{animation:flash 1.1s ease-out forwards}@keyframes flash{0%{opacity:0;transform:translate(-50%) scale(.7)}12%{opacity:1;transform:translate(-50%) scale(1.08)}22%{transform:translate(-50%) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-12px)}}.hud .pointer{position:absolute;left:50%;top:14%;width:0;height:0;transform:translate(-50%);opacity:0;transition:opacity .2s}.hud .pointer.show{opacity:1}.hud .pointer i{display:block;position:absolute;left:-24px;top:-24px;width:48px;height:48px;clip-path:polygon(50% 0,90% 100%,50% 75%,10% 100%);background:var(--amber)}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:radial-gradient(ellipse at center,#00000040,#000000b3);text-align:center;animation:fadeIn .6s ease-out}.overlay.show{display:flex}@keyframes fadeIn{0%{opacity:0}}.overlay h2{font-family:ui-serif,Georgia,Times New Roman,serif;font-size:clamp(56px,11vw,120px);font-weight:400;margin:0;letter-spacing:.04em}.overlay.won h2{color:var(--teal)}.overlay.wrecked h2,.overlay.busted h2,.overlay.late h2{color:#d62a2a;text-shadow:0 4px 0 #000}.overlay p{margin:0;color:#eee;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.overlay p.sub{font-size:13px;font-weight:600;color:#bbb;letter-spacing:.06em}.hud:before,.hud:after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height .18s ease-out;z-index:1}.hud:before{top:0}.hud:after{bottom:0}.hud.cine:before,.hud.cine:after{height:11vh}.hud.cine .tr,.hud.cine .br,.hud.cine .log,.hud.cine .hint,.hud.cine .status,.hud.cine .goal{opacity:0}.dispatch{position:relative;width:100%;height:100%;background:var(--crt-bg);color:var(--amber);overflow:hidden;touch-action:none}.dispatch canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.dispatch:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,#0000 0 2px,#00000047 2px 4px);mix-blend-mode:multiply}.dispatch .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}.dispatch .top{position:absolute;left:0;right:0;top:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:13px;text-shadow:0 0 8px var(--amber);pointer-events:none}.dispatch .top b{font-size:18px;letter-spacing:.2em}.dispatch .bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.dispatch .log{font-size:12px;line-height:1.45;text-shadow:0 0 6px var(--amber);white-space:pre-wrap;min-height:4.4em}.dispatch .log .new{color:#fff}.dispatch .tools{display:flex;gap:8px;pointer-events:auto}.dispatch .tools button{flex:1;background:#000;border:2px solid var(--amber);color:var(--amber);padding:12px 8px;font-size:14px;letter-spacing:.08em;text-shadow:0 0 8px var(--amber)}.dispatch .tools button:disabled{opacity:.35}.dispatch .tools button.hot{background:var(--amber);color:#000;text-shadow:none}.dispatch .heatbar{display:flex;gap:4px}.dispatch .heatbar i{flex:1;height:10px;border:1px solid var(--amber-dim)}.dispatch .heatbar i.on{background:var(--amber);box-shadow:0 0 10px var(--amber)}.dispatch .msg{position:absolute;left:50%;bottom:180px;transform:translate(-50%);width:100%;font-size:26px;letter-spacing:.15em;text-align:center;text-shadow:0 0 14px var(--amber);pointer-events:none}.dispatch .msg small{display:block;font-size:13px;letter-spacing:.05em;opacity:.8;margin-top:8px}
