/* =========================================================================
   Words in Your Mouth — "DeadAir"
   Single mobile-first stylesheet. Late-night radio booth / "on air" dread.
   Dark base, one acid signal-green accent, danger red for red wires & fuse.
   No imports, no external fonts. Self-contained.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Palette + tokens
   ------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --bg:        #0a0a0a;   /* near-black booth */
  --bg-2:      #111110;   /* raised panel */
  --bg-3:      #17170f;   /* deeper inset */
  --ink:       #e8e6df;   /* warm off-white text */
  --muted:     #8a8a82;   /* muted grey */
  --line:      #26261f;   /* hairline borders */

  --green:     #d8ff4a;   /* acid signal-green accent */
  --green-dim: #9bb53a;
  --green-ink: #0a0a0a;   /* text on green fills */
  --green-glow: rgba(216, 255, 74, 0.35);

  --red:       #ff3b3b;   /* danger / red wires / fuse low */
  --red-dim:   #b32a2a;
  --red-glow:  rgba(255, 59, 59, 0.35);

  --amber:     #f4b740;   /* gagged / saynot warnings */
  --amber-dim: #a87d22;

  /* Typography */
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius:   14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --touch: 44px;          /* minimum tap target */

  --shadow:   0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------------
   1. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  overflow-x: hidden;             /* never horizontal-scroll on phones */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Faint "ON AIR" scanline overlay — performant fixed pseudo, very low opacity */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
}

/* Socket status: 3px top bar via a fixed pseudo on body */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  background: var(--line);
  transition: background 0.25s ease;
}
body[data-conn="open"]::after   { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }
body[data-conn="closed"]::after { background: var(--red);   box-shadow: 0 0 10px var(--red-glow); }

img { max-width: 100%; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--green); color: var(--green-ink); }

/* -------------------------------------------------------------------------
   2. Text helpers
   ------------------------------------------------------------------------- */
.muted  { color: var(--muted); }
.small  { font-size: 0.8125rem; line-height: 1.45; }
.center { text-align: center; }

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, background 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:hover    { border-color: #3a3a30; background: #1a1a16; }
.btn:active   { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.btn.primary {
  background: var(--green);
  color: var(--green-ink);
  border-color: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
}
.btn.primary:hover  { background: #e6ff66; box-shadow: 0 0 18px var(--green-glow); }

.btn.ghost {
  background: transparent;
  border-color: #3a3a30;
  color: var(--ink);
}
.btn.ghost:hover { border-color: var(--green); color: var(--green); }

.btn.danger {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn.danger:hover { background: rgba(255, 59, 59, 0.12); box-shadow: 0 0 16px var(--red-glow); }

.btn.armed {
  background: rgba(216, 255, 74, 0.14);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 16px var(--green-glow);
}
.btn.armed:hover { background: rgba(216, 255, 74, 0.22); }

.btn.grow { flex: 1; }

/* -------------------------------------------------------------------------
   4. Cards
   ------------------------------------------------------------------------- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-h {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   5. Fields / name input
   ------------------------------------------------------------------------- */
.field-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.name-row {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}
.name-input {
  flex: 1;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
}
.name-input::placeholder { color: #555; }
.name-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
}

/* -------------------------------------------------------------------------
   6. Chips
   ------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, background 0.15s ease,
              border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.chip.look {                         /* green outline — "look at" */
  border-color: var(--green);
  color: var(--green);
  background: transparent;
}
.chip.look:hover { background: rgba(216, 255, 74, 0.10); }

.chip.say {                          /* filled green — "say" */
  background: var(--green);
  border-color: var(--green);
  color: var(--green-ink);
  box-shadow: 0 0 12px var(--green-glow);
}
.chip.say:hover { background: #e6ff66; }

.chip.saynot {                       /* amber/grey — "don't say" */
  border-color: var(--amber-dim);
  color: var(--amber);
  background: rgba(244, 183, 64, 0.07);
}
.chip.saynot:hover { background: rgba(244, 183, 64, 0.14); }

.chip.drop {                         /* dim, with ✕ to discard */
  border-color: #2c2c24;
  color: var(--muted);
  background: var(--bg-3);
}
.chip.drop::after { content: "✕"; font-size: 0.8em; opacity: 0.7; }
.chip.drop:hover { color: var(--ink); }

.chip.red {                          /* red wire */
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 59, 59, 0.06);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 59, 59, 0.5);
  text-decoration-thickness: 2px;
}
.chip.red:hover { background: rgba(255, 59, 59, 0.14); box-shadow: 0 0 12px var(--red-glow); }

/* -------------------------------------------------------------------------
   7. Badges
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-3);
  color: var(--muted);
}
.badge.turned { color: var(--red);   border-color: var(--red);   background: rgba(255, 59, 59, 0.10); }
.badge.gagged { color: var(--amber); border-color: var(--amber-dim); background: rgba(244, 183, 64, 0.10); }
.badge.valve  { color: var(--green); border-color: var(--green);
                background: rgba(216, 255, 74, 0.12); box-shadow: 0 0 10px var(--green-glow); }
.badge.clean  { color: var(--muted); }
.badge.off    { color: #555; border-color: #1d1d18; }

/* -------------------------------------------------------------------------
   8. Toast + action bar
   ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 18px);
  z-index: 11000;
  max-width: calc(100vw - 2 * var(--sp-4));
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: #1c1c18;
  border: 1px solid var(--green);
  color: var(--ink);
  font-size: 0.95rem;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  margin-top: var(--sp-4);
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

/* =========================================================================
   SPLASH
   ========================================================================= */
.page-splash { min-height: 100vh; display: flex; }
.splash {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.splash-panel {
  width: 100%;
  max-width: 480px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow);
}
.splash-eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green);
}
.splash-title {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.splash-sub {
  margin: 0 0 var(--sp-5);
  color: var(--muted);
  font-size: 1.05rem;
}
.splash-bullets {
  margin: 0 0 var(--sp-6);
  padding-left: 1.1em;
  color: var(--ink);
}
.splash-bullets li { margin-bottom: var(--sp-2); }
.splash-bullets li::marker { color: var(--green); }
.splash-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.splash-credit {
  margin-top: var(--sp-6);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #555;
  text-align: center;
}

/* =========================================================================
   LOBBY
   ========================================================================= */
.page-lobby { min-height: 100vh; }
.lobby {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.lobby-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  margin-bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lobby-back::before { content: "‹"; font-size: 1.3em; line-height: 1; }
.lobby-back:hover { color: var(--green); text-decoration: none; }

.lobby-h {
  margin: 0 0 var(--sp-5);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#booths,
.booth-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.booth {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.booth-join {
  flex: 1;                       /* main tap target */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.booth-join:hover { background: rgba(216, 255, 74, 0.06); }
.booth-name { font-size: 1.1rem; font-weight: 700; }
.booth-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.booth-tv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.booth-tv:hover { background: rgba(216, 255, 74, 0.1); text-decoration: none; }

/* =========================================================================
   PHONE GAME  (.page-room / .ph)
   ========================================================================= */
.page-room { min-height: 100vh; }
.ph {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 var(--sp-4) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Sticky head bar */
.ph-head {
  position: sticky;
  top: 3px;                       /* clear the conn status bar */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  margin: 0 calc(-1 * var(--sp-4));
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.ph-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 1.1rem;
}
.ph-home:hover { color: var(--green); border-color: var(--green); text-decoration: none; }
.ph-title {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.ph-round {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.ph-tv {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

/* ---- Fuse ---- */
.fuse {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fuse-bar {
  flex: 1;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fuse-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green) 0%, var(--amber) 60%, var(--red) 100%);
  transition: width 0.4s ease;
}
.fuse-num {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green);
}
.fuse-of {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.fuse.danger {
  border-color: var(--red);
  box-shadow: 0 0 16px var(--red-glow);
  animation: fuse-pulse 1.1s ease-in-out infinite;
}
.fuse.danger .fuse-num { color: var(--red); }
@keyframes fuse-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--red-glow); }
  50%      { box-shadow: 0 0 22px var(--red); }
}

/* ---- Valve callout ---- */
.valve-call {
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--green);
  background: rgba(216, 255, 74, 0.10);
  color: var(--green);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 0 22px var(--green-glow);
  animation: valve-glow 2.4s ease-in-out infinite;
}
@keyframes valve-glow {
  0%, 100% { box-shadow: 0 0 14px var(--green-glow); }
  50%      { box-shadow: 0 0 30px var(--green-glow); }
}

/* ---- Role card ---- */
.role-card {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
}
.role-card.filter-form   { border-left-color: var(--green); }
.role-card.filter-set    { border-left-color: var(--amber); }
.role-card.filter-charge { border-left-color: #6ad1ff; }
.role-card.filter-mode   { border-left-color: #c08bff; }
.role-card.turned {
  border-color: var(--red);
  border-left-color: var(--red);
  background: rgba(255, 59, 59, 0.06);
  box-shadow: 0 0 18px var(--red-glow);
}
.role-card.turned .role-name { color: var(--red); }
.role-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.role-name {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.role-lens {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.role-blurb { color: var(--ink); font-size: 0.98rem; }

/* ---- Forced (alarm) card ---- */
.forced {
  padding: var(--sp-5);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 59, 59, 0.08);
  box-shadow: 0 0 16px var(--red-glow);
}
.forced.insist-2 {
  border-width: 2px;
  box-shadow: 0 0 24px var(--red-glow);
  background: rgba(255, 59, 59, 0.12);
}
.forced.insist-3 {
  border-width: 3px;
  background: rgba(255, 59, 59, 0.16);
  box-shadow: 0 0 32px var(--red);
  animation: forced-shake 0.5s ease-in-out infinite;
}
@keyframes forced-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.forced-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.forced-text {
  margin-top: var(--sp-2);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}

/* ---- Verb card ---- */
.verb-card {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.verb-card.look   { border-left-color: var(--green); }
.verb-card.say    { border-left-color: var(--green); background: rgba(216, 255, 74, 0.05); }
.verb-card.saynot { border-left-color: var(--amber); background: rgba(244, 183, 64, 0.05); }
.verb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.verb-name {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.verb-hint { color: var(--muted); font-size: 0.82rem; }

/* ---- Drop panel (details) ---- */
.drop-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.drop-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.drop-panel > summary::-webkit-details-marker { display: none; }
.drop-panel > summary::after { content: "▾"; transition: transform 0.2s ease; }
.drop-panel[open] > summary::after { transform: rotate(180deg); }
.drop-panel[open] > summary { color: var(--green); border-bottom: 1px solid var(--line); }
.drop-panel > *:not(summary) { padding: var(--sp-4); }

/* ---- Red wire panel ---- */
.red-panel {
  padding: var(--sp-4);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 59, 59, 0.05);
}

/* ---- Roster ---- */
.roster { list-style: none; margin: 0; padding: 0; }
.roster-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.roster-row:last-child { border-bottom: none; }
.roster-row:hover { background: rgba(255, 255, 255, 0.03); }
.roster-row.is-turned {
  background: rgba(255, 59, 59, 0.07);
  border-left: 3px solid var(--red);
}
.roster-name { font-weight: 700; flex: 1; }
.roster-role {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.roster-menu { color: var(--muted); font-size: 1.2rem; padding: 0 var(--sp-1); }

/* ---- Log ---- */
.log-card { padding: var(--sp-4); }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.log-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.log-row:last-child { border-bottom: none; }
.log-row.lie { color: var(--red); font-style: italic; }
.log-row.ticked { border-left: 3px solid var(--green); padding-left: var(--sp-3); }
.log-speaker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
}
.log-text { flex: 1; min-width: 0; }
.log-tick { color: var(--green); }
.log-forced {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---- Turned note ---- */
.turned-note {
  padding: var(--sp-4);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: rgba(255, 59, 59, 0.08);
  color: var(--red);
  font-weight: 600;
  box-shadow: 0 0 14px var(--red-glow);
}

/* ---- Result ---- */
.result {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-align: center;
}
.result.win  { border-color: var(--green); background: rgba(216, 255, 74, 0.08); box-shadow: 0 0 24px var(--green-glow); }
.result.lose { border-color: var(--red);   background: rgba(255, 59, 59, 0.08);  box-shadow: 0 0 24px var(--red-glow); }
.result-big {
  font-size: clamp(2.4rem, 14vw, 4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.result.win  .result-big { color: var(--green); }
.result.lose .result-big { color: var(--red); }
.result-word {
  margin-top: var(--sp-3);
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* =========================================================================
   TV DASHBOARD  (.page-tv / .tv)
   16:9 landscape, large type, multi-column, minimal scroll.
   ========================================================================= */
.page-tv { margin: 0; }
.tv {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
}

/* ---- TV lobby ---- */
.tv-lobby {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.tv-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.tv-right { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.tv-brand {
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 18px var(--green-glow);
}
.tv-game {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.tv-tag { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.tv-hint {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.3vw, 1.1rem);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---- TV QR ---- */
.tv-qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tv-qr img {
  width: clamp(220px, 24vw, 320px);
  height: auto;
  border-radius: var(--radius-sm);
  image-rendering: pixelated;       /* keep QR crisp & high-contrast */
}
.tv-qr.big img { width: clamp(340px, 32vw, 440px); }
.tv-qr-url {
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green-dim);          /* readable on white card */
}

/* ---- TV roster ---- */
.tv-roster { display: flex; flex-direction: column; min-height: 0; }
.tv-roster h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-roster ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  overflow: auto;
}
.tv-seat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.tv-seat.turned { border-color: var(--red);   border-left-color: var(--red);   background: rgba(255, 59, 59, 0.08); }
.tv-seat.gagged { border-left-color: var(--amber); }
.tv-seat.clean  { border-left-color: var(--muted); }
.tv-seat.off    { border-left-color: #1d1d18; opacity: 0.55; }
.tv-seat.valve {
  border-color: var(--green);
  border-left-color: var(--green);
  background: rgba(216, 255, 74, 0.10);
  box-shadow: 0 0 22px var(--green-glow);
  animation: valve-glow 2.4s ease-in-out infinite;
}
.tv-seat-name {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  grid-column: 1;
}
.tv-seat-role {
  grid-column: 1;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  color: var(--muted);
}
.tv-seat-state {
  grid-column: 2;
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-seat.turned .tv-seat-state { color: var(--red); }
.tv-seat.valve  .tv-seat-state { color: var(--green); }
.tv-seat.gagged .tv-seat-state { color: var(--amber); }

/* ---- TV game layout ---- */
.tv-game-board { flex: 1; display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); min-height: 0; }
.tv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.tv-round {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-forced {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 0 0 18px var(--red-glow);
}
.tv-live {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.5vw, 1.3rem);
  color: var(--green);
}

/* TV fuse (big horizontal) */
.tv-fuse {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(12px, 1.6vw, 22px) clamp(16px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.tv-fuse.danger {
  border-color: var(--red);
  box-shadow: 0 0 26px var(--red-glow);
  animation: fuse-pulse 1.1s ease-in-out infinite;
}
.tv-fuse-label {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.2vw, 1.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-fuse-bar {
  flex: 1;
  height: clamp(18px, 2.4vw, 32px);
  border-radius: var(--radius-pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tv-fuse-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green) 0%, var(--amber) 60%, var(--red) 100%);
  transition: width 0.5s ease;
}
.tv-fuse-num {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 800;
  color: var(--green);
}
.tv-fuse.danger .tv-fuse-num { color: var(--red); }

/* TV valve banner */
.tv-valve {
  padding: clamp(12px, 1.8vw, 22px);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: rgba(216, 255, 74, 0.10);
  color: var(--green);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 0 28px var(--green-glow);
  animation: valve-glow 2.4s ease-in-out infinite;
}

/* TV columns */
.tv-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 1.8vw, 28px);
  min-height: 0;
}
.tv-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(12px, 1.4vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.tv-col.narrow { /* thinner side column, e.g. red wires */ }
.tv-cols:has(.tv-col.narrow) { grid-template-columns: 1fr 1fr 0.7fr; }

.tv-red h2,
.tv-log h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.3vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tv-red-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); overflow: auto; }
.tv-red-chip {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--red);
  border-radius: var(--radius-pill);
  background: rgba(255, 59, 59, 0.07);
  color: var(--red);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 59, 59, 0.5);
}

/* TV log */
.tv-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-log-row {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
}
.tv-log-row.lie    { color: var(--red); font-style: italic; }
.tv-log-row.ticked { border-left: 3px solid var(--green); padding-left: var(--sp-3); }
.tv-tick { color: var(--green); font-weight: 700; }

/* TV campaign (assembled cure sentence) */
.tv-campaign {
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.8rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink);
  word-spacing: 0.2em;
}
.tv-campaign .blank { color: var(--green); }

/* TV result */
.tv-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-4);
  border-radius: var(--radius);
}
.tv-result.win  { background: rgba(216, 255, 74, 0.06); box-shadow: inset 0 0 80px var(--green-glow); }
.tv-result.lose { background: rgba(255, 59, 59, 0.06);  box-shadow: inset 0 0 80px var(--red-glow); }
.tv-result-big {
  font-size: clamp(4rem, 16vw, 12rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.tv-result.win  .tv-result-big { color: var(--green); text-shadow: 0 0 40px var(--green-glow); }
.tv-result.lose .tv-result-big { color: var(--red);   text-shadow: 0 0 40px var(--red-glow); }
.tv-result-word {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* =========================================================================
   RULES  (.page-rules / .rules)
   ========================================================================= */
.page-rules { min-height: 100vh; }
.rules {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.rules h1 {
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
}
.rules h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.rules p  { margin: 0 0 var(--sp-4); color: var(--ink); }
.rules ul { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
.rules li { margin-bottom: var(--sp-2); }
.rules li::marker { color: var(--green); }
.rules code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--green);
}
.rules .lobby-back { margin-bottom: var(--sp-5); }
.rules .btn { margin-top: var(--sp-4); }

/* =========================================================================
   Responsive / motion
   ========================================================================= */
/* Slightly roomier on small tablets in portrait phone views */
@media (min-width: 480px) {
  .splash-actions { flex-direction: row; }
  .splash-actions .btn { flex: 1; }
}

/* TV degrades gracefully if shown narrow */
@media (max-width: 900px) {
  .tv-lobby { grid-template-columns: 1fr; }
  .tv-cols,
  .tv-cols:has(.tv-col.narrow) { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}