:root{
  --bg1:#3b0764; --bg2:#4c1d95; --bg3:#5b21b6;
  --card:#ffffff; --ink:#1e1b2e; --ink2:#6b6685;
  --lime:#d4ff3f; --lime-ink:#26310a; --coral:#ff6b6b; --gold:#ffd23f;
  --line:#ece9f6; --ok:#22c55e;
  --r:20px; --sh:0 10px 30px rgba(30,10,60,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:"Trebuchet MS",-apple-system,Segoe UI,system-ui,sans-serif;
  color:#fff;background:radial-gradient(120% 100% at 50% 0%,var(--bg3),var(--bg1) 70%);
  background-attachment:fixed;min-height:100dvh;
  padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);
}
#app{max-width:520px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 8px}
.logo{font-weight:900;letter-spacing:-.02em;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;gap:8px}
.logo .z{background:var(--lime);color:var(--lime-ink);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:1.3rem;box-shadow:var(--sh)}
.lang{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;font:inherit;font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:999px;cursor:pointer}
.hero{text-align:center;padding:26px 6px 8px}
.hero h1{font-size:2.6rem;font-weight:900;margin:.2em 0 .1em;letter-spacing:-.03em;line-height:1}
.hero .big0{font-size:5.5rem;line-height:1;font-weight:900;color:var(--lime);text-shadow:0 6px 0 rgba(0,0,0,.15);margin:6px 0}
.hero p{color:#e6ddff;font-size:1.02rem;margin:.4em auto;max-width:26ch;opacity:.95}
.card{background:var(--card);color:var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:20px;margin:14px 0}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:16px;font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;margin:10px 0;transition:transform .08s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-dark{background:var(--ink);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
label{display:block;font-weight:700;color:var(--ink2);font-size:.82rem;margin:12px 0 5px}
input,select{width:100%;border:2px solid var(--line);border-radius:14px;padding:14px;font:inherit;font-size:1.05rem;color:var(--ink);background:#faf9ff}
input:focus,select:focus{outline:0;border-color:var(--bg3)}
.big-input{font-size:1.35rem;font-weight:800;text-align:center;padding:18px}
.seg{display:flex;gap:8px;margin-top:6px}
.seg button{flex:1;border:2px solid var(--line);background:#faf9ff;color:var(--ink2);border-radius:14px;padding:12px;font:inherit;font-weight:800;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg3);color:#fff;border-color:var(--bg3)}
.muted{color:var(--ink2)}
.center{text-align:center}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.code-box{font-size:2.4rem;font-weight:900;letter-spacing:.15em;text-align:center;color:var(--bg2);background:#f4f0ff;border-radius:16px;padding:16px;margin:8px 0}
.players{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.player{display:flex;align-items:center;justify-content:space-between;background:#f7f5ff;border-radius:14px;padding:12px 14px;font-weight:700}
.player .sc{font-weight:900;font-size:1.2rem;color:var(--bg2)}
.player.dead{opacity:.4;text-decoration:line-through}
.player .dot{width:10px;height:10px;border-radius:50%;background:#d7d0ec;display:inline-block;margin-left:8px}
.player .dot.on{background:var(--ok)}
.prompt{text-align:center;padding:10px 4px}
.prompt .cat{color:var(--lime);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.prompt h2{font-size:1.7rem;margin:.2em 0;color:#fff;font-weight:900}
.score-pop{text-align:center;padding:18px}
.score-pop .n{font-size:4.5rem;font-weight:900;line-height:1}
.score-pop .n.good{color:var(--lime)}
.score-pop .n.mid{color:var(--gold)}
.score-pop .n.bad{color:var(--coral)}
.board{margin-top:10px}
.board .b{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;font-weight:700;font-size:.95rem}
.board .b:nth-child(odd){background:#f7f5ff}
.board .b .s{font-weight:900;color:var(--bg2)}
.board .b.zero{background:var(--lime);color:var(--lime-ink)}
.tag{display:inline-block;background:var(--lime);color:var(--lime-ink);font-weight:800;font-size:.72rem;padding:3px 9px;border-radius:999px;margin-left:6px}
.foot{text-align:center;color:#cbb9f0;font-size:.78rem;padding:22px 0 6px}
.link{color:var(--bg2);font-weight:800;cursor:pointer;text-decoration:underline}
.share{display:flex;gap:8px;margin-top:8px}
.share input{font-size:.85rem;background:#f4f0ff;border-color:#e7dfff}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;box-shadow:var(--sh);z-index:9;animation:up .25s}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
.wait{text-align:center;color:#e6ddff;padding:18px}
.spin{width:34px;height:34px;border:4px solid rgba(255,255,255,.25);border-top-color:var(--lime);border-radius:50%;margin:12px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}