*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0e14;color:#fff;font-family:system-ui,Segoe UI,Roboto,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.muted{color:#aeb8c8}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,9,16,.55);z-index:20;padding:12px;overflow:auto}
.card{background:rgba(16,22,34,.94);border:1px solid #2c3a52;border-radius:14px;padding:18px 20px;max-width:560px;width:100%;box-shadow:0 10px 40px #0008}
h1{margin:0 0 6px;font-size:34px;letter-spacing:2px;background:linear-gradient(90deg,#ffcf2e,#ff7a1a);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{margin:0 0 8px}
label{display:block;margin:10px 0}
input{background:#0d1320;border:1px solid #33445f;color:#fff;border-radius:8px;padding:9px 10px;font-size:16px;width:200px;max-width:100%}
#code{width:90px;text-transform:uppercase;text-align:center}
button{font:inherit;color:#fff;background:#25324a;border:1px solid #3a4d6e;border-radius:9px;padding:9px 14px;cursor:pointer}
button:hover{background:#2f4062}
button.big{background:linear-gradient(#ff9a1f,#e8650a);border-color:#ffb85a;font-weight:700;padding:12px 18px;font-size:17px;color:#1b1204}
button.alt{background:linear-gradient(#3a7bd5,#2a58a8);border-color:#6aa0ee;color:#fff}
button.danger{background:#6a2430;border-color:#a1404f;margin-left:8px}
button.sm{padding:5px 9px;font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;align-items:center}
.csel{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid #0008;padding:0;margin-left:8px}
.csel.sel{border-color:#fff;box-shadow:0 0 10px var(--c)}
#rooms button{display:block;margin:4px 0}
.keys{font-size:12.5px;margin:8px 0 0}.keys a{color:#8fc0ff}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud button,#touch button{pointer-events:auto}
#tl{position:absolute;left:14px;top:12px;text-shadow:0 2px 4px #000}
#lap{font-weight:800;font-size:20px}#pos{font-weight:900;font-size:40px;color:#ffcf2e;line-height:1}#rtime{font-size:15px;opacity:.9}
#tr{position:absolute;right:12px;top:10px;text-align:right}
#minimap{width:130px;height:130px;background:rgba(10,14,22,.45);border-radius:10px;display:block;margin-left:auto}
#room{font-size:12px;margin-top:4px;text-shadow:0 1px 2px #000}
#score{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);text-align:center;text-shadow:0 2px 4px #000;min-width:200px}
#sc{font-size:30px;font-weight:900;color:#fff}
#combo{position:relative;height:16px;background:#0008;border-radius:8px;overflow:hidden;margin-top:2px}
#combofill{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffcf2e,#ff5a1a)}
#mult{position:absolute;inset:0;font-size:12px;font-weight:800;line-height:16px}
#speed{position:absolute;right:16px;bottom:16px;text-align:right;text-shadow:0 2px 4px #000}
#speed b{font-size:46px;font-weight:900}#speed small{display:block;opacity:.8;margin-top:-6px}
#driftmeter{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);font-weight:900;letter-spacing:2px;font-size:20px;text-shadow:0 2px 4px #000}
#driftmeter.l1{color:#45b6ff}#driftmeter.l2{color:#ffa02e}#driftmeter.l3{color:#c15bff}#driftmeter.l4{color:#fff1a0}
#pop{position:absolute;left:50%;top:26%;transform:translateX(-50%);text-align:center;font-weight:900;font-size:26px;text-shadow:0 3px 6px #000;pointer-events:none;white-space:nowrap}
#pop div{animation:pp 1.1s ease-out forwards}
@keyframes pp{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-30px) scale(1)}}
#count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:110px;font-weight:900;color:#ffcf2e;text-shadow:0 6px 12px #000}
#toasts{position:absolute;left:14px;top:110px}
.toast{background:rgba(0,0,0,.55);padding:5px 10px;border-radius:7px;margin-top:4px;font-size:14px;animation:fo 3.8s forwards}
@keyframes fo{0%,80%{opacity:1}100%{opacity:0}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .35s}
#pausebtn{position:absolute;left:14px;bottom:16px}
#touch{position:absolute;inset:0;pointer-events:none}
.tb{position:absolute;width:76px;height:76px;border-radius:50%;background:rgba(30,40,60,.55);font-size:22px;font-weight:800;touch-action:none}
.tb.on{background:rgba(255,160,40,.7)}
.tb[data-k=left]{left:16px;bottom:70px}.tb[data-k=right]{left:106px;bottom:70px}
.tb.gas{right:16px;bottom:78px;width:92px;height:92px;background:rgba(40,160,80,.55)}
.tb.dr{right:118px;bottom:40px;font-size:13px}.tb.rev{right:118px;bottom:118px;font-size:13px}
.bar{height:10px;background:#0d1320;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#ff9a1f}
table{width:100%;border-collapse:collapse;margin:6px 0}td,th{padding:5px 6px;text-align:left;border-bottom:1px solid #2c3a52}
@media (max-width:600px){#minimap{width:96px;height:96px}#sc{font-size:24px}#speed b{font-size:34px}#pos{font-size:32px}}

.csel.rs{border-radius:10px;width:44px}
#rocket{position:absolute;right:16px;bottom:104px;width:170px;text-shadow:0 2px 4px #000}
#rocket .rl{font-size:12px;font-weight:800;letter-spacing:1px}#rocket small{font-weight:500;opacity:.75}
.rbar{height:12px;background:#0009;border-radius:7px;overflow:hidden;border:1px solid #fff3}.rbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7a1a,#ffd24a)}
#rocket.on .rbar{box-shadow:0 0 12px #ff8a1a}
.tb.rk{right:16px;bottom:182px;width:84px;height:84px;font-size:12px;background:rgba(255,120,30,.6)}