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

html, body {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: none;
}

#stage {
  position: relative;
  flex-shrink: 0;
  container-type: size;
}

.slide-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#blank-screen {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}

/* ── Question overlay ────────────────────────────────────────────────────── */

#question-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  padding: 6cqw 10cqw;
  background: rgba(6, 14, 28, 0.96);
  opacity: 0;
}

#question-overlay-label {
  font-size: max(8px, 1.2cqw);
  font-weight: 700;
  letter-spacing: 4px;
  color: #c9a84c;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
}

#question-overlay-text {
  font-size: max(12px, 4cqw);
  color: #f0ece3;
  font-family: Georgia, serif;
  text-align: center;
  line-height: 1.45;
}

/* ── Verse backdrop (behind overlay, renders theme bg + Bible panel) ──────── */

#verse-backdrop {
  z-index: 48;
}

/* ── Verse overlay (full screen) ─────────────────────────────────────────── */

#verse-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  padding: 6cqw 8cqw;
  background: transparent;
  border-left: 1cqw solid var(--accent, #c9a84c);
  opacity: 0;
}

#verse-overlay-text {
  font-size: max(11px, 3.2cqw);
  color: var(--text, #f0ece3);
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1.55;
  text-align: center;
  overflow: hidden;
  max-height: 72cqh;
  width: 100%;
}

.word-format-wrap {
  display: inline;
  border-radius: 3px;
}
.word-format-wrap.word-highlight {
  padding: 0.08em 0.18em;
  border-radius: 3px;
  animation: audience-highlight-in 2.4s ease forwards;
}
.word-format-wrap.word-highlight .word {
  text-shadow: none !important;
}
.word-format-wrap.word-bold .word,
.word-format-wrap.word-bold .verse-word,
.word-format-wrap.word-bold .callout-word {
  animation: audience-bold-in 2.4s ease forwards;
}
@keyframes audience-bold-in {
  from { text-shadow: none; }
  to   { text-shadow:
    0.4px 0 0 currentColor, -0.4px 0 0 currentColor,
    0.8px 0 0 currentColor, -0.8px 0 0 currentColor,
    1.1px 0 0 currentColor, -1.1px 0 0 currentColor; }
}
.word-format-wrap.word-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  animation: audience-underline-in 2s ease forwards;
}
@keyframes audience-highlight-in {
  from { background: rgba(var(--highlight-rgb, 247,201,72), 0); }
  to   { background: rgba(var(--highlight-rgb, 247,201,72), var(--highlight-alpha, 0.82)); color: var(--highlight-fg, #111); }
}
@keyframes audience-underline-in {
  to { text-decoration-color: currentColor; }
}
.word-format-wrap.word-glow .word,
.word-format-wrap.word-glow .verse-word,
.word-format-wrap.word-glow .callout-word {
  animation: audience-glow-in 2.4s ease forwards;
}
@keyframes audience-glow-in {
  from { color: inherit; text-shadow: none; }
  to   {
    color: var(--glow-text, #ffe878);
    text-shadow:
      0 0 6px  rgba(var(--glow-rgb, 255,220,60),0.7),
      0 0 16px rgba(var(--glow-rgb, 255,220,60),0.45),
      0 0 40px rgba(var(--glow-rgb, 255,220,60),0.25),
      0 0 70px rgba(var(--glow-rgb, 255,220,60),0.15);
  }
}

.sn-hover-glow {
  animation: audience-glow-in 0.4s ease forwards;
}
.sn-hover-glow.fading {
  animation: audience-glow-out 0.5s ease forwards;
}
@keyframes audience-glow-out {
  from {
    color: var(--glow-text, #ffe040);
    text-shadow:
      0 0 8px  rgba(var(--glow-rgb, 255,220,60),1),
      0 0 20px rgba(var(--glow-rgb, 255,220,60),0.85),
      0 0 45px rgba(var(--glow-rgb, 255,220,60),0.6),
      0 0 80px rgba(var(--glow-rgb, 255,220,60),0.35);
  }
  to { color: inherit; text-shadow: none; }
}

.verse-word {
  display: inline;
  cursor: default;
  border-radius: 3px;
  transition: background 1.5s, color 1.5s, text-shadow 1.5s, font-size 1.5s, letter-spacing 1.5s;
}
.verse-word.emphasized {
  background: rgba(255, 220, 60, 0.35);
  color: #ffe040;
  text-shadow: 0 0 12px rgba(255,220,60,1), 0 0 28px rgba(255,220,60,0.8), 0 0 55px rgba(255,200,0,0.5), 0 0 90px rgba(255,180,0,0.3);
  font-size: 1.08em;
  letter-spacing: 0.05em;
}

#verse-overlay-ref {
  font-size: max(9px, 2cqw);
  color: var(--accent, #c9a84c);
  font-weight: bold;
  font-family: Georgia, serif;
  text-align: right;
  width: 100%;
}

/* ── Callout overlay (Fact / Definition / Deep Dive) ─────────────────────── */

#callout-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 55;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2cqw;
  padding: 6cqw 8cqw;
  background: rgba(4, 10, 22, 0.97);
  border-left: 1cqw solid #c9a84c;
  opacity: 0;
}

#callout-overlay-type {
  font-size: max(9px, 1.5cqw);
  font-weight: 700;
  letter-spacing: 3px;
  color: #c9a84c;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
}

#callout-overlay-title {
  font-size: max(14px, 3.2cqw);
  font-weight: 700;
  color: #f0ece3;
  font-family: Georgia, serif;
  line-height: 1.3;
}

#callout-overlay-body {
  font-size: max(11px, 2.1cqw);
  color: #c8d0e0;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 65cqh;
  flex: 1;
  min-height: 0;
}

/* ── IMAGE callout — full-overlay treatment ──────────────────────────────── */
#callout-overlay.is-image {
  padding: 0;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
  border-left: none;
}
#callout-overlay.is-image #callout-overlay-type,
#callout-overlay.is-image #callout-overlay-title { display: none; }
#callout-overlay.is-image #callout-overlay-body {
  max-height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: unset;
  white-space: unset;
}
#callout-overlay.is-image #callout-overlay-body img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

.callout-para {
  margin: 0 0 4px;
  display: block;
}

.callout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  margin: 6px 0 10px;
  table-layout: auto;
}
.callout-table th,
.callout-table td {
  padding: 5px 10px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  white-space: normal;
  word-break: normal;
}
.callout-table th {
  background: rgba(26,40,64,0.9);
  color: #c9a84c;
  font-weight: 600;
  white-space: nowrap;
}
.callout-table tr:nth-child(even) td {
  background: rgba(14,24,36,0.6);
}

.callout-word {
  display: inline;
  cursor: default;
  border-radius: 3px;
  transition: background 0.3s, color 0.3s, text-shadow 0.3s;
}
.callout-word.emphasized {
  background: rgba(255, 220, 60, 0.25);
  color: #ffe040;
  text-shadow: 0 0 10px rgba(255,220,60,0.9);
}

/* ── DI Question overlay — "Who Wants to Be a Millionaire" style ─────────── */

#di-question-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 58;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3cqw;
  background: radial-gradient(ellipse at 50% 30%, #0a1a4a 0%, #020510 70%);
  opacity: 0;
  overflow: hidden;
}

#di-millionaire-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(60,100,220,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(180,140,20,0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: di-bg-pulse 4s ease-in-out infinite alternate;
}
@keyframes di-bg-pulse {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

#di-millionaire-inner {
  position: relative;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqw;
}

#di-question-label {
  font-size: max(5px, 1.1cqw);
  font-weight: 700;
  letter-spacing: 4px;
  color: #c9a84c;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
  opacity: 0.8;
}

#di-question-box {
  width: 100%;
  background: linear-gradient(180deg, #0e2060 0%, #071030 100%);
  border: 0.2cqw solid #3a6adf;
  border-radius: 50cqw;
  padding: 2cqw 5cqw;
  box-shadow:
    0 0 0 0.08cqw #1a3a8a,
    0 0 2cqw 0.4cqw rgba(50,90,220,0.35),
    inset 0 0.1cqw 0 rgba(255,255,255,0.08);
  position: relative;
}
#di-question-box::before {
  content: '';
  position: absolute;
  inset: 0.15cqw;
  border-radius: 50cqw;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

#di-question-text {
  font-size: max(8px, 2.8cqw);
  color: #f0ece3;
  font-family: 'Segoe UI', Georgia, serif;
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
}

#di-choices-container {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.2cqw;
  width: 100%;
}

.di-choice-option {
  flex: 1 1 46%;
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, #0e2060 0%, #071030 100%);
  border: 0.18cqw solid #3a6adf;
  border-radius: 50cqw;
  overflow: hidden;
  cursor: default;
  box-shadow:
    0 0 0 0.06cqw #1a3a8a,
    0 0 1cqw 0.2cqw rgba(50,90,220,0.2);
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, opacity 0.5s;
  position: relative;
}
.di-choice-option::before {
  content: '';
  position: absolute;
  inset: 0.12cqw;
  border-radius: 50cqw;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 55%);
  pointer-events: none;
}

.di-choice-letter {
  font-size: max(7px, 2.6cqw);
  font-weight: 700;
  color: #f0d060;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #2a4aaa 0%, #1a2a7a 100%);
  width: 5cqw;
  min-width: 5cqw;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.15cqw solid #3a6adf;
  flex-shrink: 0;
}

.di-choice-text {
  font-size: max(7px, 2.5cqw);
  color: #e8ece4;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.35;
  padding: 1.2cqw 2cqw;
  text-align: center;
  flex: 1;
}

.di-choice-option.correct {
  background: linear-gradient(180deg, #1a5a20 0%, #0a2a10 100%);
  border-color: #4cdf7a;
  box-shadow: 0 0 0 0.06cqw #2a8a40, 0 0 2cqw 0.6cqw rgba(60,200,80,0.45);
  animation: di-correct-pulse 0.6s ease-out;
}
.di-choice-option.correct .di-choice-letter {
  background: linear-gradient(135deg, #2a7a40 0%, #1a5a28 100%);
  border-color: #4cdf7a;
  color: #b0ffb8;
}
.di-choice-option.correct .di-choice-text { color: #c8ffd0; font-weight: 600; }

@keyframes di-correct-pulse {
  0%   { box-shadow: 0 0 0 0.06cqw #2a8a40, 0 0 4cqw 2cqw rgba(60,220,80,0.8); }
  100% { box-shadow: 0 0 0 0.06cqw #2a8a40, 0 0 2cqw 0.6cqw rgba(60,200,80,0.45); }
}

.di-choice-option.incorrect {
  opacity: 0.28;
  filter: grayscale(0.6);
}

.di-choice-option.selected-wrong {
  background: linear-gradient(180deg, #3a0a0a 0%, #1a0404 100%);
  border-color: #df4c4c;
}
.di-choice-option.selected-wrong .di-choice-letter {
  background: linear-gradient(135deg, #7a2020 0%, #5a1010 100%);
  border-color: #df4c4c;
  color: #ffb0b0;
}
.di-choice-option.selected-wrong .di-choice-text { color: #ffb0b0; }

/* ── Enumeration (Family Feud) overlay ───────────────────────────────────── */

#enum-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 58;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2.5cqw;
  background: radial-gradient(ellipse at 50% 30%, #0a1a4a 0%, #020510 70%);
  overflow: hidden;
  opacity: 0;
}

#enum-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(60,100,220,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(180,140,20,0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: di-bg-pulse 4s ease-in-out infinite alternate;
}

#enum-inner {
  position: relative;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8cqw;
}

#enum-label {
  font-size: max(7px, 1.1cqw);
  font-weight: 700;
  letter-spacing: 4px;
  color: #c9a84c;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
  opacity: 0.8;
}

#enum-question-box {
  width: 100%;
  background: linear-gradient(180deg, #0e2060 0%, #071030 100%);
  border: 0.2cqw solid #3a6adf;
  border-radius: 50cqw;
  padding: 1.6cqw 4cqw;
  box-shadow: 0 0 0 0.08cqw #1a3a8a, 0 0 2cqw 0.4cqw rgba(50,90,220,0.35);
  position: relative;
}
#enum-question-box::before {
  content: '';
  position: absolute;
  inset: 0.15cqw;
  border-radius: 50cqw;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

#enum-question-text {
  font-size: max(8px, 2.2cqw);
  color: #f0ece3;
  font-family: 'Segoe UI', Georgia, serif;
  text-align: center;
  line-height: 1.35;
  font-weight: 500;
}

#enum-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
}

.enum-tile {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, #0e2060 0%, #071030 100%);
  border: 0.15cqw solid #3a6adf;
  border-radius: 50cqw;
  overflow: hidden;
  box-shadow: 0 0 0 0.05cqw #1a3a8a;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.enum-tile.revealed {
  background: linear-gradient(180deg, #1a5a30 0%, #0a2818 100%);
  border-color: #4cdf7a;
  box-shadow: 0 0 0 0.05cqw #2a8a40, 0 0 1.5cqw 0.3cqw rgba(60,200,80,0.4);
}
.enum-tile.revealed-postgame {
  background: linear-gradient(180deg, #3a2a08 0%, #1a1204 100%);
  border-color: #c0a030;
  box-shadow: 0 0 0 0.05cqw #806810, 0 0 1.5cqw 0.3cqw rgba(180,150,30,0.3);
}
.enum-tile.revealed-postgame .enum-tile-num {
  background: linear-gradient(135deg, #5a4010 0%, #3a2808 100%);
  border-color: #c0a030;
  color: #f0d080;
}
.enum-tile.revealed-postgame .enum-tile-text { color: #d4a840; }

/* ── FYFA banner ─────────────────────────────────────────────────────────── */
#di-fyfa-banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqw;
  padding: 1.2cqw 3cqw;
  background: linear-gradient(180deg, #1a0e40 0%, #0a0820 100%);
  border: 0.18cqw solid #8060df;
  border-radius: 50cqw;
  box-shadow: 0 0 0 0.06cqw #4a30a0, 0 0 2cqw 0.6cqw rgba(120,80,220,0.35);
}
#di-fyfa-question {
  font-size: max(11px, 2.4cqw);
  font-style: italic;
  color: #c9a84c;
  font-family: 'Segoe UI', Georgia, serif;
  letter-spacing: 2px;
  text-align: center;
}
#di-fyfa-answer {
  font-size: max(14px, 2.8cqw);
  font-weight: 700;
  color: #f0ece3;
  font-family: 'Segoe UI', Georgia, serif;
  text-align: center;
  text-shadow: 0 0 1.5cqw rgba(200,168,76,0.5);
}

/* ── Fill-in-the-blank blank styling ────────────────────────────────────── */
.di-fill-blank {
  display: inline-block;
  color: #f0d060;
  border-bottom: 0.12cqw solid #c9a84c;
  min-width: 6cqw;
  text-align: center;
  font-style: italic;
  letter-spacing: 2px;
  padding: 0 0.3cqw;
  transition: color 0.3s;
}

.enum-tile-num {
  font-size: max(7px, 1.6cqw);
  font-weight: 700;
  color: #f0d060;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #2a4aaa 0%, #1a2a7a 100%);
  width: 4.5cqw;
  min-width: 4.5cqw;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.12cqw solid #3a6adf;
  flex-shrink: 0;
}
.enum-tile.revealed .enum-tile-num {
  background: linear-gradient(135deg, #2a7a40 0%, #1a5a28 100%);
  border-color: #4cdf7a;
  color: #b0ffb8;
}

.enum-tile-text {
  flex: 1;
  font-size: max(7px, 1.7cqw);
  color: #c8ffd0;
  font-family: 'Segoe UI', sans-serif;
  padding: 0.9cqw 2cqw;
  line-height: 1.3;
  font-weight: 500;
}
.enum-tile-text.unrevealed {
  color: #1a3060;
  letter-spacing: 2px;
}

#enum-footer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5cqw;
}

#enum-strikes {
  display: flex;
  gap: 1.5cqw;
}

.enum-x {
  font-size: max(10px, 2.8cqw);
  font-weight: 900;
  color: #1a2a4a;
  font-family: 'Segoe UI', sans-serif;
  transition: color 0.3s, text-shadow 0.3s;
}
.enum-x.active {
  color: #ff3a3a;
  text-shadow: 0 0 1cqw rgba(255,60,60,0.9), 0 0 2.5cqw rgba(255,60,60,0.6);
}

#enum-timer-display {
  font-size: max(14px, 4cqw);
  font-weight: 700;
  color: #f0d060;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 1.5cqw rgba(240,208,96,0.5);
  transition: color 0.5s, text-shadow 0.5s;
}
#enum-timer-display.danger {
  color: #ff4444;
  text-shadow: 0 0 1.5cqw rgba(255,68,68,0.8), 0 0 3cqw rgba(255,68,68,0.4);
  animation: enum-timer-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes enum-timer-pulse {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* ── MC countdown timer (inside DI overlay) ─────────────────────────────── */

#di-mc-timer {
  display: none;
  position: absolute;
  top: -2.2cqw;
  right: -2.2cqw;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #0e1a38 55%, #061028 100%);
  border: 0.22cqw solid #c9a84c;
  align-items: center;
  justify-content: center;
  font-size: 2.2cqw;
  font-weight: 900;
  font-family: 'Courier New', monospace;
  color: #f0d060;
  box-shadow:
    0 0 1.5cqw rgba(201,168,76,0.45),
    0 0 3.5cqw rgba(201,168,76,0.22),
    inset 0 0.1cqw 0 rgba(255,255,255,0.08);
  text-shadow: 0 0 1cqw rgba(240,208,96,0.7);
  letter-spacing: -1px;
  z-index: 10;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, text-shadow 0.25s;
}
#di-mc-timer.danger {
  border-color: #ff4444;
  color: #ff4444;
  box-shadow:
    0 0 1.5cqw rgba(255,68,68,0.85),
    0 0 4cqw rgba(255,68,68,0.50);
  text-shadow: 0 0 1.5cqw rgba(255,68,68,0.95);
  animation: mc-timer-pulse 0.38s ease-in-out infinite alternate;
}
@keyframes mc-timer-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.10); }
}

/* ── Test Summary overlay ────────────────────────────────────────────────── */

#test-summary-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #0a1a4a 0%, #020510 70%);
  overflow: hidden;
  opacity: 0;
}

#test-summary-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(60,100,220,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(180,140,20,0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: di-bg-pulse 4s ease-in-out infinite alternate;
}

#test-summary-inner {
  position: relative;
  width: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
}

#test-summary-label {
  font-size: max(10px, 1.8cqw);
  font-weight: 700;
  letter-spacing: 5px;
  color: #c9a84c;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
}

#test-summary-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
}

#test-summary-score {
  font-size: max(24px, 8cqw);
  font-weight: 700;
  color: #f0ece3;
  font-family: Georgia, serif;
  text-shadow: 0 0 3cqw rgba(200,168,76,0.5);
  line-height: 1;
}

#test-summary-score-label {
  font-size: max(8px, 1.4cqw);
  font-weight: 700;
  letter-spacing: 4px;
  color: #4cdf7a;
  text-transform: uppercase;
  font-family: 'Segoe UI', sans-serif;
}

#test-summary-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.summary-bar-row {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
}

.summary-bar-label {
  font-size: max(8px, 1.4cqw);
  color: #c8d0e0;
  font-family: 'Segoe UI', sans-serif;
  width: 18cqw;
  text-align: right;
  flex-shrink: 0;
}

.summary-bar-track {
  flex: 1;
  height: 1.2cqw;
  background: rgba(255,255,255,0.08);
  border-radius: 50cqw;
  overflow: hidden;
}

.summary-bar-fill {
  height: 100%;
  border-radius: 50cqw;
  width: 0%;
}
.summary-bar-fill.correct { background: linear-gradient(90deg, #2a8a40, #4cdf7a); }
.summary-bar-fill.wrong   { background: linear-gradient(90deg, #8a2a2a, #df4c4c); }

#test-summary-message {
  font-size: max(12px, 2.8cqw);
  color: #f0d060;
  font-family: Georgia, serif;
  text-align: center;
  letter-spacing: 1px;
}

#test-summary-breakdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,168,76,0.3) transparent;
}
#test-summary-breakdown::-webkit-scrollbar { width: 4px; }
#test-summary-breakdown::-webkit-scrollbar-thumb { background: rgba(200,168,76,0.3); border-radius: 4px; }

/* ── Media overlay (full screen) ────────────────────────────────────────── */

#media-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

#media-overlay-img {
  display: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#media-overlay-video {
  display: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  outline: none;
}

/* ── Lightning Round Scoreboard ────────────────────────────────────────────── */
#game-scoreboard-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: #080e18;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end;
  padding: 2vh 3vw 3vh;
  gap: 2vh;
}
#game-score-question-area {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2vh;
  min-height: 0;
}
#game-score-q-text {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(22px, 4vw, 52px);
  font-weight: 700; color: #f0f8ff;
  text-align: center; line-height: 1.3;
  max-width: 80vw;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
#game-score-timer-wrap {
  width: 60vw; height: 10px; background: rgba(255,255,255,0.1);
  border-radius: 5px; overflow: hidden;
}
#game-score-timer-bar {
  height: 100%; width: 100%; background: #f0c040;
  border-radius: 5px; transition: width 1s linear, background 0.5s;
}
#game-score-timer-bar.urgent { background: #e04040; }

#game-score-teams {
  display: grid;
  gap: 2vw;
  width: 100%;
}
/* Layout adapts to team count via JS-set class */
#game-score-teams.teams-1 { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
#game-score-teams.teams-2 { grid-template-columns: repeat(2, 1fr); }
#game-score-teams.teams-3 { grid-template-columns: repeat(3, 1fr); }
#game-score-teams.teams-4 { grid-template-columns: repeat(4, 1fr); }
#game-score-teams.teams-5 { grid-template-columns: repeat(5, 1fr); }
#game-score-teams.teams-6 { grid-template-columns: repeat(3, 1fr); }
#game-score-teams.teams-many { grid-template-columns: repeat(4, 1fr); }

.game-score-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: clamp(8px, 1.5vw, 20px);
  padding: clamp(12px, 2.5vh, 40px) clamp(10px, 2vw, 30px);
  border: 3px solid transparent;
  transition: transform 0.3s, box-shadow 0.3s;
  min-height: clamp(100px, 18vh, 220px);
  position: relative; overflow: hidden;
}
.game-score-card::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 0;
}
.game-score-card > * { position: relative; z-index: 1; }
.game-score-card.score-bump {
  transform: scale(1.04);
  box-shadow: 0 0 30px 6px var(--team-color, #f0c040);
}
.game-score-card-name {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(14px, 2.2vw, 32px);
  font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  text-align: center; letter-spacing: 0.5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-score-card-score {
  font-family: 'Segoe UI', sans-serif;
  font-size: clamp(36px, 7vw, 110px);
  font-weight: 900; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
  line-height: 1; margin: 0.1em 0;
}
.game-score-card-pts {
  font-size: clamp(10px, 1.2vw, 16px);
  color: rgba(255,255,255,0.6); letter-spacing: 2px; font-weight: 600;
}

/* ── Bullet text overlay ─────────────────────────────────────────────────── */
#bullet-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 9cqw 4cqw 4cqw;
  background: var(--bg, #0d1b2a);
  opacity: 0;
  overflow: hidden;
}
#bullet-text-overlay-text {
  font-size: max(8px, 3cqw);
  font-weight: 600;
  color: var(--text, #f0ece3);
  text-align: left;
  line-height: 1.45;
  width: 78%;
  max-width: 78%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  scroll-behavior: auto;
  box-sizing: border-box;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  padding: 1.5cqw 2cqw;
  border-left: 0.4cqw solid var(--accent, #c9a84c);
}
#bullet-text-overlay-header {
  display: none;
  position: absolute;
  top: 2.5cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: max(7px, 2cqw);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
  padding: 0 4cqw;
}
.bt-line {
  --bullet-depth: 0;
  position: relative;
  margin: 0.4cqw 0;
  transition: visibility 0s linear 0.05s;
}
.bt-line.bt-line-hidden { visibility: hidden; }
.bt-line:first-child { margin-top: 0; }
.bt-line.bt-subbullet {
  margin-left: calc(var(--bullet-depth) * 1.8em);
  padding-left: 1em;
}
.bt-line.bt-subbullet::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent, #c9a84c);
  font-weight: 700;
}