:root{--bg: #0a0d16;--ink: #eaf0ff;--muted: #8ea0c8;--accent: #4ea8ff;--good: #4ddb87;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif}#stage{position:fixed;inset:0;display:block;width:100%;height:100%}#overlay{position:fixed;inset:0;pointer-events:none}#overlay button{pointer-events:auto}.hidden{display:none!important}.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.4vh,34px);padding:4vh 4vw;background:radial-gradient(circle at 50% 40%,#141c34db,#06080ff5);backdrop-filter:blur(3px)}.brand h1{margin:0;font-size:clamp(38px,7vw,104px);letter-spacing:.06em;font-weight:900;line-height:1;text-align:center}.brand h1 span{color:var(--accent)}.tagline{margin:10px 0 0;text-align:center;color:var(--muted);font-size:clamp(13px,1.5vw,21px)}.join{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:center}.qr-frame{background:#fff;padding:14px 14px 8px;border-radius:18px;box-shadow:0 18px 50px #0000008c}.qr-frame canvas{display:block;width:clamp(160px,17vw,260px);height:auto;image-rendering:pixelated}.qr-caption{margin:8px 0 2px;color:#10131c;font-size:13px;font-weight:700;text-align:center;letter-spacing:.08em}.join-text .label{margin:0;color:var(--muted);font-size:clamp(11px,1.1vw,15px);letter-spacing:.18em;text-transform:uppercase}.join-text .url{margin:4px 0 18px;font-size:clamp(16px,1.9vw,28px);font-weight:600;overflow-wrap:anywhere;white-space:nowrap}.join-text .code{margin:4px 0 0;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:center;gap:10px;min-height:54px}.players li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:#ffffff0f;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 .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 12px currentColor}.players .empty{background:none;border:1px dashed rgba(255,255,255,.16);color:var(--muted);font-weight:500}@keyframes pop{0%{transform:scale(.7);opacity:0}}.actions{display:flex;flex-direction:column;align-items:center;gap:10px}.play{font:inherit;font-weight:900;letter-spacing:.12em;font-size:clamp(16px,1.8vw,26px);padding:16px 46px;border-radius:999px;border:none;cursor:pointer;color:#06101a;background:linear-gradient(180deg,#7ec8ff,var(--accent));box-shadow:0 12px 34px #4ea8ff59;transition:transform .12s ease,filter .12s ease}.play:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.play:disabled{cursor:default;color:var(--muted);background:#ffffff12;box-shadow:none}.hint{margin:0;color:var(--muted);font-size:13px}.countdown{position:absolute;inset: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}@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{padding:8px 20px;border-radius:999px;background:#0a0e1ab8;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}.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 50%,#0a0e1a8c,#06080fd9);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}.result-label{margin:0;letter-spacing:.4em;color:var(--muted);font-size:clamp(13px,1.4vw,20px)}.result-name{margin:0;font-size:clamp(48px,9vw,140px);font-weight:900;line-height:1}.result-sub{margin:12px 0 0;color:var(--muted)}.toast{position:absolute;bottom:26px;left:50%;transform:translate(-50%);padding:10px 20px;border-radius:999px;background:#ff5a5a29;border:1px solid rgba(255,90,90,.4);color:#ffc9c9;font-size:14px}