/* ============================================================
   THE RECKONING AT DUST HOLLOW — shared theme
   ============================================================ */
:root {
  --parchment: #e8d5a8;
  --parchment-dark: #c9a875;
  --parchment-deep: #8b6f47;
  --ink: #2a1810;
  --ink-soft: #4a3020;
  --blood: #8b2a1f;
  --blood-deep: #5a1812;
  --gold: #c9962a;
  --gold-bright: #e8b94a;
  --sage: #6b7a4a;
  --night-sky: #1a1410;
  --night-deep: #0a0805;
  --moon: #f4e8c8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  font-family: 'IM Fell English', serif;
  color: var(--ink);
  background: var(--night-deep);
  user-select: none;
  overflow-x: hidden;
}

#stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: var(--night-deep);
}

/* === EXODUS MODE — desert backdrop replaces the night-sky / town silhouettes === */
body[data-story-mode="exodus"] .sky-night,
body[data-story-mode="exodus"] .sky-day,
body[data-story-mode="exodus"] .stars,
body[data-story-mode="exodus"] .moon,
body[data-story-mode="exodus"] .sun,
body[data-story-mode="exodus"] .mountains,
body[data-story-mode="exodus"] .town {
  display: none;
}
body[data-story-mode="exodus"] #stage {
  background-image:
    linear-gradient(180deg, rgba(20, 14, 8, 0.35) 0%, rgba(20, 14, 8, 0.65) 100%),
    url('/images/exodus-desert.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* === BABYLON MODE — plain of Dura backdrop replaces the night-sky / town silhouettes === */
body[data-story-mode="babylon"] .sky-night,
body[data-story-mode="babylon"] .sky-day,
body[data-story-mode="babylon"] .stars,
body[data-story-mode="babylon"] .moon,
body[data-story-mode="babylon"] .sun,
body[data-story-mode="babylon"] .mountains,
body[data-story-mode="babylon"] .town {
  display: none;
}
body[data-story-mode="babylon"] #stage {
  background-image:
    linear-gradient(180deg, rgba(30, 12, 5, 0.30) 0%, rgba(20, 8, 4, 0.60) 100%),
    url('/images/babylon-furnace.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ─── Host-only Babylon ambient: a slowly breathing furnace + floating embers.
       Player phones never render these — they see only the static PNG.
   ───────────────────────────────────────────────────────────────────── */

/* The furnace image as its own fixed layer, so we can transform it
   (subtle Ken Burns) without fighting #stage's background system. */
.babylon-bg-layer {
  position: fixed;
  inset: -3vh -3vw;          /* extra room so the zoom never exposes edges */
  background: url('/images/babylon-furnace.png') center center / cover no-repeat;
  z-index: 0;                /* above body, below UI (which is at z-index 30+) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease-in;
  animation: furnaceBreathe 26s ease-in-out infinite;
  will-change: transform, opacity;
}
.babylon-bg-layer.is-ready { opacity: 1; }

@keyframes furnaceBreathe {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.045) translate3d(-0.5%, -0.4%, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}

/* Ember container — pinned full-viewport, clips overflow, ignores clicks. */
.embers-container {
  position: fixed;
  inset: 0;
  z-index: 1;                /* above bg layer, below UI */
  pointer-events: none;
  overflow: hidden;
}
.ember {
  position: absolute;
  bottom: -2vh;
  background: radial-gradient(
    circle,
    rgba(255, 215, 130, 0.95) 0%,
    rgba(255, 150, 60, 0.65) 35%,
    rgba(255, 90, 25, 0)      75%
  );
  border-radius: 50%;
  filter: blur(0.6px);
  box-shadow: 0 0 6px rgba(255, 140, 60, 0.45);
  opacity: 0;
  animation: emberRise linear infinite;
  will-change: transform, opacity;
  --sway: 0px;
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translate3d(var(--sway), -108vh, 0); opacity: 0; }
}

/* When the ambient layer is mounted, drop the static-PNG background on
   #stage and keep only the darkening gradient so UI text stays readable. */
body[data-story-mode="babylon"] #stage.has-babylon-ambient {
  background: linear-gradient(180deg, rgba(30, 12, 5, 0.30) 0%, rgba(20, 8, 4, 0.55) 100%);
  background-color: transparent;
}
/* Body's opaque night color would block the bg layer — make body
   transparent so the fixed layer paints through. */
body[data-story-mode="babylon"].has-babylon-ambient {
  background: transparent;
}

/* ─── Skip-dialogue button — sits in the corner of the narrator modal.
       Click while narration is playing to advance immediately.
   ───────────────────────────────────────────────────────────────────── */
.narrator-skip-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  z-index: 10;
  padding: 0.45rem 0.85rem;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 220, 180, 0.85);
  background: rgba(20, 14, 10, 0.65);
  border: 1px solid rgba(245, 220, 180, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.narrator-skip-btn:hover {
  background: rgba(245, 220, 180, 0.18);
  color: rgba(255, 240, 210, 1);
  border-color: rgba(245, 220, 180, 0.6);
}
.narrator-skip-btn:active {
  transform: translateY(1px);
}
.narrator-modal-inner { position: relative; }  /* anchor the skip button */

/* === SKIES === */
.sky-day {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #d4a574 0%, #e8b97a 25%, #c98a4a 55%, #8b5a2a 100%);
}
.sky-night {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0a0815 0%, #1a1825 40%, #2a1f1a 75%, #1a0f08 100%);
}
.sun {
  position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
  width: 18vh; height: 18vh; border-radius: 50%;
  background: radial-gradient(circle, #fff4c8 0%, #f4d68a 35%, #e8b14a 65%, transparent 75%);
  box-shadow: 0 0 80px 30px rgba(244, 214, 138, 0.4);
  z-index: 1; animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 80px 30px rgba(244, 214, 138, 0.4); }
  50%      { box-shadow: 0 0 100px 40px rgba(244, 214, 138, 0.55); }
}
.moon {
  position: fixed; top: 12%; right: 12%;
  width: 14vh; height: 14vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0, #f4e8c0 60%, #c8b890 100%);
  box-shadow: 0 0 60px 20px rgba(244, 232, 200, 0.3);
  z-index: 1;
}
.stars {
  position: fixed; inset: 0; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff8e0, transparent),
    radial-gradient(1px 1px at 25% 35%, #fff8e0, transparent),
    radial-gradient(2px 2px at 40% 15%, #fff8e0, transparent),
    radial-gradient(1px 1px at 55% 28%, #fff8e0, transparent),
    radial-gradient(1px 1px at 70% 42%, #fff8e0, transparent),
    radial-gradient(2px 2px at 85% 18%, #fff8e0, transparent),
    radial-gradient(1px 1px at 15% 55%, #fff8e0, transparent),
    radial-gradient(1px 1px at 35% 65%, #fff8e0, transparent),
    radial-gradient(1px 1px at 60% 50%, #fff8e0, transparent),
    radial-gradient(2px 2px at 90% 60%, #fff8e0, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: 0.6; } 100% { opacity: 1; } }

.mountains {
  position: fixed; bottom: 30%; left: 0; right: 0; height: 20vh; z-index: 2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><polygon points='0,200 0,120 80,80 160,140 240,60 320,110 420,40 520,100 620,70 720,130 820,50 920,90 1020,70 1120,120 1200,80 1200,200' fill='%23231510'/></svg>") no-repeat bottom;
  background-size: 100% 100%;
  opacity: 0.85;
}
.town {
  position: fixed; bottom: 0; left: 0; right: 0; height: 30vh; z-index: 2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><g fill='%231a0f08'><rect x='0' y='180' width='1200' height='120'/><rect x='80' y='130' width='90' height='150'/><polygon points='80,130 125,90 170,130'/><rect x='195' y='110' width='110' height='170'/><polygon points='195,110 250,75 305,110'/><rect x='330' y='140' width='80' height='140'/><rect x='435' y='95' width='130' height='185'/><polygon points='435,95 500,55 565,95'/><rect x='590' y='125' width='100' height='155'/><polygon points='590,125 640,90 690,125'/><rect x='715' y='115' width='95' height='165'/><polygon points='715,115 762,80 810,115'/><rect x='835' y='135' width='85' height='145'/><rect x='945' y='100' width='120' height='180'/><polygon points='945,100 1005,65 1065,100'/><rect x='1090' y='140' width='80' height='140'/><rect x='450' y='30' width='8' height='65'/><rect x='448' y='25' width='12' height='8'/></g></svg>") no-repeat bottom;
  background-size: 100% 100%;
}
.ground {
  position: fixed; bottom: 0; left: 0; right: 0; height: 12vh; z-index: 3;
  background: linear-gradient(180deg, transparent, #1a0f08 60%);
}
.vignette::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
}
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 6;
  opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* === TYPOGRAPHY === */
.display-title {
  font-family: 'Rye', serif;
  color: var(--gold-bright);
  text-shadow: 3px 3px 0 var(--blood-deep), 0 0 30px rgba(232, 185, 74, 0.4);
  letter-spacing: 0.02em; line-height: 1;
}
.saloon-title { font-family: 'Smokum', serif; color: var(--gold); letter-spacing: 0.04em; }
.typewriter { font-family: 'Special Elite', monospace; }

/* === BUTTONS === */
.btn {
  font-family: 'Rye', serif;
  /* Layered paper texture + warm tint for the letterpress feel */
  background-color: #e8d5a8;
  background-image:
    linear-gradient(180deg, rgba(255, 240, 200, 0.35) 0%, rgba(139, 111, 71, 0.25) 100%),
    url('/images/paper-clean.jpg');
  background-size: cover, cover;
  background-position: center;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 1.1rem 2.4rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55),
               0 -1px 0 rgba(80, 50, 20, 0.15);   /* gentle letterpress */
  box-shadow: 0 4px 0 var(--ink), 0 8px 20px rgba(0, 0, 0, 0.5),
              inset 0 2px 0 rgba(255, 255, 255, 0.25),
              inset 0 -2px 8px rgba(80, 50, 20, 0.18);
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.btn:hover {
  transform: translateY(-2px);
  background-image:
    linear-gradient(180deg, rgba(255, 245, 210, 0.5) 0%, rgba(139, 111, 71, 0.18) 100%),
    url('/images/paper-clean.jpg');
  box-shadow: 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, 0.6),
              inset 0 2px 0 rgba(255, 255, 255, 0.4),
              inset 0 -2px 8px rgba(80, 50, 20, 0.18);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink), 0 4px 10px rgba(0, 0, 0, 0.4); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
/* BLOOD STAMP — the high-stakes action button (Open the Vote, Call the
   Verdict, etc.). Designed as a red-ink branded card: paper texture
   shows through the red so it doesn't read as a flat rectangle.
   Subtle horizontal grain stripes simulate the brush-strokes of an
   actual ink stamp pressed on paper. */
.btn-blood {
  background-color: var(--blood-deep);
  background-image:
    /* horizontal grain — looks like brush bristles of a stamp */
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.12) 3px,
      rgba(0, 0, 0, 0.12) 4px),
    /* edge vignette — slightly darker on the bottom and corners */
    radial-gradient(ellipse 110% 90% at 50% 35%,
      rgba(255, 200, 180, 0.22) 0%,
      transparent 55%),
    linear-gradient(180deg, rgba(178, 62, 46, 0.88) 0%, rgba(82, 22, 16, 0.95) 100%),
    url('/images/paper-clean.jpg');
  background-blend-mode: multiply, screen, multiply, normal;
  background-size: auto, cover, cover, cover;
  color: var(--parchment);
  border-color: #2c0d08;                         /* near-black ink border */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),                 /* hard letterpress */
    0 0 14px rgba(255, 200, 160, 0.25);          /* faint warm glow */
  box-shadow:
    0 4px 0 #2c0d08,
    0 8px 22px rgba(70, 14, 8, 0.55),
    inset 0 2px 0 rgba(255, 220, 200, 0.18),
    inset 0 -2px 10px rgba(40, 10, 5, 0.4);
}
.btn-blood:hover {
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.10) 3px,
      rgba(0, 0, 0, 0.10) 4px),
    radial-gradient(ellipse 110% 90% at 50% 35%,
      rgba(255, 210, 190, 0.28) 0%,
      transparent 55%),
    linear-gradient(180deg, rgba(208, 78, 58, 0.92) 0%, rgba(100, 28, 20, 0.95) 100%),
    url('/images/paper-clean.jpg');
  box-shadow:
    0 6px 0 #2c0d08,
    0 14px 28px rgba(70, 14, 8, 0.65),
    inset 0 2px 0 rgba(255, 230, 210, 0.28),
    inset 0 -2px 10px rgba(40, 10, 5, 0.42);
}

/* GHOST — secondary actions (Replay Step, Ranger Speaking…, Replay Ranger).
   No longer a transparent rectangle — now a creased paper TAG that reads
   as the "minor" sibling of .btn without disappearing into the parchment
   card it sits on. */
.btn-ghost {
  background-color: #e9d9af;
  background-image:
    /* subtle paper warp / age */
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(255, 240, 200, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(120, 75, 30, 0.18) 0%, transparent 65%),
    url('/images/paper-clean.jpg');
  background-size: cover, cover, cover;
  background-blend-mode: screen, multiply, normal;
  color: var(--ink);
  border: 2px dashed var(--ink-soft);            /* dashed = tag/ticket feel */
  padding: 0.7rem 1.5rem;
  font-size: 0.92rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  box-shadow:
    0 3px 0 var(--ink-soft),
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 240, 200, 0.4);
  opacity: 0.95;
}
.btn-ghost:hover {
  background-color: #f0e2bc;
  border-style: solid;                           /* dashed → solid on hover */
  transform: translateY(-1px);
  opacity: 1;
  box-shadow:
    0 4px 0 var(--ink-soft),
    0 9px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.55);
}

/* === LAYOUT === */
.scene {
  position: relative; z-index: 30;
  min-height: 100vh; padding: 4vh 6vw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem;
}
/* Ensure all foreground content cards sit above the fixed background layers,
   regardless of any stacking-context quirks browsers might apply. */
.form-card,
.code-banner,
.roster,
.role-card-wrap,
.waiting-card,
.narrator-card,
.picker-card,
.invest-result,
.death-card,
.epilogue-card,
.ghost-card,
.lobby-stats,
.stage-toggle {
  position: relative; z-index: 35;
}
.btn { position: relative; z-index: 40; }

.center-stack { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hidden { display: none !important; }

/* === ROOM CODE DISPLAY === */
.code-banner {
  background-color: #d8c595;
  background-image: url('/images/paper-tile.jpg');
  background-size: 600px auto;
  background-repeat: repeat;
  border: 4px double var(--ink-soft);
  padding: 2rem 3rem;
  text-align: center;
  box-shadow: 0 0 80px rgba(232, 185, 74, 0.3),
              0 30px 60px rgba(0,0,0,0.6),
              inset 0 0 40px rgba(80, 50, 20, 0.25);
  max-width: 92vw;
  transform: rotate(-0.4deg);
}
.code-banner .label {
  font-family: 'IM Fell English SC', serif;
  color: var(--ink-soft); letter-spacing: 0.4em; font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.code-banner .code {
  font-family: 'Rye', serif;
  font-size: clamp(4rem, 12vw, 9rem);
  color: var(--blood-deep);
  letter-spacing: 0.15em;
  text-shadow: 3px 3px 0 rgba(232, 185, 74, 0.4),
               0 1px 0 rgba(255, 240, 200, 0.6);
  line-height: 1;
}
.code-banner .url {
  font-family: 'Special Elite', monospace;
  color: var(--ink-soft); margin-top: 1rem; font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  letter-spacing: 0.1em;
}

/* === LOBBY ROSTER === */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  width: 95vw; max-width: 1200px;
  padding: 1rem;
  max-height: 50vh; overflow-y: auto;
}
.roster-slot {
  background: rgba(232, 213, 168, 0.15);
  border: 1px dashed var(--parchment);
  padding: 0.6rem 0.8rem;
  font-family: 'IM Fell English', serif;
  color: var(--parchment);
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 56px;
  transition: all 0.4s ease;
}
.roster-slot.filled {
  background-color: #e8d5a8;
  background-image: url('/images/paper-clean.jpg');
  background-size: cover;
  border: 2px solid var(--ink);
  color: var(--ink);
  animation: slotJoin 0.5s ease-out;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4),
              inset 0 0 12px rgba(80, 50, 20, 0.15);
}
@keyframes slotJoin {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.roster-slot .portrait {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink-soft); color: var(--parchment);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.roster-slot.filled .portrait {
  background: var(--ink); border: 2px solid var(--gold);
}
.roster-slot.bot.filled {
  background: linear-gradient(180deg, #b89868 0%, #8a6f48 100%);
  border-style: dashed;
  border-color: var(--ink-soft);
  opacity: 0.92;
}
.roster-slot.bot.filled .portrait {
  background: var(--ink-soft);
  border: 2px dashed var(--gold);
}
.roster-slot .name {
  font-size: 0.85rem; line-height: 1.2;
}

/* === FORM INPUTS === clean dark card, no paper textures */
.form-card {
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.94) 0%, rgba(10, 8, 5, 0.96) 100%);
  border: 3px double var(--gold);
  padding: 3vh 4vw;
  max-width: 500px; width: 92vw;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7),
              inset 0 0 30px rgba(0, 0, 0, 0.4);
}
.form-card h2 {
  font-family: 'Rye', serif;
  color: var(--gold-bright);
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 1.5rem;
  text-shadow: 3px 3px 0 var(--blood-deep), 0 0 30px rgba(232, 185, 74, 0.35);
}
.form-card label {
  display: block;
  font-family: 'IM Fell English SC', serif;
  color: var(--parchment);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  margin-top: 1rem;
}
.form-card input {
  width: 100%;
  background: var(--parchment);
  border: 2px solid var(--ink);
  padding: 0.9rem 1rem;
  font-family: 'Special Elite', monospace;
  font-size: 1.2rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-card input:focus { outline: 2px solid var(--gold-bright); }
.form-card .btn { width: 100%; margin-top: 1.5rem; }
.form-card .err {
  color: #ff8b78; font-family: 'Special Elite', monospace;
  text-align: center; margin-top: 1rem; min-height: 1.5em;
  font-size: 0.95rem;
}

/* === SECRET ROLE CARD (player view) === */
.role-card-wrap {
  background-image: url('/images/parchment-transparent.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8))
          drop-shadow(0 0 60px rgba(232, 185, 74, 0.35));
  padding: 8vh 8vw 7vh;
  max-width: 540px; width: 94vw;
  min-height: 600px;
  text-align: center;
  animation: cardReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: rotate(-0.6deg);
}
@keyframes cardReveal {
  0% { transform: scale(0.5) rotate(-6deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.role-card-wrap .seal {
  font-family: 'IM Fell English SC', serif;
  color: var(--blood); letter-spacing: 0.4em;
  font-size: 0.85rem; margin-bottom: 1rem;
}
.role-card-wrap .character-name {
  font-family: 'Rye', serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--ink); margin-bottom: 0.3rem;
}
.role-card-wrap .character-desc {
  font-family: 'IM Fell English', serif;
  font-style: italic; color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.role-card-wrap .role-icon {
  font-size: 4.5rem; margin: 0.5rem 0;
}
.role-card-wrap .role-name {
  font-family: 'Rye', serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--ink); margin-bottom: 0.3rem;
}
.role-card-wrap .role-tag {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.25em; font-size: 0.85rem;
  margin-bottom: 1rem;
}
.role-card-wrap .role-tag.evil { color: var(--blood); }
.role-card-wrap .role-tag.good { color: var(--sage); }
.role-card-wrap .role-tag.neutral { color: var(--ink-soft); }
.role-card-wrap .bio {
  font-family: 'IM Fell English', serif;
  color: var(--ink-soft); line-height: 1.6;
  margin-bottom: 1rem;
  text-align: left;
}
.role-card-wrap .ability {
  background: rgba(42, 24, 16, 0.1);
  border-left: 4px solid var(--blood);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  text-align: left;
  font-family: 'IM Fell English', serif;
}
.role-card-wrap .ability h5 {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.2em; color: var(--ink);
  font-size: 0.8rem; margin-bottom: 0.4rem;
}
.role-card-wrap .allies {
  background: rgba(139, 42, 31, 0.1);
  border: 2px dashed var(--blood);
  padding: 1rem;
  margin-top: 1rem;
}
.role-card-wrap .allies h5 {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.2em; color: var(--blood);
  font-size: 0.8rem; margin-bottom: 0.5rem;
  text-align: center;
}
.role-card-wrap .ally-pill {
  display: inline-block;
  background: var(--ink); color: var(--parchment);
  padding: 0.3rem 0.8rem;
  margin: 0.2rem;
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  border-radius: 999px;
}

/* === HUD === */
/* ============================================================
   CROOKEM! HUD — wanted-poster chips, playfield-first.
   ------------------------------------------------------------
   DESIGN PRINCIPLES
   • Three discrete parchment chips floating at the top edge —
     no spanning background. The western sunset shows through
     the gaps between cards, keeping the playfield readable.
   • LEFT  : brand mark + game phase (small parchment chip, tilted ~−0.5°)
   • CENTER: captions + voice + music (lower-weight control chips)
   • RIGHT : ROOM CODE (DOMINANT — students copy this from across the room)
   • Material language pulled from the narrator scroll: warm cream
     parchment, dark brown ink, brass-glint accents. Built entirely
     from CSS gradients + inset shadows (no images, no extra assets).
   • Typography matches the rest of the game: IM Fell English SC for
     small-caps labels, Rye for the western display values.
   • Motion is restrained: subtle 1px hover lift, no constant bounce.
     The HUD should feel painted on, not animated.
   ============================================================ */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 1rem 1.4rem;
  z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem;
  pointer-events: none;             /* clicks pass through to playfield */
  /* No background. The cards float; the sky breathes between them. */
}
#hud > * { pointer-events: auto; }

/* ──────────────────────────────────────────────────────────
   LEFT chip — brand mark + phase
   ────────────────────────────────────────────────────────── */
.hud-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem 0.55rem 0.8rem;
  font-family: 'IM Fell English SC', 'Special Elite', serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ink, #3a2818);
  /* Parchment: warm cream w/ subtle diagonal age, burnt inner edge,
     deep drop shadow so it lifts off the western backdrop cleanly. */
  background:
    linear-gradient(135deg, #f3e4b6 0%, #e9d49a 45%, #dac17f 100%);
  border: 1.5px solid rgba(80, 50, 20, 0.55);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.45),   /* highlight rim */
    inset 0 0 18px rgba(120, 70, 25, 0.20),      /* burnt edges */
    0 7px 16px rgba(0, 0, 0, 0.55);              /* lift */
  transform: rotate(-0.5deg);                    /* hand-pinned feel */
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hud-badge:hover {
  transform: rotate(-0.5deg) translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    inset 0 0 20px rgba(120, 70, 25, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Phase number — the brand chip's display value. Rye western font. */
.hud-badge .num {
  font-family: 'Rye', 'Special Elite', serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--blood, #7a1f17);
  margin-left: 0.4rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7);
}

/* Brand mark icon on parchment — needs to be BLACK to read against
   the cream. Override the cream-invert filter + margin-right that
   .hud-logo-icon carries by default (originally meant for dark
   backgrounds — see the CROOKEM! LOGOS block above). */
#hud .hud-logo-icon {
  height: 26px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: none !important;
  margin-right: 0 !important;        /* the parent flex gap handles spacing */
  opacity: 0.92;
}

/* ──────────────────────────────────────────────────────────
   RIGHT chip — ROOM CODE (the dominant element)
   ────────────────────────────────────────────────────────── */
/* The code is the single most-read element on the HUD; students copy
   it from 10+ feet across the classroom. Make it BIG. */
.hud-badge:last-of-type {
  padding: 0.7rem 1.25rem 0.75rem;
  transform: rotate(0.5deg);
  border-width: 2px;
  border-color: rgba(120, 80, 30, 0.7);
  background:
    linear-gradient(135deg, #f5e7b8 0%, #ead49a 50%, #dcc080 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    inset 0 0 24px rgba(120, 70, 25, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.6);
}
.hud-badge:last-of-type:hover {
  transform: rotate(0.5deg) translateY(-1px);
}
.hud-badge:last-of-type .num {
  /* THIS is the readable-from-back-of-room moment. */
  font-size: 1.95rem;
  letter-spacing: 0.18em;
  margin-left: 0.5rem;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 240, 200, 0.75),
    0 2px 6px rgba(120, 30, 20, 0.25);
}

/* === ROLE TOGGLES (host setup) === */
.role-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}
.role-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(232, 213, 168, 0.08);
  border: 1px solid var(--parchment);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.role-toggle:hover { background: rgba(232, 213, 168, 0.16); }
.role-toggle.on {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.role-toggle .rt-icon { font-size: 1.4rem; flex-shrink: 0; }
.role-toggle .rt-name {
  font-family: 'Rye', serif; font-size: 0.85rem;
  color: var(--parchment); line-height: 1.1; flex: 1;
}
.role-toggle.on .rt-name { color: var(--ink); }
.role-toggle .rt-check {
  width: 18px; height: 18px;
  border: 2px solid var(--parchment);
  background: transparent;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rye', serif; font-weight: bold;
  font-size: 0.85rem; color: var(--ink);
}
.role-toggle.on .rt-check {
  background: var(--ink); border-color: var(--ink); color: var(--gold-bright);
}
.role-toggle.on .rt-check::after { content: "✓"; }

/* === NARRATOR CARD (host night/day) === */
.narrator-card {
  background-color: #d8c595;
  background-image: url('/images/paper-tile.jpg');
  background-size: 600px auto;
  background-repeat: repeat;
  border: 4px double var(--ink-soft);
  padding: 4vh 5vw;
  max-width: 760px; width: 92vw;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7),
              inset 0 0 40px rgba(80, 50, 20, 0.25);
  transform: rotate(-0.3deg);
}
.narrator-card .round-label {
  font-family: 'IM Fell English SC', serif;
  color: var(--blood-deep); letter-spacing: 0.4em;
  font-size: 0.95rem; margin-bottom: 0.6rem;
}
.narrator-card h2 {
  font-family: 'Rye', serif;
  color: var(--ink);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  text-shadow: 3px 3px 0 rgba(232, 185, 74, 0.5),
               0 1px 0 rgba(255, 240, 200, 0.6);
  margin-bottom: 1rem;
  /* Typographic flourish in place of the (dropped) colored emoji.
     Reads as a printer's ornament instead of a kid's icon. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
}
.narrator-card h2::before,
.narrator-card h2::after {
  content: "✦";
  color: var(--blood);
  font-size: 0.55em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  opacity: 0.8;
}
.narrator-card .instr {
  font-family: 'IM Fell English', serif;
  color: var(--ink); font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.6;
  margin-bottom: 1.5rem;
}
/* Submit-status caption — "0 of 3 have chosen…". Slightly bolder than
   the old version so the live count is readable from the back of the
   classroom; the ready/complete states get a stamped red stamp feel. */
.narrator-card .submit-status {
  font-family: 'Special Elite', monospace;
  color: var(--ink-soft); opacity: 0.9;
  letter-spacing: 0.08em; font-size: 1rem;
  margin-top: 0.85rem;
}
.narrator-card .submit-status .ready { color: var(--blood-deep); font-weight: bold; }
.narrator-card .submit-status.complete {
  color: var(--blood-deep);
  opacity: 1;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}

/* STEP PIPS — night-phase step indicators.
   The original were tiny 10px dots that read as bullet-points instead
   of progress. Bumped to 16px and re-styled per state:
     • done    = filled parchment chip with a tiny ink dot inside
                 (looks like a hole-punched paper progress card)
     • current = larger glowing blood-red bead with halo pulse
     • pending = empty ring with paper-shadow inset (a hole waiting to be punched) */
.narrator-card .step-pips {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.narrator-card .step-pips .pip {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  box-shadow:
    inset 0 1px 2px rgba(80, 50, 20, 0.35),
    inset 0 0 0 1px rgba(255, 240, 200, 0.35);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.narrator-card .step-pips .pip.done {
  /* hole-punched ledger dot — parchment fill + center ink dot */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(80, 30, 18, 0.85) 0%,
      rgba(80, 30, 18, 0.85) 22%,
      var(--parchment) 28%,
      var(--parchment) 100%);
  border-color: var(--ink-soft);
  box-shadow:
    inset 0 1px 1px rgba(255, 240, 200, 0.5),
    inset 0 -1px 2px rgba(80, 50, 20, 0.2);
}
.narrator-card .step-pips .pip.current {
  width: 20px; height: 20px;     /* current pip is bigger — eye lands here */
  background:
    radial-gradient(circle at 35% 35%,
      #c8362a 0%,
      var(--blood) 45%,
      var(--blood-deep) 100%);
  border-color: var(--blood-deep);
  box-shadow:
    inset 0 1px 2px rgba(255, 180, 160, 0.45),
    inset 0 -1px 2px rgba(40, 8, 5, 0.5),
    0 0 0 0 rgba(139, 42, 31, 0.7);
  animation: pipPulse 1.8s ease-in-out infinite;
}
@keyframes pipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 42, 31, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(139, 42, 31, 0); }
}

/* === TARGET PICKER (player) === */
.picker-card {
  background-color: #d8c595;
  background-image: url('/images/paper-tile.jpg');
  background-size: 500px auto;
  background-repeat: repeat;
  border: 4px double var(--blood);
  padding: 3vh 4vw;
  max-width: 600px; width: 94vw;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7),
              inset 0 0 40px rgba(80, 50, 20, 0.25);
  transform: rotate(-0.3deg);
}
.picker-card .picker-prompt {
  font-family: 'Rye', serif;
  color: var(--blood-deep);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  text-align: center; margin-bottom: 0.5rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}
.picker-card .picker-sub {
  font-family: 'IM Fell English', serif;
  color: var(--ink); font-style: italic;
  text-align: center; margin-bottom: 1.5rem;
}
.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
  max-height: 55vh; overflow-y: auto;
  padding: 0.4rem;
}
.target-tile {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border: 2px solid var(--ink);
  padding: 0.8rem 0.6rem;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 3px 0 var(--ink);
}
.target-tile:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.target-tile.selected {
  background: linear-gradient(180deg, #c84838 0%, var(--blood-deep) 100%);
  color: var(--parchment); border-color: var(--blood);
  box-shadow: 0 3px 0 var(--blood-deep), 0 0 24px rgba(139,42,31,0.5);
}
.target-tile.selected .t-name { color: var(--parchment); }
.target-tile.selected .t-desc { color: rgba(232,213,168,0.85); }
.target-tile.dead {
  opacity: 0.35; pointer-events: none; filter: grayscale(0.7);
}
.target-tile .t-portrait { font-size: 1.6rem; margin-bottom: 0.2rem; }
.target-tile .t-name {
  font-family: 'Rye', serif; font-size: 0.85rem;
  color: var(--ink); line-height: 1.1;
}
.target-tile .t-desc {
  font-family: 'IM Fell English', serif; font-style: italic;
  font-size: 0.7rem; color: var(--ink-soft); margin-top: 0.2rem;
}
.picker-actions {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.2rem;
}
.ally-row {
  background: rgba(139, 42, 31, 0.18);
  border: 1px dashed var(--blood);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.8rem;
  text-align: center;
}
.ally-row .ar-label {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.2em;
  color: var(--blood); font-size: 0.7rem;
  margin-bottom: 0.4rem;
}
.ally-row .ally-pill {
  display: inline-block;
  background: var(--ink); color: var(--parchment);
  padding: 0.25rem 0.7rem;
  margin: 0.15rem;
  font-family: 'IM Fell English', serif;
  font-size: 0.85rem;
  border-radius: 999px;
}
.team-tally {
  background: rgba(139, 42, 31, 0.15);
  border: 1px dashed var(--blood);
  padding: 0.6rem 1rem;
  margin-top: 1rem;
  font-family: 'IM Fell English', serif;
  color: var(--parchment); font-size: 0.9rem; text-align: center;
}
.team-tally .vote-row {
  display: inline-block; margin: 0.2rem 0.4rem;
  padding: 0.2rem 0.6rem;
  background: rgba(0,0,0,0.4); border-radius: 999px;
}

/* === INVESTIGATOR RESULT === */
.invest-result {
  background-color: #d8c595;
  background-image: url('/images/paper-tile.jpg');
  background-size: 500px auto;
  background-repeat: repeat;
  border: 4px double var(--ink-soft);
  padding: 3vh 4vw;
  max-width: 460px; width: 90vw;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7),
              inset 0 0 40px rgba(80, 50, 20, 0.25);
  transform: rotate(-0.3deg);
}
.invest-result .target {
  font-family: 'Rye', serif; color: var(--ink);
  font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0.5rem 0 1rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}
/* Flavor + memorize copy — was using parchment-on-parchment which is
   nearly invisible. Use the dark ink color the rest of the parchment
   cards use so kids can actually read it. */
.invest-result .invest-flavor {
  font-family: 'IM Fell English', serif;
  color: var(--ink);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.05em;
}
.invest-result .memorize-note {
  font-family: 'IM Fell English', serif;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 1rem;
}
.invest-result #invest-ack-btn { margin-top: 1.5rem; }

/* === Big colored verdict banner — middle-school readable ============ */
.verdict-banner {
  margin: 1.2rem auto 0.6rem;
  padding: 1.4rem 1rem 1.6rem;
  border-radius: 6px;
  border: 4px solid;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4),
              inset 0 0 0 1px rgba(255,255,255,0.15);
  text-align: center;
  max-width: 380px;
}
.verdict-banner .verdict-icon {
  font-family: 'Rye', serif;
  font-size: clamp(3rem, 11vw, 5rem);
  line-height: 1;
  margin-bottom: 0.3rem;
  text-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.verdict-banner .verdict-label {
  font-family: 'Rye', serif;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: 0.1em;
  line-height: 1;
}
.verdict-banner .verdict-sub {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  margin-top: 0.7rem;
  opacity: 0.9;
}

/* GREEN — Innocent / Town / Israelite */
.verdict-banner.town {
  background: linear-gradient(180deg, #2f7d2f 0%, #1f5c1f 100%);
  border-color: #0d3d0d;
  color: #f0ffe6;
}
.verdict-banner.town .verdict-icon  { color: #c4ff9a; text-shadow: 0 3px 0 #0a2a05; }
.verdict-banner.town .verdict-label { text-shadow: 0 2px 0 #0a2a05; }

/* RED — Guilty / Mafia / Egyptian */
.verdict-banner.mafia {
  background: linear-gradient(180deg, #a01818 0%, #6b0d0d 100%);
  border-color: #2a0505;
  color: #ffeae3;
}
.verdict-banner.mafia .verdict-icon  { color: #ffb3a3; text-shadow: 0 3px 0 #2a0505; }
.verdict-banner.mafia .verdict-label { text-shadow: 0 2px 0 #2a0505; }

/* === DAY DEATH REVEAL === */
.death-card {
  /* Real torn-paper PNG provides the entire visual frame — no border, no fill */
  background-image: url('/images/parchment-transparent.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  padding: 8vh 6vw 7vh;          /* big padding so text sits inside the torn edges */
  max-width: 560px; width: 92vw;
  min-height: 520px;
  text-align: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7))
          drop-shadow(0 0 50px rgba(139, 42, 31, 0.35));
  animation: deathFadeIn 1.2s ease-out;
  overflow: visible;             /* don't clip the torn edges */
  transform: rotate(-0.6deg);    /* hand-pinned feel */
}
@keyframes deathFadeIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.death-card .stamp {
  font-family: 'IM Fell English SC', serif;
  color: var(--blood); letter-spacing: 0.4em;
  font-size: 0.85rem; margin-bottom: 1rem;
}
.death-card .day-flavor {
  font-family: 'IM Fell English', serif;
  color: var(--ink-soft); font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5; margin-bottom: 1.2rem;
  border-bottom: 2px dashed var(--ink-soft); padding-bottom: 1rem;
}
/* Victim/exec card body — flex column with explicit gaps so the Rye font's
   large vertical metrics never make adjacent elements visually collide. */
#day-victim-block,
#exec-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.4rem;
}

.death-card .victim-portrait {
  font-size: 3.2rem;
  line-height: 1;            /* prevent emoji line-height from bleeding into siblings */
  filter: grayscale(0.5);
  margin: 0;
}
/* Role-pill — small uppercase badge ABOVE the name so it reads as a label,
   not a competing headline. Sits visually clear of the big Rye name. */
.death-card .victim-role {
  font-family: 'IM Fell English SC', 'Special Elite', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--blood);
  text-transform: uppercase;
  background: rgba(80, 50, 20, 0.08);
  border: 1px solid rgba(139, 42, 31, 0.35);
  padding: 0.32rem 0.9rem 0.28rem;
  border-radius: 2px;
  margin: 0;
  line-height: 1.1;
  order: 1;                   /* paint role label BEFORE name visually */
}
.death-card .victim-role.town {
  color: var(--sage);
  border-color: rgba(99, 124, 76, 0.4);
  background: rgba(99, 124, 76, 0.08);
}
.death-card .victim-role.neutral {
  color: var(--ink-soft);
  border-color: rgba(80, 50, 20, 0.3);
  background: rgba(80, 50, 20, 0.05);
}
.death-card .victim-name {
  font-family: 'Rye', serif;
  color: var(--ink);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.15;
  margin: 0;
  order: 2;
}
.death-card .victim-desc {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  max-width: 32ch;
  order: 3;
}
.death-card .victim-portrait { order: 0; }

/* === VOTE TALLY (host) === */
/* SHERIFF'S LEDGER — vote tally.
   The original bars read like a SaaS analytics chart. Redesigned as a
   ruled ledger page with red-ink stroke marks: each row is a "line
   in the book", the bar is a hand-painted ink stroke with ragged
   ends, and the leader gets a sheriff's star next to their name. */
.vote-tally {
  background-color: #f0e2bc;
  background-image:
    /* faint ledger ruling — horizontal feint lines */
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 2.05rem,
      rgba(80, 50, 20, 0.10) 2.05rem,
      rgba(80, 50, 20, 0.10) 2.1rem),
    url('/images/paper-clean.jpg');
  background-size: auto, cover;
  background-blend-mode: multiply, normal;
  border: 2px solid var(--ink-soft);
  padding: 0.6rem 1.3rem;
  margin-top: 1rem;
  font-family: 'IM Fell English', serif;
  color: var(--ink);
  max-height: 38vh; overflow-y: auto;
  box-shadow:
    inset 0 0 20px rgba(80, 50, 20, 0.18),
    inset 0 1px 0 rgba(255, 240, 200, 0.5);
}

.vote-tally .vt-row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  height: 2.1rem;                  /* aligns row to a single ledger ruling */
  border-bottom: 1px solid rgba(80, 50, 20, 0.15);
}
.vote-tally .vt-row:last-child { border-bottom: none; }

.vote-tally .vt-name {
  font-family: 'IM Fell English', serif;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* INK STROKE — track is faint, fill is a hand-painted slash with
   ragged ends. The clip-path gives the bar a slight wobble so it
   reads as a stroke of red ink rather than a CSS progress bar. */
.vote-tally .vt-bar {
  position: relative;
  height: 14px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.vote-tally .vt-bar::before {
  /* the ledger line behind the stroke */
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(80, 50, 20, 0.35);
  transform: translateY(-0.5px);
}
.vote-tally .vt-bar > div {
  position: relative;
  height: 12px;
  margin-top: 1px;
  background:
    /* paper-shows-through speckle so it reads as ink, not pixels */
    radial-gradient(circle at 20% 60%, transparent 1px, var(--blood-deep) 1.5px) 0 0/9px 9px,
    linear-gradient(90deg, var(--blood) 0%, var(--blood-deep) 100%);
  background-blend-mode: multiply, normal;
  /* ragged ends — bar looks like it was painted, not rendered */
  clip-path: polygon(
    0%   45%,
    1%   20%,  3%  70%,  6%  10%,  9%  60%,
    100% 50%,
    99%  85%, 96% 30%, 93% 90%, 90% 25%,
    0%   55%);
  filter: drop-shadow(0 1px 0 rgba(80, 25, 18, 0.4));
  transition: width 0.4s ease;
}

.vote-tally .vt-count {
  font-family: 'Rye', serif;
  color: var(--blood-deep);
  min-width: 1.8em;
  text-align: right;
  font-size: 1.05rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}

/* Leader — gets a sheriff star prepended to the name and a darker red. */
.vote-tally .vt-row.leader .vt-name {
  color: var(--blood-deep);
  font-weight: bold;
}
.vote-tally .vt-row.leader .vt-name::before {
  content: "★ ";
  color: var(--gold-bright, #e8b94a);
  text-shadow: 0 1px 0 rgba(80, 30, 10, 0.5);
}

/* === EPILOGUE === */
.epilogue-card {
  background-image: url('/images/parchment-transparent.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  padding: 8vh 6vw 7vh;
  max-width: 720px; width: 92vw;
  min-height: 600px;
  text-align: center;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7))
          drop-shadow(0 0 60px rgba(232, 185, 74, 0.35));
  transform: rotate(-0.4deg);
}
.epilogue-card h2 {
  font-family: 'Rye', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.epilogue-card .verdict-mafia { color: var(--blood); }
.epilogue-card .verdict-town  { color: var(--sage); }
.epilogue-card .verdict-stalemate { color: var(--ink-soft); }
.epilogue-card .epi-flavor {
  font-family: 'IM Fell English', serif; font-style: italic;
  color: var(--ink-soft); line-height: 1.7;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  margin-bottom: 2rem;
}
.epi-roster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem; max-height: 40vh; overflow-y: auto;
  padding: 0.5rem; margin-bottom: 1.5rem;
}
.epi-tile {
  background: rgba(42, 24, 16, 0.08);
  border: 2px solid var(--ink-soft);
  padding: 0.6rem 0.8rem;
  text-align: left;
  display: flex; align-items: center; gap: 0.6rem;
}
.epi-tile.dead { opacity: 0.55; }
.epi-tile.dead .ep-name { text-decoration: line-through; }
.epi-tile.mafia { background: rgba(139, 42, 31, 0.18); border-color: var(--blood); }
.epi-tile.town  { background: rgba(107, 122, 74, 0.18); border-color: var(--sage); }
.epi-tile.neutral { background: rgba(154, 74, 138, 0.15); border-color: #6a3a5a; }
.epi-tile .ep-portrait { font-size: 1.6rem; flex-shrink: 0; }
.epi-tile .ep-meta { display: flex; flex-direction: column; }
.epi-tile .ep-name { font-family: 'Rye', serif; font-size: 0.95rem; color: var(--ink); }
.epi-tile .ep-role {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.15em; font-size: 0.7rem;
  color: var(--ink-soft);
}

/* === GHOST (dead player) — torn page that's been left behind === */
.ghost-card {
  background-image: url('/images/parchment-transparent.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7))
          grayscale(0.4) brightness(0.85);   /* faded — they've left town */
  padding: 7vh 6vw;
  max-width: 480px; width: 92vw;
  min-height: 480px;
  text-align: center;
  transform: rotate(1deg);
}
.ghost-card .ghost-icon { font-size: 4rem; margin: 0.5rem 0; opacity: 0.6; }
.ghost-card h3 {
  font-family: 'Rye', serif; color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
.ghost-card p {
  font-family: 'IM Fell English', serif;
  color: var(--ink-soft); font-style: italic;
  line-height: 1.6;
}

/* === NARRATOR MODAL (host) — pops up every time the Ranger speaks === */
.narrator-modal {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.narrator-modal.hidden {
  opacity: 0;
  pointer-events: none;
}
.narrator-modal-inner {
  /* High-quality transparent parchment — torn edges blend with backdrop */
  background-image: url('/images/parchment-transparent.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  padding: 6vh 5vw;
  max-width: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.2rem;
  align-items: center;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 80px rgba(232, 185, 74, 0.25));
  animation: narratorModalIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* tiny rotation makes it feel hand-pinned */
  transform: rotate(-0.3deg);
}
@keyframes narratorModalIn {
  0%   { transform: scale(0.92) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@media (max-width: 720px) {
  .narrator-modal-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3vh 6vw;
  }
}

/* === CHARACTER NARRATOR (host) === */
.narrator-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1.5rem;
  align-items: center;
  width: 95vw; max-width: 1100px;
  background: rgba(10, 8, 5, 0.92);
  border: 3px solid var(--gold);
  padding: 2vh 2vw;
  box-shadow: 0 0 80px rgba(232, 185, 74, 0.25), inset 0 0 30px rgba(0,0,0,0.6);
  z-index: 35;
}
@media (max-width: 720px) {
  .narrator-stage { grid-template-columns: 1fr; text-align: center; }
}
.narrator-portrait {
  position: relative;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--parchment-dark) 0%, var(--ink-soft) 100%);
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 7rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.narrator-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.narrator-portrait img[src=""],
.narrator-portrait img:not([src]) {
  display: none;
}
.narrator-portrait.speaking {
  box-shadow: 0 0 0 3px var(--gold-bright), 0 0 40px rgba(232,185,74,0.6), 0 8px 24px rgba(0,0,0,0.6);
  animation: portraitBreathe 2.4s ease-in-out infinite;
}
@keyframes portraitBreathe {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.02); }
}
.narrator-portrait .live-tag {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--blood); color: var(--parchment);
  padding: 3px 9px;
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.2em; font-size: 0.7rem;
  display: none;
}
.narrator-portrait.speaking .live-tag { display: inline-block; }

.narrator-script {
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 200px;
}
.narrator-script .narrator-name {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.3em;
  color: var(--blood-deep);
  font-size: 0.85rem;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
.narrator-script .narrator-quote {
  font-family: 'IM Fell English', serif;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  border-left: 3px solid var(--blood-deep);
  padding: 0.4rem 0 0.4rem 1rem;
  min-height: 4em;
  white-space: pre-wrap;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}
.narrator-script .narrator-quote.empty {
  color: var(--parchment); opacity: 0.5;
  font-style: italic;
}
.narrator-script .narrator-quote.hidden-captions {
  visibility: hidden;
}
.narrator-script .narrator-meta {
  font-family: 'Special Elite', monospace;
  color: var(--ink-soft); opacity: 0.7;
  font-size: 0.75rem; letter-spacing: 0.15em;
}
.narrator-script .narrator-thinking {
  color: var(--gold-bright); font-style: italic;
  font-family: 'IM Fell English', serif;
  animation: breatheText 1.6s ease-in-out infinite;
}
@keyframes breatheText {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ──────────────────────────────────────────────────────────
   CENTER chips — captions toggle + voice + music
   ──────────────────────────────────────────────────────────
   Lower visual weight than the brand/code badges: smaller font,
   thinner border, less padding, no tilt. These are settings,
   not gameplay info — they should fade into the background
   except when the teacher reaches for them. Shared parchment
   treatment via .cap-toggle, .music-control (same class set
   they always had — only the styling changes). */
.cap-toggle,
.music-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  font-family: 'IM Fell English SC', 'Special Elite', serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink, #3a2818);
  background:
    linear-gradient(135deg, #ecdfb1 0%, #e0cf95 100%);
  border: 1px solid rgba(80, 50, 20, 0.45);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.4),
    inset 0 0 12px rgba(120, 70, 25, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.cap-toggle:hover,
.music-control:hover {
  background: linear-gradient(135deg, #f1e6ba 0%, #e6d59c 100%);
  transform: translateY(-1px);
}

/* Captions on/off: vivid ink when on, washed sepia when off. */
.cap-toggle.on  { color: var(--ink, #3a2818); }
.cap-toggle.off { color: var(--ink-soft, #7a5a3d); opacity: 0.65; }

/* Slider chips — voice + music */
.music-control { padding: 0.4rem 0.75rem; gap: 0.5rem; }
.music-control .mc-label {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.18em;
  color: var(--ink, #3a2818);
  font-size: 0.7rem;
  opacity: 0.88;
}

/* Slim track. The fill is unsynced (no JS-driven gradient) so we
   keep the track a single muted brown — slider thumb is the
   only highlight. Less visual noise. */
.music-control input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 86px;
  height: 4px;
  background: rgba(80, 50, 20, 0.32);
  border: 1px solid rgba(80, 50, 20, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

/* Brass-knob thumb — small inset highlight gives it dimensional pop
   against the parchment chip. Reads as "an actual control" not a
   flat web slider. */
.music-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background:
    radial-gradient(circle at 32% 30%, #f5dc88 0%, var(--gold-bright, #e8b94a) 55%, #a87622 100%);
  border: 1px solid rgba(60, 35, 10, 0.75);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
.music-control input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  background:
    radial-gradient(circle at 32% 30%, #f5dc88 0%, var(--gold-bright, #e8b94a) 55%, #a87622 100%);
  border: 1px solid rgba(60, 35, 10, 0.75);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
.music-control input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
.music-control input[type=range]:active::-moz-range-thumb     { cursor: grabbing; }

/* Percent readout — Rye for the western numeric flair, blood-red so
   it pops against the parchment but doesn't compete with the brand
   chip's bigger phase number. */
.music-control .mc-pct {
  font-family: 'Rye', 'Special Elite', serif;
  color: var(--blood, #7a1f17);
  font-size: 0.78rem;
  min-width: 2.6em;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}

/* === SAVED GAMES (host setup — resume in-progress games) === */
.saved-games {
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.94) 0%, rgba(10, 8, 5, 0.96) 100%);
  border: 2px solid var(--gold);
  padding: 1.1rem 1.4rem;
  max-width: 540px; width: 92vw;
  margin-bottom: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.55);
}
.saved-games-header {
  font-family: 'IM Fell English SC', serif;
  color: var(--gold-bright);
  letter-spacing: 0.3em;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 0.8rem;
}
.saved-games-list { display: flex; flex-direction: column; gap: 0.5rem; }
.saved-game-card {
  background: rgba(232, 213, 168, 0.08);
  border: 1px solid var(--parchment);
  padding: 0.65rem 0.9rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.saved-game-card:hover {
  background: rgba(232, 213, 168, 0.18);
  border-color: var(--gold-bright);
  transform: translateX(2px);
}
.saved-game-card .sg-code {
  font-family: 'Rye', serif;
  font-size: 1.6rem;
  color: var(--gold-bright);
  letter-spacing: 0.1em;
  min-width: 4ch;
  text-shadow: 2px 2px 0 var(--blood-deep);
}
.saved-game-card .sg-meta {
  flex: 1;
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  color: var(--parchment);
  line-height: 1.4;
  text-align: left;
}
.saved-game-card .sg-archetype {
  color: var(--gold);
  font-style: italic;
}
.saved-game-card .sg-when { opacity: 0.7; }
.saved-game-card .sg-delete {
  background: transparent;
  border: 1px solid rgba(232, 213, 168, 0.3);
  color: var(--parchment);
  width: 30px; height: 30px;
  font-family: 'Rye', serif;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.saved-game-card .sg-delete:hover {
  background: var(--blood);
  border-color: var(--blood);
  color: var(--parchment);
}
.saved-games-or {
  text-align: center;
  margin-top: 0.9rem;
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.3em;
  color: var(--parchment);
  opacity: 0.45;
  font-size: 0.72rem;
}

/* === SEED PICKER (host setup) === */
.seed-picker {
  background: rgba(232, 213, 168, 0.08);
  border: 1px solid var(--parchment);
  padding: 0.8rem;
  margin-top: 0.5rem;
}
.seed-picker select {
  width: 100%;
  background: var(--parchment);
  border: 2px solid var(--ink);
  padding: 0.6rem 0.8rem;
  font-family: 'Special Elite', monospace;
  font-size: 1rem;
  color: var(--ink);
}
.seed-picker .seed-blurb {
  margin-top: 0.6rem;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--parchment);
  font-size: 0.9rem;
  line-height: 1.4;
  min-height: 2.5em;
  opacity: 0.85;
}

/* === CHARACTER NAME BADGE (player — always visible) === */
.name-badge {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 60;
  background: rgba(10, 8, 5, 0.92);
  border: 2px solid var(--gold);
  padding: 0.45rem 0.9rem;
  display: flex; align-items: center; gap: 0.55rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  max-width: calc(100vw - 1.4rem);
}
.name-badge .nb-portrait {
  width: 32px; height: 32px;
  background: var(--ink-soft);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.name-badge .nb-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.name-badge .nb-label {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.25em; color: var(--parchment);
  font-size: 0.55rem; opacity: 0.85;
}
.name-badge .nb-name {
  font-family: 'Rye', serif;
  color: var(--gold-bright);
  font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60vw;
}

/* === DUST PARTICLES === */
.dust { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.dust span {
  position: absolute; bottom: -10px;
  width: 3px; height: 3px;
  background: rgba(232, 213, 168, 0.4);
  border-radius: 50%;
  animation: drift linear infinite;
}
@keyframes drift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}

/* ============================================================
   CROOKEM! BRAND — generic, theme-agnostic identity for the
   landing page and the pre-storyline state of host + player.
   Once a storyline is loaded, its own backdrop/colors take over.
   ============================================================ */

:root {
  --crookem-bg:        #0c0b0a;
  --crookem-bg-soft:   #16140f;
  --crookem-ink:       #f0ede4;
  --crookem-ink-dim:   rgba(240, 237, 228, 0.6);
  --crookem-ink-faint: rgba(240, 237, 228, 0.35);
  --crookem-accent:    #d4874d;    /* warm amber */
  --crookem-accent-2:  #8b3a2e;    /* dried blood */
  --crookem-line:      rgba(240, 237, 228, 0.18);
}

/* ── Landing page (index.html) ─────────────────────────────── */
body.crookem-landing {
  margin: 0;
  min-height: 100vh;
  background: var(--crookem-bg);
  color: var(--crookem-ink);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  position: relative;
}

.crookem-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.crookem-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(212, 135, 77, 0.10), transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.7) 100%);
}
.crookem-motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.crookem-mote {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(240, 237, 228, 0.9) 0%, transparent 80%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: crookemMoteRise linear infinite;
  will-change: transform, opacity;
}
@keyframes crookemMoteRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(20px, -110vh, 0); opacity: 0; }
}

.crookem-landing-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 6vw;
  text-align: center;
}

.crookem-hero {
  margin-bottom: 4vh;
}

.crookem-wordmark {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.12em;
  font-weight: 400;
  color: var(--crookem-ink);
  line-height: 0.95;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 0 40px rgba(212, 135, 77, 0.18);
}
.crookem-wordmark-xl {
  font-size: clamp(4.5rem, 14vw, 11rem);
}
.crookem-tagline {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--crookem-accent);
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  margin-top: 1.2rem;
  text-transform: uppercase;
}

.crookem-pitch {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  color: var(--crookem-ink-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  max-width: 560px;
  line-height: 1.6;
  margin: 0 0 5vh 0;
}

.crookem-cta-row {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 6vh;
}

/* ──────────────────────────────────────────────────────────
   LANDING CTAs — Host a Game / Join with Code.
   ──────────────────────────────────────────────────────────
   The originals read like generic SaaS buttons (Inter font, flat
   dark-red rectangle, thin border). Redesigned as wanted-poster
   ticket stubs: aged-paper textures, letterpress shadows,
   thumb-tack corner accents, and the project's actual display
   typography (Rye + IM Fell English SC). Sit right at home on
   the western sunset backdrop. */
.crookem-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 240px;
  padding: 1.4rem 2.2rem 1.5rem;
  text-decoration: none;
  text-align: center;
  font-family: 'IM Fell English SC', 'Special Elite', serif;
  background-color: #e9d9af;
  background-image:
    /* paper warping + soft warm wash */
    radial-gradient(ellipse 90% 70% at 35% 30%, rgba(255, 240, 200, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 75% 80%, rgba(120, 75, 30, 0.18) 0%, transparent 65%),
    url('/images/paper-clean.jpg');
  background-size: cover, cover, cover;
  background-blend-mode: screen, multiply, normal;
  color: var(--ink, #3a2818);
  border: 2px dashed var(--ink-soft, #7a5a3d);
  border-radius: 2px;
  box-shadow:
    0 4px 0 var(--ink-soft, #7a5a3d),
    0 10px 22px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 240, 200, 0.45),
    inset 0 -2px 6px rgba(80, 50, 20, 0.18);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease, border-style 180ms ease;
  cursor: pointer;
}
.crookem-cta:hover {
  transform: translateY(-3px);
  border-style: solid;
  box-shadow:
    0 6px 0 var(--ink-soft, #7a5a3d),
    0 14px 28px rgba(0, 0, 0, 0.65),
    inset 0 2px 0 rgba(255, 240, 200, 0.55),
    inset 0 -2px 6px rgba(80, 50, 20, 0.18);
}
.crookem-cta:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 var(--ink-soft, #7a5a3d),
    0 4px 10px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 240, 200, 0.4),
    inset 0 -2px 6px rgba(80, 50, 20, 0.18);
}

/* Primary = red-stamp on the same parchment card. The stamp covers
   most of the surface but the paper still bleeds at the edges, so it
   reads as an INK STAMP on a poster — not a flat red rectangle. */
.crookem-cta-primary {
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.10) 3px,
      rgba(0, 0, 0, 0.10) 4px),
    radial-gradient(ellipse 110% 90% at 50% 35%,
      rgba(255, 200, 180, 0.22) 0%,
      transparent 55%),
    linear-gradient(180deg, rgba(178, 62, 46, 0.92) 0%, rgba(82, 22, 16, 0.95) 100%),
    url('/images/paper-clean.jpg');
  background-size: auto, cover, cover, cover;
  background-blend-mode: multiply, screen, multiply, normal;
  color: var(--parchment, #f0e2bc);
  border-color: #2c0d08;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 0 14px rgba(255, 200, 160, 0.25);
  box-shadow:
    0 4px 0 #2c0d08,
    0 10px 22px rgba(70, 14, 8, 0.6),
    inset 0 2px 0 rgba(255, 220, 200, 0.2),
    inset 0 -2px 8px rgba(40, 10, 5, 0.4);
}
.crookem-cta-primary:hover {
  box-shadow:
    0 6px 0 #2c0d08,
    0 14px 28px rgba(70, 14, 8, 0.7),
    inset 0 2px 0 rgba(255, 230, 210, 0.3),
    inset 0 -2px 8px rgba(40, 10, 5, 0.42);
}

/* Thumbtack accent — small circular "pin" anchoring the top-left corner.
   Reads as a poster pinned to a saloon wall. */
.crookem-cta::before {
  content: "";
  position: absolute;
  top: -6px; left: -6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    #f5dc88 0%, var(--gold-bright, #e8b94a) 55%, #6e4316 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    inset 0 1px 1px rgba(255, 240, 200, 0.5);
  pointer-events: none;
}
.crookem-cta-primary::before {
  /* primary uses a darker pin (matches the red-stamp ink) */
  background: radial-gradient(circle at 30% 30%,
    #c44a36 0%, var(--blood-deep, #6e1611) 55%, #2c0d08 100%);
}

/* Icon — was Bebas Neue (out of place). Now Rye, sized big, the
   Crookem display font carrying the whole brand. */
.crookem-cta-icon {
  font-family: 'Rye', serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blood-deep, #6e1611);
}
.crookem-cta-primary .crookem-cta-icon {
  color: var(--gold-bright, #e8b94a);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.crookem-cta-label {
  font-family: 'Rye', serif;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  line-height: 1.1;
}
.crookem-cta-sub {
  font-family: 'IM Fell English SC', 'Special Elite', serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft, #7a5a3d);
  opacity: 0.85;
  margin-top: 0.15rem;
}
.crookem-cta-primary .crookem-cta-sub {
  color: rgba(255, 240, 210, 0.78);
}

.crookem-footer {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--crookem-ink-faint);
  text-transform: uppercase;
}

/* ── Setup card variant (host setup screen + player join screen) ──
   Layered ON TOP of the existing .form-card paper styling — adds the
   CROOKEM! wordmark cluster + a tighter section-label rhythm without
   ripping out the paper aesthetic that the rest of the game uses. */
.crookem-setup .crookem-brand {
  text-align: center;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed var(--ink-soft, rgba(80, 50, 20, 0.35));
}
.crookem-setup .crookem-wordmark {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--blood-deep, #6b1f17);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.18);
  margin: 0;
}
.crookem-setup .crookem-tagline {
  color: var(--ink-soft, rgba(80, 50, 20, 0.7));
  font-size: 0.7rem;
  margin-top: 0.6rem;
}

.setup-section-label {
  font-family: 'IM Fell English SC', 'Inter', serif;
  color: var(--gold-bright, #e8b94a);
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

/* ============================================================
   WESTERN BACKDROP — replaces the old dust-hollow scene
   (sky-night, stars, moon, mountains, town silhouettes) with
   the western town photograph. Applies to:
     • the host welcome / lobby / game scenes
     • the player welcome / lobby / game scenes
     • the CROOKEM! landing page (body.crookem-landing)
   Wilderness and Fiery-Three keep their own backdrop rules.
   ============================================================ */
body[data-story-mode="western"] .sky-night,
body[data-story-mode="western"] .sky-day,
body[data-story-mode="western"] .stars,
body[data-story-mode="western"] .moon,
body[data-story-mode="western"] .sun,
body[data-story-mode="western"] .mountains,
body[data-story-mode="western"] .town,
body[data-story-mode="western"] .ground,
body[data-story-mode="western"] .dust {
  display: none;
}
body[data-story-mode="western"] #stage {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, 0.10) 0%, rgba(14, 8, 4, 0.35) 100%),
    url('/images/western-town.png');
  background-size: cover;
  background-position: center 65%;       /* favor the town silhouette */
  background-attachment: fixed;
}
/* Vignette in western mode is lighter — the sunset photo has its own natural
   depth, and the original heavy edge-darkening was muting the image. */
body[data-story-mode="western"] .vignette::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.4) 100%);
}

/* ============================================================
   CROOKEM! LOGOS — three SVG variants, three placements.
   Source SVGs are pure-black paths; we use CSS filters to
   recolor them per-context so each placement reads cleanly
   against whatever's behind it.
   ============================================================ */

/* Landing hero (V2 full lockup) — light cream on the dark western backdrop.
   Soft amber glow ties it to the brand accent. */
.crookem-logo-hero {
  display: block;
  width: clamp(280px, 60vw, 760px);
  height: auto;
  margin: 0 auto;
  /* black → off-white/cream + amber glow */
  filter:
    invert(0.96) sepia(0.10) saturate(180%) hue-rotate(355deg)
    drop-shadow(0 0 36px rgba(212, 135, 77, 0.22));
}

/* Host setup + player join (wordmark) — natural black on the paper card.
   No filter needed; the source black reads like a stamped print. */
.crookem-logo-paper {
  display: block;
  width: clamp(180px, 42vw, 320px);
  height: auto;
  margin: 0 auto 0.4rem;
  opacity: 0.92;
}

/* HUD beam (icon mark) — cream filter so it reads against the wood. */
.hud-logo-icon {
  display: inline-block;
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  filter: invert(0.96) sepia(0.10) saturate(180%) hue-rotate(355deg);
}

/* Landing page (index.html) — same western photo with stronger dark overlay
   so the wordmark + tagline + CTAs stay readable. The drifting motes still
   sit on top via the existing .crookem-ambient layer. */
body.crookem-landing {
  background-image:
    linear-gradient(180deg, rgba(8, 6, 4, 0.55) 0%, rgba(8, 6, 4, 0.78) 100%),
    url('/images/western-town.png');
  background-size: cover;
  background-position: center 65%;
  background-attachment: fixed;
}

/* ============================================================
   REVIVAL CARD — celebratory moment when the Miracle Worker
   raises someone from the dead. Visually distinct from the
   death card: sage-green palette instead of blood-red.
   ============================================================ */
#day-revived-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 2px dashed rgba(99, 124, 76, 0.55);
  animation: revivedFadeIn 1.4s ease-out 0.3s both;
}
@keyframes revivedFadeIn {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
#day-revived-block .revived-banner {
  font-family: 'IM Fell English SC', 'Special Elite', monospace;
  letter-spacing: 0.35em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--sage, #637c4c);
  background: rgba(99, 124, 76, 0.10);
  border: 1px solid rgba(99, 124, 76, 0.45);
  padding: 0.32rem 0.95rem 0.28rem;
  border-radius: 2px;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(99, 124, 76, 0.5);
}
#day-revived-block .victim-portrait {
  font-size: 3rem;
  line-height: 1;
  filter: none;                 /* NOT grayscale — they're alive again */
  margin: 0;
}
#day-revived-block .revived-name {
  font-family: 'Rye', serif;
  color: var(--ink);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  line-height: 1.15;
  margin: 0;
}
#day-revived-block .revived-line {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.4;
}