*{box-sizing:border-box;margin:0;padding:0}:root{--accent:#ff5e3a;--accent-soft:#ff5e3a2e;--panel:#0c0e18c7;--panel-border:#ffffff17;--text:#f2f4f8;--text-dim:#9aa3b5;--mono:"SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace}html,body,#app{width:100%;height:100%;color:var(--text);background:#14101c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;overflow:hidden}canvas{display:block}button{font:inherit;cursor:pointer;color:var(--text);border:none;border-radius:8px}input{font:inherit;color:var(--text);border:1px solid var(--panel-border);background:#ffffff0f;border-radius:8px;outline:none;padding:9px 12px}input:focus{border-color:var(--accent)}.lobby-backdrop{z-index:20;background:linear-gradient(#0b0618 0%,#1d0f38 38%,#3d1248 55%,#14101c 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.lobby-scene{pointer-events:none;position:absolute;inset:0}.scene-stars{background-image:radial-gradient(1.5px 1.5px at 12% 28%,#fff 50%,#0000 100%),radial-gradient(1px 1px at 28% 12%,#ffffffe6 50%,#0000 100%),radial-gradient(2px 2px at 41% 34%,#ffd1dcf2 50%,#0000 100%),radial-gradient(1px 1px at 55% 8%,#fff 50%,#0000 100%),radial-gradient(1.5px 1.5px at 67% 25%,#bed7fff2 50%,#0000 100%),radial-gradient(1px 1px at 78% 15%,#fff 50%,#0000 100%),radial-gradient(2px 2px at 88% 32%,#ffffffd9 50%,#0000 100%),radial-gradient(1px 1px at 7% 9%,#fffc 50%,#0000 100%),radial-gradient(1.5px 1.5px at 35% 20%,#ffffffb3 50%,#0000 100%),radial-gradient(1px 1px at 93% 7%,#ffd7e6e6 50%,#0000 100%),radial-gradient(1.5px 1.5px at 60% 38%,#fff9 50%,#0000 100%),radial-gradient(1px 1px at 18% 40%,#bed7ffcc 50%,#0000 100%);animation:4.5s ease-in-out infinite alternate stars-twinkle;position:absolute;inset:0 0 45%}@keyframes stars-twinkle{0%{opacity:.55}to{opacity:1}}.scene-sun{aspect-ratio:1;filter:drop-shadow(0 0 60px #ff5e7a8c);background:linear-gradient(#ffe16b 0%,#ffb347 30%,#ff5e7a 62%,#c03df0 100%);border-radius:50%;width:clamp(280px,38vmin,460px);animation:2.2s cubic-bezier(.22,1,.36,1) both sun-rise;position:absolute;top:12%;left:50%;transform:translate(-50%);-webkit-mask:linear-gradient(#000 0 55%,#0000 55% 58%,#000 58% 66%,#0000 66% 70%,#000 70% 76%,#0000 76% 81%,#000 81% 86%,#0000 86% 92%,#000 92% 100%);mask:linear-gradient(#000 0 55%,#0000 55% 58%,#000 58% 66%,#0000 66% 70%,#000 70% 76%,#0000 76% 81%,#000 81% 86%,#0000 86% 92%,#000 92% 100%)}@keyframes sun-rise{0%{opacity:0;transform:translate(-50%)translateY(12%)}to{opacity:1;transform:translate(-50%)translateY(0)}}.scene-mountains{opacity:.9;background:linear-gradient(115deg,#0000 42%,#1a0b2e 42% 58%,#0000 58%) 8% 100%/36% 100% no-repeat,linear-gradient(245deg,#0000 42%,#150826 42% 58%,#0000 58%) 92% 100%/42% 100% no-repeat,linear-gradient(115deg,#0000 45%,#220f3a 45% 55%,#0000 55%) 55% 100%/50% 80% no-repeat;height:22%;position:absolute;bottom:42%;left:0;right:0}.scene-grid-wrap{perspective:240px;perspective-origin:50% 0;background:linear-gradient(#2b0f45 0%,#160a26 100%);border-top:2px solid #ff5e7acc;height:46%;position:absolute;bottom:0;left:0;right:0;overflow:hidden;box-shadow:0 -6px 40px #ff5e7a59}.scene-grid{transform-origin:50% 0;background-image:linear-gradient(#ff4fd873 2px,#0000 2px),linear-gradient(90deg,#ff4fd859 2px,#0000 2px);background-size:100% 64px,64px 100%;height:300%;animation:1.6s linear infinite grid-scroll;position:absolute;top:0;left:-60%;right:-60%;transform:rotateX(62deg)}@keyframes grid-scroll{0%{background-position:0 0,0 0}to{background-position:0 64px,0 0}}.scene-haze{filter:blur(8px);background:linear-gradient(#0000,#ff5e7a2e 55%,#0000);height:22%;position:absolute;bottom:38%;left:0;right:0}.lobby{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);background:linear-gradient(165deg,#140c26e0,#0a0814eb);border:1px solid #ff5e7a40;border-radius:4px;width:min(820px,93vw);padding:30px 40px 24px;animation:.8s cubic-bezier(.22,1,.36,1) .25s both lobby-in;position:relative;box-shadow:0 30px 90px #0009,inset 0 0 0 1px #ffffff0a,inset 0 0 60px #ff4fd814}@keyframes lobby-in{0%{opacity:0;transform:translateY(28px)scale(.97)}to{opacity:1;transform:none}}.lobby-flag-strip{opacity:.55;background:repeating-conic-gradient(#fff 0% 25%,#0a0814 0% 50%) 0 0/16px 16px;height:8px;position:absolute;top:0;left:26px;right:0;-webkit-mask:linear-gradient(90deg,#000 60%,#0000);mask:linear-gradient(90deg,#000 60%,#0000)}.lobby-header{margin-bottom:22px}.lobby-kicker{font-family:var(--mono);letter-spacing:.35em;color:#ff4fd8;margin-bottom:6px;font-size:11px;animation:2.4s steps(2,end) infinite kicker-blink}@keyframes kicker-blink{50%{opacity:.45}}.lobby-title{letter-spacing:.06em;background:linear-gradient(#fff 20%,#ffd1dc 45%,#ff5e7a 70%,#ffb347 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px #c03df099)drop-shadow(0 0 22px #ff5e7a73);-webkit-background-clip:text;background-clip:text;font-size:clamp(38px,6vw,52px);font-style:italic;font-weight:900;line-height:.95}.lobby-title span{letter-spacing:.32em;-webkit-text-fill-color:transparent;background:linear-gradient(#9be8ff 0%,#4fd8ff 60%,#c03df0 100%);-webkit-background-clip:text;background-clip:text;font-size:.62em;display:block}.lobby .subtitle{color:var(--text-dim);font-family:var(--mono);letter-spacing:.22em;margin-top:10px;font-size:12px}.name-row{border:1px solid #ff5e7a2e;border-left:3px solid var(--accent);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);background:#ffffff08;align-items:center;gap:12px;margin-bottom:22px;padding:10px 14px;display:flex}.name-row label{color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;font-size:12px}.name-row input{background:#00000059;border-color:#ff5e7a40;flex:0 0 220px}.name-row input:focus{border-color:#ff4fd8;box-shadow:0 0 14px #ff4fd859}.name-tag{font-family:var(--mono);color:#0a0814;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:linear-gradient(120deg,#ffd84d,#ffb347);margin-left:auto;padding:3px 12px;font-size:13px;font-weight:800}.lobby-columns{grid-template-columns:1.2fr 1fr;gap:26px;display:grid}.lobby h2{text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim);align-items:center;gap:8px;margin-bottom:12px;font-size:12px;display:flex}.lobby h2 .dot{background:#4fd8ff;width:8px;height:8px;animation:1.8s ease-in-out infinite dot-pulse;transform:rotate(45deg);box-shadow:0 0 10px #4fd8ff}.lobby h2 .dot.gold{background:#ffd84d;box-shadow:0 0 10px #ffd84d}@keyframes dot-pulse{50%{opacity:.4}}.room-list{flex-direction:column;gap:8px;max-height:240px;margin-bottom:14px;display:flex;overflow-y:auto}.room-row{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);background:#ffffff09;border:1px solid #ffffff12;border-left:3px solid #4fd8ff;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;transition:background .15s,transform .15s;display:flex}.room-row:hover{background:#4fd8ff14;transform:translate(3px)}.room-row .room-name{font-weight:600}.room-row .room-count{color:var(--text-dim);font-family:var(--mono);font-size:12px}.room-row button,.create-form button{letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:linear-gradient(120deg,#ff5e3a,#ff4fd8);border-radius:0;padding:8px 18px;font-size:13px;font-weight:800;transition:filter .15s,box-shadow .15s}.room-row button:hover,.create-form button:hover{filter:brightness(1.15);box-shadow:0 0 18px #ff4fd880}.rooms-empty{color:var(--text-dim);font-family:var(--mono);padding:14px 4px;font-size:13px}.create-form{gap:8px;display:flex}.create-form input{background:#00000059;border-color:#ff5e7a40;flex:1}.create-form input:focus{border-color:#ff4fd8;box-shadow:0 0 14px #ff4fd859}.lb-list{counter-reset:lb;flex-direction:column;gap:6px;max-height:300px;list-style:none;display:flex;overflow-y:auto}.lb-list li{counter-increment:lb;background:#ffffff08;border-left:2px solid #ffd84d66;justify-content:space-between;gap:12px;padding:7px 12px;font-size:14px;display:flex}.lb-list li:first-child{background:linear-gradient(90deg,#ffd84d24,#ffffff05);border-left-color:#ffd84d}.lb-list li:before{content:counter(lb, decimal-leading-zero);color:#ffd84d;font-family:var(--mono);align-self:center;width:24px;font-size:12px;font-weight:800}.lb-list li .lb-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lb-list li .lb-time{font-family:var(--mono);color:var(--text-dim)}.lb-list li .lb-replay{width:26px;height:26px;color:var(--text);cursor:pointer;background:#ffd84d29;border:1px solid #ffd84d66;border-radius:6px;flex:none;justify-content:center;align-self:center;align-items:center;padding:0;font-size:11px;line-height:1;display:flex}.lb-list li .lb-replay:hover{color:#14110a;background:#ffd84d}.lb-empty{color:var(--text-dim);font-family:var(--mono);padding:10px 4px;font-size:13px}.replay-hud{pointer-events:none;z-index:5;position:absolute;inset:0}.replay-panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;border-radius:12px;padding:14px 18px;position:absolute;top:16px;left:16px}.replay-label{letter-spacing:.18em;text-transform:uppercase;color:#ffd84d;font-size:11px;font-weight:800}.replay-name{margin:3px 0 2px;font-size:20px;font-weight:800}.replay-time{font-family:var(--mono);color:var(--text-dim);font-size:15px}.replay-exit{background:#ffffff1a;margin-top:12px;padding:6px 14px;font-size:13px;font-weight:600}.replay-exit:hover{background:var(--accent)}.replay-finished{letter-spacing:.06em;text-transform:uppercase;color:#ffd84d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0c1499;border-radius:14px;padding:14px 30px;font-size:26px;font-weight:800;position:absolute;top:32%;left:50%;transform:translate(-50%)}.controls-hint{color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:24px;font-size:12px;display:flex}.controls-hint span{white-space:nowrap}.controls-hint b{color:#9be8ff;font-family:var(--mono);background:#4fd8ff1a;border:1px solid #4fd8ff4d;border-radius:4px;margin:0 3px;padding:2px 8px}@media (width<=720px){.lobby-columns{grid-template-columns:1fr}.name-row input{flex:auto;min-width:0}}@media (prefers-reduced-motion:reduce){.scene-grid,.scene-stars,.scene-sun,.lobby,.lobby-kicker,.lobby h2 .dot{animation:none}}.connect-error{z-index:50;color:var(--text);text-align:center;background:#0a0810eb;justify-content:center;align-items:center;font-size:17px;line-height:1.7;display:flex;position:absolute;inset:0}.hud{pointer-events:none;z-index:10;position:absolute;inset:0}.hud-panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px}.hud-top-left{pointer-events:auto;padding:12px 16px;position:absolute;top:16px;left:16px}.hud-room{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-size:12px}.hud-lap{margin:3px 0 1px;font-size:20px;font-weight:800}.hud-cp{color:var(--text-dim);font-size:12px;font-family:var(--mono)}.hud-leave{background:#ffffff1a;margin-top:10px;padding:6px 14px;font-size:13px;font-weight:600}.hud-leave:hover{background:var(--accent)}.hud-timer{text-align:center;padding:10px 26px 12px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.hud-cur-lap{font-family:var(--mono);letter-spacing:.02em;font-size:30px;font-weight:700}.hud-lap-small{font-family:var(--mono);color:var(--text-dim);justify-content:center;gap:18px;margin-top:2px;font-size:12.5px;display:flex}.hud-lap-small b{color:var(--text)}.hud-standings{min-width:230px;padding:12px 16px;position:absolute;top:16px;right:16px}.hud-standings h3{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:8px;font-size:11px}.hud-standings table{border-collapse:collapse;width:100%;font-size:13px}.hud-standings td{white-space:nowrap;padding:3px 4px}.hud-standings td.st-time{font-family:var(--mono);color:var(--text-dim);text-align:right}.hud-standings tr.me td{color:var(--accent);font-weight:700}.hud-standings tr.me td.st-time{color:var(--accent)}.hud-speed{align-items:baseline;gap:8px;padding:10px 28px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.hud-speed .speed-value{font-family:var(--mono);font-size:42px;font-weight:800}.hud-speed .speed-unit{color:var(--text-dim);letter-spacing:.08em;font-size:14px}.offtrack-warn{color:#ffd84d;letter-spacing:.18em;text-shadow:0 2px 8px #000000b3;opacity:0;font-size:15px;font-weight:800;transition:opacity .15s;position:absolute;bottom:96px;left:50%;transform:translate(-50%)}.offtrack-warn.visible{opacity:1}.toasts{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:110px;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--panel-border);border-left:4px solid var(--accent);font-size:16px;font-weight:700;font-family:var(--mono);border-radius:10px;padding:10px 22px;animation:.25s ease-out toast-in,.4s ease-in 3.2s forwards toast-out}.toast.record{color:#ffd84d;border-left-color:#ffd84d}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}.joystick{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:20;background:#0c0e1873;border-radius:50%;width:134px;height:134px;display:none;position:absolute;bottom:26px;right:22px}.joystick-knob{background:var(--accent);pointer-events:none;border-radius:50%;width:58px;height:58px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 14px #00000073}@media (pointer:coarse){.joystick{display:block}.controls-hint{display:none}.hud-speed{padding:8px 18px;left:18px;transform:none}.hud-speed .speed-value{font-size:32px}.offtrack-warn{bottom:92px;left:18px;transform:none}}@media (width<=700px){.hud-top-left{padding:8px 10px;top:10px;left:10px}.hud-room{white-space:nowrap;text-overflow:ellipsis;max-width:90px;font-size:10px;overflow:hidden}.hud-lap{margin:2px 0 1px;font-size:15px}.hud-cp{font-size:10px}.hud-leave{margin-top:6px;padding:4px 10px;font-size:11px}.hud-timer{padding:6px 14px 8px;top:10px}.hud-cur-lap{font-size:20px}.hud-lap-small{gap:10px;font-size:10px}.hud-standings{min-width:0;max-width:180px;padding:8px 10px;top:124px;left:10px;right:auto}.hud-standings h3{margin-bottom:4px;font-size:9px}.hud-standings table{font-size:11px}.hud-standings td{padding:2px 3px}.hud-standings td:nth-child(2){text-overflow:ellipsis;max-width:72px;overflow:hidden}.toasts{width:100%;top:76px}.toast{padding:8px 14px;font-size:13px}}@media (width<=500px){.hud-timer{text-align:right;left:auto;right:10px;transform:none}.hud-lap-small{justify-content:flex-end}.hud-standings{max-width:230px}.hud-standings td:nth-child(2){max-width:120px}}