/* ============================================================================
   DISPLAY — TV view. Magazine spread that escalates from cocktail bar (R1)
   through candlelit dinner (R2) to speakeasy red light (R3). The Fraunces
   SOFT/WONK axes (set in rounds.css) make the type itself heat up per round.
   ========================================================================== */

#app {
  height: 100vh; width: 100vw;
  padding: clamp(48px, 7vh, 90px) clamp(20px, 5vw, 80px) clamp(24px, 4vh, 60px);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* --- Standing chrome ------------------------------------------------------ */

/* Wordmark in the top-left corner across every phase — like a magazine title bar. */
.chrome {
  position: fixed; top: clamp(12px, 3vh, 40px); left: clamp(14px, 3vw, 56px); z-index: 4;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
}
.chrome b { font-weight: 500; }
.chrome .dot { margin: 0 0.6em; opacity: 0.4; }

/* Round badge in the top-right — appears in question/reveal/performance. */
.q-round-badge {
  position: fixed; top: clamp(12px, 3vh, 40px); right: clamp(14px, 3vw, 56px); z-index: 4;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  padding: clamp(6px, 0.9vmin, 14px) clamp(10px, 1.4vmin, 22px);
  border: 1.5px solid var(--accent);
  display: inline-flex; align-items: center; gap: 0.8em;
}
.q-round-badge .pip { width: clamp(6px, 0.8vmin, 14px); height: clamp(6px, 0.8vmin, 14px); background: var(--accent); border-radius: 50%; animation: pulse-pip 2.4s ease-in-out infinite; }
@keyframes pulse-pip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } }

/* --- LOBBY ---------------------------------------------------------------- */

.lobby {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.4vh, 28px) clamp(20px, 4vw, 80px);
  align-items: center;
}
.lobby-headline {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; flex-direction: column; gap: clamp(4px, 0.6vh, 10px);
  align-self: end;
}
.lobby-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.05vmin, 22px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.65;
}
.lobby-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 600;
  font-size: clamp(56px, 9vmin, 220px);
  line-height: 0.86;
  letter-spacing: -0.035em;
}
.lobby-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 500;
  color: var(--accent);
}
.lobby-sub {
  font-family: var(--font-mono); font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: clamp(4px, 0.8vh, 12px); opacity: 0.7;
}

/* QR sits in a hairline frame with corner brackets — like a stamp. */
.lobby-qr-col { grid-column: 1; grid-row: 2; justify-self: center; align-self: center; }
.qr-frame {
  position: relative; padding: clamp(10px, 1.6vmin, 32px);
  background: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32);
}
.qr-frame::before, .qr-frame::after,
.qr-frame > .br::before, .qr-frame > .br::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2.5px solid var(--accent);
}
.qr-frame::before        { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.qr-frame::after         { top: -10px; right: -10px; border-left: 0; border-bottom: 0; }
.qr-frame > .br::before  { bottom: -10px; left: -10px; border-right: 0; border-top: 0; }
.qr-frame > .br::after   { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.qr-frame .qr { line-height: 0; }
.qr-frame .qr canvas, .qr-frame .qr svg { display: block; }

.lobby-meta { grid-column: 2; grid-row: 2; align-self: center; }
.lobby-meta .url {
  font-family: var(--font-mono); font-size: clamp(14px, 1.5vmin, 30px); font-weight: 500;
  letter-spacing: 0.04em; padding-bottom: clamp(6px, 1vh, 14px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(8px, 1.6vh, 22px);
  overflow-wrap: anywhere;
}
.lobby-meta .step {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(18px, 2.1vmin, 44px); line-height: 1.18;
}
.lobby-meta .step + .step { margin-top: clamp(4px, 1vh, 12px); }
.lobby-meta .ord {
  font-family: var(--font-mono); font-size: clamp(10px, 0.95vmin, 18px); font-weight: 400;
  color: var(--accent); margin-right: 0.5em; vertical-align: 0.4em;
  letter-spacing: 0.1em;
}

.lobby-teams { grid-column: 1 / -1; grid-row: 3; padding-top: clamp(4px, 1vh, 14px); }
.lobby-teams .label {
  font-family: var(--font-mono); font-size: clamp(9px, 0.95vmin, 18px);
  letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.55;
  margin-bottom: clamp(6px, 1vh, 14px);
  display: flex; align-items: center; gap: 1.2em;
}
.lobby-teams .label::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.teams-lobby { display: flex; flex-wrap: wrap; gap: clamp(4px, 0.8vmin, 14px) clamp(10px, 1.6vmin, 26px); }
.team-chip {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(16px, 1.8vmin, 38px);
  letter-spacing: -0.005em;
  padding: 0.3vh 0;
  position: relative;
  animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.team-chip .emo { font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; margin-right: 0.4em; }
.team-chip + .team-chip::before {
  content: "⋆"; color: var(--accent); margin-right: 1.4vw; margin-left: -1.4vw;
  display: inline-block; opacity: 0.6;
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* --- ROUND CARD ----------------------------------------------------------- */

.round-card {
  flex: 1;
  display: grid; place-items: center;
  position: relative; isolation: isolate;
}
/* Massive ordinal numeral as backdrop — sets stage like a magazine chapter break. */
.round-card .numeral {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 300;
  font-style: italic;
  font-size: clamp(220px, 70vmin, 1200px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0.18;
  z-index: -1;
  user-select: none;
}
.round-card .stack { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 44px); max-width: 80vw; text-align: center; }
.round-card .eyebrow {
  font-family: var(--font-mono); font-size: clamp(11px, 1.2vmin, 24px);
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--accent);
}
.round-card .title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
  font-size: clamp(72px, 13vmin, 280px); line-height: 0.92;
  letter-spacing: -0.03em;
}
.round-card .sub {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 400;
  font-style: italic;
  font-size: clamp(20px, 3vmin, 64px);
  letter-spacing: -0.01em;
  color: var(--accent);
  opacity: 0.92;
}

/* --- QUESTION ------------------------------------------------------------- */

.question-wrap {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr minmax(260px, 26vw); gap: clamp(20px, 5vw, 80px);
  align-items: center;
}
.q-meta {
  font-family: var(--font-mono); font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: clamp(10px, 2vh, 28px);
  display: flex; align-items: center; gap: 1.2em;
}
.q-meta .rule { flex: 1; height: 1px; background: var(--rule); }
.q-prompt {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(40px, 5.6vmin, 130px); line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.q-prompt::before {
  content: "❝";
  display: block;
  font-style: italic;
  font-size: clamp(40px, 6vmin, 130px); line-height: 0.6;
  color: var(--accent);
  margin-bottom: clamp(8px, 1.5vh, 22px); margin-left: -0.6vw;
  opacity: 0.85;
}

.team-status-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); overflow: auto; max-height: 70vh; }
.team-status {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: clamp(8px, 1.4vh, 18px) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(15px, 1.8vmin, 32px);
}
.team-status .who { display: flex; gap: 0.5em; align-items: baseline; }
.team-status .emo { font-family: system-ui, "Apple Color Emoji", sans-serif; }
.team-status .status {
  font-family: var(--font-mono); font-size: clamp(9px, 0.95vmin, 18px);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.team-status .status.submitted { color: var(--accent); font-weight: 600; }
.team-status .status.writing { opacity: 0.4; }
.team-status .status.writing::after {
  content: "•••"; margin-left: 0.4em; animation: ellipsis 1.4s steps(4, end) infinite;
}
@keyframes ellipsis { 0% { content: "•  "; } 33% { content: "•• "; } 66% { content: "•••"; } }

/* --- REVEAL --------------------------------------------------------------- */

.reveal {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; max-width: 86vw;
  margin: 0 auto;
  animation: fade-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.reveal .marker {
  font-family: var(--font-mono); font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--accent); margin-bottom: clamp(8px, 1.4vh, 18px);
}
.reveal .qref {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 400;
  font-size: clamp(18px, 2.4vmin, 52px); line-height: 1.18;
  letter-spacing: -0.01em;
  opacity: 0.55;
  margin-bottom: clamp(16px, 3vh, 40px);
  padding-bottom: clamp(12px, 2.2vh, 28px);
  border-bottom: 1px solid var(--rule);
  text-wrap: balance;
}
.reveal .quote {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 550;
  font-style: italic;
  font-size: clamp(40px, 5.6vmin, 130px); line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.reveal .quote::before { content: "“"; color: var(--accent); margin-right: 0.15em; }
.reveal .quote::after  { content: "”"; color: var(--accent); margin-left: 0.1em; }
.reveal .byline {
  margin-top: clamp(16px, 3.4vh, 44px);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(18px, 2.3vmin, 48px);
  display: flex; align-items: baseline; gap: 1em;
}
.reveal .byline .em { font-family: var(--font-mono); color: var(--accent); }
.reveal .byline .name { letter-spacing: -0.005em; }
.reveal .byline .emo  { font-family: system-ui, "Apple Color Emoji", sans-serif; }
.reveal .byline .nth  { font-family: var(--font-mono); font-size: clamp(9px, 0.95vmin, 18px); letter-spacing: 0.3em; opacity: 0.55; margin-left: auto; text-transform: uppercase; }

/* --- SCOREBOARD ----------------------------------------------------------- */

.scoreboard { flex: 1; display: flex; flex-direction: column; max-width: 80vw; margin: 0 auto; width: 100%; }
.scoreboard .head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1.6vh; margin-bottom: 2.4vh;
}
.scoreboard h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
  font-size: clamp(40px, 5.6vmin, 130px); line-height: 1; letter-spacing: -0.02em;
}
.scoreboard .head .meta {
  font-family: var(--font-mono); font-size: clamp(10px, 1vmin, 20px);
  letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6;
}

.score-row {
  display: grid;
  grid-template-columns: 0.7fr 6fr 4fr 1.4fr;
  align-items: baseline;
  gap: clamp(8px, 1.5vw, 28px);
  padding: clamp(10px, 1.8vh, 24px) 0;
  border-bottom: 1px solid var(--rule);
}
.score-row .rank {
  font-family: var(--font-mono); font-size: clamp(13px, 1.4vmin, 30px); font-weight: 500;
  color: var(--accent); letter-spacing: 0.08em;
}
.score-row .name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 500;
  font-size: clamp(22px, 3.2vmin, 68px); letter-spacing: -0.012em;
}
.score-row .name .emo { font-family: system-ui, "Apple Color Emoji", sans-serif; margin-right: 0.4em; }
.score-row .bar-cell { position: relative; }
.score-row .bar { height: clamp(8px, 1.2vh, 18px); background: var(--accent); transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.score-row .bar-cell .dots {
  position: absolute; left: 0; right: 0; top: 50%;
  border-bottom: 1px dotted var(--rule); transform: translateY(-50%);
  z-index: -1;
}
.score-row .num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
  font-size: clamp(28px, 4vmin, 90px); text-align: right; line-height: 1; letter-spacing: -0.02em;
}
.score-row.leader .name { color: var(--accent); }
.score-row.leader .num::after {
  content: "⁕"; color: var(--accent); margin-left: 0.18em; font-size: 0.7em; vertical-align: 0.4em;
}

/* Final scoreboard — bottom-up reveal */
.scoreboard.final .head h2 {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 600;
}
.score-row.hidden-row { opacity: 0.18; }
.score-row.hidden-row .silhouette {
  font-family: var(--font-mono); letter-spacing: 0.05em; opacity: 0.6;
}
.score-row.reveal-in {
  animation: rowIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes rowIn {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: none; }
}
.score-row.winner-row .name {
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
}
.score-row.winner-row .num {
  font-size: clamp(36px, 5.2vmin, 120px);
  animation: winnerPulse 1.4s ease-in-out 0.3s infinite alternate;
}
@keyframes winnerPulse { 0%,100% { color: var(--ink); } 50% { color: var(--accent); } }

/* Final reveal: the moment the winner appears, the row erupts. */
.scoreboard.final.winner-revealed .score-row.winner-row {
  animation: winnerEnter 900ms cubic-bezier(0.2, 1.6, 0.4, 1) both, winnerGlow 2.4s ease-in-out 0.9s infinite alternate;
  transform-origin: left center;
}
.scoreboard.final.winner-revealed .score-row.winner-row .name {
  font-size: clamp(40px, 5.6vmin, 130px);
  color: var(--accent);
}
.scoreboard.final.winner-revealed .score-row.winner-row .name .emo {
  display: inline-block;
  animation: bounce 1.2s ease-in-out infinite alternate;
}
.scoreboard.final.winner-revealed .score-row.winner-row .num {
  font-size: clamp(56px, 7.5vmin, 180px);
  animation: winnerPulse 1.2s ease-in-out infinite alternate;
}
@keyframes winnerEnter {
  0%   { opacity: 0; transform: scale(0.6) translateX(-40px); }
  60%  { opacity: 1; transform: scale(1.1) translateX(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes winnerGlow {
  from { filter: drop-shadow(0 0 0 transparent); }
  to   { filter: drop-shadow(0 0 24px var(--glow)); }
}
@keyframes bounce {
  from { transform: translateY(0) rotate(-6deg); }
  to   { transform: translateY(-12px) rotate(6deg); }
}

/* Bigger confetti field for the final reveal */
.confetti-field.big { z-index: 3; }
.confetti-field.big .confetti {
  font-size: clamp(36px, 5.6vmin, 110px);
  animation: fallFinal linear infinite;
}
@keyframes fallFinal {
  0%   { transform: translateY(-15vh) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(125vh) translateX(var(--drift, 0)) rotate(var(--rot, 720deg)); opacity: 0.6; }
}

/* When the headline says "And the Winner", give it a celebratory burst too. */
.scoreboard.final.winner-revealed .head h2 {
  font-size: clamp(56px, 7vmin, 160px);
  animation: pop 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
  color: var(--accent);
}

/* --- PERFORMANCE ---------------------------------------------------------- */

.performance { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4.5vh, 60px); max-width: 88vw; margin: 0 auto; width: 100%; }
.perf-marker {
  font-family: var(--font-mono); font-size: clamp(11px, 1.1vmin, 22px);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--accent);
}
.perf-prompt {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 400;
  font-style: italic;
  font-size: clamp(28px, 4.2vmin, 90px); line-height: 1.1; opacity: 0.85;
  text-wrap: balance;
}
.perf-callout {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
  font-size: clamp(40px, 7vmin, 160px); line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  padding: clamp(16px, 3vh, 40px) 0;
  display: flex; align-items: baseline; gap: clamp(8px, 1.5vw, 26px); flex-wrap: wrap;
}
.perf-callout .verb { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 500; }
.perf-callout .emo { font-family: system-ui, "Apple Color Emoji", sans-serif; }
.perf-waiting { font-family: var(--font-mono); font-size: clamp(14px, 1.6vmin, 32px); letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.55; }

/* ---- CELEBRATION ---- */
.celebrate {
  flex: 1; position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(20px, 4vh, 60px);
  overflow: hidden;
}
.celebrate-eyebrow {
  font-family: var(--font-mono); font-size: clamp(12px, 1.3vmin, 26px);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--accent);
  animation: pop 600ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.celebrate-winners { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.5vh, 36px); }
.celebrate-team {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk), "wght" 700;
  font-size: clamp(60px, 11vmin, 240px); line-height: 1; letter-spacing: -0.03em;
  display: flex; align-items: center; gap: clamp(16px, 3vmin, 48px);
  animation: pop 720ms cubic-bezier(0.2, 1.6, 0.4, 1) both 0.15s;
}
.celebrate-team .emo { font-family: system-ui, "Apple Color Emoji", sans-serif; }
.celebrate-team .name { color: var(--accent); }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* Confetti rain */
.confetti-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti {
  position: absolute; top: -10vh;
  font-size: clamp(28px, 4vmin, 80px);
  animation: fall linear infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}
@keyframes fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh) translateX(var(--drift, 0)) rotate(720deg); opacity: 0.7; }
}