@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--bg: #0a0a0f;--bg-elev: #12121b;--bg-elev2: #1a1a28;--line: #2a2a3d;--fg: #e6e6f0;--fg-dim: #8b8ba7;--accent: #b3122b;--accent-2: #ff2e4d;--gold: #e8c468;--online: #3ad06a;--offline: #555;--pixel: "Press Start 2P", monospace;--term: "VT323", monospace}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1200px 600px at 50% -10%,#1b0a10 0%,transparent 60%),var(--bg);color:var(--fg);font-family:var(--term);font-size:18px;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg-elev) 0%,var(--bg) 100%)}.brand{display:flex;align-items:baseline;gap:10px}.brand-mark{font-family:var(--pixel);font-size:18px;letter-spacing:1px;color:var(--accent-2);text-shadow:0 0 12px rgba(255,46,77,.5)}.brand-sub{font-family:var(--pixel);font-size:10px;color:var(--fg-dim)}.status{display:flex;align-items:center;gap:16px}.conn{font-family:var(--pixel);font-size:9px;padding:5px 9px;border-radius:3px;border:1px solid var(--line)}.conn--connecting{color:var(--gold)}.conn--online{color:var(--online);border-color:#3ad06a66}.conn--offline{color:var(--accent-2)}.me-name{color:var(--gold);font-size:20px}.layout{flex:1;display:grid;grid-template-columns:280px 1fr 320px;min-height:0}.picker{border-right:1px solid var(--line);overflow-y:auto;padding:16px 14px;background:var(--bg-elev)}.picker-group{margin-bottom:22px}.picker-group-title{font-family:var(--pixel);font-size:10px;color:var(--fg-dim);margin:0 0 12px;text-transform:uppercase;letter-spacing:1px}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;background:var(--bg-elev2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:12px 10px;transition:transform .08s,border-color .12s,box-shadow .12s}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card--active{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2),0 0 18px #ff2e4d59}.card-engine{font-family:var(--pixel);font-size:9px;color:var(--accent-2)}.card-title{font-size:20px;line-height:1}.card-id{font-size:14px;color:var(--fg-dim)}.stage{display:flex;flex-direction:column;min-width:0;min-height:0}.stage-head{padding:12px 18px;border-bottom:1px solid var(--line)}.now-playing{margin:0;font-family:var(--pixel);font-size:13px;color:var(--fg)}.frame-host{position:relative;flex:1;min-height:0;background:#000}#gameFrame{width:100%;height:100%;border:0;display:none;background:#000}.frame-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:22px}.leaderboard{border-left:1px solid var(--line);background:var(--bg-elev);display:flex;flex-direction:column;min-height:0}.lb-title{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);font-family:var(--pixel);font-size:11px;color:var(--gold)}#leaderboard-body{overflow-y:auto;flex:1;padding:8px 0}.lb-empty{padding:24px 16px;color:var(--fg-dim);font-size:18px}.lb-list{list-style:none;margin:0;padding:0}.lb-row{display:grid;grid-template-columns:34px 14px 1fr auto;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid rgba(42,42,61,.5)}.lb-row--me{background:#ff2e4d14}.lb-rank{font-family:var(--pixel);font-size:10px;color:var(--fg-dim)}.lb-row:nth-child(1) .lb-rank{color:var(--gold)}.lb-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.lb-dot--online{background:var(--online);box-shadow:0 0 6px var(--online)}.lb-dot--offline{background:var(--offline)}.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px}.lb-score{font-family:var(--pixel);font-size:11px;color:var(--accent-2)}.race-panel{display:none}.race-panel.race-active{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding:12px 14px 14px;background:linear-gradient(180deg,rgba(179,18,43,.06) 0%,transparent 100%)}.race-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.race-title{margin:0;font-family:var(--pixel);font-size:11px;color:var(--accent-2)}.race-section-label{font-family:var(--pixel);font-size:8px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:1px;margin:10px 0 6px}.race-list,.race-online{list-style:none;margin:0;padding:0}.race-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(42,42,61,.5);font-size:18px}.race-host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-count{font-size:14px;color:var(--fg-dim)}.race-empty{color:var(--fg-dim);font-size:16px;padding:4px 0}.race-row{padding:5px 0;border-bottom:1px solid rgba(42,42,61,.5);font-size:18px}.race-row--me{color:var(--gold)}.race-tag{font-family:var(--pixel);font-size:8px;color:var(--accent-2);margin-left:6px;vertical-align:middle}.race-online-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:17px}.race-dot{width:9px;height:9px;border-radius:50%;background:var(--online);box-shadow:0 0 6px var(--online)}.race-actions{display:flex;gap:8px;align-items:center;margin-top:10px}.race-hint{color:var(--fg-dim);font-size:16px}.race-btn{font-family:var(--pixel);font-size:9px;cursor:pointer;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 10px;transition:background .12s}.race-btn:hover:not(:disabled){background:var(--accent-2)}.race-btn:disabled{opacity:.5;cursor:not-allowed}.race-join,.race-leave{background:var(--bg-elev2);border:1px solid var(--line);color:var(--fg)}.race-join:hover:not(:disabled),.race-leave:hover:not(:disabled){background:var(--bg-elev2);border-color:var(--accent-2)}.race-bars{display:flex;flex-direction:column;gap:10px}.race-bar-row{display:flex;flex-direction:column;gap:3px}.race-bar-name{font-size:16px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-bar-row--me .race-bar-name{color:var(--gold)}.race-bar-track{height:14px;border-radius:7px;background:var(--bg);border:1px solid var(--line);overflow:hidden}.race-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);transition:width .12s linear}.race-bar-row--me .race-bar-fill{background:linear-gradient(90deg,var(--gold) 0%,#fff0c0 100%)}.race-bar-fill.race-bar--done{background:var(--online)}.race-banner{text-align:center;padding:18px 12px;border-radius:8px;background:var(--bg-elev2);border:1px solid var(--line)}.race-banner--win{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 22px #e8c46859}.race-banner-title{font-family:var(--pixel);font-size:12px;color:var(--accent-2);margin-bottom:8px}.race-banner--win .race-banner-title{color:var(--gold)}.race-banner-name{font-size:22px;color:var(--fg)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#05050ad1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.modal{width:min(420px,90vw);background:var(--bg-elev);border:1px solid var(--accent);border-radius:10px;padding:28px;text-align:center;box-shadow:0 0 40px #b3122b66}.modal h2{font-family:var(--pixel);font-size:16px;color:var(--accent-2);margin:0 0 10px}.modal-sub{color:var(--fg-dim);margin:0 0 20px;font-size:18px}.modal form{display:flex;flex-direction:column;gap:12px}#signup-input{font-family:var(--term);font-size:22px;padding:10px 12px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;text-align:center}#signup-input:focus{outline:none;border-color:var(--accent-2)}#signup-submit{font-family:var(--pixel);font-size:11px;cursor:pointer;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:12px;transition:background .12s}#signup-submit:hover:not(:disabled){background:var(--accent-2)}#signup-submit:disabled{opacity:.6;cursor:wait}.modal-error{color:var(--accent-2);font-size:17px;min-height:20px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}@media (max-width: 1100px){.layout{grid-template-columns:220px 1fr 260px}}.mobile-only{display:none}.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage-btn{font-family:var(--pixel);font-size:10px;cursor:pointer;background:var(--bg-elev2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 12px}.stage-btn:active{border-color:var(--accent-2)}@media (max-width: 760px),(pointer: coarse){#app{height:100dvh}.layout{display:block;height:100dvh;min-height:0}.picker{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;border:0;touch-action:pan-y;padding:16px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}body.in-game .picker,.stage{display:none}body.in-game .stage{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;height:100dvh}body.in-game .frame-host{position:fixed;top:0;right:0;bottom:0;left:0}#gameFrame{width:100%;height:100%;border:0}#frame-placeholder,body.in-game .header,body.in-game .leaderboard,body.in-game .now-playing,body.in-game #lb-toggle,.stage-head{display:none}body.in-game .stage-head{display:flex;gap:6px;align-items:flex-start;position:fixed;top:0;left:0;right:auto;z-index:50;background:none;border:0;padding:max(8px,env(safe-area-inset-top)) 0 0 max(8px,env(safe-area-inset-left));margin:0}body.in-game #back-btn,body.in-game #fs-btn{display:flex;margin:0;padding:6px 9px;font-size:9px;opacity:.5;background:#08080c80;border:1px solid rgba(255,255,255,.15)}body.in-game #back-btn:active,body.in-game #fs-btn:active{opacity:1}}