/* 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);
  color:var(--countdown-ink); text-shadow:6px 7px 0 rgba(23,20,44,.82); }
.big-countdown.go { color:var(--countdown-go); }
.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,var(--purple)); }
.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%; }
/* Draftdown "match the builds" — phone guessing + host detective bonuses */
.dd-match-build { border:2px solid var(--line,var(--ink)); border-radius:14px; padding:12px; margin:10px 0; background:var(--card,var(--paper)); }
.dd-match-h { font-size:1.1rem; margin-bottom:2px; }
.dd-match-sum { margin-bottom:8px; }
.dd-match-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.dd-match-opt { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:2px solid var(--line,var(--ink));
  background:var(--card-2,var(--cream)); color:inherit; font-weight:700; cursor:pointer; }
.dd-match-opt.on { border-color:var(--pc,var(--purple)); background:var(--card,var(--paper)); box-shadow:0 0 0 2px color-mix(in srgb, var(--pc,var(--purple)) 35%, transparent); }
.dd-match-opt .ava { font-size:1.1rem; }
.dd-match-results { margin:10px 0; text-align:center; }
.dd-match-results .dd-mr-h { font-weight:800; margin-bottom:6px; }
.build-card { background:var(--card); border:2px solid var(--pc,var(--purple)); 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,var(--purple)); 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(23,20,44,.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, var(--cream)); 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(--white); color:var(--ink);
  border:3px solid var(--pc,var(--purple)); border-radius:var(--r-md); padding:14px; cursor:pointer;
  box-shadow:var(--shadow-sm); font-weight:600; }
.vote-card:hover { transform:translate(-1px,-2px); box-shadow:5px 7px 0 var(--ink); }
.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:var(--white); 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:var(--white); 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:var(--white); 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,var(--purple)); }
.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,var(--purple)); 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,var(--purple)); }
.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,var(--purple)); }
.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,var(--purple)); 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:var(--ink); 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:var(--white); border:2px solid var(--line); }
.survey-row.hit { border-color:var(--good); background:linear-gradient(90deg, rgba(61,220,132,.14), var(--white)); }
.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; }
/* an answer the AI judged a technical match — ringed + tiny robot marker */
.sr-claim .ava.ai-claim { position:relative; border-radius:50%; box-shadow:0 0 0 2px var(--accent); }
.sr-claim .ava.ai-claim::after { content:"🤖"; position:absolute; right:-6px; bottom:-6px; font-size:.7rem; }
.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,var(--purple)); 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,var(--purple));
  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:var(--ink); border:var(--bw) solid var(--ink);
  box-shadow:4px 5px 0 var(--ink); min-height:96px; }
.yn:active { transform:translateY(3px); box-shadow:1px 1px 0 var(--ink); }
.yn.yes { background:var(--mint); }
.yn.no { background:var(--bad); color:var(--white); }
.yn.on { box-shadow:0 0 0 4px var(--gold), 4px 5px 0 var(--ink); }

/* ── 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; }
/* Results "camera": zoom in at full size, then slowly pan the board down */
.mm-pan { max-height:60vh; overflow:hidden; width:100%; display:flex; justify-content:center; margin:4px 0; }
.mm-pan .mm-board { will-change:transform; }
.mm-pan-zoom { animation:mm-zoomin 1.1s ease-out both; }
@keyframes mm-zoomin { from { transform:scale(1.05); opacity:.35 } to { transform:scale(1); opacity:1 } }
.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(23,20,44,.04); 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:var(--blue); }
.pl-answer.b { border-color:var(--coral); }
.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(23,20,44,.07); color:var(--ink); }
.pl-answer.a .pl-tag { background:var(--blue); color:var(--ink); }
.pl-answer.b .pl-tag { background:var(--coral); color:var(--ink); }
.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(23,20,44,.06); }

.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:var(--ink); 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(23,20,44,.07); 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,var(--mint),#22c55e); } .pk-strength.hi  .pk-strength-pct { color:var(--good); }
.pk-strength.mid .pk-strength-fill { background:linear-gradient(90deg,var(--blue),var(--blue)); } .pk-strength.mid .pk-strength-pct { color:var(--blue); }
.pk-strength.lo  .pk-strength-fill { background:linear-gradient(90deg,var(--yellow),#f0a500); } .pk-strength.lo  .pk-strength-pct { color:var(--gold); }
.pk-strength.vlo .pk-strength-fill { background:linear-gradient(90deg,var(--bad),var(--bad)); } .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(23,20,44,.06); 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:var(--yellow); 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(23,20,44,.04); }
.ytray.mini { gap:5px; margin:6px 0; }
.ytray.mini .ydie { width:30px; height:30px; border-radius:7px; }
/* Host: a live panel per player, all rolling at once */
.yhost-players { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:12px 0; }
/* Compact two-column host board: rolls (left) beside the scorecard (right). */
.yhost-bar { display:flex; align-items:baseline; gap:14px; justify-content:center; flex-wrap:wrap;
  padding:8px 16px; margin-bottom:12px; border-radius:14px;
  background:linear-gradient(90deg, rgba(124,77,255,.22), rgba(124,77,255,.07)); border:1px solid var(--line); }
.yhost-bar .kicker { font-weight:800; font-size:1.35rem; color:var(--yellow); letter-spacing:.04em; }
.yhost-bar .yhost-sub { color:var(--ink-dim); font-weight:700; }
.yhost-grid { display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:20px; align-items:start; }
.yhost-col-rolls { display:flex; flex-direction:column; gap:10px; min-width:0; }
.yhost-rolls { display:flex; flex-direction:column; gap:10px; }
.yhost-rolls .yhp { min-width:0; width:100%; }
.yhost-board { min-width:0; overflow-x:auto; }
.yhost-log { margin-top:4px; opacity:.85; font-size:.9rem; }
@media (max-width:900px){ .yhost-grid { grid-template-columns:1fr; } }
.yhp { border:2px solid var(--line,var(--ink)); border-left:5px solid var(--pc,var(--purple)); border-radius:14px; padding:8px 12px; background:var(--card,var(--paper)); min-width:190px; }
.yhp.done { opacity:.72; border-left-color:var(--good,var(--mint)); }
.yhp-head { display:flex; align-items:center; gap:8px; font-weight:800; }
.yhp-head .yhp-nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yhp-status { font-size:.8rem; font-weight:700; color:var(--ink-dim); }
.yp .ymini { font-size:.72rem; color:var(--ink-dim); margin-top:2px; }
.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:var(--ink); 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,var(--lilac)), var(--purple-dark)); }
.cc-crisis { color:var(--ink); background:linear-gradient(150deg, var(--yellow), var(--coral)); }
.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,var(--yellow)); }
.cc-doom { background:linear-gradient(90deg,var(--yellow),#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:var(--ink); 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:var(--ink); 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); }

/* Sentinels-style hand: the cards a player holds and plays one of per round. */
.cc-hand { display:grid; gap:10px; }
.cc-card { display:grid; grid-template-columns:52px 1fr auto; gap:11px; align-items:center; text-align:left; padding:12px; border-radius:16px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--ac) 16%, var(--card)), var(--card)); border:2px solid var(--line);
  border-left:6px solid var(--ac,#888); color:var(--ink); cursor:pointer; font:inherit; --ac:#888; position:relative; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.cc-card.on { border-color:var(--ac); box-shadow:inset 0 0 0 2px var(--ac), 0 4px 14px color-mix(in srgb, var(--ac) 45%, transparent); transform:translateY(-1px); }
.cc-card-icon { width:48px; height:48px; display:grid; place-items:center; border:2px solid color-mix(in srgb, var(--ac) 60%, var(--line)); border-radius:13px;
  background:color-mix(in srgb, var(--ac) 30%, var(--card-2)); font-size:1.5rem; }
.cc-card-main b { display:block; font-size:1rem; font-weight:900; }
.cc-card-main span { display:block; color:var(--ink-mute); font-size:.82rem; line-height:1.3; margin-top:1px; }
.cc-card-tag { align-self:start; border:2px solid var(--line); border-radius:999px; padding:3px 9px; font-size:.66rem; font-weight:800; white-space:nowrap; background:var(--card-2); }
.cc-final-head { text-align:center; font-size:.8rem; font-weight:800; letter-spacing:.04em; opacity:.7; margin:14px 0 8px; }

/* Hand of real card faces (composited card images), one played per round. */
.cc-hand.cards { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-start; margin-top:10px; }
.cc-handcard { flex:0 0 46%; max-width:46%; aspect-ratio:1024/1536; padding:0; border:3px solid transparent;
  border-radius:13px; overflow:hidden; background:var(--card-2); cursor:pointer; position:relative;
  transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 2px 8px rgba(0,0,0,.35); --ac:#888; }
.cc-handcard-img { width:100%; height:100%; object-fit:cover; display:block; }
.cc-handcard.on { border-color:var(--ac); transform:translateY(-8px) scale(1.05);
  box-shadow:0 10px 22px color-mix(in srgb, var(--ac) 55%, transparent); z-index:2; }
.cc-handcard.fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:8px; text-align:center; border-left:5px solid var(--ac); }
.cc-hc-icon { font-size:1.8rem; }
.cc-hc-body b { display:block; font-size:.82rem; line-height:1.1; }
.cc-hc-body span { display:block; font-size:.66rem; color:var(--ink-mute); line-height:1.2; margin-top:2px; }
.cc-chosen { text-align:center; font-weight:800; font-size:.92rem; margin:8px 2px 2px; }

/* Host villain/environment panels now show the composited card image + live meters. */
.cc-boss.has-card, .cc-crisis.has-card { background:none; border-color:transparent; }
.cc-boss.has-card .cc-panel-inner, .cc-crisis.has-card .cc-panel-inner { padding:0; gap:8px; }
.cc-cardimg { width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.cc-cardimg.raw { aspect-ratio:1024/1536; object-fit:cover; }
.cc-threat-meters { margin-top:6px; display:grid; gap:8px; }

/* Shared screen: no feed panel — the arena fills the width and everything is bigger. */
.cc-stage.wide { display:block; }
.cc-arena.big { max-width:1500px; margin:0 auto; }
.cc-arena.big .cc-cards { gap:22px; }
.cc-arena.big .cc-roster { margin-top:18px; gap:14px; }
.cc-status.big { text-align:center; font-size:1.5rem; font-weight:900; margin-top:16px; color:var(--ink); opacity:.85; }

/* Big card spotlight: each played card takes over the screen for 5 seconds. */
.cc-spot { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:2vh;
  background:rgba(4,6,20,.88); backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.cc-spot.on { opacity:1; }
.cc-spot-card { display:flex; flex-direction:column; align-items:center; gap:2.2vh; animation:cc-spotin .4s cubic-bezier(.2,.8,.3,1); }
.cc-spot-cap { font-weight:900; letter-spacing:.02em; text-transform:uppercase; font-size:min(5.5vh,46px);
  color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.5); padding:4px 22px; border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ac) 55%, #111), color-mix(in srgb,var(--ac) 25%, #111)); border:3px solid color-mix(in srgb,var(--ac) 70%, #fff2); }
.cc-spot-img { height:78vh; max-width:94vw; width:auto; border-radius:min(2.2vh,22px); box-shadow:0 30px 90px rgba(0,0,0,.85); }
.cc-spot-img.miss { display:none; }
@keyframes cc-spotin { 0%{transform:scale(.62) rotate(-4deg); opacity:0} 60%{transform:scale(1.05) rotate(0); opacity:1} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .cc-spot-card{animation:none} }

/* Phone activity-log button + overlay (the feed moved off the shared screen). */
.cc-logbtn { position:fixed; right:14px; bottom:14px; z-index:30; background:var(--card-2); border:2px solid var(--line);
  color:var(--ink); border-radius:24px; padding:11px 18px; font:inherit; font-weight:800; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.cc-logov { position:fixed; inset:0; z-index:40; background:rgba(4,6,20,.72); display:grid; align-items:end; justify-items:center; }
.cc-logbox { background:var(--card); border:2px solid var(--line); border-radius:18px 18px 0 0; width:100%; max-width:600px;
  max-height:78vh; display:flex; flex-direction:column; box-shadow:0 -8px 30px rgba(0,0,0,.5); }
.cc-loghead { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-size:1.05rem; }
.cc-logfeed { overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:7px; }
.cc-logline { font-size:.9rem; line-height:1.35; color:var(--ink); border-bottom:1px dashed var(--line); padding-bottom:6px; }
.cc-logline.bad { color:var(--bad); } .cc-logline.good { color:var(--good); } .cc-logline.gold { color:var(--gold); }
.cc-logline.villain { color:#ff9a9a; font-weight:800; } .cc-logline.round { opacity:.6; text-align:center; font-weight:800; border-bottom:0; }

@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:var(--cream); }

/* Punchline — host iframe + phone controllers */
.pl-host-wrap { width:100%; }
.pl-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:16px; display:block; background:var(--cream); }
.pl-field { margin:10px 0; }
.pl-prompt { font-weight:800; margin-bottom:6px; }
.pl-input { width:100%; min-height:78px; resize:vertical; border-radius:12px; border:2px solid var(--line,var(--ink));
  background:var(--card,var(--paper)); color:inherit; padding:10px 12px; font:inherit; }
.pl-vote { text-align:left; display:flex; align-items:center; gap:12px; padding:16px; font-size:1.05rem; font-weight:700;
  border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); white-space:pre-line; }
.pl-input-sm { min-height:46px; margin-bottom:6px; }
.pl-vote:active { transform:scale(.99); }
.pl-va { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:900; background:var(--accent); color:var(--ink); }
.pl-vs { text-align:center; font-weight:900; color:var(--ink-dim); margin:8px 0; }
.pl-final-vote { display:block; text-align:left; padding:14px; margin:8px 0; border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); white-space:normal; }
.pl-fv-author { font-weight:800; margin-bottom:6px; }
.pl-fv-lines div { color:var(--ink-dim); font-size:.95rem; margin:2px 0; }

/* Reel Rivals — phone runs the engine in an iframe; host shows the aggregate race */
/* Fill the whole player screen robustly (no fragile dvh math): the wrap grows to fill
   the flex column and the iframe fills the wrap. */
.rr-frame-wrap { width:100%; flex:1; min-height:0; display:flex; position:relative; }
.rr-frame { width:100%; flex:1; min-height:0; border:0; border-radius:14px; display:block; background:var(--cream); }
.rr-host { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rr-board { width:min(920px,96%); display:flex; flex-direction:column; gap:10px; margin-top:8px; }
/* Fish tanks on the host TV — one per angler, below the race board. */
.rr-tanks { width:min(920px,96%); margin-top:10px; }
/* End-of-race controls on the host TV — a clear row so the room is never left
   staring at final standings with no way forward. */
.rr-endbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.rr-tanks-title { font-weight:900; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--white); text-align:left; margin:0 0 8px; opacity:.9; }
/* The FEED button — floats over the phone's fishing screen, bottom-right, clear of
   the water tap zone. Big enough to hit without looking, which is the challenge. */
.rr-feed { position:absolute; right:14px; bottom:16px; z-index:20; display:flex; flex-direction:column;
  align-items:center; gap:1px; width:74px; height:74px; border-radius:50%; border:3px solid var(--ink);
  background:var(--gold,#ffd24d); color:var(--ink); font-weight:900; font-size:.8rem; cursor:pointer;
  box-shadow:0 4px 0 var(--ink); touch-action:manipulation; user-select:none; }
.rr-feed .rr-feed-ic { font-size:1.5rem; line-height:1; }
.rr-feed:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.rr-feed.pulse { animation:rr-feed-pop .32s ease; }
@keyframes rr-feed-pop { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .rr-feed.pulse{animation:none} }
.rr-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px;
  border:2px solid var(--line,var(--ink)); border-left:6px solid var(--pc,var(--blue)); background:var(--card,var(--paper)); }
.rr-row.lead { border-color:var(--gold,var(--yellow)); box-shadow:0 0 0 2px rgba(255,210,90,.22); }
.rr-row.done { opacity:.85; }
.rr-row .rr-rank { font-family:var(--mono,monospace); font-weight:800; color:var(--ink-dim); min-width:34px; }
.rr-row .ava { font-size:1.5rem; }
.rr-row .rr-nm { font-weight:800; min-width:88px; }
.rr-row .rr-mid { flex:1; display:flex; flex-direction:column; gap:5px; }
.rr-row .rr-prog { font-size:.82rem; color:var(--ink-dim); font-weight:700; }
.rr-row .rr-bar { height:8px; border-radius:999px; background:rgba(23,20,44,.07); overflow:hidden; }
.rr-row .rr-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--pc,var(--blue)),var(--gold,var(--yellow))); transition:width .4s ease; }
.rr-row .rr-stars { font-family:var(--mono,monospace); font-weight:800; color:var(--accent,var(--yellow)); min-width:56px; text-align:right; }

/* Mind Meld Deluxe — host iframe + phone multiple-choice controllers */
.mmd-host-wrap { width:100%; }
.mmd-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--ink); }
.mmd-opts { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.mmd-opt { text-align:left; padding:12px 14px; font-weight:700; white-space:normal;
  border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); color:inherit; }
.mmd-opt.sel { border-color:var(--accent,var(--purple)); background:var(--card-2,var(--paper)); box-shadow:0 0 0 2px rgba(124,77,255,.32); }
.mmd-conf { display:flex; gap:6px; margin-top:8px; }
.mmd-conf .btn { flex:1; }
/* Blind Rank Finale */
.mmd-blinditem { text-align:center; font-weight:900; font-size:1.5rem; line-height:1.2; padding:14px 12px; margin:10px 0 4px;
  border-radius:14px; border:2px solid var(--accent,var(--purple)); background:var(--card-2,var(--paper)); }
.mmd-rankgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
.mmd-rank { min-height:52px; font-size:1.3rem; font-weight:900; }
.mmd-rank.used { opacity:.35; }

/* ── Memory Heist ─────────────────────────────────────────────── */
.mh-host-wrap { width:100%; }
.mh-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--cream); }
.mh-loot-head { font-weight:800; font-size:.82rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 4px; }
.mh-targets { display:grid; gap:7px; }
.mh-target { display:flex; align-items:center; gap:10px; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--card); padding:9px 11px; width:100%; text-align:left; font:inherit; color:var(--ink); }
.mh-target.sel { cursor:pointer; }
.mh-target.active { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset; }
.mh-ticon { font-size:1.7rem; }
.mh-tname { flex:1; font-weight:800; }
.mh-tpick { font-weight:900; color:var(--brand); }
.mh-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mh-slot { aspect-ratio:1; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink); font-weight:900; font-size:1.1rem; }
.mh-slot.used { background:var(--bg-2); color:var(--ink-mute); }
.mh-slot.sel { background:var(--gold); color:var(--ink); border-color:var(--brand); box-shadow:0 0 0 2px var(--brand) inset; }
.mh-quiz { display:grid; gap:6px; }
.mh-qopt { border:2px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink); padding:10px; font-weight:800; font:inherit; text-align:left; }
.mh-qopt.sel { background:var(--gold); color:var(--ink); border-color:var(--brand); }
.mh-final { display:grid; gap:8px; max-width:520px; margin:14px auto 0; }
.mh-final-row { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; border:2px solid var(--line); border-left:8px solid var(--c,var(--blue)); border-radius:var(--r-sm); background:var(--card); padding:8px 12px; }
.mh-final-row.win { background:rgba(255,212,77,.28); border-color:var(--gold); }
.mh-final-rank { font-weight:900; color:var(--ink-mute); }
.mh-final-name { font-weight:800; }
.mh-final-score { font-weight:900; color:var(--gold); font-size:1.2rem; }

/* ── Mad Libs ─────────────────────────────────────────────────── */
.ml-progress { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; max-width:900px; margin:0 auto; }
.ml-slot { display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; border:2px solid var(--line);
  border-left:6px solid var(--pc,var(--purple)); border-radius:var(--r-sm); background:var(--card); padding:8px 10px; }
.ml-slot.done { background:rgba(255,212,77,.28); border-color:var(--gold); }
.ml-slot-n { font-weight:900; color:var(--ink-mute); text-align:center; }
/* Let the full label show — wrap to a second line rather than truncating
   'a describing word' to 'a describing ...' on the host grid. */
.ml-slot-label { font-weight:800; line-height:1.15; min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ml-slot-who { font-size:1.3rem; }
.ml-story { font-size:clamp(1.2rem,2.6vw,2rem); line-height:1.6; font-weight:700; color:var(--ink); text-align:left; }
.ml-story.mini { font-size:1rem; line-height:1.5; }
.ml-word { display:inline-block; background:var(--gold); color:var(--ink); font-weight:900; padding:0 .3em; border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,.15); animation:mlpop .35s ease both; }
@keyframes mlpop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
.ml-reveal { max-width:900px; }
/* phone fill-in */
.ml-fill { display:grid; gap:12px; }
.ml-fill-row { display:grid; gap:5px; }
.ml-fill-label { font-weight:800; }
.ml-fill-input { display:flex; gap:8px; align-items:stretch; }
.ml-input { flex:1; min-width:0; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--card);
  color:var(--ink); padding:11px 12px; font:inherit; font-weight:700; }
.ml-input:disabled { opacity:.7; background:var(--bg-2); }
/* Kid Mode: pick a word from 4 pictures */
.ml-pics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ml-pic { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border:2px solid var(--line);
  border-radius:var(--r-md); background:var(--card); color:var(--ink); font:inherit; cursor:pointer; min-height:84px; }
.ml-pic:active { transform:scale(.97); }
.ml-pic.sel { border-color:var(--gold); background:rgba(255,212,77,.28); box-shadow:0 0 0 2px var(--gold) inset; }
.ml-pic-emoji { font-size:2.4rem; line-height:1; }
.ml-pic-word { font-weight:800; font-size:.95rem; text-align:center; }
/* Mode select — host cards + phone buttons */
.ml-modes { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; width:100%; }
.ml-mode-card { border:3px solid var(--line); border-radius:var(--r-lg); background:var(--card); padding:20px; text-align:center; }
.ml-mode-card .emoji { font-size:3.4rem; }
.ml-mode-card h2 { margin:6px 0; }
.ml-mode-btn { display:flex; align-items:center; gap:12px; text-align:left; }
.ml-mode-emoji { font-size:2rem; }

/* ── Consensus Cavern ─────────────────────────────────────────── */
.cc-host-wrap { width:100%; }
.cc-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--cream); }
.cc-prompt { font-weight:800; font-size:18px; line-height:1.25; padding:12px 14px; margin:8px 0;
  border-radius:12px; border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); }
.cc-picked-head, .cc-bank-head { font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin:10px 2px 4px; }
.cc-ranklist { display:flex; flex-direction:column; gap:6px; }
.cc-rankrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  border:2px solid rgba(255,188,71,.5); background:rgba(255,188,71,.08); }
.cc-rn { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(160deg,var(--yellow),#e88b2f); color:var(--ink); font-weight:900; font-size:13px; }
.cc-rnlabel { flex:1; font-weight:700; }
.cc-x { border:0; background:transparent; color:var(--bad); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }
.cc-bank { display:flex; flex-direction:column; gap:8px; }
.cc-optbtn { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  padding:12px 14px; font-weight:700; white-space:normal; border:2px solid var(--line,var(--ink));
  background:var(--card,var(--paper)); color:inherit; }
.cc-optbtn.used { opacity:.4; }
.cc-optlabel { flex:1; }
.cc-optnum { flex:none; font-weight:900; color:var(--yellow); }
.cc-target { text-align:center; font-weight:900; font-size:20px; padding:10px; margin:8px 0;
  border-radius:12px; background:linear-gradient(160deg,rgba(124,77,255,.28),rgba(124,77,255,.12));
  border:2px solid rgba(124,77,255,.5); }
.cc-torch-row { text-align:center; font-weight:700; margin:4px 0 10px; letter-spacing:1px; }
.cc-doors { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cc-doors.mini { grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px; }
.cc-door { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 8px; min-height:88px; border-radius:12px; border:2px solid var(--line,var(--ink));
  background:var(--paper); color:inherit; font-weight:700; white-space:normal; }
.cc-doors.mini .cc-door { min-height:56px; padding:8px 4px; font-size:11px; }
.cc-door[disabled] { opacity:.55; }
.cc-door.ro { cursor:default; }
.cc-door.opened.correct { border-color:var(--mint); background:rgba(85,214,181,.35); }
.cc-door.opened.wrong { border-color:var(--bad); background:rgba(232,82,63,.28); }
.cc-door.opened.revealed { border-color:var(--blue); opacity:.8; }
.cc-door-rune { font-size:20px; opacity:.85; }
.cc-door-opt { font-size:12px; line-height:1.15; text-align:center; }
.cc-door-rank { position:absolute; top:4px; right:6px; font-weight:900; font-size:12px; color:var(--yellow); }
.cc-final-grid { display:flex; gap:14px; justify-content:center; margin:14px 0; flex-wrap:wrap; }
.cc-final-team { padding:16px 22px; border-radius:16px; border:2px solid var(--line,var(--ink));
  background:var(--card,var(--paper)); min-width:150px; opacity:.7; }
.cc-final-team.win { opacity:1; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,207,107,.25); }
.cc-final-icon { font-size:34px; }
.cc-final-name { font-weight:800; margin-top:4px; }
.cc-final-score { font-size:26px; font-weight:900; color:var(--yellow); margin-top:2px; }

/* ── Three of Nine ────────────────────────────────────────────── */
.ton-host-wrap { width:100%; }
.ton-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--cream); }
.ton-prompt { font-weight:900; font-size:19px; line-height:1.25; padding:12px 14px; margin:8px 0 12px;
  border-radius:12px; border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); text-align:center; }
.ton-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ton-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:96px; padding:8px 4px; border-radius:14px; border:3px solid var(--ink,var(--ink)); color:var(--ink); font-weight:900;
  white-space:normal; overflow:hidden; background:linear-gradient(145deg,hsl(var(--h) 75% 86%),hsl(var(--h) 66% 70%)); }
.ton-card.sel { outline:5px solid var(--gold,var(--yellow)); outline-offset:-1px; box-shadow:0 0 0 3px rgba(255,200,87,.4); }
.ton-pic { font-size:34px; line-height:1; }
.ton-label { font-size:11px; line-height:1.1; text-align:center; }
.ton-badge { position:absolute; left:5px; top:5px; width:24px; height:24px; border:2px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; background:#fff; font-size:13px; color:var(--ink); }
.ton-fav { margin:12px 0 4px; padding:10px; border-radius:12px; border:2px dashed var(--gold,var(--yellow)); background:rgba(255,200,87,.12); }
.ton-fav-head { font-weight:800; margin-bottom:8px; text-align:center; }
.ton-fav-btns { display:flex; flex-direction:column; gap:6px; }
.ton-fav-btns .btn { width:100%; }

/* ── Mine Your Business ───────────────────────────────────────── */
.myb-host-wrap { width:100%; }
.myb-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--cream); }
.myb-hud { display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; font-weight:800; font-size:.82rem;
  padding:7px 10px; border-radius:10px; background:var(--card,var(--paper)); border:1px solid var(--line,var(--ink)); margin-bottom:4px; }
.myb-hud span { white-space:nowrap; }
.myb-actions { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.myb-act { flex:1 1 auto; }
.myb-board-wrap { width:100%; overflow-x:auto; padding:4px; border-radius:12px; background:var(--white); border:2px solid var(--ink); }
.myb-board { display:grid; gap:2px; width:100%; }
.myb-cell { aspect-ratio:1; display:grid; place-items:center; font-weight:900; font-size:11px; border-radius:4px;
  background:var(--lilac); color:var(--ink); position:relative; user-select:none; }
.myb-cell.open { background:var(--cream); color:var(--ink); }
.myb-cell.mine { background:var(--bad); }
.myb-cell.flag { background:var(--gold,var(--yellow)); }
.myb-cell.scan { box-shadow:inset 0 0 0 2px var(--mint); }
.myb-cell.owned::after { content:""; position:absolute; right:1px; bottom:1px; width:5px; height:5px; border-radius:50%;
  background:var(--own,var(--purple)); border:1px solid rgba(0,0,0,.4); }
.myb-cell.target { cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,200,87,.9); }
.myb-cell.target:not(.covered) { box-shadow:inset 0 0 0 2px rgba(255,200,87,.9); }
.myb-cell.sel { outline:3px solid var(--ink); outline-offset:-1px; z-index:2; }
.myb-cell.n1{color:#2566c4}.myb-cell.n2{color:#238c53}.myb-cell.n3{color:#c43f4c}.myb-cell.n4{color:#6c42b9}
.myb-cell.n5{color:#8d4c21}.myb-cell.n6{color:#147f7f}.myb-cell.open.mine{color:var(--white)}

/* ── Signal Split ─────────────────────────────────────────────── */
.ss-host-wrap { width:100%; }
.ss-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:#0a1020; }
.ss-slider { margin:14px 0 6px; }
.ss-ends { display:flex; justify-content:space-between; gap:10px; font-weight:800; font-size:.9rem; margin-bottom:8px; }
.ss-ends span:first-child { color:var(--purple); } .ss-ends span:last-child { color:var(--coral); text-align:right; }
.ss-range { width:100%; height:34px; accent-color:var(--accent,var(--blue)); }
.ss-val { text-align:center; font-family:var(--mono); font-weight:900; font-size:2.4rem; margin-top:4px; }
.ss-clue { width:100%; min-height:72px; border:2px solid var(--line,var(--ink)); border-radius:12px; padding:10px;
  background:var(--card,var(--paper)); color:inherit; font:inherit; resize:none; margin:6px 0; }
.ss-target { text-align:center; margin:12px 0; padding:12px; border-radius:14px;
  background:linear-gradient(160deg,rgba(103,228,255,.2),rgba(103,228,255,.06)); border:2px solid rgba(103,228,255,.4); }
.ss-target-num { font-family:var(--mono); font-weight:900; font-size:2.6rem; margin-top:4px; }

/* ── Blink Draw ───────────────────────────────────────────────── */
.bd-host-wrap { width:100%; }
.bd-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:var(--cream); }
.bd-drawtop { text-align:center; }
.bd-wordcat { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); font-weight:800; }
.bd-word { font-size:2.4rem; font-weight:900; line-height:1.05; margin:2px 0 2px; }
.bd-canvas-wrap { display:flex; justify-content:center; margin:8px 0; }
.bd-canvas { width:100%; max-width:340px; aspect-ratio:300/224; border:3px solid var(--line,var(--ink)); border-radius:14px; background:#fff; touch-action:none; cursor:crosshair; }
.bd-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0; }
.bd-thumb { position:relative; padding:0; border:3px solid var(--line,var(--ink)); border-radius:12px; overflow:hidden; background:#fff; aspect-ratio:4/3; }
.bd-thumb.sel { border-color:var(--gold,var(--yellow)); box-shadow:0 0 0 3px rgba(255,200,87,.4); }
.bd-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.bd-thumb-n { position:absolute; left:4px; top:4px; background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; font-weight:800; border-radius:6px; padding:1px 5px; }
.bd-sketch-wrap { display:flex; justify-content:center; margin:8px 0; }
.bd-sketch { width:100%; max-width:320px; aspect-ratio:4/3; object-fit:contain; background:#fff; border:3px solid var(--line,var(--ink)); border-radius:14px; }
.bd-input { width:100%; min-height:48px; border:2px solid var(--line,var(--ink)); border-radius:12px; padding:0 12px; background:var(--card,var(--paper)); color:inherit; font:inherit; font-weight:700; }
.bd-conf-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 4px; }
.bd-conf { display:flex; gap:6px; } .bd-conf .btn { min-width:44px; }
.bd-hint { text-align:center; font-weight:800; color:var(--yellow); margin:6px 0; }
.bd-caplist { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.bd-cap { text-align:left; white-space:normal; }
.bd-cap.mine { opacity:.55; }
.bd-chain { display:flex; gap:6px; overflow-x:auto; padding:6px 0; }
.bd-chain-cell { flex:0 0 auto; width:96px; text-align:center; }
.bd-chain-cell img { width:96px; height:72px; object-fit:contain; background:#fff; border:2px solid var(--line,var(--ink)); border-radius:8px; }
.bd-chain-n { display:block; font-size:.66rem; font-weight:800; margin-top:2px; }
.bd-sabpick { margin:10px 0; }
.bd-sab-btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* ── Pattern Panic ────────────────────────────────────────────── */
.pp-host-wrap { width:100%; }
.pp-frame { width:100%; height:calc(100dvh - 96px); min-height:520px; border:0; border-radius:14px; display:block; background:#0e1017; }
.pp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; max-width:360px; margin:6px auto; }
.pp-grid.big { max-width:300px; gap:5px; }
.pp-grid.mini { max-width:64px; gap:2px; margin:0; }
.pp-tile { aspect-ratio:1; border-radius:9px; border:2px solid rgba(0,0,0,.35); cursor:pointer; position:relative; transition:transform .06s; }
.pp-grid.mini .pp-tile { border-radius:3px; border-width:1px; cursor:default; }
.pp-tile:active { transform:scale(.94); }
.pp-tile.sel { outline:3px solid var(--ink); outline-offset:1px; z-index:2; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.pp-tile.good::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(0,0,0,.5); font-weight:900; font-size:.9rem; }
.pp-tile.empty { background:#252b34 !important; border-style:dashed; cursor:pointer; }
.pp-tray { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; width:100%; max-width:170px; margin:2px auto 8px; }
.pp-racehead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.pp-racehead b { font-family:var(--mono); font-size:1.2rem; }
.pp-mini { min-width:64px; }
.pp-mini.jammed { padding:8px 10px; border-radius:8px; background:repeating-linear-gradient(45deg,#2a1020,#2a1020 6px,#3a1428 6px,#3a1428 12px); }
.pp-obj { text-align:center; font-weight:800; margin-top:10px; color:var(--ink-dim); }
/* Punchline Party Pad end screen (play again / lobby) */
.pl-final .pl-standings { width:min(560px,92vw); margin:14px auto 0; display:flex; flex-direction:column; gap:8px; }
.pl-final .pl-rank { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px;
  border:2px solid var(--line,var(--ink)); border-left:6px solid var(--pc,var(--purple)); background:var(--card,var(--paper)); }
.pl-final .pl-rank.win { border-color:var(--gold,var(--yellow)); box-shadow:0 0 0 2px rgba(255,210,90,.25); }
.pl-final .pl-rn { font-family:var(--mono,monospace); font-weight:800; color:var(--ink-dim); }
.pl-final .pl-nm { flex:1; font-weight:800; text-align:left; }
.pl-final .pl-sc { font-family:var(--mono,monospace); font-weight:800; color:var(--accent,var(--yellow)); }

/* Phone controller */
.bb-wind { display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0; padding:8px 14px;
  border:3px solid var(--line); border-radius:14px; background:var(--purple); color:var(--white); font-weight:900; }
.bb-wind .bb-wind-ic { font-size:1.5rem; line-height:1; }
.bb-wind .bb-wind-val { font-size:2rem; line-height:1; letter-spacing:-1px; }
.bb-wind .bb-wind-label { font-size:.7rem; letter-spacing:2px; opacity:.7; }
.bb-wind .bb-wind-arrow { font-size:1.6rem; color:var(--gold,var(--yellow)); text-shadow:0 0 8px rgba(255,210,90,.6); }
.bb-wind.calm { opacity:.75; }
.bb-wind.calm .bb-wind-val { font-size:1.4rem; letter-spacing:1px; }
.bb-wind.strong { border-color:var(--bad); animation:bb-wind-pulse 1s ease-in-out infinite; }
.bb-wind.strong .bb-wind-arrow { color:var(--bad); text-shadow:0 0 10px rgba(255,80,80,.8); }
@keyframes bb-wind-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
.bb-aim-wrap { position:relative; border:3px solid var(--line); border-radius:16px; overflow:hidden; background:var(--white); }
.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:var(--ink); 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; }
/* Aim → weapon → LOCK grouped right under the canvas; equipment tucked in a collapsible
   below so the fire button never needs a scroll. */
.bb-aimbar { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.bb-aimbar > .btn { margin-top:2px; }
.bb-gear { margin-top:10px; border:2px solid var(--line); border-radius:12px; background:var(--card); }
.bb-gear > summary { cursor:pointer; padding:10px 12px; font-weight:800; list-style:none; }
.bb-gear > summary::-webkit-details-marker { display:none; }
.bb-gear[open] > summary { border-bottom:1px solid var(--line); }
.bb-gear .bb-equip, .bb-gear .bb-actions { margin:8px 10px; }

/* 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:var(--ink); }
.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:var(--purple); color:var(--white); }
.btn.green { background:linear-gradient(135deg,#4ac58c,#2fa876); color:#08240f; }

/* ── Poker: "what if I'd stayed?" verdict ───────────────────────────────────
   Shown on the folded player's phone once the hand is settled. Colour-coded so
   the answer reads at a glance: coral when they folded a winner, mint when the
   fold was right. */
.pk-fold-verdict { width:100%; margin-top:10px; padding:14px 16px; border:var(--bw) solid var(--ink);
  border-radius:var(--r-md); background:var(--white); box-shadow:var(--shadow-sm); }
.pk-fold-verdict .fv-head { margin:0 0 4px; font-weight:900; font-size:1.05rem; }
.pk-fold-verdict p { margin:0 0 6px; }
.pk-fold-verdict .pk-myboard { margin-top:10px; }
.pk-fold-verdict.win  { background:rgba(255,112,94,.16); border-color:var(--coral); }
.pk-fold-verdict.chop { background:rgba(255,212,77,.22); }
.pk-fold-verdict.lose { background:rgba(85,214,181,.18); }

/* ── Memory Heist: the talking window ───────────────────────────────────────
   Questions are shown to everyone during the briefing; the one anchored on your
   own loot is flagged, because that is the one you can answer and the one that
   exposes you. */
.mh-qlist { display:grid; gap:9px; margin:4px 0 6px; }
.mh-qcard { border:2px solid var(--ink); border-radius:var(--r-md); background:var(--white);
  padding:11px 13px; box-shadow:var(--shadow-sm); }
.mh-qcard.mine { background:rgba(255,212,77,.26); border-color:var(--yellow); }
.mh-qtext { display:flex; gap:9px; align-items:flex-start; font-weight:800; line-height:1.35; }
.mh-qicon { font-size:1.4rem; line-height:1; flex:0 0 auto; }
.mh-qmine { margin-top:6px; font-size:.7rem; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }
.mh-loot-head.sub { margin-top:8px; color:var(--ink-soft); }
/* Owner picker sits tighter than the answer list so the two never blur together. */
.mh-accuse { grid-template-columns:1fr 1fr; }
.mh-accuse .mh-qopt { text-align:center; padding:9px 6px; font-size:.9rem; }

/* ── Poker: party points at stake ───────────────────────────────────────────
   Busting out costs 25% of your party points, so the rule is stated on the
   setup screens, kept in view while the chips are live, and spelled out at the
   moment it is charged. Never a surprise. */
.pk-stake { width:100%; background:rgba(255,212,77,.28); border:var(--bw) solid var(--ink);
  border-radius:var(--r-md); padding:13px 15px; box-shadow:var(--shadow-sm); }
.pk-stake.none { background:rgba(85,214,181,.22); }
.pk-stake.tv { margin-top:14px; background:rgba(255,212,77,.9); }
/* The friendly-game variant on the TV: opaque like its yellow sibling, so it
   reads against the felt rather than letting the board show through. */
.pk-stake.tv.none { background:rgba(85,214,181,.92); }
/* Stakes chooser on the poker setup screen — two halves of one decision. */
.pk-stakepick { display:flex; gap:8px; width:100%; margin:2px 0 10px; }
.pk-stakepick .btn { flex:1 1 0; min-width:0; font-size:.95rem; padding-inline:10px; }
.pk-stake-head { font-weight:900; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:5px; }
.pk-stake-line { margin:0; font-weight:800; line-height:1.4; }
.pk-stake.sm { padding:4px 10px; border-width:2px; box-shadow:none; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; width:auto;
  display:inline-block; margin-top:5px; }
.pk-bust { width:100%; margin-top:12px; padding:15px 16px; border:var(--bw) solid var(--ink);
  border-radius:var(--r-md); background:rgba(232,82,63,.2); box-shadow:var(--shadow-sm); }
.pk-bust.free { background:rgba(85,214,181,.2); }
.pk-bust-head { font-weight:900; font-size:1.05rem; margin-bottom:5px; }

/* ── Pictionary ───────────────────────────────────────────────── */
.pic-stage { width:100%; max-width:860px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.pic-head { text-align:center; width:100%; }
.pic-head h1 { font-size:clamp(1.4rem,3.4vw,2.3rem); margin:2px 0 4px; line-height:1.1; }
.pic-drawer { display:inline-flex; align-items:center; gap:8px; }
.pic-drawer .ava { font-size:1.1em; filter:drop-shadow(2px 2px 0 var(--pc,var(--ink))); }
.pic-canvas-wrap { width:100%; display:flex; justify-content:center; margin:10px 0; }
.pic-canvas { width:100%; max-width:640px; aspect-ratio:4/3; border:var(--bw,3px) solid var(--line,var(--ink));
  border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow); }
.pic-idle { width:100%; max-width:640px; aspect-ratio:4/3; border:var(--bw,3px) dashed var(--line-soft,var(--ink));
  border-radius:var(--r-md); background:var(--card-2); display:grid; place-items:center; font-size:3.4rem; opacity:.7; }
.pic-timer { width:100%; max-width:640px; margin:4px auto 0; }

/* Word slots (host) */
.pic-word { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:4px 0; }
.pic-slot { width:26px; height:5px; border-radius:3px; background:var(--line,var(--ink)); }
.pic-gap { width:16px; }
.pic-cat { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-dim); background:var(--card-2); border-radius:var(--r-pill); padding:.25em .8em; margin-left:6px; }
.pic-word-reveal { font-size:clamp(1.6rem,4vw,2.6rem); font-weight:900; color:var(--brand); }

/* Guesser chips (host) */
.pic-guessers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0 2px; }
.pic-guessers .pchip { border-left:5px solid var(--pc,var(--brand)); opacity:.6; }
.pic-guessers .pchip.done { opacity:1; box-shadow:0 0 0 2px var(--good); }
.pic-guessers .pchip.drawer { opacity:1; background:var(--gold); }
.pic-guessers .pchip .sc { font-family:var(--mono); font-weight:800; margin-left:4px; color:var(--good); }
.pic-reveal-line { font-size:clamp(1.05rem,2.4vw,1.4rem); font-weight:800; text-align:center; margin:10px 0 2px; }

/* PICK — word choices (drawer's phone) */
.pic-choices { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.pic-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:16px 18px; border:var(--bw,3px) solid var(--line,var(--ink)); border-radius:var(--r-md);
  background:var(--card,var(--paper)); box-shadow:var(--shadow-sm); font:inherit; cursor:pointer; text-align:left; }
.pic-choice:active { transform:translate(2px,3px); box-shadow:1px 1px 0 var(--ink); }
.pic-choice-w { font-size:1.5rem; font-weight:900; text-transform:capitalize; }
.pic-choice-cat { font-size:.8rem; font-weight:800; color:var(--ink-dim); white-space:nowrap; }

/* DRAW — drawer's phone canvas + tools */
.pic-draw-top { text-align:center; }
.pic-secret { font-size:2rem; font-weight:900; text-transform:capitalize; line-height:1.05; margin-top:2px; }
.pic-draw-wrap { display:flex; justify-content:center; margin:8px 0; }
.pic-draw-canvas { width:100%; max-width:360px; aspect-ratio:4/3; border:var(--bw,3px) solid var(--line,var(--ink));
  border-radius:14px; background:#fff; touch-action:none; cursor:crosshair; box-shadow:var(--shadow-sm); }
.pic-tools { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:8px 0; }
.pic-swatches { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.pic-swatch { width:30px; height:30px; padding:0; border-radius:50%; border:2px solid var(--line,var(--ink));
  background:var(--sw); cursor:pointer; }
.pic-swatch.on { box-shadow:0 0 0 3px var(--gold,var(--yellow)); transform:scale(1.12); }
.pic-swatch.eraser { position:relative; }
.pic-swatch.eraser::after { content:"⌫"; position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; color:var(--ink-dim); }
.pic-sizes { display:flex; gap:6px; }
.pic-size { width:38px; height:38px; padding:0; display:grid; place-items:center; border-radius:10px;
  border:2px solid var(--line,var(--ink)); background:var(--card,var(--paper)); cursor:pointer; }
.pic-size.on { box-shadow:0 0 0 3px var(--gold,var(--yellow)); }
.pic-dot { display:block; border-radius:50%; background:var(--ink); }
.pic-draw-btns { display:flex; gap:10px; margin-top:6px; }
.pic-draw-btns .btn { flex:1; }

/* DRAW — guesser's phone: live preview + guess box */
.pic-guess-top { text-align:center; }
.pic-hint { font-family:var(--mono); font-weight:800; color:var(--ink-dim); font-size:.85rem; margin-top:2px; }
.pic-guess-wrap { display:flex; justify-content:center; margin:8px 0; }
.pic-guess-canvas { width:100%; max-width:360px; aspect-ratio:4/3; border:var(--bw,3px) solid var(--line,var(--ink));
  border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
.pic-feedback { min-height:1.4em; text-align:center; font-weight:800; margin:4px 0; }
.pic-feedback.miss { color:var(--bad); }
.pic-guess-row { display:flex; gap:8px; align-items:stretch; }
.pic-input { flex:1; min-width:0; min-height:52px; border:2px solid var(--line,var(--ink)); border-radius:12px;
  padding:0 14px; background:var(--card,var(--paper)); color:inherit; font:inherit; font-weight:700; font-size:1.05rem; }
.pic-input:focus { outline:3px solid var(--purple); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════════════════
   D&D Lite — turn-based 5e adventure (battlefield + interactive sheet)
   ══════════════════════════════════════════════════════════════════════════ */
.dnd-host { display:flex; flex-direction:column; gap:14px; }
.dnd-kicker { font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--ink-mute); }

/* Title / story cards */
.dnd-titlecard { text-align:center; }
.dnd-titlecard h1 { font-size:clamp(1.8rem,5vw,3.2rem); margin:.1em 0; }
.dnd-story { max-width:820px; margin:0 auto; text-align:center; background:var(--card);
  border:2px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(18px,4vw,34px); }
.dnd-story h1 { font-size:clamp(1.6rem,4.5vw,2.8rem); margin:.15em 0 .3em; }
.dnd-storytext { font-size:clamp(1.02rem,2.2vw,1.3rem); line-height:1.55; color:var(--ink-soft); }
.dnd-setup { font-style:italic; color:var(--ink-dim); margin-top:10px; }
.dnd-story.victory { background:linear-gradient(160deg,#fff7e8,#ffe9c2); border-color:var(--warn); }
.dnd-story.defeat { background:linear-gradient(160deg,#fff,#ffe4de); border-color:var(--bad); }
.dnd-story.levelup { background:linear-gradient(160deg,#f2effe,#e7e0ff); border-color:var(--purple-light); }
.dnd-teach { margin-top:16px; }
.dnd-teach-h { font-weight:800; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); margin-bottom:8px; }
.dnd-teach-list, .dnd-classrow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.dnd-chip { background:var(--card-2); border:2px solid var(--line-soft); border-radius:var(--r-pill); padding:.28em .85em; font-weight:700; font-size:.92rem; }
.dnd-hint { text-align:center; color:var(--ink-mute); font-weight:700; margin-top:8px; }

/* Class picker (host + level-up) */
.dnd-classrow { margin:6px 0; }
.dnd-classcard { flex:1 1 210px; max-width:260px; background:var(--card); border:3px solid var(--cc,var(--purple));
  border-radius:var(--r-md); padding:14px; text-align:center; opacity:.9; }
.dnd-classcard.taken { box-shadow:0 6px 0 color-mix(in srgb,var(--cc) 40%,transparent); opacity:1; }
.dnd-classemoji { font-size:2.2rem; }
.dnd-classname { font-weight:900; font-size:1.15rem; }
.dnd-classhero { color:var(--cc); font-weight:800; }
.dnd-classblurb { font-size:.85rem; color:var(--ink-dim); margin:6px 0; line-height:1.35; }
.dnd-classclaim { font-weight:800; margin-top:4px; display:flex; flex-wrap:wrap; gap:3px; justify-content:center; min-height:1.4em; }
.dnd-claimava { font-size:1.15rem; line-height:1; }
.dnd-levelgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:14px 0; }
.dnd-levelcard { background:var(--card); border:2px solid var(--cc,var(--purple)); border-radius:var(--r-md); padding:12px; text-align:left; }
.dnd-lvhead { display:flex; align-items:center; gap:8px; font-size:1.1rem; margin-bottom:6px; }
.dnd-lvbits { margin:0; padding-left:18px; }
.dnd-lvbits li { margin:3px 0; font-weight:600; }

/* Turn clock (host + phone) — reuses .timer-label/.timerbar from the shared timer */
.dnd-turnrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dnd-turnclock { min-width:120px; }
.dnd-turnclock .timer-label { font-weight:900; font-size:.95rem; color:var(--ink-mute); }
.dnd-turnclock .timer-label.urgent { color:var(--bad); }
.dnd-turnclock.mine { margin:2px 0 4px; }
.dnd-turnclock.mine .timer-label { color:var(--purple); }

/* Combat: header + initiative strip */
.dnd-combat-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dnd-turnlabel { font-size:clamp(1.3rem,3.4vw,2.2rem); font-weight:900; }
.dnd-initstrip { display:flex; gap:6px; flex-wrap:wrap; }
.dnd-initpip { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; font-size:1.25rem;
  background:var(--card); border:2px solid var(--line-soft); }
.dnd-initpip.on { border-color:var(--cc); box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 45%,transparent); transform:translateY(-3px); }
.dnd-initpip.enemy { background:#fdeae6; }
.dnd-initpip.dead { opacity:.3; filter:grayscale(1); }
.dnd-initpip.down { opacity:.55; }

/* Battlefield */
.dnd-field { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; background:#1a1526;
  border:2px solid var(--line-soft); border-radius:var(--r-lg); padding:12px; min-height:300px;
  /* Chapter backdrop (--bg) under a dark scrim so the character sprites pop. */
  background-image:linear-gradient(180deg, rgba(18,14,28,.5), rgba(18,14,28,.72)), var(--bg, none);
  background-size:cover, cover; background-position:center, center; }
.dnd-band { display:flex; flex-direction:column; gap:8px; }
.dnd-bandlabel { text-align:center; font-weight:800; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(0,0,0,.6); }
.dnd-bandcell { display:flex; flex-direction:column; gap:10px; align-items:center; min-height:60px; }

.dnd-token { position:relative; width:100%; max-width:150px; background:var(--card); border:3px solid var(--cc,var(--purple));
  border-radius:var(--r-md); padding:8px 6px 6px; text-align:center; transition:transform .18s, box-shadow .18s; }
.dnd-token.enemy { border-style:dashed; }
.dnd-token.active { transform:translateY(-4px) scale(1.04); box-shadow:0 8px 0 color-mix(in srgb,var(--cc) 45%,transparent); z-index:2; }
.dnd-token.down { opacity:.55; filter:grayscale(.6); }
.dnd-token-emoji { font-size:2rem; line-height:1; }

/* Illustrated hero art (SF2 sprites) */
.dnd-artwrap { display:block; line-height:0; }
.dnd-artwrap.fallback { line-height:1; }
.dnd-art { display:block; width:100%; height:100%; object-fit:contain; }
.dnd-token-art { height:clamp(74px,9.5vh,138px); }
.dnd-token-art.fallback { font-size:2.2rem; text-align:center; }
.dnd-token-art .dnd-art { object-position:center bottom; filter:drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.dnd-token.active .dnd-token-art .dnd-art { transform:scale(1.05); }
.dnd-token-art.pose-attack .dnd-art { animation:dnd-lunge .55s ease; transform-origin:center bottom; }
.dnd-token-art.pose-hurt .dnd-art { animation:dnd-flinch .5s ease; }
@keyframes dnd-lunge { 0%{transform:translateX(0)} 40%{transform:translateX(7px) scale(1.06)} 100%{transform:translateX(0) scale(1.05)} }
.dnd-token.enemy .dnd-token-art.pose-attack .dnd-art { animation:dnd-lunge-l .55s ease; }
@keyframes dnd-lunge-l { 0%{transform:translateX(0)} 40%{transform:translateX(-7px) scale(1.06)} 100%{transform:translateX(0) scale(1.05)} }
@keyframes dnd-flinch { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 60%{transform:translateX(4px)} }
.dnd-classart { display:block; height:120px; margin-bottom:2px; }
.dnd-classart.fallback { font-size:2.4rem; }
.dnd-token-name { font-weight:800; font-size:.9rem; }
.dnd-token-owner { font-size:.72rem; color:var(--ink-dim); font-weight:700; }
.dnd-token-hp { font-weight:800; font-size:.82rem; }
.dnd-hpbar { height:7px; border-radius:4px; background:var(--line-soft); overflow:hidden; margin:4px 2px; }
.dnd-hpbar i { display:block; height:100%; background:var(--good); transition:width .3s; }
.dnd-token.enemy .dnd-hpbar i { background:var(--bad); }
.dnd-token-conds { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin-top:3px; }
.dnd-cond { font-size:.68rem; background:var(--card-2); border-radius:6px; padding:1px 5px; font-weight:700; }
.dnd-reach { position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:.74rem; font-weight:900; padding:2px 8px; border-radius:var(--r-pill); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.dnd-reach.melee { background:var(--good); }
.dnd-reach.ok { background:var(--purple); }
.dnd-reach.far { background:var(--ink-mute); }

/* Spotlight (the big dice readout) */
.dnd-spot { background:var(--ink); color:var(--paper); border-radius:var(--r-md); padding:12px 16px; min-height:76px; }
.dnd-spot-actor { font-weight:900; letter-spacing:.03em; opacity:.85; margin-bottom:4px; }
.dnd-spot-lines { display:flex; flex-direction:column; gap:2px; }
.dnd-spot-line { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:clamp(.9rem,2vw,1.15rem); }
.dnd-spot-line.crit { color:var(--warn); font-weight:900; }
.dnd-spot-line.good { color:#7ff0cf; }
.dnd-spot-line.bad { color:#ff9d8e; }

/* ── Phone: character sheet ─────────────────────────────────────────────── */
.dnd-player { display:flex; flex-direction:column; gap:10px; }
.dnd-sheet-head { display:flex; align-items:center; gap:10px; background:var(--card); border:3px solid var(--cc,var(--purple));
  border-radius:var(--r-md); padding:10px 12px; }
.dnd-sheet-head.myturn { box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 45%,transparent); }
.dnd-sheet-emoji { font-size:2.2rem; }
.dnd-sheet-portrait { width:58px; height:58px; border-radius:12px; overflow:hidden; flex:0 0 auto; background:color-mix(in srgb,var(--cc) 14%,var(--card)); }
.dnd-sheet-portrait .dnd-art { object-fit:cover; object-position:50% 6%; }
.dnd-sheet-portrait.fallback { display:grid; place-items:center; font-size:1.9rem; }
.dnd-p-classart { width:52px; height:52px; border-radius:10px; overflow:hidden; flex:0 0 auto; background:color-mix(in srgb,var(--cc) 14%,var(--card)); }
.dnd-p-classart .dnd-art { object-fit:cover; object-position:50% 8%; }
.dnd-p-classart.fallback { display:grid; place-items:center; font-size:1.7rem; }
.dnd-sheet-id { flex:1; min-width:0; }
.dnd-sheet-name { font-weight:900; font-size:1.15rem; }
.dnd-sheet-sub { color:var(--ink-dim); font-weight:700; font-size:.85rem; }
.dnd-sheet-defense { display:flex; gap:6px; }
.dnd-defbox { background:var(--card-2); border-radius:10px; padding:4px 10px; text-align:center; min-width:48px; }
.dnd-defbox span { display:block; font-size:.66rem; font-weight:800; color:var(--ink-mute); text-transform:uppercase; }
.dnd-defbox b { font-size:1.2rem; }
.dnd-defbox.hp b { color:var(--good); }
.dnd-sheet-hpbar { height:10px; border-radius:6px; background:var(--line-soft); overflow:hidden; }
.dnd-sheet-hpbar i { display:block; height:100%; background:var(--good); transition:width .3s; }

.dnd-tabs { display:flex; gap:6px; }
.dnd-tab { flex:1; padding:8px; border-radius:10px; border:2px solid var(--line-soft); background:var(--card); font-weight:800; }
.dnd-tab.on { border-color:var(--purple); background:var(--card-2); }

.dnd-turnbanner { text-align:center; padding:14px; border-radius:var(--r-md); background:var(--card-2);
  border:2px dashed var(--line-soft); font-weight:800; color:var(--ink-dim); }
.dnd-turnbanner.bad { background:#ffe4de; border-color:var(--bad); color:var(--bad); }

/* Action economy pills + action buttons */
.dnd-econ { display:flex; gap:6px; margin-bottom:8px; }
.dnd-econ-b { flex:1; text-align:center; padding:6px; border-radius:10px; background:var(--card-2); font-weight:800; font-size:.85rem; border:2px solid var(--line-soft); }
.dnd-econ-b.used { opacity:.45; text-decoration:line-through; }
.dnd-econ-b.move { color:var(--purple); }
.dnd-acts { display:flex; flex-direction:column; gap:6px; }
.dnd-act { text-align:left; padding:12px 14px; border-radius:12px; border:2px solid var(--line-soft); background:var(--card);
  font-weight:800; font-size:1rem; min-height:48px; }
.dnd-act.attack { border-color:#e8a33f; } .dnd-act.spell { border-color:var(--purple-light); }
.dnd-act.move { border-color:var(--good); } .dnd-act.feat { border-color:var(--warn); }
.dnd-act.util { border-color:var(--line-soft); color:var(--ink-dim); }
.dnd-act.off, .dnd-pick.off { opacity:.4; }
.dnd-endturn { margin-top:10px; }

/* Target picker */
.dnd-picker { display:flex; flex-direction:column; gap:8px; }
.dnd-picker-h { display:flex; align-items:center; gap:8px; }
.dnd-picklist { display:flex; flex-direction:column; gap:6px; }
.dnd-pick { text-align:left; padding:12px 14px; border-radius:12px; border:2px solid var(--purple); background:var(--card); font-weight:800; min-height:48px; }

/* Sheet detail */
.dnd-sheet-detail { display:flex; flex-direction:column; gap:10px; }
.dnd-abilrow { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.dnd-abil { background:var(--card-2); border-radius:10px; padding:6px 2px; text-align:center; }
.dnd-abil-k { display:block; font-size:.62rem; font-weight:800; color:var(--ink-mute); }
.dnd-abil b { font-size:1.05rem; }
.dnd-abil-m { display:block; font-size:.8rem; color:var(--purple); font-weight:800; }
.dnd-block { background:var(--card); border:2px solid var(--line-soft); border-radius:var(--r-md); padding:10px 12px; }
.dnd-block h4 { margin:0 0 6px; font-size:.92rem; }
.dnd-line { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; padding:4px 0; border-top:1px solid var(--line-soft); }
.dnd-line:first-of-type { border-top:0; }
.dnd-line .muted { font-size:.82rem; }
.dnd-slotrow { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.dnd-slot { background:var(--card-2); border-radius:8px; padding:2px 8px; font-weight:800; font-size:.8rem; }
.dnd-spelltag { background:var(--purple); color:#fff; border-radius:6px; padding:0 6px; font-size:.7rem; font-weight:800; }

/* Phone class picker */
.dnd-p-classes { display:flex; flex-direction:column; gap:8px; }
.dnd-p-class { display:flex; align-items:center; gap:10px; text-align:left; padding:12px; border-radius:12px;
  border:3px solid var(--cc,var(--purple)); background:var(--card); font-weight:800; min-height:56px; }
.dnd-p-class.mine { box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 45%,transparent); }
.dnd-p-class.taken { opacity:.45; }
.dnd-p-classname { font-size:1.05rem; } .dnd-p-classhero { color:var(--cc); }
.dnd-p-tag { margin-left:auto; font-size:.8rem; background:var(--card-2); border-radius:8px; padding:2px 8px; }
.dnd-p-story { text-align:center; display:flex; flex-direction:column; gap:12px; padding:16px 6px; }
.dnd-p-storytext { font-size:1.08rem; line-height:1.6; color:var(--ink-soft); text-align:left; }
.dnd-p-setup { font-style:italic; color:var(--ink-dim); text-align:left; line-height:1.5; }
.dnd-p-teach { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.dnd-p-story.defeat h2 { color:var(--bad); }

/* Combat log overlay (phone) */
.dnd-logwrap { position:relative; }
.dnd-logbtn { width:100%; padding:10px; border-radius:12px; border:2px solid var(--line-soft); background:var(--card-2); font-weight:800; }
.dnd-logov { position:fixed; inset:0; background:rgba(23,20,44,.55); display:grid; place-items:end stretch; z-index:50; }
.dnd-logbox { background:var(--paper); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:14px; max-height:70vh; display:flex; flex-direction:column; gap:8px; }
.dnd-logtop { display:flex; align-items:center; justify-content:space-between; }
.dnd-logfeed { overflow-y:auto; display:flex; flex-direction:column; gap:3px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; }
.dnd-logline { padding:2px 0; }
.dnd-logline.crit { color:#c8890f; font-weight:800; } .dnd-logline.good { color:var(--good); } .dnd-logline.bad { color:var(--bad); }

@media (max-width:560px){
  .dnd-field { gap:4px; padding:6px; }
  .dnd-token-name, .dnd-token-owner { font-size:.62rem; }
  .dnd-token-emoji { font-size:1.4rem; }
  .dnd-bandlabel { font-size:.6rem; }
  .dnd-reach { font-size:.62rem; padding:1px 5px; }
}