/* ════════════════════ TOKENS ════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --coral:  #ff5733;
  --ink:    #0f172a;
  --cream:  #fffaf5;
  --font-display: 'Lilita One', sans-serif;
  --font-body: 'Nunito', sans-serif;
}
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 600;
  font-synthesis-weight: none; /* Lilita One ships one weight; never fake-bold it */
  background: #7cc4e8;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none; /* prevent pull-to-refresh on mobile without breaking #stage scrolling */
}

/* ════════════════════ SCENE ════════════════════ */
/* One palette per time-of-day, set as vars on #scene so sky, hills, clouds
   and ground always shift together (no more orange sky over neon hills).
   Registered custom properties let the palette crossfade in browsers that
   support @property; everywhere else the swap is instant. */
@property --sky-top   { syntax: "<color>"; inherits: true; initial-value: #7cc4e8; }
@property --sky-mid   { syntax: "<color>"; inherits: true; initial-value: #bde6f4; }
@property --sky-hor   { syntax: "<color>"; inherits: true; initial-value: #fdeec9; }
@property --glow      { syntax: "<color>"; inherits: true; initial-value: rgba(255,236,180,.55); }
@property --glow-x    { syntax: "<percentage>"; inherits: true; initial-value: 80%; }
@property --glow-y    { syntax: "<percentage>"; inherits: true; initial-value: 10%; }
@property --hill-far  { syntax: "<color>"; inherits: true; initial-value: #a9d99b; }
@property --hill-mid  { syntax: "<color>"; inherits: true; initial-value: #7cc262; }
@property --hill-near { syntax: "<color>"; inherits: true; initial-value: #5fae47; }
@property --ground-c  { syntax: "<color>"; inherits: true; initial-value: #4f9c3c; }
@property --cloud-c   { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --vig       { syntax: "<color>"; inherits: true; initial-value: rgba(30,25,60,.14); }

#scene {
  /* morning (default) */
  --sky-top: #7cc4e8; --sky-mid: #bde6f4; --sky-hor: #fdeec9;
  --glow: rgba(255,236,180,.55); --glow-x: 80%; --glow-y: 10%;
  --hill-far: #a9d99b; --hill-mid: #7cc262; --hill-near: #5fae47;
  --ground-c: #4f9c3c;
  --cloud-c: #ffffff; --cloud-op: .9;
  --star-op: 0;
  --vig: rgba(30,25,60,.14);

  position: fixed; inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-hor) 100%);
  overflow: hidden; z-index: 0;
  transition: --sky-top 1.6s, --sky-mid 1.6s, --sky-hor 1.6s,
              --glow 1.6s, --glow-x 1.6s, --glow-y 1.6s,
              --hill-far 1.6s, --hill-mid 1.6s, --hill-near 1.6s,
              --ground-c 1.6s, --cloud-c 1.6s, --vig 1.6s;
}
.sky-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at var(--glow-x) var(--glow-y), var(--glow), transparent 70%);
}
.stars {
  position: absolute; inset: 0 0 34% 0; pointer-events: none;
  opacity: var(--star-op); transition: opacity 1.6s;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 24%, #fff, transparent),
    radial-gradient(2px 2px at 17% 62%, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 26% 14%, #fff, transparent),
    radial-gradient(1px 1px at 34% 48%, #fff, transparent),
    radial-gradient(2px 2px at 43% 30%, #fef3c7, transparent),
    radial-gradient(1.5px 1.5px at 52% 70%, #fff, transparent),
    radial-gradient(1px 1px at 59% 12%, #dfe6ff, transparent),
    radial-gradient(2px 2px at 68% 44%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 76% 22%, #fff, transparent),
    radial-gradient(1px 1px at 84% 58%, #fef3c7, transparent),
    radial-gradient(2px 2px at 92% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 97% 68%, #dfe6ff, transparent);
}
.stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 13% 40%, #fff, transparent),
    radial-gradient(2px 2px at 48% 18%, #fff, transparent),
    radial-gradient(2px 2px at 71% 64%, #fff, transparent),
    radial-gradient(2px 2px at 88% 15%, #fff, transparent);
  animation: star-twinkle 2.6s ease-in-out infinite;
}
@keyframes star-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.sun {
  position: absolute; top: 6vh; right: 9%;
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff6c9, #ffd75e 62%, #ffb400);
  box-shadow: 0 0 70px 22px rgba(255,200,80,.5);
  transition: top 1.6s, right 1.6s, width 1.6s, height 1.6s,
              background 1.6s, box-shadow 1.6s;
}
.sun::after { /* moon craters, night only */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  opacity: 0; transition: opacity 1.6s;
  background:
    radial-gradient(8px 8px at 62% 38%, rgba(130,145,190,.5), transparent 71%),
    radial-gradient(5px 5px at 38% 62%, rgba(130,145,190,.45), transparent 71%),
    radial-gradient(4px 4px at 58% 70%, rgba(130,145,190,.4), transparent 71%);
}
.clouds {
  position: absolute; top: 20px; left: 0;
  width: 200%; height: 110px;
  animation: drift 60s linear infinite; will-change: transform;
}
.clouds2 { top: 62px; animation-duration: 95s; animation-direction: reverse; opacity: .55; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cloud {
  position: absolute; height: 26px; border-radius: 999px;
  background: var(--cloud-c); opacity: var(--cloud-op);
  transition: opacity 1.6s, background 1.6s;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 44%; aspect-ratio: 1; left: 15%; bottom: 28%; }
.cloud::after  { width: 30%; aspect-ratio: 1; left: 49%; bottom: 42%; }
/* Crisp layered hill silhouettes: hard-stop radial domes, two per layer.
   Far layer is lightest (atmospheric haze), near layer darkest. */
.hill { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.hill-far {
  height: 40vh;
  background:
    radial-gradient(80% 166% at 15% 100%, var(--hill-far) 59.7%, transparent 60%),
    radial-gradient(90% 148% at 82% 100%, var(--hill-far) 59.7%, transparent 60%);
}
.hill-mid {
  height: 29vh;
  background:
    radial-gradient(85% 140% at 6% 100%, var(--hill-mid) 59.7%, transparent 60%),
    radial-gradient(90% 166% at 70% 100%, var(--hill-mid) 59.7%, transparent 60%);
}
.hill-near {
  height: 20vh;
  background:
    radial-gradient(120% 165% at 30% 100%, var(--hill-near) 59.7%, transparent 60%),
    radial-gradient(95% 148% at 95% 100%, var(--hill-near) 59.7%, transparent 60%);
}
.ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 15vh;
  background: var(--ground-c);
  background: linear-gradient(180deg, var(--ground-c) 0%, color-mix(in srgb, var(--ground-c) 80%, #000) 100%);
}
.scene-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(130% 100% at 50% 38%, transparent 58%, var(--vig) 100%);
}

/* sunset: everything drops into warm dusk, hills go purple-silhouette */
#scene.tod-sunset {
  --sky-top: #4c3a78; --sky-mid: #c25e79; --sky-hor: #ff9e4f;
  --glow: rgba(255,150,70,.55); --glow-x: 50%; --glow-y: 62%;
  --hill-far: #7d5578; --hill-mid: #573f6b; --hill-near: #3f2f57;
  --ground-c: #332748;
  --cloud-c: #ffd9b0; --cloud-op: .5;
  --star-op: .35;
  --vig: rgba(20,10,40,.25);
}
#scene.tod-sunset .sun {
  top: calc(100% - 47vh); right: 24%;
  width: 110px; height: 110px;
  background: radial-gradient(circle at 36% 32%, #ffe3ad, #ff9c4a 60%, #ff7b30);
  box-shadow: 0 0 90px 34px rgba(255,130,60,.55);
}

/* night: deep blue, moon out, stars on, fireflies in the grass */
#scene.tod-night {
  --sky-top: #0a0e24; --sky-mid: #171d3f; --sky-hor: #2c2050;
  --glow: rgba(150,170,255,.12); --glow-x: 78%; --glow-y: 12%;
  --hill-far: #232c4c; --hill-mid: #1a2240; --hill-near: #141b33;
  --ground-c: #101628;
  --cloud-c: #aab4d8; --cloud-op: .1;
  --star-op: 1;
  --vig: rgba(0,0,10,.3);
}
#scene.tod-night .sun {
  top: 7vh; right: 12%;
  width: 58px; height: 58px;
  background: radial-gradient(circle at 38% 35%, #ffffff, #dfe6f7 60%, #b9c4e4);
  box-shadow: 0 0 44px 12px rgba(190,205,255,.28);
}
#scene.tod-night .sun::after { opacity: 1; }

/* ──── HOMIES ──── */
.homies { position: absolute; bottom: 14vh; left: 0; right: 0; }
.homie { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.homie-body { width: 38px; height: 52px; border-radius: 50% 50% 40% 40%; border: 3px solid var(--ink); }
.homie-head {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink);
  background: #ffdab0; display: flex; align-items: center; justify-content: center;
}
.homie-eyes { display: flex; gap: 5px; }
.homie-eye  { width: 5px; height: 6px; background: var(--ink); border-radius: 50%; }
.bouncer { left: 6%;  animation: bounce  1.3s ease-in-out infinite; }
.bouncer .homie-body { background: #ff8a65; }
.waver   { right: 10%; animation: wave    2.0s ease-in-out infinite; }
.waver   .homie-body { background: #ffd166; }
.peeker  { left: 50%; transform: translateX(-50%); animation: peekBob 2.2s ease-in-out infinite; }
.peeker  .homie-body { background: #a8edea; }
.shy     { left: 30%; animation: shyPeek 3.0s ease-in-out infinite; }
.shy     .homie-body { background: #d4a5f5; }
.lurker  { right: 28%; animation: lurk   4.0s ease-in-out infinite; }
.lurker  .homie-body { background: #f7bfcf; }
@keyframes bounce  { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-14px); } }
@keyframes wave    { 0%,100% { transform: rotate(-5deg); }   50% { transform: rotate(5deg); } }
@keyframes peekBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-8px); } }
@keyframes shyPeek { 0%,60%,100% { transform: translateX(0); } 70%,90% { transform: translateX(-10px); } }
@keyframes lurk    { 0%,100% { transform: scale(1); }        50% { transform: scale(1.06) translateY(-4px); } }
.peeking .homie-eye { height: 9px; transition: height .15s; }

/* ──── STAGE ──── */
#stage {
  position: relative; z-index: 10;
  height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 48px;
}

/* ════════════════════ CARDS ════════════════════ */
.card {
  background: var(--cream); border: 4px solid var(--ink);
  border-radius: 24px; box-shadow: 8px 8px 0 var(--ink);
  padding: 24px; width: 100%; max-width: 420px; margin: 0 auto;
}
.card + .card { margin-top: 16px; }

/* ════════════════════ BUTTONS ════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  padding: 14px 28px; border-radius: 14px;
  border: 3px solid var(--ink); border-bottom: 7px solid var(--ink);
  cursor: pointer; transition: border-bottom-width .08s;
  text-decoration: none; color: var(--ink); user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.btn:active { border-bottom-width: 3px; }
.btn-coral  { background: var(--coral); color: white; }
.btn-teal   { background: #06b6d4; color: white; }
.btn-purple { background: #a855f7; color: white; }
.btn-red    { background: #ef4444; color: white; }
.btn-green  { background: #22c55e; color: white; }
.btn-white  { background: white; }
.btn-sm     { font-size: 1rem; padding: 10px 20px; }
.btn-xl     { font-size: 1.5rem; padding: 18px 36px; }
.btn-full   { width: 100%; }

/* ════════════════════ FORMS ════════════════════ */
.field {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 700;
  border: 3px solid var(--ink); border-radius: 12px;
  background: white; color: var(--ink); outline: none; transition: box-shadow .15s;
}
.field:focus { box-shadow: 0 0 0 3px rgba(255,87,51,.3); }
.field-code  { text-transform: uppercase; text-align: center; letter-spacing: .2em; font-size: 1.4rem; }
label { display: block; font-size: .85rem; font-weight: 800; margin-bottom: 6px; letter-spacing: .04em; }

/* ──── TAGS ──── */
.tag {
  display: inline-block; background: var(--ink); color: white;
  font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; margin-bottom: 10px;
}
.tag-coral  { background: var(--coral); }
.tag-teal   { background: #06b6d4; }
.tag-purple { background: #a855f7; }
.tag-red    { background: #ef4444; }
.tag-green  { background: #22c55e; }

/* ──── LOGO ──── */
.logo-badge {
  background: var(--coral); border: 4px solid var(--ink); border-radius: 20px;
  padding: 6px 18px; font-family: var(--font-display); font-size: 1.5rem; color: white;
  box-shadow: 4px 4px 0 var(--ink); margin-bottom: 16px; display: inline-block;
}
.logo-sub {
  font-size: .75rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.8); display: block; margin-top: -4px; text-align: center;
}

/* ──── TIMER ──── */
.timer-wrap {
  width: 100%; height: 10px; background: #e5e7eb;
  border-radius: 99px; overflow: hidden; margin-bottom: 12px; border: 2px solid var(--ink);
}
.timer-fill { height: 100%; background: #22c55e; border-radius: 99px; transition: width .8s linear, background .8s; }
.timer-label { font-size: .75rem; font-weight: 900; text-align: right; color: #64748b; margin-top: -8px; margin-bottom: 8px; }

/* ──── SUB GRID ──── */
.sub-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sub-chip {
  padding: 4px 10px; background: #e2e8f0; border-radius: 8px;
  font-size: .8rem; font-weight: 800; border: 2px solid var(--ink); transition: background .3s;
}
.sub-chip.done { background: #bbf7d0; }

/* ════════════════════ PER-GAME ════════════════════ */

/* ──── ANSWERS (Read the Room) ──── */
.answer-btn {
  width: 100%; text-align: left; padding: 14px 18px;
  background: white; border: 3px solid var(--ink); border-radius: 14px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  cursor: pointer; margin-bottom: 8px; border-bottom: 5px solid var(--ink);
  transition: border-bottom-width .08s;
  touch-action: manipulation;
}
.answer-btn:active { border-bottom-width: 2px; }
.answer-btn.chosen { background: #fef9c3; }
.reveal-answer {
  font-family: var(--font-display); font-size: 1.4rem;
  background: white; border: 3px solid var(--ink); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 8px;
}
.reveal-author { font-size: .75rem; font-weight: 900; color: #64748b; margin-top: 4px; }
.reveal-winner-card {
  background: #fef9c3; border: 4px solid var(--ink); border-radius: 20px;
  padding: 18px; box-shadow: 6px 6px 0 var(--ink); margin-bottom: 12px; text-align: center;
}
.drumroll {
  font-family: var(--font-display); font-size: 1.4rem; text-align: center;
  padding: 20px; color: #64748b;
  animation: pulse-text .5s ease-in-out infinite alternate;
}
@keyframes pulse-text { from { opacity: .5; } to { opacity: 1; } }

/* ──── HOST ──── */
#host-screen { display: none; width: 100%; max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
#bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: none;
}
#vote-physics {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: none;
}
.host-bar {
  background: var(--coral); border: 4px solid var(--ink); border-radius: 16px;
  padding: 12px 20px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 4px 4px 0 var(--ink);
}
.host-bigcode {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 700;
  letter-spacing: .15em; text-align: center; color: var(--ink);
}
.host-prompt { font-family: var(--font-display); font-size: 1.5rem; text-align: center; margin-bottom: 16px; line-height: 1.35; }
.watch-screen { text-align: center; padding: 32px 20px; font-family: var(--font-display); font-size: 1.3rem; color: #64748b; }

/* ──── WHEEL ──── */
.wheel-wrap { position: relative; width: 300px; height: 300px; margin: 24px auto; }
.wheel-ptr  {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 28px; z-index: 2; color: var(--ink);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
/* Everything drawn on the wheel itself must be rotation-invariant (centered
   rings, no offset shadows) — an offset shadow spins with the element and
   reads as a black blob orbiting the wheel. */
#spin-wheel {
  width: 300px; height: 300px; border-radius: 50%;
  border: 6px solid var(--cream);
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px rgba(15,23,42,.25);
  transform-origin: 50% 50%;
  background: var(--cream);
}
.wheel-wrap::after { /* static soft ground shadow that does NOT rotate */
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  box-shadow: 0 16px 34px rgba(5,8,20,.45);
  pointer-events: none; z-index: -1;
}
.wheel-game-label {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  text-align: center; min-height: 2.4rem; margin-top: 12px;
  opacity: 0; transition: opacity .5s;
}
#spin-wheel text { font-family: var(--font-display); }

/* ──── secret game picker (press C five times) ──── */
.picker-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.65); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.picker-card { max-width: 380px; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.picker-game {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: white; border: 3px solid var(--ink); border-bottom-width: 5px;
  font-family: var(--font-body); font-weight: 800; font-size: .85rem; text-align: left;
  box-shadow: inset 4px 0 0 var(--pg-color, var(--coral));
  transition: border-bottom-width .08s; touch-action: manipulation;
}
.picker-game:active { border-bottom-width: 3px; }
.picker-icon { font-size: 1.3rem; }
.picker-name { flex: 1; }

/* ──── PLAYERS ──── */
.player-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.player-chip {
  padding: 6px 12px; background: white; border: 2.5px solid var(--ink);
  border-radius: 10px; font-size: .85rem; font-weight: 800;
  display: flex; align-items: center; gap: 6px;
}
.player-chip.offline { opacity: .4; filter: grayscale(1); }
.player-chip.spinner { background: var(--coral); color: white; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pip     { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.pip.off { background: #e5e7eb; }

/* ──── SCORES ──── */
.score-list { list-style: none; }
.score-row  {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 2px solid #f1f5f9;
}
.score-row:last-child { border-bottom: none; }
.score-rank { font-family: var(--font-display); font-size: 1.1rem; width: 28px; }
.score-pts  { font-family: var(--font-display); font-size: 1.3rem; color: var(--coral); }

/* ──── HOT TAKE ──── */
.ht-panel {
  background: var(--cream); border: 4px solid var(--ink);
  border-radius: 24px; padding: 20px; box-shadow: 8px 8px 0 var(--ink); color: var(--ink);
}
.ht-bar { width: 100%; height: 12px; background: #e5e7eb; border-radius: 99px; overflow: hidden; border: 2px solid var(--ink); }
.ht-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 99px; transition: width .2s linear; }

/* Shared game countdown (UIManager countdownBarHTML/startCountdown). The
   fill takes the game's accent via --gt-color and shifts red near zero. */
.gt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gt-label { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: #64748b; }
.gt-count { font-family: var(--font-display); font-size: 1.4rem; }
.gt-bar { width: 100%; height: 12px; background: #e5e7eb; border-radius: 99px; overflow: hidden; border: 2px solid var(--ink); }
.gt-fill { height: 100%; background: var(--gt-color, #f59e0b); border-radius: 99px; transition: width .2s linear, background .3s; }
.gt-fill.danger { background: #ef4444; }
.ht-statement {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.25;
  color: var(--ink); text-align: center; margin: 18px 0;
}
.ht-statement.small { font-size: 1.15rem; margin: 12px 0; }
/* Vote buttons */
.ht-vote-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ht-vote {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: white;
  border: none; border-radius: 16px; padding: 22px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.4); transition: box-shadow .08s;
  touch-action: manipulation;
}
.ht-vote span { font-size: 1.8rem; }
.ht-vote:active { box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.ht-vote:disabled { opacity: .6; cursor: default; }
.ht-agree    { background: #22c55e; }
.ht-disagree { background: #ef4444; }
.ht-waiting { text-align: center; padding: 24px 0; }
/* Prediction rows */
.ht-prow {
  display: flex; align-items: center; justify-content: space-between;
  background: #f1f5f9; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px;
}
.ht-pname { font-size: .92rem; color: var(--ink); font-weight: 600; }
.ht-pbtns { display: flex; gap: 6px; }
.ht-pbtn {
  width: 48px; height: 44px; border-radius: 10px; font-size: 1.3rem;
  background: white; border: 2px solid #cbd5e1; cursor: pointer;
  filter: grayscale(1) opacity(.55); transition: all .12s;
  touch-action: manipulation;
}
.ht-pbtn.agree.sel    { background: #bbf7d0; border-color: #22c55e; filter: none; }
.ht-pbtn.disagree.sel { background: #fecaca; border-color: #ef4444; filter: none; }
/* Reveal */
.ht-split { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.ht-split-seg {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  padding: 6px 16px; border-radius: 99px;
}
.ht-split-seg.agree    { background: #dcfce7; color: #16a34a; }
.ht-split-seg.disagree { background: #fee2e2; color: #dc2626; }
.ht-reveal-list { margin-top: 8px; }
.ht-rrow {
  display: flex; align-items: center; justify-content: space-between;
  background: #f1f5f9; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px;
}
.ht-vote-pill {
  font-size: .72rem; font-weight: 900; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 99px; color: white;
}
.ht-vote-pill.agree    { background: #22c55e; }
.ht-vote-pill.disagree { background: #ef4444; }

/* ──── FILTHY FILL-IN (CAH-style) ──── */
.cah-black {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.3;
  background: #0f172a; color: #f8fafc; border: 3px solid #22c55e; border-radius: 16px;
  padding: 16px; margin: 14px 0; text-align: center;
}
.cah-black.small { font-size: 1.05rem; padding: 12px; margin: 10px 0; }
/* The punchline's own moment — bigger than the normal card, glowing border,
   so it reads as the big reveal rather than blending into the score screen
   that follows it. */
.cah-black.word-reveal {
  font-size: 1.75rem; padding: 24px; border-width: 4px;
  box-shadow: 0 0 0 6px rgba(34,197,94,.25), 6px 6px 0 var(--ink);
}
.cah-fill { color: #4ade80; text-decoration: underline; text-underline-offset: 3px; }
.cah-white {
  display: block; width: 100%; text-align: left; padding: 14px 16px;
  background: white; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px;
  font-family: var(--font-body); font-size: .98rem; font-weight: 700;
  cursor: pointer; margin-bottom: 8px; border-bottom: 5px solid var(--ink);
  transition: border-bottom-width .08s;
  touch-action: manipulation;
}
.cah-white:active   { border-bottom-width: 2px; }
.cah-white:disabled { opacity: .5; cursor: default; }
.cah-white.chosen   { background: #bbf7d0; opacity: 1; border-color: #16a34a; }

/* ──── SYNC OR SWIM ──── */
.beat-circle {
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--coral); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  margin: 16px auto; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: white;
  transition: transform .05s, box-shadow .05s;
}
.beat-circle.pulse { transform: scale(1.18); box-shadow: 0 0 40px rgba(255,87,51,.5); }
.tap-btn {
  width: 100%; height: 200px; border-radius: 24px;
  background: linear-gradient(175deg, #ff6b47, #ff3811);
  border: 4px solid var(--ink); border-bottom: 8px solid var(--ink);
  color: white; font-family: var(--font-display); font-size: 3.2rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .06s, border-bottom-width .06s;
  touch-action: none; user-select: none; -webkit-user-select: none;
  margin-bottom: env(safe-area-inset-bottom);
}
.tap-btn:active { border-bottom-width: 3px; }
.sync-result-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 2px solid #f1f5f9; }
.grade-pocket { color: #16a34a; font-weight: 900; }
.grade-close  { color: #d97706; font-weight: 900; }
.grade-off    { color: #ef4444; font-weight: 900; }
.grade-silent { color: #94a3b8; font-weight: 900; }

/* ──── CANVAS CRYPTID ──── */
.draw-canvas {
  width: 100%; max-width: 360px; height: 260px; background: white;
  border: 4px solid var(--ink); border-radius: 12px;
  touch-action: none; cursor: crosshair; display: block; margin: 0 auto;
}
.part-badge { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--coral); display: block; text-align: center; margin-bottom: 8px; }
.canvas-wrap { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.monster-outer { background: white; border: 4px solid var(--ink); border-radius: 16px; padding: 12px; box-shadow: 6px 6px 0 var(--ink); display: inline-block; }
.monster-wrap { display: flex; flex-direction: column; align-items: center; }
.monster-part { width: 100%; max-width: 300px; display: block; margin: 0; border: none; }

/* ════════════════════ UTILITIES ════════════════════ */
.center { text-align: center; }
.mt8  { margin-top: 8px; }  .mt12 { margin-top: 12px; }  .mt16 { margin-top: 16px; }
.mb8  { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.gap8 { display: flex; flex-direction: column; gap: 8px; }
.row  { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }
.muted { color: #64748b; }
h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 10px; }
h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; }

/* ──── PLAYER COLORS ──── */
/* Colored left border accent on score rows */
.score-row.colored { padding-left: 10px; border-left: 4px solid var(--row-color, #ccc); }
/* Colored border on chips driven by inline style */
.player-chip { border-color: var(--chip-color, var(--ink)); }

/* ──── SCORE DELTA TOAST ──── */
.score-toast {
  position: fixed; z-index: 999; pointer-events: none;
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  color: #22c55e; text-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: toast-float 1.4s ease-out forwards;
}
@keyframes toast-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-40px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.9); }
}

/* ──── CHIP SCORE PULSE ──── */
@keyframes chip-pulse {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(34,197,94,.35); }
}
.player-chip.pulsing { animation: chip-pulse .55s ease-out; }

/* ──── MUTE BUTTON ──── */
#btn-mute {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); right: 18px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15,23,42,.7); border: 2px solid rgba(255,255,255,.25);
  color: white; font-size: 1.2rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .15s;
  touch-action: manipulation;
}
#btn-mute:hover { background: rgba(15,23,42,.9); }
#btn-mute.visible { display: flex; }

/* Reaction bar — bottom-left counterpart to the mute button. */
#reaction-bar {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 200;
  display: none; gap: 6px;
  background: rgba(15,23,42,.7); border: 2px solid rgba(255,255,255,.25);
  border-radius: 99px; padding: 5px 8px;
  backdrop-filter: blur(4px);
}
#reaction-bar.visible { display: flex; }
.react-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: none; font-size: 1.25rem;
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s;
}
.react-btn:active { transform: scale(1.3); }

/* Hivemind */
.hm-prompt {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35;
  padding: 14px 16px; background: #fdf2f8; border: 3px dashed #ec4899;
  border-radius: 14px; text-align: center; margin-bottom: 6px;
}
.hm-prompt.small { font-size: 1.05rem; padding: 10px 12px; }
.hm-cluster {
  display: flex; align-items: baseline; gap: 8px;
  background: #f8fafc; border-radius: 10px; padding: 8px 12px; margin-top: 6px;
  font-size: .88rem;
}
.hm-cluster.big { background: #fdf2f8; box-shadow: 0 0 0 2px #ec4899 inset; }
.hm-cluster.lonely { opacity: .55; }
.hm-cluster.mine { border-left: 4px solid #ec4899; }
.hm-cluster-count { font-family: var(--font-display); font-size: 1.05rem; color: #ec4899; min-width: 34px; }
.hm-cluster-text { font-weight: 800; flex: 1; }
.hm-cluster-names { font-size: .68rem; color: #94a3b8; text-align: right; }

/* Loaded Question */
.lq-prompt {
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35;
  padding: 12px 14px; background: #f0fdfa; border: 3px dashed #14b8a6;
  border-radius: 14px; text-align: center; margin-bottom: 6px;
}
.lq-prompt.small { font-size: 1rem; padding: 8px 10px; }
.lq-spotlight {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4;
  padding: 16px; background: #f0fdfa; border: 3px solid #14b8a6;
  border-radius: 14px; text-align: center; margin: 8px 0;
  box-shadow: 0 6px 0 rgba(20, 184, 166, .25);
}
.lq-yours {
  background: #fef9c3; border: 2px solid #eab308; border-radius: 10px;
  padding: 8px 12px; font-size: .8rem; font-weight: 800; text-align: center; margin: 8px 0;
}
.lq-author {
  text-align: center; font-family: var(--font-display); font-size: 1.35rem;
  margin: 8px 0 2px; color: var(--ink);
}
.lq-author strong { color: #0d9488; }
.lq-confession {
  display: flex; align-items: baseline; gap: 8px;
  background: #f8fafc; border-radius: 10px; padding: 8px 12px; margin-top: 6px;
  font-size: .88rem;
}
.lq-confession.spotlit { background: #f0fdfa; box-shadow: 0 0 0 2px #14b8a6 inset; }
.lq-confession-name { font-family: var(--font-display); font-size: .8rem; color: #0d9488; min-width: 64px; }
.lq-confession-text { font-weight: 800; flex: 1; }
.lq-confession-fingers { font-size: .68rem; color: #94a3b8; white-space: nowrap; }
.lq-live-votes { display: block; font-size: .68rem; color: #94a3b8; font-weight: 700; margin-top: 2px; }
.lq-live-tally { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.lq-tally-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #f8fafc; border-radius: 8px; padding: 6px 10px; font-size: .82rem; font-weight: 800;
}

/* The Veto Coin button (top center, above whatever the game shows). */
#veto-btn {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 250;
  background: #fbbf24; color: var(--ink); border: 3px solid var(--ink);
  font-size: .8rem; padding: 8px 14px; border-radius: 99px;
  box-shadow: 0 4px 0 rgba(15,23,42,.35);
}

/* Standings shuffle beat (between games). */
.standing-move { font-size: .75rem; font-weight: 900; margin-left: auto; padding-right: 8px; }
.standing-move.up   { color: #16a34a; }
.standing-move.down { color: #dc2626; }
.standing-move.flat { color: #cbd5e1; }

/* Spice dial (lobby, host only) — rating-style badges, PG-13 through 18+.
   Selected color escalates green → coral → red so the row reads "getting
   spicier" left to right without needing pepper icons. */
.spice-dial { text-align: center; }
.spice-title { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: #94a3b8; }
.spice-opts { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.spice-opt {
  flex: 1; max-width: 120px; padding: 8px 6px; border-radius: 10px;
  background: #f8fafc; border: 2px solid #e2e8f0;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .01em; color: #94a3b8;
  cursor: pointer; touch-action: manipulation; transition: border-color .15s, background .15s, color .15s;
}
.spice-opt[data-level="1"].on { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.spice-opt[data-level="2"].on { background: #fff7ed; border-color: var(--coral); color: var(--ink); }
.spice-opt[data-level="3"].on { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }

/* The floating emoji spawned by floatEmoji() (UIManager). */
.float-reaction {
  position: fixed; bottom: 60px; z-index: 300;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 2px 6px var(--fr-glow, rgba(15,23,42,.35)));
  will-change: transform, opacity;
}

/* ──── AUDIO PANEL (opens from the mute button: sliders + mute-all) ──── */
#audio-panel {
  position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 200;
  display: none; flex-direction: column; gap: 10px;
  width: min(250px, calc(100vw - 36px));
  background: var(--cream); border: 3px solid var(--ink); border-radius: 16px;
  padding: 14px 16px; box-shadow: 0 8px 24px rgba(15,23,42,.25);
}
#audio-panel.open { display: flex; animation: audio-pop .18s ease-out; }
@keyframes audio-pop { from { opacity: 0; transform: translateY(8px) scale(.95); } }
.audio-row { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: .85rem; }
.audio-lbl { width: 82px; flex-shrink: 0; }
.audio-row input[type="range"] {
  flex: 1; min-width: 0; height: 26px;
  accent-color: var(--coral); touch-action: manipulation; cursor: pointer;
}
#btn-mute-all {
  margin-top: 2px; padding: 8px 10px; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 10px;
  background: white; color: var(--ink);
  font-family: inherit; font-weight: 800; font-size: .8rem;
  touch-action: manipulation;
}
#btn-mute-all.muted { background: var(--ink); color: white; }

/* ════════════════════════════════════════════════════════════════════
   PLAN A — "The Show": visual identity, host experience, meta-game
   Everything below is additive; existing rules above are left untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ──── night fireflies (palette itself lives in the SCENE section above) ──── */
#scene.tod-night .ground::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 10% 30%, #fef08a, transparent),
    radial-gradient(2px 2px at 25% 60%, #fef08a, transparent),
    radial-gradient(2px 2px at 40% 20%, #fef08a, transparent),
    radial-gradient(2px 2px at 55% 70%, #fef08a, transparent),
    radial-gradient(2px 2px at 70% 40%, #fef08a, transparent),
    radial-gradient(2px 2px at 85% 65%, #fef08a, transparent),
    radial-gradient(2px 2px at 95% 25%, #fef08a, transparent);
  animation: firefly-twinkle 3s ease-in-out infinite;
}
@keyframes firefly-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ──── wheel spotlight moment ──── */
#scene.spin-active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 50% 55%, transparent 0%, transparent 18%, rgba(5,8,20,.55) 55%, rgba(5,8,20,.82) 100%);
}
.wheel-ptr { transform-origin: 50% 0%; }

/* ──── crowd characters (CrowdRenderer.js owns #scene .homies content) ──── */
.crowd-char {
  position: absolute; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  animation: crowd-idle 3s ease-in-out infinite;
}
.crowd-char.offline { opacity: .35; filter: grayscale(1); }
.crowd-figure { transform-origin: 50% 100%; }
.crowd-name {
  margin-top: -4px; font-size: .62rem; font-weight: 900; color: var(--ink);
  background: white; border: 2px solid var(--ink); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
@keyframes crowd-idle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

/* ──── MC "Roomie" speech bubble ──── */
.mc-roomie {
  position: fixed; z-index: 210; display: flex; align-items: flex-end; gap: 8px;
  pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .25s;
}
.mc-roomie.mc-active { opacity: 1; }
.mc-roomie.mc-player { left: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); max-width: 78vw; }
.mc-roomie.mc-host   { left: 0; right: 0; top: 14px; margin: 0 auto; width: fit-content; max-width: 520px; }
/* The sound-settings panel opens over the same bottom-right corner the
   bubble can stretch into on narrow screens; yield to it while it's open. */
#audio-panel.open ~ .mc-roomie.mc-player { opacity: 0 !important; pointer-events: none; }
.mc-face {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  border: 3px solid white; box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.mc-bubble {
  background: white; border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 12px; font-size: .82rem; font-weight: 700; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); min-height: 1.2em; max-width: 260px;
}

/* ──── title card (game intro splash) ──── */
.title-card {
  background: var(--cream); border: 5px solid var(--ink); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--ink); padding: 26px 28px 30px; text-align: center;
  max-width: 420px; margin: 40px auto;
  border-top: 14px solid var(--tc-color, var(--coral));
}
.title-card-icon { font-size: 3.2rem; line-height: 1.15; animation: tc-icon-bob 1.8s ease-in-out infinite; filter: drop-shadow(3px 4px 0 rgba(15,23,42,.18)); }
@keyframes tc-icon-bob { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
.title-card-badge { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--tc-color, var(--coral)); }
.title-card-tagline { margin-top: 8px; color: #64748b; font-weight: 700; font-size: .95rem; }
.title-card-how { list-style: none; margin-top: 18px; text-align: left; display: inline-block; }
.title-card-how li { font-size: .9rem; font-weight: 700; padding: 6px 0; display: flex; align-items: center; gap: 10px; }
.tc-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--tc-color, var(--coral)); color: white; border: 2.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .85rem;
}

/* ──── briefing card (per-game "how to play" screen) ──── */
.brief-card { padding: 0 0 18px; overflow: hidden; max-width: 440px; }
.brief-head {
  background: var(--bc, var(--coral));
  border-bottom: 4px solid var(--ink);
  padding: 14px 20px 12px; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.brief-icon { font-size: 2.1rem; line-height: 1; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); animation: tc-icon-bob 2.6s ease-in-out infinite; }
.brief-name { font-family: var(--font-display); font-size: 1.65rem; color: white; text-shadow: 2px 2px 0 rgba(0,0,0,.22); }
.brief-tagline { text-align: center; color: #64748b; font-weight: 800; font-size: .92rem; margin: 12px 18px 0; }
.brief-steps { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 2px; }
.brief-step {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: color-mix(in srgb, var(--bc, var(--coral)) 8%, white);
  border: 2.5px solid var(--ink); border-radius: 14px; padding: 9px 12px;
  animation: brief-step-in .45s cubic-bezier(.22,1.4,.36,1) both;
  animation-delay: calc(.1s + var(--i, 0) * .13s);
}
@keyframes brief-step-in {
  0%   { opacity: 0; transform: translateX(-22px) rotate(-1.5deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
.brief-step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bc, var(--coral)); color: white; border: 2.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .85rem;
}
.brief-step-emoji { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.brief-step-text { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.brief-note { text-align: center; color: #94a3b8; font-size: .78rem; font-weight: 700; margin: 8px 16px 0; }
.brief-btn { display: flex; margin: 14px 16px 0; width: calc(100% - 32px); }
.brief-wait { text-align: center; font-size: .85rem; margin: 14px 16px 0; }

/* ──── awards ceremony stage ──── */
.awards-card { max-width: 460px; }
.award-stage {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #131c33 0%, #1e293b 78%, #0c1122 100%);
  border: 3px solid var(--ink); border-radius: 18px;
  padding: 16px 16px 18px; margin-bottom: 12px; text-align: center;
}
.award-spotlight {
  position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
  width: 150%; height: 120%; pointer-events: none;
  background: radial-gradient(48% 60% at 50% 42%, rgba(255,224,138,.28), transparent 70%);
  animation: spotlight-on .9s ease-out both;
}
@keyframes spotlight-on { from { opacity: 0; } to { opacity: 1; } }
.award-emoji { font-size: 2.4rem; line-height: 1.1; animation: award-emoji-bob 2.6s ease-in-out infinite; }
@keyframes award-emoji-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.award-title {
  font-family: var(--font-display); font-size: 1.15rem; color: #fbbf24;
  margin: 4px 0 8px; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.award-figures {
  display: flex; justify-content: center; align-items: flex-end; gap: 6px;
  min-height: 64px; position: relative; z-index: 1;
}
.award-figure { animation: award-figure-in .55s cubic-bezier(.22,1.4,.36,1) both .25s; transform-origin: 50% 100%; }
@keyframes award-figure-in {
  0%   { opacity: 0; transform: translateY(30px) scale(.4); }
  70%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.award-boards {
  height: 10px; margin: -2px -16px 10px; position: relative; z-index: 0;
  background: linear-gradient(180deg, #6b4a2b, #4a3018);
  border-top: 2px solid #8a6238; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.award-winner { font-family: var(--font-display); font-size: 1.3rem; color: #f8fafc; }
.award-flavour { font-size: .78rem; color: #94a3b8; margin-top: 3px; }

/* ──── finale podium ──── */
.finale-card { max-width: 460px; }
.finale-title { font-family: var(--font-display); font-size: 1.8rem; margin: 6px 0 2px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 18px; min-height: 170px; }
.podium-slot { display: flex; flex-direction: column; align-items: center; width: 90px; }
.podium-figure { margin-bottom: 4px; }
.podium-name { font-size: .8rem; font-weight: 800; margin-bottom: 4px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-title { font-size: .58rem; font-weight: 800; color: #fbbf24; margin: -2px 0 4px; max-width: 92px; line-height: 1.15; }
.podium-block {
  width: 100%; border-radius: 10px 10px 0 0; border: 3px solid var(--ink);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: white;
}
.podium-rank-1 { background: #fbbf24; }
.podium-rank-2 { background: #94a3b8; }
.podium-rank-3 { background: #d97706; }
.podium-score { margin-top: 6px; font-size: .85rem; font-weight: 800; color: var(--coral); }

/* ──── toast / modal (replaces alert()/prompt()) ──── */
.ui-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 999;
  background: #0f172a; color: white; font-weight: 800; font-size: .9rem;
  padding: 10px 20px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  pointer-events: none; max-width: 86vw; text-align: center;
}
.ui-toast-error { background: #dc2626; }
.ui-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ui-modal { max-width: 340px; }

/* ──── disconnect banner ──── */
.disconnect-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 998;
  background: #dc2626; color: white; text-align: center; font-weight: 800; font-size: .85rem;
  padding: 8px; transform: translateY(-100%); transition: transform .3s;
}
.disconnect-banner.visible { transform: translateY(0); }

/* ──── room code + QR pinned corner: bottom-left on every screen (host TV
   and each player's own device), so latecomers can grab the code off
   whoever's nearest even mid-game ──── */
#host-corner {
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 150;
  display: flex; align-items: center; gap: 10px;
  background: rgba(15,23,42,.85); border-radius: 14px; padding: 8px 14px;
  border: 2px solid rgba(255,255,255,.15);
}
.host-corner-code { font-family: var(--font-display); font-size: 1.3rem; color: white; letter-spacing: .12em; }
.host-corner-qr { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.host-qr-img { width: 100%; height: 100%; border-radius: 6px; background: white; padding: 3px; display: block; }

/* ──── host screen = TV production: scale for across-the-room reading ──── */
@media (min-width: 1000px) {
  #host-screen { max-width: min(96vw, 1500px); }
  #host-screen .card, #host-screen .ht-panel { padding: 36px; }
  #host-screen .host-bigcode { font-size: 5.5rem; }
  #host-screen h2 { font-size: 2rem; }
  #host-screen .btn { font-size: 1.5rem; padding: 18px 34px; }
  #host-screen .host-prompt { font-size: 2.1rem; }
}

/* ════════════════════════════════════════════════════════════════════
   PLAN C — "Soundtrack & Script": deepened game mechanics
   Everything below is additive; existing rules above are left untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ──── Fill Me In: multi-card select + double-points tag ──── */
.cah-slot-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #16a34a; color: white; font-size: .68rem; font-weight: 900;
  margin-right: 4px;
}
.cah-double-tag { margin-left: 6px; animation: pulse-text .6s ease-in-out infinite alternate; }

/* ──── Canvas Cryptid: ink colors, undo, staged part-by-part reveal ──── */
.ink-swatches { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.ink-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink);
  cursor: pointer; padding: 0; opacity: .55; transition: opacity .15s, transform .15s;
  touch-action: manipulation;
}
.ink-swatch.active { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(15,23,42,.15); }
.monster-part-slot {
  position: relative; display: block;
  transition: opacity .4s ease, transform .4s ease;
}
.monster-part-slot.staged-hidden { opacity: 0; transform: translateY(-16px); }
.monster-part-tag {
  position: absolute; bottom: 3px; right: 5px; font-size: .6rem;
  background: rgba(0,0,0,.65); color: #fff; padding: 2px 6px; border-radius: 4px;
  pointer-events: none;
}

/* ──── Hot Take: wager star + biggest-divide card + final-round tag ──── */
.ht-prow { position: relative; }
.ht-lock-star {
  background: none; border: none; font-size: 1.1rem; cursor: pointer;
  opacity: .35; filter: grayscale(1); margin-right: 4px; padding: 2px;
  transition: opacity .15s, filter .15s, transform .15s;
  touch-action: manipulation;
}
.ht-lock-star.on { opacity: 1; filter: none; transform: scale(1.25); }
.ht-prow.locked { background: #fef9c3; box-shadow: 0 0 0 2px #f59e0b inset; }
.ht-wager-line {
  text-align: center; font-weight: 900; font-size: .95rem; margin: 4px 0 10px;
  font-family: var(--font-display);
}
.ht-wager-line.hit  { color: #16a34a; }
.ht-wager-line.miss { color: #dc2626; }
.ht-divide-card {
  background: #fff7ed; border: 2px dashed #f59e0b; border-radius: 12px;
  padding: 10px 12px; font-size: .82rem; margin: 10px 0; text-align: center; color: #78350f;
}
.ht-final-tag { display: block; margin: 4px auto 10px; width: fit-content; }
.ht-wager-hint {
  background: #fff7ed; border: 2px dashed #f59e0b; border-radius: 12px;
  padding: 8px 12px; margin: 0 0 10px; text-align: center;
  font-family: var(--font-body); font-weight: 800; font-size: .85rem; color: #92400e;
  line-height: 1.25;
}
.ht-wager-hint strong { color: #d97706; }
/* Majority mode's double-down toggle: dashed and gray until armed, then lit. */
.ht-double {
  display: block; width: 100%; margin: 0 0 10px; padding: 8px 10px;
  background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px;
  font-family: var(--font-body); font-weight: 800; font-size: .74rem; color: #64748b;
  touch-action: manipulation;
}
.ht-double.on { background: #fef9c3; border-color: #f59e0b; border-style: solid; color: #92400e; }

/* ──── Sync or Swim: ghost pulse on your own taps ──── */
.tap-wrap { position: relative; }
.ghost-pulse {
  position: absolute; inset: 0; border-radius: 24px;
  background: rgba(255,255,255,.35); opacity: 0; pointer-events: none;
}
.ghost-pulse.pulse { animation: ghost-pulse-anim .5s ease-out; }
@keyframes ghost-pulse-anim {
  0%   { opacity: .65; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* ──── reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
  .homie, .crowd-char, .crowd-figure, .clouds, .clouds2, #scene.tod-night .ground::before { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PLAN B — "Headliners": Cold Read + Mole in the Room
   Everything below is additive; existing rules above are left untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ──── Cold Read ──── */
.cr-panel {
  background: var(--cream); border: 4px solid var(--ink);
  border-radius: 24px; padding: 20px; box-shadow: 8px 8px 0 var(--ink); color: var(--ink);
}
.cr-bar { width: 100%; height: 12px; background: #e5e7eb; border-radius: 99px; overflow: hidden; border: 2px solid var(--ink); }
.cr-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #d97706); border-radius: 99px; transition: width .2s linear; }
.cr-question {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.3;
  color: var(--ink); text-align: center; margin: 12px 0;
  background: #fff8f2; border: 3px dashed #f59e0b; border-radius: 14px; padding: 14px;
}
.cr-mine {
  width: 100%; text-align: left; padding: 14px 18px;
  background: #f1f5f9; border: 3px solid var(--ink); border-radius: 14px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cr-samebrain {
  background: #fef9c3; border: 3px dashed #f59e0b; border-radius: 14px;
  padding: 10px 14px; margin: 10px 0 4px; text-align: center;
  font-size: .9rem; font-weight: 700;
  animation: samebrain-in .5s cubic-bezier(.22,1.5,.36,1) both;
}
@keyframes samebrain-in {
  0%   { opacity: 0; transform: rotate(-3deg) scale(.7); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* ──── Mole in the Room ──── */
.mole-panel {
  background: var(--cream); border: 4px solid var(--ink);
  border-radius: 24px; padding: 20px; box-shadow: 8px 8px 0 var(--ink); color: var(--ink);
}
.mole-bar { width: 100%; height: 12px; background: #e5e7eb; border-radius: 99px; overflow: hidden; border: 2px solid var(--ink); }
.mole-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #1d4ed8); border-radius: 99px; transition: width .2s linear; }
.mole-secret {
  text-align: center;
  background: #eff6ff; border: 3px dashed #3b82f6; border-radius: 14px; padding: 12px 10px; margin: 10px 0;
}
.mole-secret-label {
  display: block; font-size: .72rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: #1d4ed8; margin-bottom: 4px;
}
.mole-secret-big { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; }
.mole-secret-hint { display: block; font-size: .78rem; font-weight: 700; color: #475569; margin-top: 6px; }
.mole-secret.mole-you { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.mole-secret.mole-you .mole-secret-label { color: #b91c1c; }
.mole-secret.mole-you .mole-secret-hint { color: #991b1b; }
.mole-clue-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mole-clue-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #f1f5f9; border-radius: 10px; padding: 8px 12px; font-size: .85rem;
}
.mole-clue-name { font-weight: 800; flex: 1; }
.mole-clue-word { font-family: var(--font-display); color: #1d4ed8; }
.mole-clue-vote { font-size: .72rem; color: #64748b; font-weight: 800; }
/* Suspicion dial: tappable rows during discuss, anonymous heat per player. */
.mole-clue-row.suspectable { cursor: pointer; touch-action: manipulation; transition: box-shadow .15s, background .15s; }
.mole-clue-row.suspectable:active { background: #e2e8f0; }
.mole-clue-row.my-suspect { background: #fef2f2; box-shadow: 0 0 0 2px #ef4444 inset; }
.mole-heat { font-size: .8rem; letter-spacing: -2px; }
.mole-guess-line {
  text-align: center; font-weight: 900; font-size: .95rem; margin: 8px 0;
  font-family: var(--font-display);
}
.mole-guess-line.hit  { color: #16a34a; }
.mole-guess-line.miss { color: #dc2626; }

@media (min-width: 1000px) {
  #host-screen .cr-panel, #host-screen .mole-panel { padding: 36px; }
}

/* ════════════════════════════════════════════════════════════════════
   INK & BOIL — the hand-drawn pass
   Paper grain on card surfaces, slightly irregular "inked" corners, and a
   flipbook boil on the crowd characters (cycling the three #boil-N filters
   defined in index.html). Everything below is additive.
   ════════════════════════════════════════════════════════════════════ */

/* Paper grain: a whisper of turbulence noise over every cream surface. */
.card, .ht-panel, .cr-panel, .mole-panel, .title-card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Inked corners: no two corners of a hand-drawn card are the same radius. */
.card       { border-radius: 24px 21px 26px 22px / 22px 26px 21px 25px; }
.title-card { border-radius: 28px 24px 30px 25px / 25px 30px 24px 28px; }
.btn        { border-radius: 14px 12px 15px 13px / 13px 15px 12px 14px; }
.answer-btn, .cah-white { border-radius: 14px 12px 15px 13px / 13px 15px 12px 14px; }

/* The boil: crowd characters get redrawn a few times a second. steps(1)
   snaps between the three displacement seeds instead of morphing, which is
   what sells the flipbook look. The landing-page homies get a static wobble
   only (their bounce/wave keyframes already own their animation slot). */
.crowd-figure { animation: ink-boil .55s steps(1) infinite; }
.homie        { filter: url(#boil-1); }
@keyframes ink-boil {
  0%, 100% { filter: url(#boil-1); }
  33%      { filter: url(#boil-2); }
  66%      { filter: url(#boil-3); }
}

/* ──── drama spotlight (Imposter votes, Cold Read guessing) ──── */
/* Same trick as .spin-active: a scene-level overlay, no palette surgery.
   GameContext toggles the class; the lights come back up for the reveal. */
#scene.drama-active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 50% 42%, transparent 0%, transparent 16%, rgba(5,8,20,.6) 52%, rgba(5,8,20,.86) 100%);
  animation: drama-in .8s ease-out both;
}
@keyframes drama-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .crowd-figure { animation: none !important; filter: url(#boil-1); }
}