:root{--bg: #0a0d16;--ink: #eaf0ff;--muted: #8ea0c8;--accent: #4ea8ff;--good: #4ddb87;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#overlay button{pointer-events:auto}.hidden{display:none!important}.panel{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(24px,5vw,90px);padding:4vh 5vw;background:radial-gradient(circle at 50% 40%,rgba(20,28,52,.86),rgba(6,8,15,.96));backdrop-filter:blur(3px)}.lobby-left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,3vh,40px);min-width:0;flex:1 1 auto;max-width:58%}.lobby-right{display:flex;flex-direction:row;align-items:center;gap:clamp(14px,2vw,32px);flex:0 1 auto;min-width:0}.qr-frame{background:#fff;padding:14px 14px 8px;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}.qr-frame canvas{display:block;width:clamp(140px,30vh,300px);height:auto;image-rendering:pixelated}.qr-glyph{display:block;margin:7px auto 1px;width:clamp(26px,4.6vh,46px);height:clamp(26px,4.6vh,46px);fill:none;stroke:#10131c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.url-row,.code-row{margin:0;display:flex;align-items:center;gap:clamp(8px,1vw,16px)}.code-row{margin-top:clamp(10px,2vh,22px)}.url-row>svg,.code-row>svg{flex:0 0 auto;width:clamp(18px,2.6vh,32px);height:clamp(18px,2.6vh,32px);fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.url-row .solid,.code-row .solid{fill:var(--muted);stroke:none}.join-text .url{font-size:clamp(16px,1.9vw,28px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.join-text .code{font-size:clamp(44px,7vw,96px);font-weight:900;letter-spacing:.16em;color:var(--accent);font-variant-numeric:tabular-nums}.players{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;min-height:54px;width:100%}.players li.taken{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:700;font-size:clamp(13px,1.3vw,19px);animation:pop .28s cubic-bezier(.2,1.4,.4,1)}.players li.slot{width:clamp(36px,3.6vw,52px);height:clamp(36px,3.6vw,52px);border-radius:50%;border:2px dashed rgba(255,255,255,.14)}.players li.slot.needed{border-color:rgba(78,168,255,.55);background:rgba(78,168,255,.07);animation:slot-throb 1.8s ease-in-out infinite}@keyframes slot-throb{50%{border-color:rgba(78,168,255,.22)}}.players .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 12px currentColor}@keyframes pop{0%{transform:scale(.7);opacity:0}}.actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}@media (max-aspect-ratio: 1/1),(max-width: 700px){.panel{flex-direction:column}.lobby-left{align-items:center;max-width:100%}.brand h1{text-align:center}.players{justify-content:center}.actions{align-items:center}.qr-frame canvas{width:clamp(120px,20vh,190px)}}.play{display:grid;place-items:center;width:clamp(64px,11vh,128px);height:clamp(64px,11vh,128px);padding:0;border-radius:50%;border:none;cursor:pointer;color:#06101a;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,#ffffff),var(--accent));box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .12s ease,filter .12s ease}.play svg{width:46%;height:46%;margin-left:6%}.play .solid{fill:currentColor}.play:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.play:disabled{cursor:default;color:var(--muted);background:rgba(255,255,255,.07);box-shadow:none}.play:disabled svg{animation:play-wait 2.2s ease-in-out infinite}@keyframes play-wait{50%{opacity:.4}}.bot-row{display:flex;gap:10px}.ghost{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--muted);font:inherit;font-size:clamp(11px,1.1vw,15px);font-weight:800;cursor:pointer}.ghost svg{width:clamp(17px,2.4vh,28px);height:clamp(17px,2.4vh,28px);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ghost .badge-glyph{width:clamp(11px,1.5vh,17px);height:clamp(11px,1.5vh,17px);stroke-width:3}.ghost .solid{fill:currentColor;stroke:none}.ghost b{font-size:clamp(13px,1.9vh,22px);font-variant-numeric:tabular-nums;color:var(--ink)}.ghost:hover:not(:disabled){color:var(--ink);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1)}.ghost:disabled{opacity:.35;cursor:default}.players .tag{display:flex;align-items:center}.players .tag svg{width:1.25em;height:1.25em;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.players .tag .solid{fill:var(--muted);stroke:none}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(90px,22vw,300px);font-weight:900;text-shadow:0 10px 60px rgba(0,0,0,.7)}.countdown .tick{animation:countPulse 1s ease-out}.countdown .tick.go svg{display:block;width:clamp(120px,30vh,380px);height:clamp(120px,30vh,380px);fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 40px rgba(78,168,255,.7))}@keyframes countPulse{0%{transform:scale(1.7);opacity:0}25%{opacity:1}to{transform:scale(.85);opacity:.15}}.hud{position:absolute;top:24px;left:0;right:0;display:flex;justify-content:center;gap:12px}.hud-pill{display:flex;align-items:center;gap:8px;padding:8px 20px;border-radius:999px;background:rgba(10,14,26,.72);border:1px solid rgba(255,255,255,.12);font-weight:800;letter-spacing:.1em;font-size:clamp(12px,1.2vw,18px);font-variant-numeric:tabular-nums}.hud-pill svg{width:clamp(15px,1.5vw,22px);height:clamp(15px,1.5vw,22px);fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 50%,rgba(10,14,26,.55),rgba(6,8,15,.85));animation:pop .4s cubic-bezier(.2,1.4,.4,1)}.result-glyph{width:clamp(46px,9vh,110px);height:clamp(46px,9vh,110px);fill:none;stroke:var(--good);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 26px rgba(77,219,135,.5));animation:pop .5s cubic-bezier(.2,1.4,.4,1)}.result-glyph.nobody{stroke:var(--muted);filter:none;opacity:.5}.result-name{margin:0;font-size:clamp(48px,9vw,140px);font-weight:900;line-height:1}.toast{position:absolute;bottom:26px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:999px;background:rgba(255,90,90,.16);border:1px solid rgba(255,90,90,.4);color:#ffc9c9;font-size:14px}a.ghost{display:inline-flex;align-items:center;text-decoration:none}