:root{--bg:#0a0b10;--card:#ffffff0a;--border:#ffffff1a;--text:#e9ebf4;--muted:#98a0b6;--accent:#8b5cf6;--accent-2:#ec4899;--green:#22c55e;--amber:#f59e0b;--red:#ef4444}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;color:var(--text);background:radial-gradient(60rem 40rem at 80% -10%, #8b5cf638, transparent 60%), radial-gradient(50rem 35rem at 10% 110%, #ec489929, transparent 60%), var(--bg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.container{place-items:center;min-height:100vh;padding:1.5rem;display:grid}.card{background:var(--card);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1.25rem;width:100%;max-width:26rem;padding:2rem;box-shadow:0 20px 60px #00000073}.card-wide{max-width:34rem}.hero{text-align:center}.logo{letter-spacing:-.03em;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-size:2.4rem}.tagline{color:var(--muted);margin:0 0 1.75rem;line-height:1.6}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem;font-size:.72rem}.room-code{letter-spacing:.08em;margin:0 0 1.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:2rem}.stack{text-align:left;gap:.75rem;display:grid}.label{color:var(--muted);font-size:.9rem}.input{width:100%;color:var(--text);border:1px solid var(--border);background:#ffffff0f;border-radius:.7rem;outline:none;padding:.7rem .9rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #8b5cf640}.input-lg{padding:.85rem 1rem;font-size:1.1rem}.btn{color:var(--text);border:1px solid var(--border);cursor:pointer;background:#ffffff14;border-radius:.7rem;justify-content:center;align-items:center;gap:.4rem;padding:.7rem 1.1rem;font-size:1rem;font-weight:600;transition:transform .1s,background .15s,opacity .15s;display:inline-flex}.btn:hover:not(:disabled){background:#ffffff24}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(90deg, var(--accent), var(--accent-2));border:none}.btn-primary:hover:not(:disabled){background:linear-gradient(90deg,#9d71f8,#f161a5)}.btn-lg{width:100%;padding:.9rem 1.4rem;font-size:1.05rem}.btn-ghost{color:var(--muted);background:0 0;border-color:#0000;width:100%;margin-top:1rem}.btn-ghost:hover:not(:disabled){color:var(--text);background:#ffffff0f}:root{--hud-fill:#080c088c;--hud-line:#ffffff24;--hud-text:#e8ece4;--hud-ok:#7fe066;--hud-warn:#ffd75e;--hud-danger:#ff4d4d;--hud-info:#8fd0ff}.btn-hud{letter-spacing:.3px;color:var(--hud-text);cursor:pointer;text-shadow:0 1px 2px #000000b3;pointer-events:auto;background:0 0;border:1px solid #ffffff59;border-radius:.4rem;justify-content:center;align-items:center;padding:.18rem .55rem;font-size:.72rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn-hud:hover:not(:disabled){background:#ffffff1a;border-color:#ffffffa6}.btn-hud:active:not(:disabled){transform:scale(.97)}.divider{color:var(--muted);align-items:center;gap:.75rem;margin:1.5rem 0 1rem;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.join-form{gap:.5rem;display:flex}.join-form .input{flex:1}.room-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.status{border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .7rem;font-size:.78rem;font-weight:600;display:inline-flex}.status .dot{background:var(--muted);border-radius:50%;width:.55rem;height:.55rem}.status-online{color:var(--green);border-color:#22c55e66}.status-online .dot{background:var(--green);box-shadow:0 0 8px var(--green)}.status-connecting{color:var(--amber);border-color:#f59e0b66}.status-connecting .dot{background:var(--amber);animation:1s infinite pulse}.status-offline{color:var(--red);border-color:#ef444466}.status-offline .dot{background:var(--red)}@keyframes pulse{50%{opacity:.3}}.share-box{width:100%;font:inherit;color:var(--text);border:1px dashed var(--border);cursor:pointer;background:#ffffff0d;border-radius:.7rem;justify-content:space-between;align-items:center;gap:.75rem;margin:0 0 1.5rem;padding:.7rem .9rem;transition:border-color .15s,background .15s;display:flex}.share-box:hover{border-color:var(--accent);background:#8b5cf614}.share-url{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;overflow:hidden}.share-cta{color:var(--accent);flex-shrink:0;font-size:.85rem;font-weight:600}.players-head h2{margin:0 0 .9rem;font-size:1rem}.count{color:var(--muted);font-weight:500}.players-grid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.player{border:1px solid var(--border);background:#ffffff0a;border-radius:.9rem;justify-items:center;gap:.3rem;padding:.9rem .5rem .7rem;animation:.25s pop;display:grid;position:relative}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.player.me{background:#8b5cf61a;border-color:#8b5cf68c}.player-emoji{font-size:2rem;line-height:1}.player-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.88rem;font-weight:600;overflow:hidden}.you-badge{letter-spacing:.05em;color:#fff;background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;padding:.1rem .4rem;font-size:.62rem;font-weight:700;position:absolute;top:.4rem;right:.45rem}.host-badge{filter:drop-shadow(0 1px 2px #0009);font-size:.8rem;position:absolute;top:.3rem;left:.45rem}.rounds-picker{justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;display:flex}.rounds-label{color:var(--muted);margin-right:.25rem;font-size:.85rem;font-weight:600}.round-chip{min-width:2.4rem;color:var(--muted);border:1px solid var(--border);cursor:pointer;background:#ffffff0f;border-radius:.6rem;padding:.4rem .6rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:all .15s}.round-chip:hover{color:var(--text);background:#ffffff1f}.round-chip.active{color:#fff;background:linear-gradient(90deg, var(--accent), var(--accent-2));border-color:#0000}.hint{text-align:center;color:var(--muted);margin:1.5rem 0 0;font-size:.85rem}.muted{color:var(--muted)}.error{color:var(--red);margin:0;font-size:.88rem}code{background:#ffffff14;border-radius:.35rem;padding:.1rem .35rem;font-size:.85em}.debug-state{text-align:left;margin:1.5rem 0 1rem}.debug-state summary{cursor:pointer;color:var(--muted);font-size:.85rem}.debug-state pre{max-height:14rem;color:var(--muted);border:1px solid var(--border);background:#00000059;border-radius:.6rem;margin:.5rem 0 0;padding:.75rem;font-size:.75rem;overflow:auto}.menu{gap:.6rem;margin-top:.25rem;display:grid}.menu-section{border:1px solid var(--border);background:#00000038;border-radius:14px;gap:.55rem;padding:.8rem .95rem .9rem;display:grid}.menu-head{text-align:left;align-items:center;gap:.9rem;display:flex}.menu-actions{gap:.5rem;display:flex}.menu-actions>*{flex:1}.btn-chaos{color:#fdba74;background:linear-gradient(135deg,#fb923c29,#ef444424);border-color:#fb923c8c;font-weight:800}.btn-chaos:hover{background:linear-gradient(135deg,#fb923c47,#ef44443d)}.menu-btn{text-align:left;border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;background:#ffffff12;border-radius:14px;align-items:center;gap:.9rem;padding:.85rem 1.05rem;transition:background .15s,border-color .15s,transform 50ms;display:flex}.menu-btn:hover{background:#ffffff21}.menu-btn:active{transform:scale(.99)}.menu-btn.open{background:#8b5cf61f;border-color:#8b5cf68c}.menu-ico{font-size:1.5rem;line-height:1}.menu-text{flex:1;gap:.1rem;display:grid}.menu-title{letter-spacing:.01em;font-size:1.02rem;font-weight:750}.menu-sub{color:var(--muted);font-size:.8rem}.menu-chev{color:var(--muted);font-size:.9rem;transition:transform .18s}.menu-btn.open .menu-chev{color:var(--accent);transform:rotate(180deg)}.menu-panel{border:1px solid var(--border);background:#00000038;border-radius:14px;padding:.9rem .95rem .75rem;animation:.2s ease-out menuDrop}@keyframes menuDrop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.diff-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.diff-btn{border-width:1px;font-weight:700}.diff-easy{color:#86efac;border-color:#22c55e80}.diff-easy:hover:not(:disabled){background:#22c55e2e}.diff-medium{color:#fcd34d;border-color:#f59e0b80}.diff-medium:hover:not(:disabled){background:#f59e0b29}.diff-hard{color:#fca5a5;border-color:#ef44448c}.diff-hard:hover:not(:disabled){background:#ef444429}.hud-hints{opacity:.85;white-space:nowrap;align-items:center;gap:.6rem;font-size:.68rem;display:inline-flex}.hud-hints-toggle{display:none}@media (max-width:900px){.hud-hints{display:none}.hud-hints.open{background:var(--hud-fill);border:1px solid var(--hud-line);border-radius:10px;padding:.5rem .7rem;display:inline-flex;position:absolute;top:2.4rem;right:.6rem}.hud-hints-toggle{display:inline-flex}}.result-row{animation:.32s ease-out both rowIn}@keyframes rowIn{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.player,.menu-panel,.result-row{animation:none!important}.btn,.btn-hud,.menu-btn,.round-chip{transition:none!important}}.low-q .card,.card.low-q{-webkit-backdrop-filter:none;backdrop-filter:none}