:root {
  --bg: #0c0c12;
  --panel: #171720;
  --panel-2: #20202b;
  --text: #f7f7fb;
  --muted: #a8a8b7;
  --accent: #f7c948;
  --accent-2: #7c5cff;
  --good: #6ce5a2;
  --bad: #ff7b8b;
  --line: rgba(255,255,255,.09);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height:100dvh; overflow-x:hidden; }
button, input { font: inherit; }
button { border:0; cursor:pointer; }
#app { min-height:100dvh; }
.screen { min-height:100dvh; padding: calc(22px + var(--safe-top)) 18px calc(24px + var(--safe-bottom)); display:flex; flex-direction:column; gap:18px; max-width:700px; margin:0 auto; }
.center { justify-content:center; }
.logo-lockup { display:flex; align-items:center; gap:12px; }
.logo-mark { width:54px; height:54px; flex:0 0 54px; }
.wordmark { font-size:34px; font-weight:900; letter-spacing:-1.8px; }
.wordmark span { color:var(--accent); }
.kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:12px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(34px, 10vw, 58px); line-height:.95; letter-spacing:-2px; }
h2 { font-size:30px; letter-spacing:-1px; }
p.lead { color:var(--muted); font-size:17px; line-height:1.5; }
.card { background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 14px 42px rgba(0,0,0,.22); }
.stack { display:grid; gap:12px; }
.row { display:flex; align-items:center; gap:10px; }
.row.space { justify-content:space-between; }
label { color:var(--muted); font-size:13px; font-weight:700; }
input { width:100%; background:#101017; border:1px solid var(--line); color:var(--text); padding:15px 16px; border-radius:16px; outline:none; }
input:focus { border-color:rgba(247,201,72,.65); box-shadow:0 0 0 3px rgba(247,201,72,.1); }
.primary, .secondary, .danger, .ghost { min-height:52px; border-radius:17px; padding:0 17px; font-weight:850; }
.primary { background:var(--accent); color:#17130a; }
.secondary { background:var(--panel-2); color:var(--text); border:1px solid var(--line); }
.danger { background:rgba(255,123,139,.12); color:#ff9ba7; border:1px solid rgba(255,123,139,.2); }
.ghost { background:transparent; color:var(--muted); }
.primary:disabled, .secondary:disabled { opacity:.45; cursor:not-allowed; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#101017; padding:6px; border-radius:18px; }
.tab { background:transparent; color:var(--muted); min-height:42px; border-radius:13px; font-weight:800; }
.tab.active { background:var(--panel-2); color:var(--text); }
.emoji-grid { display:flex; gap:8px; flex-wrap:wrap; }
.emoji { width:46px; height:46px; border-radius:14px; background:#111119; font-size:24px; border:1px solid var(--line); }
.emoji.selected { border-color:var(--accent); background:rgba(247,201,72,.1); }
.code { font-size:clamp(38px, 14vw, 68px); letter-spacing:.16em; font-weight:950; text-align:center; color:var(--accent); line-height:1; padding-left:.16em; }
.player-list { display:grid; gap:9px; }
.player-pill { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:#111119; border:1px solid var(--line); }
.player-pill .avatar { font-size:24px; }
.player-pill .name { flex:1; font-weight:800; }
.badge { font-size:11px; font-weight:900; letter-spacing:.07em; padding:5px 8px; border-radius:99px; background:rgba(247,201,72,.12); color:var(--accent); }
.offline { opacity:.45; }
.small { color:var(--muted); font-size:13px; }
.vote-grid { display:grid; gap:12px; }
.vote-card { text-align:left; padding:18px; border-radius:20px; background:var(--panel); border:1px solid var(--line); color:var(--text); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
.vote-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(247,201,72,.1) inset; }
.vote-icon { font-size:30px; }
.vote-title { font-weight:900; font-size:18px; }
.vote-count { font-weight:900; color:var(--accent); }
.count-ring { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; margin:4px auto; background:conic-gradient(var(--accent) var(--progress, 100%), rgba(255,255,255,.08) 0); position:relative; }
.count-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--bg); }
.count-ring strong { position:relative; z-index:1; font-size:28px; }
.game-screen { padding:calc(10px + var(--safe-top)) 10px calc(12px + var(--safe-bottom)); gap:10px; }
.game-top { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.round-label { font-weight:850; color:var(--muted); }
.point-box { min-width:102px; text-align:right; }
.point-box .points { font-size:31px; font-weight:950; letter-spacing:-1px; line-height:1; }
.point-box .seconds { color:var(--muted); font-size:12px; }
.image-stage { position:relative; width:100%; aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:radial-gradient(circle at 50% 50%, #2b2b36, #121219 70%); border:1px solid var(--line); }
.reveal-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(49% 0 49% 0); will-change:clip-path; }
.image-fallback { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--muted); padding:28px; }
.slit-line { position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(247,201,72,.75); box-shadow:0 0 22px rgba(247,201,72,.55); transform:translateY(-1px); pointer-events:none; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:9px; flex:1; }
.answer { min-height:84px; border-radius:18px; background:var(--panel); color:var(--text); border:1px solid var(--line); font-weight:850; padding:12px; line-height:1.14; font-size:15px; }
.answer.selected { border-color:var(--accent); background:rgba(247,201,72,.11); transform:translateY(-1px); }
.answer.correct { background:rgba(108,229,162,.13); border-color:var(--good); }
.answer.wrong { opacity:.45; }
.breaker { min-height:100dvh; display:grid; place-items:center; text-align:center; padding:30px; background:radial-gradient(circle at center, #25202a, #0c0c12 58%); }
.breaker h1 { font-size:46px; }
.reveal-answer { position:absolute; inset:auto 12px 12px; background:rgba(12,12,18,.82); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:14px; text-align:center; }
.reveal-answer .correct-label { color:var(--good); font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.reveal-answer .answer-name { font-size:24px; font-weight:950; margin-top:3px; }
.score-wrap { min-height:100dvh; padding:calc(18px + var(--safe-top)) 16px calc(20px + var(--safe-bottom)); max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.scoreboard { position:relative; height:420px; }
.score-row { position:absolute; left:0; right:0; height:64px; display:grid; grid-template-columns:42px 42px 1fr auto; align-items:center; gap:8px; padding:0 13px; border-radius:17px; background:var(--panel); border:1px solid var(--line); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.score-rank { font-weight:950; color:var(--muted); }
.score-name { min-width:0; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.score-num { font-weight:950; font-variant-numeric:tabular-nums; }
.score-gain { color:var(--good); font-size:12px; font-weight:900; }
.progress-track { height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--accent); transition:width .15s linear; }
.podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px; align-items:end; min-height:250px; }
.podium-slot { background:var(--panel); border:1px solid var(--line); border-radius:22px 22px 10px 10px; padding:16px 8px; text-align:center; }
.podium-slot.first { min-height:220px; background:linear-gradient(180deg, rgba(247,201,72,.16), rgba(255,255,255,.035)); }
.podium-slot.second { min-height:180px; }
.podium-slot.third { min-height:150px; }
.podium-emoji { font-size:36px; }
.podium-rank { color:var(--accent); font-weight:950; font-size:30px; }
.podium-name { font-weight:900; margin-top:5px; overflow:hidden; text-overflow:ellipsis; }
.podium-score { color:var(--muted); font-weight:800; margin-top:3px; }
.overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(6,6,10,.82); backdrop-filter:blur(10px); padding:24px; text-align:center; }
.toast { position:fixed; left:50%; bottom:calc(24px + var(--safe-bottom)); transform:translateX(-50%); background:#f7f7fb; color:#111; border-radius:99px; padding:10px 16px; font-weight:800; z-index:50; max-width:90vw; }
.host-tools { display:flex; gap:8px; flex-wrap:wrap; }
.host-tools button { min-height:40px; border-radius:12px; padding:0 12px; font-size:12px; }
@media (min-width:600px) {
  .answers { gap:12px; }
  .answer { font-size:17px; min-height:92px; }
  .game-screen { padding-left:18px; padding-right:18px; }
}