: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-tank{margin:.1rem 0;display:block}.color-picker{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.1rem;display:flex}.swatches{flex-wrap:wrap;justify-content:center;gap:.55rem;max-width:16rem;display:flex}.swatch{cursor:pointer;border:2px solid #ffffff29;border-radius:50%;width:2rem;height:2rem;padding:0;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:inset 0 -4px 6px #00000059}.swatch:hover{transform:scale(1.14)}.swatch.active{box-shadow:0 0 0 3px var(--swatch-accent,#8b5cf699), inset 0 -4px 6px #00000059;border-color:#fff;transform:scale(1.14)}.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}.landing{background:#000;display:flex;position:fixed;inset:0;overflow:hidden}.landing-art{pointer-events:none;position:absolute;inset:0}.landing-img{object-fit:cover;object-position:center;width:100%;height:100%;transform:scale(1.12);-webkit-mask-image:linear-gradient(90deg,#000 55%,#0000008c 72%,#0000 90%);mask-image:linear-gradient(90deg,#000 55%,#0000008c 72%,#0000 90%)}.landing-fade{background:linear-gradient(90deg,#0000 45%,#00000080 70%,#000 94%);position:absolute;inset:0}.landing-menu{z-index:1;flex-direction:column;justify-content:safe center;gap:1.15rem;width:min(31rem,46vw);height:100%;margin-left:auto;padding:2rem clamp(1.25rem,4.5vw,4rem) 2rem 1rem;animation:.5s ease-out both landingIn;display:flex;position:relative;overflow-y:auto}@keyframes landingIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}.landing-head .logo{align-items:center;gap:.65rem;font-size:clamp(1.8rem,2.3vw,2.2rem);display:flex}.landing-head .logo-ico{color:var(--accent);flex-shrink:0}.landing-menu .menu-ico{color:var(--accent);align-items:center;display:inline-flex}.hint-ico{vertical-align:-.13em}.landing-head .tagline{text-align:left;margin:0}.landing-menu .menu-section{background:#ffffff0b}@media (max-width:860px){.landing{min-height:100vh;position:static}.landing-art{position:fixed}.landing-img{-webkit-mask-image:linear-gradient(#000 26%,#0000 62%);mask-image:linear-gradient(#000 26%,#0000 62%)}.landing-fade{background:linear-gradient(#0000 18%,#000 62%)}.landing-menu{justify-content:flex-end;width:100%;min-height:100vh;margin:0;padding:1.25rem}}@media (prefers-reduced-motion:reduce){.landing-menu{animation:none!important}}.landing-menu{--cy:#ff4bd8;--cy-dim:#ff4bd880}.landing-menu .menu-section{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:#0c0414b8;border:1px solid #ff4bd847;border-radius:0;box-shadow:inset 0 0 24px #ff4bd80d}.landing-menu .menu-title{color:var(--cy);letter-spacing:.09em;text-transform:uppercase;font-size:.8rem}.landing-menu .menu-ico{color:var(--cy)}.landing-menu .menu-sub{color:#ffbeeb8c}.landing-head .logo-ico{color:var(--cy)}.landing-menu .menu-actions.stack{flex-direction:column;align-items:stretch}.landing-menu .btn{color:#e8e8ee;letter-spacing:.05em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:#ffffff0a;border:1px solid #ffffff38;border-radius:0;font-weight:400;position:relative;box-shadow:inset 0 0 18px #ffffff08}.landing-menu .btn:hover:not(:disabled){color:#fff;background:#ffffff1a;border-color:#ffffff8c;box-shadow:0 0 14px #ffffff2e,inset 0 0 12px #ffffff0f}.landing-menu .btn:active:not(:disabled){transform:translateY(1px)}.landing-menu .menu-actions.stack .btn:after{content:"";border-top:2px solid;border-right:2px solid;width:.5em;height:.5em;margin-left:auto;transform:rotate(45deg)}.landing-menu .input{border:1px solid var(--cy-dim);color:#ffd7f3;background:#14061ca6;border-radius:0}.landing-menu .input::placeholder{color:#ffbeeb59}.landing-menu .input:focus{border-color:var(--cy);box-shadow:0 0 12px #ff4bd84d}.landing-menu .divider{color:#ff4bd873}.landing-menu .hint{color:#ffbeeb80}.btn-cy{color:#e8e8ee;letter-spacing:.05em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:#ffffff0a;border:1px solid #ffffff38;border-radius:0;font-weight:400}.btn-cy:hover:not(:disabled){color:#fff;background:#ffffff1a;border-color:#ffffff8c;box-shadow:0 0 14px #ffffff2e}.lobby{background:#000;display:flex;position:fixed;inset:0;overflow:hidden}.lobby-panel{--cy:#ff4bd8;--cy-dim:#ff4bd880;z-index:1;flex-direction:column;justify-content:safe center;gap:.9rem;width:min(34rem,52vw);height:100%;margin-left:auto;padding:2rem clamp(1.25rem,4.5vw,4rem) 2rem 1rem;animation:.5s ease-out both landingIn;display:flex;position:relative;overflow-y:auto}.lobby-panel-narrow{width:min(28rem,46vw)}.lobby-card{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:#0c0414b8;border:1px solid #ff4bd847;border-radius:0;gap:.7rem;padding:.9rem 1rem 1rem;display:grid;box-shadow:inset 0 0 24px #ff4bd80d}.lobby-panel .eyebrow{color:var(--cy);margin-bottom:.15rem}.lobby-panel .room-code{color:#fff;text-shadow:0 0 18px #ff4bd859;margin:0}.lobby-panel .room-header{align-items:center}.lobby-panel .status{clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);text-transform:uppercase;letter-spacing:.08em;border-radius:0;font-size:.72rem}.lobby-panel .share-box{border:1px solid var(--cy-dim);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:#14061c99;border-radius:0;margin:0}.lobby-panel .share-box:hover{border-color:var(--cy);background:#ff4bd814;box-shadow:0 0 12px #ff4bd838}.lobby-panel .share-url{color:#ffbeeb8c}.lobby-panel .share-cta{color:var(--cy);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.35rem;font-size:.78rem;display:inline-flex}.lobby-title{letter-spacing:.09em;text-transform:uppercase;color:var(--cy);align-items:center;gap:.5rem;margin:0;font-size:.8rem;font-weight:750;display:flex}.lobby-title .count{color:#ffbeeb8c;font-weight:500}.lobby-panel .player{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));border-color:#ffffff24;border-radius:0}.lobby-panel .player.me{background:#ff4bd814;border-color:#ff4bd88c}.lobby-panel .you-badge{color:#ffd7f3;text-transform:uppercase;background:#ff4bd838;border:1px solid #ff4bd880;border-radius:0}.lobby-panel .host-badge{color:#fcd34d;font-size:.95rem;display:inline-flex;top:.4rem}.lobby-panel .bot-emoji{color:#ffbeebcc;display:inline-flex}.lobby-panel .rounds-picker{justify-content:flex-start;margin-top:0}.lobby-panel .rounds-label{color:#ffbeeb8c;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.35rem;min-width:5.2rem;font-size:.75rem;display:inline-flex}.lobby-panel .round-chip{clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);color:#c9c9d4;letter-spacing:.05em;background:#ffffff0a;border-color:#ffffff38;border-radius:0;align-items:center;gap:.35rem;font-weight:400;display:inline-flex}.lobby-panel .round-chip:hover{color:#fff;background:#ffffff1a}.lobby-panel .round-chip.active{border-color:var(--cy);color:#ffd7f3;background:#ff4bd824;box-shadow:0 0 10px #ff4bd840,inset 0 0 10px #ff4bd814}.lobby-panel .btn{color:#e8e8ee;letter-spacing:.05em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:#ffffff0a;border:1px solid #ffffff38;border-radius:0;font-weight:400;position:relative;box-shadow:inset 0 0 18px #ffffff08}.lobby-panel .btn:hover:not(:disabled){color:#fff;background:#ffffff1a;border-color:#ffffff8c;box-shadow:0 0 14px #ffffff2e,inset 0 0 12px #ffffff0f}.lobby-panel .btn:active:not(:disabled){transform:translateY(1px)}.lobby-panel .btn-lg:after{content:"";border-top:2px solid;border-right:2px solid;width:.5em;height:.5em;margin-left:auto;transform:rotate(45deg)}.lobby-panel .btn-ghost{box-shadow:none;clip-path:none;color:#ffbeeb80;background:0 0;border-color:#0000;margin-top:.25rem}.lobby-panel .btn-ghost:hover:not(:disabled){color:#fff;background:#ffffff0f;border-color:#fff3}.lobby-panel .hint{text-align:left;color:#ffbeeb80;margin:0}.lobby-panel .hint-ico{vertical-align:-.13em;color:var(--cy)}.lobby-panel .error{color:#ff8a8a}.lobby-panel .muted{color:#ffbeeb73;margin:0}.lobby-panel .input{border:1px solid var(--cy-dim);color:#ffd7f3;background:#14061ca6;border-radius:0}.lobby-panel .input::placeholder{color:#ffbeeb59}.lobby-panel .input:focus{border-color:var(--cy);box-shadow:0 0 12px #ff4bd84d}.lobby-panel .label{color:#ffbeeb8c;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}@media (max-width:860px){.lobby{min-height:100vh;position:static}.lobby .landing-art{position:fixed}.lobby .landing-img{-webkit-mask-image:linear-gradient(#000 26%,#0000 62%);mask-image:linear-gradient(#000 26%,#0000 62%)}.lobby .landing-fade{background:linear-gradient(#0000 18%,#000 62%)}.lobby-panel,.lobby-panel-narrow{justify-content:flex-end;width:100%;min-height:100vh;margin:0;padding:1.25rem}}@media (prefers-reduced-motion:reduce){.lobby-panel{animation:none!important}}