/* ============================================
   DEVILED — Design System
   Edit this file to restyle the entire game.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Work+Sans:wght@400;700&display=swap');

/* -------------------------------------------
   1. DESIGN TOKENS
   All colors, sizes, spacing, and timing in one place.
   ------------------------------------------- */
:root {
  /* Palette */
  --yolk: #F5C518;
  --deviled-red: #C0392B;
  --cream: #FFF4E0;
  --bg-dark: #0E0B16;
  --bg-devil: #000000;
  --accent-devil: #C0392B;
  --green: #27AE60;
  --blue: #3498DB;

  /* Semantic colors */
  --text-primary: #FFF4E0;
  --text-secondary: #F5C518;
  --text-muted: rgba(255, 244, 224, 0.7);
  --text-dim: rgba(255, 244, 224, 0.5);
  --surface: rgba(255, 244, 224, 0.05);
  --surface-hover: rgba(255, 244, 224, 0.08);
  --surface-active: rgba(245, 197, 24, 0.15);
  --border-subtle: rgba(255, 244, 224, 0.1);
  --shadow-glow: 0 0 40px rgba(245, 197, 24, 0.4);
  --shadow-glow-strong: 0 0 80px rgba(245, 197, 24, 0.6);

  /* Typography — TV (1080p target, scale via vmin) */
  --tv-question: min(7vmin, 80px);
  --tv-question-sm: min(5vmin, 56px);
  --tv-question-xs: min(4vmin, 44px);
  --tv-team-name: min(5vmin, 56px);
  --tv-score: min(4vmin, 40px);
  --tv-body: min(2.8vmin, 28px);
  --tv-label: min(2.5vmin, 24px);
  --tv-small: min(2vmin, 20px);
  --tv-winner: min(20vmin, 240px);
  --tv-title: min(10vmin, 100px);
  --tv-title-lg: min(12vmin, 120px);
  --tv-banner: min(6vmin, 64px);
  --tv-mechanic: min(3.5vmin, 36px);
  --tv-timer: min(4vmin, 40px);
  --tv-rank: min(3vmin, 32px);
  --tv-devil-icon: min(30vmin, 300px);
  --tv-devil-text: min(8vmin, 80px);
  --tv-dot: min(4vmin, 40px);
  --tv-dot-text: min(2vmin, 20px);
  --tv-delta: min(2.5vmin, 24px);
  --tv-recap-title: min(6vmin, 64px);

  /* Typography — Phone */
  --phone-input: max(32px, 16px);
  --phone-btn: 22px;
  --phone-body: 18px;
  --phone-team-name: 28px;
  --phone-timer: 40px;
  --phone-status: 28px;
  --phone-label: 14px;
  --phone-score: 18px;
  --phone-rank: 48px;
  --phone-rank-score: 36px;
  --phone-rank-delta: 22px;
  --phone-wager: 20px;
  --phone-name-input: 28px;
  --phone-submitted: 64px;
  --phone-mini-row: 16px;
  --phone-error: 22px;

  /* Spacing */
  --gap-xs: 0.5vmin;
  --gap-sm: 1vmin;
  --gap-md: 2vmin;
  --gap-lg: 3vmin;
  --gap-xl: 4vmin;
  --phone-gap: 16px;
  --phone-gap-sm: 8px;
  --phone-gap-lg: 20px;

  /* Radii */
  --radius: 8px;
  --radius-sm: 4px;

  /* Timing */
  --transition-fast: 0.1s;
  --transition-med: 0.3s;
  --transition-slow: 0.5s;

  /* Timer bar */
  --timer-bar-height: 1.5vmin;
  --timer-bar-width: 80vw;

  /* Layout */
  --content-max-width: 900px;
  --content-width: 80vw;
  --phone-max-width: 400px;
  --phone-width: 90vw;

  /* TV Game Layout */
  --sidebar-width: 22vw;
  --game-bar-height: 14vh;
  --screen-bg: rgba(255, 244, 224, 0.03);
  --screen-border: rgba(245, 197, 24, 0.12);
  --screen-glow: 0 0 60px rgba(245, 197, 24, 0.06);

  /* Decorative */
  --egg-glow-1: radial-gradient(ellipse at 10% 90%, rgba(245, 197, 24, 0.08) 0%, transparent 50%);
  --egg-glow-2: radial-gradient(ellipse at 90% 20%, rgba(192, 57, 43, 0.06) 0%, transparent 40%);
  --bg-texture: linear-gradient(135deg, rgba(245, 197, 24, 0.02) 25%, transparent 25%, transparent 50%, rgba(245, 197, 24, 0.02) 50%, rgba(245, 197, 24, 0.02) 75%, transparent 75%);
  --bg-texture-size: 40px 40px;
}

/* Devil mode — swap palette */
.devil-mode {
  --bg-dark: #000000;
  --text-primary: #C0392B;
  --text-secondary: #FFF4E0;
  --surface-active: rgba(192, 57, 43, 0.2);
}

/* -------------------------------------------
   2. RESET & BASE
   ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Work Sans', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  overflow: hidden;
}

body { overscroll-behavior: contain; }

/* -------------------------------------------
   3. TYPOGRAPHY CLASSES
   ------------------------------------------- */
.display-font { font-family: 'Bungee', 'Impact', 'Arial Black', sans-serif; }

/* TV text sizes */
.tv-question { font-size: var(--tv-question); text-align: center; max-width: 85vw; line-height: 1.2; }
.tv-question-sm { font-size: var(--tv-question-sm); text-align: center; max-width: 85vw; line-height: 1.2; }
.tv-question-xs { font-size: var(--tv-question-xs); text-align: center; max-width: 85vw; line-height: 1.2; }
.tv-banner { font-size: var(--tv-banner); }
.tv-title { font-size: var(--tv-title); color: var(--yolk); }
.tv-mechanic { font-size: var(--tv-mechanic); color: var(--deviled-red); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--gap-md); }
.tv-timer { font-size: var(--tv-timer); color: var(--yolk); margin-top: var(--gap-sm); }
.tv-body { font-size: var(--tv-body); }
.tv-label { font-size: var(--tv-label); }
.tv-small { font-size: var(--tv-small); }

/* Phone text sizes */
.phone-status { font-size: var(--phone-status); text-align: center; color: var(--cream); line-height: 1.4; }
.phone-team-header { font-size: var(--phone-team-name); color: var(--yolk); margin-bottom: var(--phone-gap); text-align: center; }
.phone-label { font-size: var(--phone-label); color: var(--yolk); opacity: 0.7; margin-bottom: 4px; text-align: center; }
.phone-timer { font-size: var(--phone-timer); color: var(--yolk); margin-bottom: var(--phone-gap); }
.phone-score-display { font-size: var(--phone-score); color: var(--cream); opacity: 0.7; margin-top: 12px; text-align: center; }

/* -------------------------------------------
   4. COLOR UTILITY CLASSES
   ------------------------------------------- */
.color-yolk { color: var(--yolk); }
.color-red { color: var(--deviled-red); }
.color-cream { color: var(--cream); }
.color-green { color: var(--green); }
.color-muted { color: var(--text-muted); }
.color-dim { color: var(--text-dim); }
.bg-surface { background: var(--surface); }
.bg-surface-active { background: var(--surface-active); }
.glow { text-shadow: var(--shadow-glow); }

/* -------------------------------------------
   5. LAYOUT
   ------------------------------------------- */
.view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--gap-md);
}
.view[hidden] { display: none !important; }

.content-box { width: var(--content-width); max-width: var(--content-max-width); }

.phone-container {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  padding: var(--phone-gap-lg);
  max-width: var(--phone-max-width);
  margin: 0 auto; width: var(--phone-width);
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; align-items: center; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.gap { height: var(--phone-gap); }
.gap-sm { height: var(--phone-gap-sm); }

/* -------------------------------------------
   6. SHARED COMPONENTS
   ------------------------------------------- */

/* Timer bar */
.timer-bar {
  width: var(--timer-bar-width); height: var(--timer-bar-height);
  background: rgba(255,244,224,0.2);
  border-radius: var(--gap-sm); margin-top: var(--gap-lg); overflow: hidden;
}
.timer-fill {
  height: 100%; background: var(--yolk);
  border-radius: var(--gap-sm); transition: width var(--transition-fast) linear;
}
.devil-mode .timer-fill { background: var(--deviled-red); }

/* Submission dots */
.submission-dots { display: flex; gap: var(--gap-md); margin-top: var(--gap-md); }
.dot {
  width: var(--tv-dot); height: var(--tv-dot); border-radius: 50%;
  border: 3px solid var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tv-dot-text); transition: all var(--transition-med);
}
.dot.submitted { background: var(--yolk); border-color: var(--yolk); color: var(--bg-dark); }

/* Cards & rows */
.card {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5vmin 2vmin; margin: var(--gap-xs) 0;
}
.card-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5vmin 2vmin; margin: var(--gap-xs) 0;
}

/* Reveal rows (initially hidden, animated in) */
.reveal-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5vmin 2vmin; margin: var(--gap-xs) 0;
  font-size: var(--tv-score); opacity: 0;
}

/* Score rows */
.score-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--gap-md); margin: 0.8vmin 0;
  background: var(--surface-hover); border-radius: var(--radius);
  transition: all var(--transition-slow);
}
.score-row:first-child { background: var(--surface-active); }

/* Correct answer display */
.correct-answer-display {
  font-size: var(--tv-banner); color: var(--yolk);
  margin-top: var(--gap-lg); opacity: 0;
}

/* Tutorial hint */
.tutorial-hint {
  font-size: var(--tv-label); color: var(--green);
  text-align: center; max-width: var(--content-width);
  padding: 1.5vmin 2vmin; margin-bottom: var(--gap-md);
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-radius: var(--radius); line-height: 1.4;
}
.tutorial-hint-phone {
  font-size: var(--phone-label); color: var(--green);
  margin-bottom: 12px; text-align: center; padding: 8px;
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-radius: var(--radius);
}

/* Winner advantage callout */
.advantage-callout {
  font-size: var(--tv-body); color: var(--green);
  margin-top: var(--gap-md); padding: var(--gap-sm) var(--gap-md);
  border: 2px solid var(--green); border-radius: var(--radius);
  background: rgba(39, 174, 96, 0.1);
}

/* Spotlight / Last Guess */
.spotlight-text { font-size: var(--tv-question-sm); color: var(--yolk); text-align: center; }
.spotlight-sub { font-size: var(--tv-body); color: var(--cream); margin-top: var(--gap-md); text-align: center; opacity: 0.8; }
.answers-note { font-size: var(--tv-label); color: var(--yolk); margin-top: var(--gap-md); opacity: 0.7; text-align: center; }

/* Confetti */
.confetti-piece {
  position: absolute; width: 10px; height: 10px;
  animation: confetti-fall 3s linear forwards; z-index: 0;
}

/* -------------------------------------------
   7. PHONE COMPONENTS
   ------------------------------------------- */

/* Inputs */
.phone-text-input {
  font-size: var(--phone-name-input); padding: 12px 16px;
  background: var(--surface); color: var(--cream);
  border: 2px solid var(--yolk); border-radius: var(--radius);
  font-family: inherit; font-weight: 700;
  width: 100%; text-align: center; outline: none;
}
.phone-text-input::placeholder { color: rgba(255,244,224,0.4); }
.phone-text-input:focus { border-color: var(--cream); }

.phone-num-input {
  font-size: var(--phone-input); padding: 12px 16px;
  background: var(--surface); color: var(--yolk);
  border: 2px solid var(--yolk); border-radius: var(--radius);
  font-family: inherit; font-weight: 700;
  width: 100%; text-align: center; outline: none;
}
.phone-num-input:focus { border-color: var(--cream); }
.devil-mode .phone-num-input { border-color: var(--deviled-red); }

/* Buttons */
.btn {
  font-size: var(--phone-btn); padding: 16px 24px;
  min-height: 56px; border: none; border-radius: var(--radius);
  font-family: inherit; font-weight: 700;
  cursor: pointer; width: 100%; transition: transform var(--transition-fast);
}
.btn:active { transform: scale(0.95); }
.btn-primary { background: var(--yolk); color: var(--bg-dark); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.devil-mode .btn-primary { background: var(--deviled-red); color: var(--cream); }

.btn-hl {
  padding: 20px; font-size: 24px;
  border: 2px solid var(--yolk); background: transparent;
  color: var(--cream); border-radius: var(--radius); flex: 1;
}
.btn-hl.selected { background: var(--yolk); color: var(--bg-dark); }
.hl-row { display: flex; gap: 12px; width: 100%; }

/* Wager chips */
.wager-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.wager-chip {
  font-size: var(--phone-wager); padding: 14px 8px;
  min-height: 56px; border: 2px solid var(--deviled-red);
  background: rgba(192,57,43,0.15); color: var(--cream);
  border-radius: var(--radius); font-family: inherit; font-weight: 700; cursor: pointer;
}
.wager-chip.selected { background: var(--deviled-red); color: var(--cream); }
.wager-chip:disabled { opacity: 0.3; cursor: not-allowed; }
.wager-chip.all-in { grid-column: span 3; background: rgba(192,57,43,0.3); border-color: var(--deviled-red); }
.wager-chip.all-in.selected { background: var(--deviled-red); }

/* Submitted check */
.submitted-check { font-size: var(--phone-submitted); margin-bottom: 12px; animation: submit-confirm 400ms ease-out; }

/* Mini scoreboard */
.mini-scores { width: 100%; margin-top: var(--phone-gap-lg); }
.mini-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: var(--phone-mini-row); color: var(--cream);
  border-bottom: 1px solid var(--border-subtle);
}

/* Connection bar */
.connection-bar {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--deviled-red); color: var(--cream);
  text-align: center; padding: 4px; font-size: 14px;
  display: none; z-index: 999;
}
.connection-bar.visible { display: block; }

/* Error text */
.error-text { color: var(--deviled-red); font-size: var(--phone-error); text-align: center; }

/* Sitting out */
.sitting-out { color: var(--cream); opacity: 0.7; }

/* Devil mode phone overrides */
.devil-mode .phone-timer { color: var(--deviled-red); }

/* -------------------------------------------
   8. TV-SPECIFIC COMPONENTS
   (also in shared so the theme file is one place)
   ------------------------------------------- */

/* Game position bar */
.game-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: none; justify-content: space-between; align-items: center;
  padding: var(--gap-sm) var(--gap-lg);
  background: rgba(14, 11, 22, 0.85);
  border-bottom: 2px solid rgba(245, 197, 24, 0.3);
  backdrop-filter: blur(8px);
}
.game-bar.visible { display: flex; }
.bar-round { font-size: var(--tv-label); color: var(--cream); }
.bar-phase { font-size: var(--tv-label); color: var(--yolk); }
.bar-tutorial { font-size: var(--tv-label); color: var(--green); }
.devil-mode .game-bar { border-bottom-color: rgba(192, 57, 43, 0.5); }
.devil-mode .bar-phase { color: var(--deviled-red); }

/* Lobby — control-panel layout */
#view-lobby {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: var(--gap-lg);
  padding: 4vmin 4vmin;
}
.lobby-title {
  font-size: var(--tv-title); color: var(--yolk);
  text-shadow: var(--shadow-glow);
  z-index: 1;
}
.lobby-panels {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 2.2fr;
  gap: var(--gap-lg);
  width: min(92vw, 1700px);
  flex: 1;
  z-index: 1;
}
.lobby-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  display: flex; flex-direction: column;
  gap: var(--gap-md);
}
.lobby-panel-title {
  font-family: 'Bungee', 'Impact', sans-serif;
  font-size: var(--tv-mechanic);
  color: var(--yolk);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}

.lobby-config {
  display: flex; flex-direction: column; gap: var(--gap-md);
  font-size: var(--tv-body); color: var(--cream);
}
.lobby-config label {
  display: flex; flex-direction: column; gap: var(--gap-xs);
}
.lobby-config-label {
  font-size: var(--tv-small); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.lobby-config select {
  font-size: var(--tv-body); padding: var(--gap-sm) var(--gap-md);
  background: var(--bg-dark); color: var(--yolk); border: 2px solid var(--yolk);
  font-family: inherit; font-weight: 700; border-radius: var(--radius-sm);
  cursor: pointer;
}
.lobby-status {
  font-size: var(--tv-body); color: var(--cream);
  margin-top: auto; padding-top: var(--gap-md);
  border-top: 1px solid var(--border-subtle);
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22vmin, 240px), 1fr));
  gap: var(--gap-lg);
  align-content: start;
}
.qr-slot {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-sm);
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--gap-md);
}
.qr-slot img, .qr-slot svg {
  width: 100%; max-width: min(18vmin, 180px); height: auto; aspect-ratio: 1 / 1;
  background: var(--cream); border-radius: var(--radius-sm); padding: 4px;
}
.qr-slot.joined {
  border: 2px solid var(--yolk);
  background: var(--surface-active);
  justify-content: center;
}
.qr-slot-label {
  font-family: 'Bungee', sans-serif;
  font-size: var(--tv-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qr-slot-team {
  font-size: var(--tv-body);
  text-align: center;
  margin: var(--gap-md) 0 var(--gap-sm);
}
.qr-joined-badge {
  font-size: var(--tv-small); color: var(--green);
  letter-spacing: 0.1em;
}
.qr-sms-link {
  display: inline-block;
  font-size: var(--tv-small);
  color: var(--cream);
  background: var(--yolk);
  color: var(--bg-dark);
  padding: var(--gap-xs) var(--gap-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: var(--gap-xs);
}
.qr-sms-link:hover { background: var(--cream); }
.qr-url {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: min(1.3vmin, 12px);
  color: var(--text-dim);
  word-break: break-all;
  text-align: center;
  cursor: text;
  user-select: all;
  line-height: 1.3;
}

.start-hint {
  font-size: var(--tv-body); color: var(--green);
  opacity: 0; transition: opacity var(--transition-med);
  letter-spacing: 0.05em;
}
.start-hint.visible { opacity: 1; }

.reset-btn {
  align-self: flex-start;
  margin-top: var(--gap-sm);
  font-family: inherit; font-weight: 700;
  font-size: var(--tv-small);
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--gap-xs) var(--gap-md);
  cursor: pointer; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.reset-btn:hover {
  color: var(--deviled-red); border-color: var(--deviled-red);
}

/* Winner banner */
.winner-banner { font-size: var(--tv-banner); color: var(--yolk); text-shadow: var(--shadow-glow); }
.winner-points { font-size: var(--tv-score); color: var(--cream); margin-top: var(--gap-sm); }
.jackpot-badge { font-size: var(--tv-question-sm); color: var(--yolk); margin-top: var(--gap-md); }

/* Devil reveal */
.devil-icon { font-size: var(--tv-devil-icon); animation: devil-zoom 1500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.devil-text { font-size: var(--tv-devil-text); color: var(--deviled-red); margin-top: var(--gap-md); text-transform: uppercase; }
.devil-rules { font-size: var(--tv-body); color: var(--cream); margin-top: var(--gap-md); text-align: center; opacity: 0.8; }
.shaking { animation: screen-shake 1000ms ease-in-out; }

/* Recap */
.recap-item { margin: var(--gap-md) 0; padding: var(--gap-md); background: var(--surface); border-radius: var(--radius); }
.recap-label { font-size: var(--tv-body); color: var(--deviled-red); text-transform: uppercase; margin-bottom: var(--gap-xs); }
.recap-value { font-size: var(--tv-score); color: var(--yolk); }

/* Winner screen */
.winner-name {
  font-size: var(--tv-winner);
  animation: color-cycle 2s infinite, winner-glow 2s infinite;
  text-align: center; z-index: 1;
}
.dismiss-hint {
  position: absolute; bottom: var(--gap-lg);
  font-size: var(--tv-small); color: var(--cream); opacity: 0.5; z-index: 1;
}

/* Scoreboard labels */
.round-label { font-size: var(--tv-rank); color: var(--cream); opacity: 0.7; margin-bottom: var(--gap-md); }

/* Tutorial scoreboard breakdown — teaches scoring with concrete per-team math */
.breakdown-title {
  margin-top: var(--gap-lg);
  font-size: var(--tv-mechanic);
  color: var(--deviled-red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: var(--gap-sm);
}
.breakdown-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  font-size: var(--tv-body);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap-xs);
}
.bd-name { font-family: 'Bungee', sans-serif; min-width: 18vmin; }
.bd-detail {
  flex: 1;
  font-size: var(--tv-small);
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs);
}
.bd-step { white-space: nowrap; }
.bd-sep { opacity: 0.4; padding: 0 var(--gap-xs); }
.bd-pos { color: var(--green); }
.bd-neg { color: var(--deviled-red); }
.bd-zero { color: var(--text-dim); }
.bd-total {
  font-size: var(--tv-body);
  font-weight: 700;
  min-width: 6vmin;
  text-align: right;
}

/* Cheeky badge — shown on rows of teams that tied at the furthest distance on a Devil round */
.cheeky-badge {
  display: inline-block;
  font-size: var(--tv-small);
  background: var(--deviled-red);
  color: var(--cream);
  padding: 0.4vmin 1.2vmin;
  border-radius: var(--radius-sm);
  margin-left: var(--gap-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: jackpot-pulse 1500ms ease-in-out;
}
.cheeky-badge-phone {
  display: inline-block;
  font-size: 12px;
  background: var(--deviled-red);
  color: var(--cream);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Devil mode TV overrides */
.devil-mode .tv-question { color: var(--deviled-red); }
.devil-mode .tv-mechanic { color: var(--yolk); }

/* -------------------------------------------
   9. ANIMATIONS
   ------------------------------------------- */
@keyframes reveal-slide {
  0%   { transform: translateX(100%) scale(0.5); opacity: 0; }
  60%  { transform: translateX(-5%) scale(1.05); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes correct-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes jackpot-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 20px var(--yolk); }
  50%  { transform: scale(1.4); box-shadow: 0 0 80px var(--yolk); }
  100% { transform: scale(1); box-shadow: 0 0 20px var(--yolk); }
}
@keyframes devil-zoom {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes screen-shake {
  0%, 100% { transform: translateX(0); }
  10%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  50%  { transform: translateX(-8px); }
  70%  { transform: translateX(8px); }
  90%  { transform: translateX(-4px); }
}
@keyframes fade-to-black { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes submit-confirm { 0% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes color-cycle {
  0%   { color: var(--yolk); }
  33%  { color: var(--deviled-red); }
  66%  { color: var(--cream); }
  100% { color: var(--yolk); }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes winner-glow {
  0%, 100% { text-shadow: 0 0 40px var(--yolk); }
  50%      { text-shadow: 0 0 80px var(--yolk), 0 0 120px var(--deviled-red); }
}
@keyframes score-slide-in {
  0%   { transform: translateX(-30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes score-count-up {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: var(--yolk); }
  100% { transform: scale(1); }
}

.revealing { animation: reveal-slide 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.correct-reveal { animation: correct-pop 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.jackpot-anim { animation: jackpot-pulse 2500ms ease-in-out; }
.score-entering { animation: score-slide-in 400ms ease-out forwards; }
.score-updated { animation: score-count-up 600ms ease-out; }

/* -------------------------------------------
   10. TV GAME LAYOUT
   Two-column: sidebar (scores) + main screen card
   ------------------------------------------- */

/* Background decorations */
.tv-bg-decor {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--egg-glow-1),
    var(--egg-glow-2),
    var(--bg-texture);
  background-size: 100% 100%, 100% 100%, var(--bg-texture-size);
}
.devil-mode .tv-bg-decor {
  background:
    radial-gradient(ellipse at 10% 90%, rgba(192, 57, 43, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(192, 57, 43, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, rgba(192, 57, 43, 0.03) 25%, transparent 25%, transparent 50%, rgba(192, 57, 43, 0.03) 50%, rgba(192, 57, 43, 0.03) 75%, transparent 75%);
  background-size: 100% 100%, 100% 100%, var(--bg-texture-size);
}

/* Corner egg decorations */
.tv-bg-decor::before,
.tv-bg-decor::after {
  content: '';
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.04;
}
.tv-bg-decor::before {
  width: 20vmin; height: 26vmin;
  bottom: -8vmin; right: -4vmin;
  background: var(--yolk);
  transform: rotate(-15deg);
}
.tv-bg-decor::after {
  width: 14vmin; height: 18vmin;
  top: -5vmin; left: -3vmin;
  background: var(--deviled-red);
  transform: rotate(25deg);
}

/* Game layout wrapper — sidebar + main */
.tv-game-layout {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--game-bar-height) 1fr;
  overflow: hidden;
}

/* Sidebar team scores */
.tv-sidebar {
  grid-row: 2;
  grid-column: 1;
  display: flex; flex-direction: column;
  padding: 1.5vmin 1vmin;
  gap: 0.8vmin;
  background: rgba(14, 11, 22, 0.6);
  border-right: 1px solid var(--screen-border);
  overflow-y: auto;
}
.sidebar-team {
  display: flex; flex-direction: column;
  padding: 1vmin 1.2vmin;
  border-radius: var(--radius);
  background: var(--surface-hover);
  border-left: 4px solid var(--yolk);
  transition: all var(--transition-med);
}
.sidebar-team.is-winner { border-left-color: var(--green); background: rgba(39, 174, 96, 0.12); }
.sidebar-team .st-name {
  font-size: min(2.2vmin, 22px); color: var(--cream);
  font-family: 'Bungee', 'Impact', 'Arial Black', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-team .st-score {
  font-size: min(2.8vmin, 28px); color: var(--yolk);
  font-family: 'Bungee', 'Impact', sans-serif;
}
.devil-mode .sidebar-team { border-left-color: var(--deviled-red); }
.devil-mode .sidebar-team.is-winner { border-left-color: var(--cream); }

/* Main screen area */
.tv-main {
  grid-row: 2;
  grid-column: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3vmin;
  position: relative;
}

/* "Screen" card — the highlighted main content area */
.screen-card {
  background: var(--screen-bg);
  border: 1px solid var(--screen-border);
  border-radius: 12px;
  box-shadow: var(--screen-glow);
  padding: 3vmin 4vmin;
  max-width: 70vw;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Subtle inner glow at the top of the screen card */
.screen-card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.3), transparent);
}
.devil-mode .screen-card {
  border-color: rgba(192, 57, 43, 0.2);
  box-shadow: 0 0 60px rgba(192, 57, 43, 0.08);
}
.devil-mode .screen-card::before {
  background: linear-gradient(90deg, transparent, rgba(192, 57, 43, 0.4), transparent);
}

/* Game bar — large themed header */
.game-bar {
  grid-row: 1; grid-column: 1 / -1;
  position: relative; top: auto; left: auto; right: auto;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1vh var(--gap-lg);
  background: linear-gradient(180deg, rgba(14, 11, 22, 0.95) 0%, rgba(14, 11, 22, 0.85) 100%);
  border-bottom: 3px solid rgba(245, 197, 24, 0.3);
  backdrop-filter: blur(8px);
  gap: 0.3vh;
}
.game-bar.visible { display: flex; }
.bar-round {
  font-size: min(2.2vmin, 20px); color: var(--cream); opacity: 0.8;
}
.bar-phase {
  font-size: min(4vmin, 36px); color: var(--yolk);
  font-family: 'Bungee', 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 0.05em;
}
.bar-win-condition {
  font-size: min(2.5vmin, 22px);
  color: #E8A0BF;
  font-style: italic;
}
.bar-tutorial {
  font-size: min(2vmin, 18px); color: var(--green);
}
.devil-mode .game-bar {
  border-bottom-color: rgba(192, 57, 43, 0.5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(30, 0, 0, 0.85) 100%);
}
.devil-mode .bar-phase { color: var(--deviled-red); }
.devil-mode .bar-win-condition { color: #FF6B6B; }

/* Scoreboard divider line */
.sidebar-divider {
  height: 1px; margin: 0.5vmin 0;
  background: var(--border-subtle);
}

/* Full-bleed views (lobby, devil reveal, winner) bypass the grid layout */
.view-fullbleed {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--gap-md);
  z-index: 50;
}
.view-fullbleed[hidden] { display: none !important; }

/* -------------------------------------------
   11. PROMOTION PARTY DECORATIONS
   Balloons, graduation caps, capybara, confetti.
   Lobby + winner only. Devil round suppresses these.
   ------------------------------------------- */

.party-decor {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.party-balloon,
.party-cap {
  position: absolute;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.party-balloon {
  bottom: -12vh;
  font-size: clamp(40px, 6.5vmin, 84px);
  animation: balloon-float 13s linear infinite;
}

.party-cap {
  font-size: clamp(36px, 5.5vmin, 68px);
  animation: cap-drift 11s ease-out infinite;
}

@keyframes balloon-float {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  25%  { transform: translate(2vw, -30vh) rotate(3deg); }
  50%  { transform: translate(-1vw, -60vh) rotate(-3deg); }
  75%  { transform: translate(2vw, -90vh) rotate(4deg); }
  100% { transform: translate(0, -120vh) rotate(-4deg); }
}

@keyframes cap-drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15%  { opacity: 0.85; }
  50%  { transform: translate(8vw, -50vh) rotate(180deg); opacity: 0.85; }
  85%  { opacity: 0; }
  100% { transform: translate(16vw, -110vh) rotate(360deg); opacity: 0; }
}

/* Subtle bobbing for the SVG capybara */
.party-capybara {
  position: absolute;
  bottom: 1vmin;
  right: 2vmin;
  width: clamp(140px, 18vmin, 220px);
  pointer-events: none;
  z-index: 2;
  animation: capy-bob 4.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

@keyframes capy-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-8px) rotate(1.5deg); }
}

/* Devil round suppresses cheerful decorations */
.devil-mode .party-decor,
.devil-mode .party-capybara {
  display: none;
}

/* Ambient party — runs on every screen, gentle background presence.
   Sits inside .tv-bg-decor (z-index: -1) so it's behind all game content. */
.tv-bg-decor .ambient-balloon,
.tv-bg-decor .ambient-confetti-bit {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.tv-bg-decor .ambient-balloon {
  font-size: clamp(28px, 4vmin, 54px);
  bottom: -10vh;
  opacity: 0.55;
  animation: ambient-balloon-float 22s linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.tv-bg-decor .ambient-confetti-bit {
  top: -6vh;
  opacity: 0.65;
  animation: ambient-confetti-fall linear infinite;
}

@keyframes ambient-balloon-float {
  0%   { transform: translateY(0) translateX(0) rotate(-2deg); }
  50%  { transform: translateY(-65vh) translateX(20px) rotate(2deg); }
  100% { transform: translateY(-120vh) translateX(0) rotate(-2deg); }
}

@keyframes ambient-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.65; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(118vh) rotate(720deg); opacity: 0; }
}

.devil-mode .tv-bg-decor .ambient-balloon,
.devil-mode .tv-bg-decor .ambient-confetti-bit {
  display: none;
}

/* Lobby title decoration — graduation caps flanking the wordmark */
.lobby-title-cap {
  display: inline-block;
  animation: cap-tilt 3s ease-in-out infinite;
  margin: 0 var(--gap-sm);
}
.lobby-title-cap.right { animation-delay: -1.5s; }

@keyframes cap-tilt {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}