/* Shared game-screen components (host + phone). */

/* Pre-game countdown */
.countdown-wrap { display:flex; align-items:center; justify-content:center; min-height:40vh; }
.big-countdown { font-family:var(--mono); font-weight:800; line-height:1;
  font-size:clamp(6rem,26vw,18rem);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.big-countdown.go { background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.big-countdown.pop { animation:cd-pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes cd-pop { from { transform:scale(1.6); opacity:.2; } to { transform:scale(1); opacity:1; } }

/* Timer */
.timer-label { font-weight:800; font-size:1.6rem; text-align:center; }
.timer-label.urgent { color:var(--bad); animation:pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.12); } }

/* Submission tracker (who has answered) */
.sub-tracker { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sub-tracker .pchip { opacity:.5; }
.sub-tracker .pchip.done { opacity:1; box-shadow:0 0 0 2px var(--good); }

/* Leaderboard / results */
.results-hero { text-align:center; }
.results-hero h1 { font-size:clamp(2rem,5vw,3.2rem); }
.champ-line { font-size:clamp(1.4rem,3.5vw,2.2rem); font-weight:800; margin-top:6px;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.leaderboard { display:flex; flex-direction:column; gap:10px; max-width:620px; width:100%; margin:0 auto; }
.lb-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--r-md);
  background:var(--card); border-left:6px solid var(--pc,#7c4dff); }
.lb-row.win { background:linear-gradient(90deg, rgba(255,210,63,.18), var(--card)); }
.lb-rank { font-size:1.5rem; width:44px; text-align:center; font-weight:800; }
.lb-ava { font-size:1.8rem; }
.lb-name { font-weight:800; font-size:1.2rem; flex:1; }
.lb-score { font-family:var(--mono); font-weight:800; font-size:1.4rem; }

/* Scoreboard strip (in-round) */
.scorestrip { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.scorestrip .pchip .sc { font-family:var(--mono); font-weight:800; margin-left:4px; }

/* Confetti — per-piece duration/delay/drift set inline for a continuous shower */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden; }
.confetti i { position:absolute; top:-24px; width:10px; height:16px; border-radius:2px;
  will-change:transform; animation-name:fall; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes fall {
  0%   { transform:translate(0, -12vh) rotate(0); opacity:1; }
  100% { transform:translate(var(--dx, 0), 112vh) rotate(var(--spin, 2turn)); opacity:.85; }
}

/* Prompt / big text areas on host */
.prompt-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 34px; max-width:1100px; text-align:center; }
/* Big-screen legibility: the kicker (board/round context) and the prompt itself
   have to read from across a room, so both are sized up generously. */
.prompt-card .kicker { color:var(--accent); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.35rem); }
.prompt-card .big { font-size:clamp(2.6rem,6.5vw,5rem); font-weight:800; line-height:1.04;
  margin-top:10px; text-wrap:balance; overflow-wrap:break-word; }

/* ── Draftdown ──────────────────────────────────────────────────────────── */
/* Host tier reference board */
.tier-board { display:flex; flex-direction:column; gap:8px; max-width:1000px; width:100%; }
.tier-row { display:flex; align-items:flex-start; gap:12px; }
.tier-price { font-family:var(--mono); font-weight:800; font-size:1.3rem; color:var(--gold); min-width:44px; text-align:right; }
.tier-items { display:flex; flex-wrap:wrap; gap:6px; }
.tier-chip { background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:.25em .7em; font-weight:700; font-size:.9rem; }

/* Host build cards + reveal grid + matchup */
.reveal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; max-width:1100px; width:100%; }
.build-card { background:var(--card); border:2px solid var(--pc,#7c4dff); border-radius:var(--r-md); padding:14px; text-align:left; }
.build-card.winner { box-shadow:0 0 0 3px var(--gold); }
.build-card.pickable { cursor:pointer; transition:transform .1s, box-shadow .15s; }
.build-card.pickable:hover { transform:translateY(-4px); box-shadow:0 0 0 3px var(--accent); }
.build-card.big { max-width:460px; margin:0 auto; }
.build-owner { display:flex; align-items:center; gap:8px; font-size:1.05rem; margin-bottom:8px; }
.build-owner .ava { font-size:1.5rem; }
.build-items { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.build-items li { display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding:3px 0; }
.build-items .bi-price { font-family:var(--mono); color:var(--gold); font-weight:700; }
.build-card .defense { margin-top:8px; font-style:italic; color:var(--ink-dim); }
.build-card .vote-count { margin-top:8px; font-weight:800; font-size:1.2rem; color:var(--accent); }
.matchup { display:flex; align-items:center; gap:18px; justify-content:center; max-width:1000px; width:100%; }
.matchup .build-card { flex:1; max-width:420px; }
.matchup .vs { font-size:2rem; font-weight:800; color:var(--brand); }

/* Blind-draft: host round options */
.draft-options-host { display:flex; flex-direction:column; gap:8px; max-width:820px; width:100%; }
.do-host { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 16px; text-align:left; }
.do-price { font-family:var(--mono); font-weight:800; font-size:1.6rem; color:var(--gold); min-width:52px; }
.do-host b { font-size:1.15rem; }
.do-desc { display:block; font-size:.85rem; }

/* Blind-draft: team cards (host + phone) */
.team-card { background:var(--card); border:2px solid var(--pc,#7c4dff); border-radius:var(--r-md); padding:14px; text-align:left; }
.team-card.winner { box-shadow:0 0 0 3px var(--gold); }
.team-card.big { max-width:480px; margin:0 auto; }
.team-card.pickable { cursor:pointer; transition:transform .1s, box-shadow .15s; }
.team-card.pickable:hover { transform:translateY(-4px); box-shadow:0 0 0 3px var(--accent); }
.team-card.voted { box-shadow:0 0 0 3px var(--gold); }
.tc-owner { display:flex; align-items:center; gap:8px; font-size:1.05rem; margin-bottom:8px; }
.tc-owner .ava { font-size:1.5rem; }
.tc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.tc-list li { display:flex; align-items:baseline; gap:8px; border-bottom:1px dashed var(--line); padding:3px 0; }
.tc-cat { color:var(--ink-mute); font-size:.78rem; font-weight:700; min-width:92px; text-transform:uppercase; letter-spacing:.03em; }
.tc-pick { flex:1; font-weight:700; }
.tc-price { font-family:var(--mono); color:var(--gold); font-weight:800; }
.tc-total { margin-top:8px; font-family:var(--mono); font-weight:800; color:var(--accent); }
.tc-votes { margin-top:6px; font-weight:800; font-size:1.2rem; color:var(--accent); }

/* AI grade chip on a team card */
.tc-ai { margin-top:10px; padding:8px 10px; border-radius:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(255,255,255,.05); border:1px solid var(--line); animation:pop .3s ease; }
.tc-ai-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); }
.tc-ai-score { font-family:var(--mono); font-weight:800; font-size:1.7rem; line-height:1; }
.tc-ai-score::after { content:"/100"; font-size:.7rem; color:var(--ink-mute); font-weight:700; margin-left:1px; }
.tc-ai-note { font-size:.9rem; font-style:italic; color:var(--ink-dim); flex:1 1 100%; }
.tc-ai.band-hi  { border-color:var(--good); } .tc-ai.band-hi  .tc-ai-score { color:var(--good); }
.tc-ai.band-mid .tc-ai-score { color:var(--gold); }
.tc-ai.band-lo  { border-color:var(--bad);  } .tc-ai.band-lo  .tc-ai-score { color:var(--bad); }
.tc-ai.pending .tc-ai-label { animation:ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 50% { opacity:.35; } }

/* AI overall verdict line under the winner headline */
.ai-verdict { margin-top:10px; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  font-size:1.05rem; color:var(--ink-dim); font-style:italic; }
.ai-badge { font-style:normal; font-weight:800; font-size:.78rem; padding:.28em .7em; border-radius:999px;
  background:var(--grad); color:#fff; white-space:nowrap; }

/* Player draft list */
.budget-bar { display:flex; align-items:baseline; gap:8px; font-size:1.4rem; font-weight:800; margin:8px 0; }
.budget-bar b { color:var(--accent); font-family:var(--mono); }
.budget-bar b.spent { color:var(--gold); }
.draft-list { display:flex; flex-direction:column; gap:8px; }
/* Phone draft header — big, and stays put while the options scroll under it. */
.draft-head { position:sticky; top:0; z-index:3; background:var(--bg-1, #140a2e); padding:6px 0 8px; margin:-2px 0 2px; }
.draft-theme { font-weight:800; font-size:.92rem; letter-spacing:.01em; color:var(--accent); margin-bottom:2px; overflow-wrap:break-word; }
.draft-cat { font-size:clamp(1.7rem,7vw,2.6rem); line-height:1.04; margin:0; overflow-wrap:break-word; }
/* Category picker (host chips + phone buttons) */
.cat-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:820px; }
.cat-chip { display:flex; align-items:center; gap:8px; background:var(--card-2); border:2px solid var(--line);
  border-radius:999px; padding:.45em 1em; font-weight:800; font-size:clamp(1rem,2.2vw,1.4rem); }
.cat-choose { display:grid; grid-template-columns:1fr; gap:10px; }
.cat-btn { display:flex; align-items:center; gap:12px; text-align:left; padding:16px 18px; border-radius:16px;
  background:var(--card); border:2px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; font-weight:800; font-size:1.2rem; }
.cat-btn.on { border-color:var(--accent); background:var(--card-2); box-shadow:inset 0 0 0 1px var(--accent); }
.cat-btn:active { transform:translateY(2px); }
.cat-emoji { font-size:1.8rem; }
/* Anonymized build card during voting */
.team-card.anon .tc-owner.anon { color:var(--ink-dim); }
.team-card.anon .tc-owner.anon .ava { filter:grayscale(1); opacity:.8; }
.tier-label { font-weight:800; color:var(--gold); margin-top:8px; font-family:var(--mono); }
.choice { text-align:left; background:var(--card); border:2px solid var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; }
.choice.on { border-color:var(--accent); background:var(--card-2); box-shadow:inset 0 0 0 1px var(--accent); }
.choice:disabled { opacity:.4; }
.choice .c-main { display:flex; justify-content:space-between; gap:10px; font-size:1.05rem; }
.choice .c-price { font-family:var(--mono); color:var(--gold); font-weight:800; }
.choice .c-desc { font-size:.82rem; margin-top:2px; }
.locked { color:var(--good); font-weight:800; text-align:center; padding:6px; }

/* Player vote cards */
.vote-card { display:block; width:100%; text-align:left; background:var(--card); border:2px solid var(--pc,#7c4dff); border-radius:var(--r-md); padding:14px; cursor:pointer; }
.vote-card.on { box-shadow:0 0 0 3px var(--accent); }
.vote-label { font-weight:800; font-size:1.1rem; margin-bottom:6px; }
.vs-mini { text-align:center; font-weight:800; color:var(--brand); margin:4px 0; }

/* ── Chainlink ──────────────────────────────────────────────────────────── */
.chain { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; max-width:1000px; }
.chain.small { gap:6px; }
.chain-arrow { color:var(--brand); font-weight:800; font-size:1.4rem; }
.link { font-family:var(--mono); font-weight:800; font-size:clamp(1.2rem,3.4vw,2.2rem); padding:.3em .6em; border-radius:var(--r-sm);
  letter-spacing:.05em; display:inline-flex; align-items:center; }
.chain.small .link { font-size:1.2rem; }
.link.fixed { background:var(--card-2); border:2px solid var(--line); }
.link.blank { background:#0f0730; border:2px dashed var(--brand); color:var(--gold); }
.link.blank .under { color:var(--ink-mute); margin-left:2px; letter-spacing:.15em; }
.link.ok { background:rgba(61,220,132,.18); border:2px solid var(--good); color:var(--good); }
.link.cur { background:#0f0730; border:2px solid var(--accent); color:var(--accent); }
.finish-order { display:flex; flex-direction:column; gap:6px; max-width:520px; width:100%; }
.fo-row { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; }
.fo-row b { min-width:34px; text-align:center; }
.fo-row span:nth-child(2) { flex:1; font-weight:700; }

/* ── Bookends ───────────────────────────────────────────────────────────── */
.bookend-req { display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0; }
.be-letter { font-family:var(--mono); font-weight:800; font-size:clamp(2.4rem,7vw,4rem); color:var(--gold);
  background:#0f0730; border:3px solid var(--gold); border-radius:var(--r-md); min-width:1.5em; text-align:center; padding:.1em .2em; }
.be-blank { font-size:clamp(1.4rem,4vw,2.4rem); color:var(--ink-mute); }
.be-mode { font-weight:800; color:var(--accent); margin-top:4px; }
.reveal-words { display:flex; flex-direction:column; gap:8px; max-width:640px; width:100%; }
.rw-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--card); border-left:6px solid var(--pc,#7c4dff); }
.rw-row.no { opacity:.65; }
.rw-row.dupe { border-left-color:var(--warn); }
.rw-ava { font-size:1.4rem; }
.rw-name { font-weight:700; min-width:80px; }
.rw-word { font-family:var(--mono); font-weight:800; font-size:1.3rem; flex:1; letter-spacing:.05em; }
.rw-row.no .rw-word { text-decoration:line-through; color:var(--ink-mute); }
.rw-note { font-size:.82rem; }
.rw-pts { font-family:var(--mono); font-weight:800; font-size:1.2rem; color:var(--good); min-width:44px; text-align:right; }
.rw-row.no .rw-pts { color:var(--ink-mute); }

/* Animated ellipsis (shared with play.css) */
.waiting-dots::after { content:"…"; animation:dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

/* ── Hot Seat ───────────────────────────────────────────────────────────── */
.hotseat-subject { display:inline-flex; align-items:center; gap:10px; padding:.35em .9em; border-radius:999px;
  background:var(--card-2); border:2px solid var(--pc,#7c4dff); font-size:1.2rem; margin:6px 0; }
.hotseat-subject .ava { font-size:1.6rem; }
.hs-answer { font-family:var(--mono); font-weight:800; font-size:clamp(3rem,10vw,5.5rem); line-height:1;
  color:var(--ink); margin:6px 0; }
.hs-answer.yes { color:var(--good); }
.hs-answer.no { color:var(--bad); }
.hs-guesses { display:flex; flex-direction:column; gap:8px; max-width:560px; width:100%; }
.hs-guess { display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:var(--r-sm);
  background:var(--card); border-left:6px solid var(--pc,#7c4dff); }
.hs-guess.miss { opacity:.6; }
.hs-guess .ava { font-size:1.4rem; }
.hs-guess .nm { flex:1; font-weight:700; }
.hs-guess .gv { font-family:var(--mono); font-weight:800; }
.hs-guess .mk { font-weight:800; min-width:44px; text-align:right; }
.hs-guess.hit .mk { color:var(--good); }
.hs-guess.miss .mk { color:var(--ink-mute); }

/* ── Fake Expert ────────────────────────────────────────────────────────── */
.fe-words { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:820px; }
.fe-word { background:var(--card-2); border:2px solid var(--line); border-radius:var(--r-md); padding:.4em .9em; font-weight:800; font-size:clamp(1rem,2.5vw,1.4rem); }
.fe-secret { font-size:clamp(2rem,7vw,3.4rem); font-weight:800; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0; }
.fe-clues { display:flex; flex-direction:column; gap:8px; max-width:640px; width:100%; }
.fe-clue { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:var(--r-md); background:var(--card); border-left:6px solid var(--pc,#7c4dff); }
.fe-clue .ava { font-size:1.5rem; }
.fe-clue .nm { font-weight:700; min-width:90px; }
.fe-clue .cw { font-weight:800; font-size:1.3rem; color:var(--accent); }
.fe-reveal { display:inline-flex; align-items:center; gap:10px; padding:.3em .9em; border-radius:999px; background:var(--card-2); border:2px solid var(--pc,#7c4dff); font-size:1.5rem; margin:4px 0; }
.fe-reveal.hit { border-color:var(--good); }
.fe-reveal.no { border-color:var(--warn); }
.fe-reveal .ava { font-size:1.8rem; }
/* Category prompt banner (phone) — the "prompt" players clue/vote about, made big. */
.fe-cat-banner { align-self:stretch; text-align:center; font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.4rem,5vw,2rem); color:#1a1030; background:var(--grad-warm); border-radius:14px;
  padding:.5em .7em; margin-bottom:6px; }
/* Big escaped/caught verdict on the result screen. */
.fe-verdict { font-weight:800; font-size:clamp(1.8rem,5vw,3rem); line-height:1.05; margin-bottom:6px; }
.fe-verdict.hit { color:var(--good); }
.fe-verdict.no { color:var(--warn); }

/* ── Survey Showdown ────────────────────────────────────────────────────── */
.survey-board { display:flex; flex-direction:column; gap:8px; max-width:720px; width:100%; }
.survey-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-md);
  background:#0f0730; border:2px solid var(--line); }
.survey-row.hit { border-color:var(--good); background:linear-gradient(90deg, rgba(61,220,132,.14), #0f0730); }
.sr-rank { font-family:var(--mono); font-weight:800; color:var(--gold); min-width:34px; }
.sr-text { flex:1; font-weight:800; font-size:clamp(1.05rem,2.6vw,1.5rem); text-transform:uppercase; letter-spacing:.02em; }
.sr-claim { display:flex; gap:4px; }
.sr-claim .ava { font-size:1.3rem; }
.sr-pts { font-family:var(--mono); font-weight:800; font-size:1.4rem; color:var(--accent); min-width:44px; text-align:right; }

/* ── Who Said It? ───────────────────────────────────────────────────────── */
.wsi-card { max-width:900px; }
.wsi-prompt { color:var(--ink-dim); font-weight:700; font-size:clamp(1.3rem,3vw,2rem); }
.wsi-prompt-sm { color:var(--ink-dim); font-weight:700; margin-bottom:2px; }
.wsi-answer { font-size:clamp(1.6rem,4.5vw,2.8rem); font-weight:800; margin-top:6px; }
.wsi-answer.sm { font-size:1.3rem; margin-top:10px; color:var(--ink-dim); }
.wsi-author { display:inline-flex; align-items:center; gap:10px; padding:.3em .9em; border-radius:999px;
  background:var(--card-2); border:2px solid var(--pc,#7c4dff); font-size:1.5rem; margin:4px 0; }
.wsi-author .ava { font-size:1.8rem; }
/* phone intake fields */
.wsi-field { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.wsi-field label { color:var(--ink); font-weight:700; font-size:1rem; }
/* phone guess options */
.wsi-options { display:flex; flex-direction:column; gap:10px; }
.wsi-opt { display:flex; align-items:center; gap:12px; text-align:left; background:var(--card); border:2px solid var(--pc,#7c4dff);
  border-radius:var(--r-md); padding:14px 16px; cursor:pointer; font-weight:800; font-size:1.2rem; color:var(--ink); }
.wsi-opt .ava { font-size:1.6rem; }
.wsi-opt.on { box-shadow:0 0 0 3px var(--gold); }

/* Phone yes/no */
.hs-cat { margin:0 auto 6px; background:var(--card-2); }
.hs-prompt { font-size:clamp(1.5rem,3.2vw,2.4rem); font-weight:800; color:var(--ink); margin:8px 0; line-height:1.12; overflow-wrap:break-word; }
.yesno { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.yn { font-family:inherit; font-weight:800; font-size:2rem; border:none; border-radius:var(--r-lg); padding:1.1em 0;
  cursor:pointer; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.35); min-height:96px; }
.yn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.yn.yes { background:linear-gradient(135deg,#3ddc84,#22a35a); }
.yn.no { background:linear-gradient(135deg,#ff6b6b,#c0392b); }
.yn.on { box-shadow:0 0 0 4px var(--gold), 0 4px 0 rgba(0,0,0,.35); }

/* ── Mind Meld ──────────────────────────────────────────────────────────────*/
.emoji.spin { display:inline-block; animation:mm-spin 1.4s linear infinite; }
@keyframes mm-spin { to { transform:rotate(360deg); } }

/* Pairing strip (host, during answer/guess) */
.mm-pairs { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:1000px; }
.mm-pair { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); }
.mm-amp { font-weight:800; color:var(--ink-mute); }

/* Phone answer/guess form */
.mm-form { display:flex; flex-direction:column; gap:14px; margin:6px 0 14px; }
.mm-field { display:flex; flex-direction:column; gap:5px; }
.mm-label { font-weight:700; font-size:1.02rem; }
.mm-input { width:100%; font-size:1.1rem; padding:.6em .7em; }

/* Results board (host) */
.mm-board { display:flex; flex-direction:column; gap:16px; width:100%; max-width:860px; }
.mm-group { background:var(--card); border:2px solid var(--line); border-radius:var(--r-md); padding:14px; text-align:left; }
.mm-group.win { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold); }
.mm-group-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.mm-rank { font-size:1.5rem; font-weight:800; min-width:2ch; }
.mm-group-name { font-weight:800; font-size:1.3rem; flex:1; }
.mm-group-score { font-family:var(--mono); font-weight:800; font-size:1.5rem; color:var(--accent); }

.mm-guesser { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.mm-guesser-h { font-weight:700; color:var(--ink-dim); margin-bottom:6px; font-size:.95rem; }
.mm-marks { display:flex; flex-direction:column; gap:4px; }
.mm-mark { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center;
  padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.03); border-left:3px solid var(--line); }
.mm-mark.ok { border-left-color:var(--good); }
.mm-mark.no { border-left-color:var(--bad); }
.mm-q { grid-column:1; font-size:.8rem; color:var(--ink-mute); text-transform:capitalize; }
.mm-ans { grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.mm-ans b { font-size:1.02rem; }
.mm-guess { font-size:.9rem; }
.mm-tick { grid-column:2; grid-row:1 / span 2; font-size:1.4rem; font-weight:800; }
.mm-mark.ok .mm-tick { color:var(--good); }
.mm-mark.no .mm-tick { color:var(--bad); }

/* ── Punchline ──────────────────────────────────────────────────────────────*/
.pl-prompt { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; text-align:center; text-wrap:balance; line-height:1.08; }
.pl-prompt-sm { font-size:1.3rem; font-weight:700; color:var(--ink-dim); }
.pl-final-prompt { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; text-wrap:balance; margin-top:6px;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }

.pl-versus { display:flex; align-items:stretch; justify-content:center; gap:16px; flex-wrap:wrap; max-width:1000px; width:100%; }
.pl-answer { flex:1 1 340px; max-width:460px; background:var(--card); border:2px solid var(--line); border-radius:var(--r-md);
  padding:20px; display:flex; flex-direction:column; gap:12px; position:relative; }
.pl-answer.a { border-color:#22c5ff; }
.pl-answer.b { border-color:#ff4d9d; }
.pl-answer.reveal.win { box-shadow:0 0 0 3px var(--gold); }
.pl-tag { display:inline-flex; align-items:center; justify-content:center; width:2em; height:2em; border-radius:50%;
  font-weight:800; font-size:1rem; background:rgba(255,255,255,.08); color:var(--ink); }
.pl-answer.a .pl-tag { background:#22c5ff; color:#04222e; }
.pl-answer.b .pl-tag { background:#ff4d9d; color:#3a0420; }
.pl-answer .pl-text { font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; line-height:1.25; }
.pl-vs { align-self:center; font-family:var(--mono); font-weight:800; font-size:1.6rem; color:var(--ink-mute); min-width:3ch; text-align:center; }
.pl-by { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
.pl-by .ava { font-size:1.3rem; }
.pl-votes { margin-left:auto; font-weight:800; color:var(--accent); font-size:.95rem; }

.pl-final-list { display:flex; flex-direction:column; gap:10px; width:100%; max-width:720px; }
.pl-final-ans { display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid var(--line);
  border-radius:var(--r-md); padding:12px 16px; }
.pl-final-ans .pl-text { font-size:1.15rem; font-weight:700; flex:1; }
.pl-final-ans.reveal.win { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.pl-final-ans .pl-by { border-top:0; padding-top:0; margin-top:0; }

/* Phone: write fields + vote buttons */
.pl-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.pl-plabel { font-weight:800; font-size:1.05rem; }
.pl-vote-opts { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.pl-vote-btn { display:flex; align-items:center; gap:12px; text-align:left; padding:16px; border-radius:var(--r-md);
  background:var(--card); border:2px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; }
.pl-vote-btn .pl-text { font-size:1.15rem; font-weight:700; }
.pl-vote-btn:active { transform:translateY(2px); }
.pl-vote-btn.on { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold); }

/* ── Poker (Texas Hold'em) ──────────────────────────────────────────────────*/
/* Cards */
.pk-card { width:44px; height:62px; border-radius:7px; background:#fdfdfb; color:#111; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.35); flex:0 0 auto; }
.pk-card.big { width:66px; height:94px; }
.pk-card.sm { width:34px; height:48px; }
.pk-card.red { color:#d21f3c; } .pk-card.black { color:#141414; }
.pk-card .pk-rank { font-size:1.15rem; } .pk-card.big .pk-rank { font-size:1.7rem; }
.pk-card .pk-suit { font-size:1.3rem; } .pk-card.big .pk-suit { font-size:2rem; }
.pk-card.back { background:repeating-linear-gradient(45deg,#6a4bd6,#6a4bd6 6px,#4a2fb0 6px,#4a2fb0 12px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.35); }
.pk-card.slot { background:transparent; border:2px dashed var(--line); box-shadow:none; }

/* Host felt / table */
.pk-felt { background:radial-gradient(ellipse at center, #1f7a4d 0%, #14603b 60%, #0d4429 100%);
  border:6px solid #3a2a12; border-radius:120px/70px; padding:22px; max-width:1000px; margin:0 auto 18px; box-shadow:var(--shadow); }
.pk-center { display:flex; flex-direction:column; align-items:center; gap:10px; }
.pk-pot { font-family:var(--mono); font-weight:800; font-size:1.5rem; color:#ffe9a8; }
.pk-board { display:flex; gap:8px; justify-content:center; min-height:96px; align-items:center; }
.pk-street { font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; color:rgba(255,255,255,.7); }

.pk-seats { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:1000px; margin:0 auto; }
.pk-seat { background:var(--card); border:2px solid var(--line); border-radius:var(--r-md); padding:10px 12px; min-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.pk-seat.turn { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold); }
.pk-seat.folded { opacity:.45; }
.pk-seat.out { opacity:.3; filter:grayscale(1); }
.pk-seat.winner { border-color:var(--good); box-shadow:0 0 0 3px var(--good); }
.pk-seat-head { display:flex; align-items:center; gap:6px; font-size:.95rem; }
.pk-seat-head .ava { font-size:1.3rem; }
.pk-dealer { background:#fff; color:#111; font-weight:800; font-size:.7rem; width:1.5em; height:1.5em; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; }
.pk-hole { display:flex; gap:4px; min-height:48px; align-items:center; }
.pk-stack { font-family:var(--mono); font-weight:800; color:var(--accent); }
.pk-bet { font-size:.82rem; font-weight:800; color:#ffe9a8; background:rgba(0,0,0,.25); padding:.1em .6em; border-radius:999px; }
.pk-last { font-size:.8rem; color:var(--ink-mute); font-style:italic; }
.pk-eval { font-size:.78rem; font-weight:700; color:var(--good); text-align:center; }
.pk-won { position:absolute; top:-10px; right:-8px; background:var(--good); color:#04220f; font-weight:800; font-size:.85rem;
  padding:.2em .6em; border-radius:999px; animation:pop .3s ease; }
.pk-log { max-width:520px; margin:16px auto 0; font-size:.85rem; color:var(--ink-dim); text-align:center; line-height:1.5; }

/* Player phone */
.pk-phead { display:flex; align-items:center; gap:14px; justify-content:space-between; }
.pk-myhole { display:flex; gap:8px; }
.pk-mystack { font-family:var(--mono); font-weight:800; font-size:1.3rem; color:var(--accent); }
.pk-potline { text-align:center; font-weight:800; color:var(--ink-dim); margin:10px 0 6px; letter-spacing:.04em; }
.pk-myboard { display:flex; gap:6px; justify-content:center; margin-bottom:14px; }
.pk-actions { display:flex; flex-direction:column; gap:10px; }
.pk-arow { display:flex; gap:8px; }
.pk-raise { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; }
.pk-raiseval { text-align:center; font-weight:800; font-size:1.1rem; color:var(--gold); }
.pk-slider { width:100%; accent-color:var(--brand); }

/* Cheat sheet */
.pk-cheat-head h1 { font-size:1.5rem; }
.pk-made { font-weight:800; color:var(--good); }
.pk-ranks { display:flex; flex-direction:column; gap:6px; margin:10px 0 16px; }
.pk-rank-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); }
.pk-rank-main { flex:1; }
.pk-rank-main b { font-size:1.02rem; } .pk-rank-desc { display:block; font-size:.8rem; color:var(--ink-mute); }
.pk-rank-tag { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); white-space:nowrap; }
.pk-rank-row.have { border-left-color:var(--good); background:rgba(61,220,132,.12); }
.pk-rank-row.have .pk-rank-tag { color:var(--good); }
.pk-rank-row.draw { border-left-color:var(--gold); }
.pk-rank-row.draw .pk-rank-tag { color:var(--gold); }
.pk-rank-row.beaten { opacity:.55; }
.pk-rank-row.impossible { opacity:.32; }

/* Poker: hand-strength meter, why-block, hints toggle */
.pk-strength { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:12px; }
.pk-strength-top { display:flex; justify-content:space-between; align-items:baseline; }
.pk-strength-pct { font-family:var(--mono); font-weight:800; font-size:1.3rem; }
.pk-strength-bar { height:12px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin:8px 0 6px; }
.pk-strength-fill { height:100%; border-radius:999px; transition:width .3s ease; }
.pk-strength.hi  .pk-strength-fill { background:linear-gradient(90deg,#3ddc84,#22c55e); } .pk-strength.hi  .pk-strength-pct { color:var(--good); }
.pk-strength.mid .pk-strength-fill { background:linear-gradient(90deg,#7cd3ff,#22c5ff); } .pk-strength.mid .pk-strength-pct { color:#22c5ff; }
.pk-strength.lo  .pk-strength-fill { background:linear-gradient(90deg,#ffd23f,#f0a500); } .pk-strength.lo  .pk-strength-pct { color:var(--gold); }
.pk-strength.vlo .pk-strength-fill { background:linear-gradient(90deg,#ff8a8a,#e5484d); } .pk-strength.vlo .pk-strength-pct { color:var(--bad); }
.pk-strength-note { font-size:.85rem; color:var(--ink-dim); }

.pk-why { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--r-md); padding:14px 16px; }
.pk-why p { margin:0 0 6px; font-size:1.05rem; font-weight:600; } .pk-why p:last-child { margin-bottom:0; color:var(--ink-dim); font-weight:500; }

.pk-foot { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.pk-hints-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:999px; font-weight:700; }
.big-status.sd { margin:10px 0; }

/* ── Yahtzee ─────────────────────────────────────────────────────────────────*/
/* Host felt-table theme + drifting-dice backdrop */
.yhost { position:relative; z-index:0; }
.yhost > *:not(.ybackdrop) { position:relative; z-index:1; }
.ybackdrop { position:absolute; inset:-4% -2%; overflow:hidden; pointer-events:none; z-index:0; }
.ybg-die { position:absolute; line-height:1; color:rgba(255,255,255,.07); user-select:none;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
  animation-name:ybg-float; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }
@keyframes ybg-float { from { transform:translateY(6px) rotate(0); } to { transform:translateY(-26px) rotate(var(--rot,22deg)); } }
@media (prefers-reduced-motion:reduce){ .ybg-die{ animation:none; } }
.yprompt { position:relative; overflow:hidden;
  background:radial-gradient(130% 150% at 50% -30%, #1f8a55 0%, #0f6039 52%, #0b4a2c 100%);
  border:2px solid rgba(255,255,255,.16); border-radius:20px;
  box-shadow:inset 0 0 70px rgba(0,0,0,.28), 0 12px 34px rgba(0,0,0,.32); }
.yprompt .kicker { color:#ffe6a3; letter-spacing:.06em; }
.yprompt::before, .yprompt::after { content:"🎲"; position:absolute; top:12px; font-size:34px; opacity:.55; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.yprompt::before { left:16px; transform:rotate(-16deg); }
.yprompt::after  { right:16px; transform:rotate(16deg); }

.ytray { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0; touch-action:pan-y; }
.ytray.phone { gap:10px; padding:8px; border-radius:16px; background:rgba(255,255,255,.03); }
.ydie { width:66px; height:66px; border-radius:14px; background:#fdfdfb; box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ytray.phone .ydie { width:56px; height:56px; }
.ydie.held { box-shadow:0 0 0 3px var(--gold), 0 3px 8px rgba(0,0,0,.35); transform:translateY(4px) scale(.96); }
.ydie.tappable { cursor:pointer; transition:transform .1s; }
.ydie .ypips { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:78%; height:78%; }
.ypip-cell { display:flex; align-items:center; justify-content:center; }
.ypip { width:26%; height:26%; min-width:8px; min-height:8px; border-radius:50%; background:#1a1a1a; }
.ydie.held .ypip { background:#7a1f4f; }
.ydie.rolling { animation:ydie-roll .5s ease; }
@keyframes ydie-roll { 0%{transform:rotate(0) scale(1);} 25%{transform:rotate(-18deg) scale(1.08);} 50%{transform:rotate(14deg) scale(.94);} 75%{transform:rotate(-8deg) scale(1.05);} 100%{transform:rotate(0) scale(1);} }
@media (prefers-reduced-motion:reduce){ .ydie.rolling{ animation:none; } }

/* Scorecard */
.ysheet-wrap { max-width:100%; overflow-x:auto; margin:0 auto; }
.ysheet { border-collapse:collapse; margin:0 auto; font-size:.95rem; }
.ysheet th, .ysheet td { padding:6px 12px; text-align:center; border-bottom:1px solid var(--line); }
.ysheet .ycat { text-align:left; color:var(--ink-dim); font-weight:700; white-space:nowrap; }
.ysheet th.yp { padding:8px 12px; }
.ysheet th.yp .ava { font-size:1.4rem; } .ysheet th.yp .ynm { font-size:.85rem; font-weight:800; }
.ysheet th.yp.active { background:linear-gradient(180deg, rgba(255,210,63,.2), transparent); border-bottom:2px solid var(--gold); }
.ysheet .yv { font-family:var(--mono); font-weight:700; min-width:48px; }
.ysheet .ypreview { color:var(--gold); font-style:italic; opacity:.85; }
.ysheet .yempty { color:var(--ink-mute); }
.ysheet .ysub { font-size:.82rem; color:var(--ink-mute); font-family:var(--mono); }
.ysheet tr.ysep td { border-top:2px solid var(--line); }
.ysheet tr.ytotal td { border-top:2px solid var(--line); font-size:1.15rem; }
.ysheet tr.ytotal .yv b { color:var(--accent); }

/* Phone scoring list */
.yscore-h { font-size:1.1rem; margin:14px 0 8px; }
.yscore-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.yscore { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand); color:var(--ink); cursor:pointer; font:inherit; text-align:left; }
.yscore.s-lower { border-left-color:var(--accent); }
.yscore:active { transform:translateY(2px); }
.yscore.used { opacity:.45; cursor:default; border-left-color:var(--line); }
.yscore-n { font-weight:700; font-size:.92rem; }
.yscore-v { font-family:var(--mono); font-weight:800; font-size:1.2rem; color:var(--gold); }
.yscore.used .yscore-v { color:var(--ink-mute); }

/* ══ Crisis & Crowns ═══════════════════════════════════════════════════════════ */
.cc-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:1500px; margin:0 auto 10px; }
.cc-title { font-weight:900; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:.02em; }
.cc-round { font-family:var(--mono); font-weight:800; background:var(--gold); color:#1a1030; border-radius:999px; padding:.35em 1em; }

/* Host stage: arena on the left, the prominent activity feed on the right */
.cc-stage { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr); gap:16px; width:100%; max-width:1500px; margin:0 auto; align-items:start; }
.cc-arena { display:flex; flex-direction:column; gap:14px; min-width:0; }
.cc-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cc-boss, .cc-crisis { position:relative; border:3px solid var(--line); border-radius:20px; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, var(--boss,#9e6af0), #241340); }
.cc-crisis { color:#2a1a10; background:linear-gradient(150deg, #ffd265, #ff9f61); }
.cc-panel-inner { padding:14px; display:flex; flex-direction:column; height:100%; }
.cc-eyebrow { font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; opacity:.9; }
.cc-panel-title { margin:2px 0 4px; font-size:clamp(1.4rem,2.4vw,2.1rem); line-height:1; letter-spacing:-.03em; }
.cc-panel-sub { font-size:.9rem; line-height:1.35; opacity:.95; }
.cc-art { position:relative; border:2px solid rgba(0,0,0,.25); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.15); }
.cc-big-art { height:210px; margin:10px 0; }
.cc-img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; }
.cc-img.cover { object-fit:cover; }
.cc-meter-wrap { display:grid; gap:3px; margin-top:8px; }
.cc-meter-label { display:flex; justify-content:space-between; font-size:.82rem; font-weight:800; }
.cc-meter { height:15px; border:2px solid currentColor; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.14); }
.cc-meter > i { display:block; height:100%; border-radius:inherit; transition:width .4s ease; }
.cc-hp { background:linear-gradient(90deg,#ff7b83,#ffd166); }
.cc-doom { background:linear-gradient(90deg,#ffd166,#ff495c); }
.cc-power { background:linear-gradient(90deg,#f1fffd,#37c6a5); }
.cc-note { margin-top:9px; border:2px solid currentColor; border-radius:12px; padding:7px 10px; font-size:.8rem; line-height:1.4; font-weight:700; background:rgba(255,255,255,.12); }

.cc-roster { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cc-hero { border:3px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); }
.cc-hero.down { opacity:.55; filter:grayscale(.5); }
.cc-hero.me { box-shadow:0 0 0 3px var(--gold); }
.cc-hero-art { height:120px; border-bottom:3px solid var(--line); background:var(--card-2); }
.cc-hero-body { padding:9px; }
.cc-hero-head { display:flex; gap:8px; align-items:center; }
.cc-sigil { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border:2px solid var(--line); border-radius:9px; background:var(--hc,#888); color:#1a1030; font-weight:900; font-size:.7rem; }
.cc-hero-name { font-weight:900; font-size:.92rem; line-height:1; }
.cc-hero-owner { font-size:.7rem; color:var(--ink-mute); font-weight:700; margin-top:2px; }
.cc-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:8px; }
.cc-stat { display:flex; justify-content:space-between; gap:4px; background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:4px 7px; font-size:.78rem; }
.cc-stat-k { color:var(--ink-mute); font-weight:700; }
.cc-intent { margin-top:8px; border:2px dashed var(--line); border-radius:10px; padding:5px; text-align:center; font-size:.75rem; font-weight:800; color:var(--ink-dim); }
.cc-intent.down { color:var(--bad); border-color:var(--bad); }

/* The activity feed — the centerpiece on the host screen */
.cc-feed-panel { position:sticky; top:8px; border:3px solid var(--line); border-radius:20px; background:var(--card); padding:14px; display:flex; flex-direction:column; min-height:520px; }
.cc-feed-title { margin:0 0 8px; font-size:1.5rem; letter-spacing:-.02em; }
.cc-status { font-weight:800; color:var(--ink-dim); margin-bottom:10px; min-height:1.2em; }
.cc-feed { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; max-height:64vh; }
.cc-feed-idle { color:var(--ink-mute); font-style:italic; }
/* NO base animation — lines only animate when freshly appended (.cc-new), so the
   feed never re-flashes when the host re-renders. */
.cc-line { border-left:6px solid var(--brand-2); border-radius:12px; background:var(--card-2); padding:12px 14px;
  font-size:1.08rem; line-height:1.4; font-weight:600; }
.cc-line.cc-new { animation:cc-in .32s ease both; }
.cc-line.good { border-left-color:var(--good); }
.cc-line.bad { border-left-color:var(--bad); }
.cc-line.gold { border-left-color:var(--gold); }
.cc-line.crisis { border-left-color:var(--accent); font-weight:800; }
.cc-line.villain { border-left-color:var(--bad); background:linear-gradient(120deg, rgba(237,86,101,.22), var(--card-2));
  font-size:1.25rem; font-weight:900; box-shadow:0 0 0 2px rgba(237,86,101,.35); }
.cc-line.round { border:0; background:transparent; text-align:center; color:var(--ink-mute); font-weight:800;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 0; }
@keyframes cc-in { from { transform:translateX(-10px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Arena FX — little animations tied to the feed reveal */
.cc-boss.fx-hit, .cc-hero.fx-hit { animation:cc-shake .5s ease; box-shadow:0 0 0 4px var(--bad); }
.cc-boss.fx-heal, .cc-hero.fx-heal { box-shadow:0 0 0 4px var(--good); }
.cc-boss.fx-attack { animation:cc-lunge .8s ease; box-shadow:0 0 22px 5px rgba(237,86,101,.75); }
.cc-hero.fx-act { animation:cc-bounce .5s ease; box-shadow:0 0 0 4px var(--gold); }
.cc-hero.fx-brace { box-shadow:0 0 0 4px var(--accent); }
.cc-crisis.fx-power { box-shadow:0 0 0 4px var(--accent), 0 0 20px 3px rgba(34,224,200,.6); }
.cc-crisis.fx-win { box-shadow:0 0 0 5px var(--good), 0 0 26px 4px rgba(71,191,135,.7); }
.cc-crisis.fx-lose { animation:cc-shake .5s ease; box-shadow:0 0 0 5px var(--bad), 0 0 26px 4px rgba(237,86,101,.7); }
@keyframes cc-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(4px);} }
@keyframes cc-lunge { 0%{transform:scale(1);} 30%{transform:scale(1.05) rotate(-1deg);} 55%{transform:scale(.98);} 100%{transform:scale(1);} }
@keyframes cc-bounce { 0%,100%{transform:translateY(0);} 40%{transform:translateY(-8px);} }
.cc-verdict { position:absolute; inset:0; display:grid; place-items:center; font-size:6rem; z-index:5; pointer-events:none;
  animation:cc-verdict 1.3s ease both; text-shadow:0 4px 14px rgba(0,0,0,.5); }
@keyframes cc-verdict { 0%{transform:scale(.3); opacity:0;} 25%{transform:scale(1.15); opacity:1;} 70%{transform:scale(1); opacity:1;} 100%{transform:scale(1); opacity:0;} }
@media (prefers-reduced-motion:reduce){ .cc-line.cc-new,.cc-boss,.cc-hero,.cc-crisis,.cc-verdict{ animation:none !important; } }

/* Host setup */
.cc-setup { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:16px; width:100%; max-width:1200px; margin:0 auto; align-items:start; }
.cc-setup-side h2 { margin:0 0 4px; }
.cc-setup-roster { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.cc-setup-pick { display:flex; align-items:center; gap:10px; border:2px solid var(--line); border-radius:12px; padding:8px 12px; background:var(--card); font-weight:800; }
.cc-setup-pick.done { border-color:var(--good); }
.cc-setup-pick .ava { font-size:1.4rem; }
.cc-pick-hero { margin-left:auto; color:var(--ink-dim); font-weight:800; }

/* Host game over */
.cc-endwrap { text-align:center; max-width:760px; margin:0 auto; }
.cc-trophy { font-size:4rem; }
.cc-endtitle { font-size:clamp(2rem,6vw,3.6rem); line-height:1; margin:6px 0 8px; }
.cc-final { display:grid; gap:8px; margin:18px 0; text-align:left; }
.cc-final-row { display:grid; grid-template-columns:44px 1fr auto auto; gap:12px; align-items:center; border:3px solid var(--line); border-radius:14px; padding:10px 14px; background:var(--card); font-weight:800; }
.cc-final-row.win { box-shadow:0 0 0 3px var(--gold); }
.cc-place { font-size:1.4rem; text-align:center; }
.cc-final-stats { color:var(--ink-mute); font-size:.85rem; font-family:var(--mono); }
.cc-final-glory { color:var(--gold); font-family:var(--mono); font-size:1.15rem; }

/* Phone — hero pick */
.cc-pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cc-pick { display:flex; flex-direction:column; gap:2px; text-align:left; padding:8px; border-radius:14px; background:var(--card); border:2px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; --hc:#888; }
.cc-pick.on { border-color:var(--hc); box-shadow:inset 0 0 0 2px var(--hc); }
.cc-pick.taken { opacity:.4; }
.cc-pick-img { width:100%; height:120px; object-fit:contain; border-radius:10px; background:var(--card-2); }
.cc-pick-name { font-weight:900; font-size:1rem; }
.cc-pick-class { font-size:.72rem; color:var(--ink-mute); font-weight:700; }
.cc-pick-sig { font-size:.72rem; color:var(--accent); font-weight:800; }
.cc-vip-controls { display:flex; flex-direction:column; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); align-items:stretch; }
.cc-vip-controls .host-badge { align-self:center; }

/* Phone — action pick */
.cc-actions { display:grid; gap:8px; }
.cc-action { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; text-align:left; padding:10px; border-radius:14px; background:var(--card); border:2px solid var(--line); color:var(--ink); cursor:pointer; font:inherit; --ac:#888; }
.cc-action.on { border-color:var(--ac); box-shadow:inset 0 0 0 2px var(--ac); }
.cc-action:disabled { opacity:.45; }
.cc-action-icon { width:40px; height:40px; display:grid; place-items:center; border:2px solid var(--line); border-radius:11px; background:var(--ac); color:#1a1030; font-size:1.2rem; }
.cc-action-copy b { display:block; font-size:.98rem; }
.cc-action-copy span { display:block; color:var(--ink-mute); font-size:.78rem; line-height:1.3; }
.cc-action-tag { border:2px solid var(--line); border-radius:999px; padding:3px 9px; font-size:.7rem; font-weight:800; white-space:nowrap; background:var(--card-2); }
.cc-target-label { display:block; margin:12px 0 6px; font-weight:800; font-size:.85rem; }
.cc-targets { display:grid; gap:8px; }
.cc-target { text-align:left; padding:11px 14px; border-radius:12px; background:var(--card); border:2px solid var(--line); border-left:5px solid var(--hc,#888); color:var(--ink); cursor:pointer; font:inherit; font-weight:800; }
.cc-target.on { box-shadow:inset 0 0 0 2px var(--hc); }

@media (max-width:1000px){ .cc-stage{ grid-template-columns:1fr; } .cc-setup{ grid-template-columns:1fr; } .cc-feed-panel{ position:static; min-height:auto; } }

/* ══ Blast Borough ═════════════════════════════════════════════════════════════ */
/* Host: the exact engine runs in an iframe filling the stage */
.bb-host-wrap { width:100%; }
.bb-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:16px; display:block; background:#140a2e; }

/* Phone controller */
.bb-aim-wrap { position:relative; border:3px solid var(--line); border-radius:16px; overflow:hidden; background:#0f0730; }
.bb-aim { display:block; width:100%; aspect-ratio:3/2; touch-action:none; }
.bb-aim-help { position:absolute; left:8px; right:8px; top:8px; border:2px solid rgba(0,0,0,.3); border-radius:9px;
  background:rgba(255,255,255,.85); color:#20103a; padding:5px 7px; font-size:.7rem; font-weight:800; text-align:center; pointer-events:none; }
.bb-readouts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.bb-readout { border:2px solid var(--line); border-radius:12px; padding:8px; text-align:center; background:var(--card); }
.bb-readout span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ink-mute); }
.bb-readout strong { font-size:1.5rem; font-family:var(--mono); }
.bb-select { width:100%; min-height:44px; border:2px solid var(--line); border-radius:12px; padding:0 10px; background:var(--card); color:var(--ink); font:inherit; font-weight:700; }
.bb-mini { display:grid; gap:4px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); }
.bb-equip { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.bb-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.bb-actions .btn { flex:1 1 auto; }

/* Phone shop */
.bb-shop-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.bb-shop-tab { border:2px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); font:inherit; font-weight:800;
  padding:8px 12px; white-space:nowrap; cursor:pointer; }
.bb-shop-tab.on { background:var(--gold); color:#1a1030; }
.bb-shop-list { display:grid; gap:8px; }
.bb-shop-item { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; border:2px solid var(--line);
  border-radius:12px; padding:8px 10px; background:var(--card); }
.bb-shop-ic { width:40px; height:40px; display:grid; place-items:center; border:2px solid var(--line); border-radius:10px;
  background:var(--card-2); font-size:1.2rem; }
.bb-shop-info b { display:block; font-size:.92rem; }
.bb-shop-info span { display:block; font-size:.72rem; line-height:1.3; }
/* .btn styles used here are shared; add color variants if missing */
.btn.purple { background:linear-gradient(135deg,#8a71ef,#6e5ddd); color:#fff; }
.btn.green { background:linear-gradient(135deg,#4ac58c,#2fa876); color:#08240f; }