/* ==========================================================================
   STAGE THEME — design team, this file is yours.

   The stage is a fixed 1920×1080 artboard, scaled to fit the window
   (so it looks identical in OBS, on a projector or on a laptop).
   Design in Figma at 1920×1080 and use px values directly.

   The glass frame, logos, Messi and the T&Cs are baked into the background image
   (/assets/campaign-bg.webp). Only the draw text on the left is live.
   ========================================================================== */

@font-face { font-family: 'Geomanist'; font-weight: 300; font-display: swap; src: url('/assets/fonts/geomanist-light.woff2') format('woff2'); }
@font-face { font-family: 'Geomanist'; font-weight: 400; font-display: swap; src: url('/assets/fonts/geomanist-regular.woff2') format('woff2'); }
@font-face { font-family: 'Geomanist'; font-weight: 500; font-display: swap; src: url('/assets/fonts/geomanist-medium.woff2') format('woff2'); }
@font-face { font-family: 'Geomanist'; font-weight: 700; font-display: swap; src: url('/assets/fonts/geomanist-bold.woff2') format('woff2'); }
@font-face { font-family: 'Geomanist'; font-weight: 900; font-display: swap; src: url('/assets/fonts/geomanist-black.woff2') format('woff2'); }

:root {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .82);
  --brand: #26e3b5;           /* teal: prize line, "Get Ready", winner */
  --calling: #e6ef3a;         /* label pill while calling */
  --bad: #ff4d5e;
  --font: 'Geomanist', 'Helvetica Neue', system-ui, sans-serif;
  --col-left: 150px;          /* left edge of the text column */
  --col-width: 880px;         /* keeps long names clear of Messi */
  /* stage.js sets --spin-progress from 0 to 1 while the reel spins. */
}

html, body { margin: 0; height: 100%; overflow: hidden; background: #02100f; }

.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  background: #052a2b url('/assets/campaign-bg.webp') center / cover no-repeat;
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

/* ---------- header ---------- */
.stage-header { position: absolute; left: var(--col-left); top: 150px; width: 1000px; }
.draw-number { font-size: 46px; font-weight: 300; letter-spacing: .34em; text-transform: uppercase; opacity: .92; line-height: 1; margin-left: -6px; }
.draw-title {
  font-size: 132px; font-weight: 700; line-height: 1.02; letter-spacing: -.01em;
  margin: 10px 0 0; white-space: pre-line;
  background: linear-gradient(180deg, #ffffff 40%, #dfe9e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* "Draws Complete" is wider than the other titles and runs into Messi at full size. */
[data-state="complete"] .draw-title { font-size: 104px; }
.draw-prize { font-size: 51px; font-weight: 400; color: var(--brand); margin-top: 12px; line-height: 1.1; }

/* ---------- centre stack: pill / name / subline ---------- */
.stage-center { position: absolute; left: var(--col-left); top: 572px; width: var(--col-width); }

.pill {
  width: 362px; height: 84px; box-sizing: border-box; border-radius: 14px;
  display: grid; place-items: center;
  padding-top: 9px; /* Geomanist's caps sit ~4.6px above the middle of the line box; this puts them dead centre */
  font-size: 46px; font-weight: 400; text-transform: uppercase; letter-spacing: .005em;
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, .08); color: var(--text);
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, background .35s ease, color .35s ease;
}
[data-state="calling"] .pill,
[data-state="noanswer"] .pill,
[data-state="winner"] .pill,
[data-state="countdown"] .pill,
[data-state="soon"] .pill,
[data-state="ended"] .pill,
[data-state="complete"] .pill { opacity: 1; transform: none; }

[data-state="calling"] .pill  { color: var(--calling); background: radial-gradient(ellipse at 50% 50%, rgba(199, 207, 38, .34), rgba(22, 52, 44, .55) 85%); }
[data-state="noanswer"] .pill { color: #fff; background: radial-gradient(ellipse at 50% 50%, rgba(214, 38, 58, .72), rgba(52, 22, 34, .6) 88%); }
[data-state="winner"] .pill   { color: var(--brand); background: radial-gradient(ellipse at 50% 50%, rgba(24, 160, 134, .55), rgba(18, 56, 52, .6) 88%); animation: pill-glow 1.1s ease-out; }
[data-state="countdown"] .pill,
[data-state="ended"] .pill,
[data-state="complete"] .pill { color: var(--text); }
[data-state="soon"] .pill { color: var(--calling); background: radial-gradient(ellipse at 50% 50%, rgba(199, 207, 38, .34), rgba(22, 52, 44, .55) 85%); animation: pill-pulse 1.8s ease-in-out infinite; }
[data-state="calling"] .pill { animation: pill-pulse 1.8s ease-in-out infinite; }
@keyframes pill-pulse { 50% { box-shadow: 0 0 0 0 transparent, 0 0 28px rgba(230, 239, 58, .22); } }
@keyframes pill-glow { 30% { box-shadow: 0 0 46px rgba(38, 227, 181, .75); color: #8dffe3; } }

.name-row { position: relative; height: 128px; margin-top: 18px; }
.name { position: absolute; left: 0; top: 0; width: var(--col-width); height: 128px; display: flex; align-items: center; opacity: 0; font-size: 100px; font-weight: 700; line-height: 1; white-space: nowrap; transition: opacity .25s ease; }

.idle-text { color: var(--brand); font-weight: 700; }
.candidate-name {
  background: linear-gradient(180deg, #ffffff 35%, #d6dedd 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; transform-origin: left center;
}
.exhausted-text { font-size: 72px; font-weight: 700; color: var(--text); }
.schedule-text { color: var(--brand); font-variant-numeric: tabular-nums; transform-origin: left center; }
[data-state="ended"] .schedule-text, [data-state="complete"] .schedule-text { color: var(--text); font-size: 72px; }

[data-state="idle"]      .idle-text,
[data-state="spinning"]  .reel,
[data-state="calling"]   .candidate-name,
[data-state="noanswer"]  .candidate-name,
[data-state="winner"]    .candidate-name,
[data-state="exhausted"] .exhausted-text,
[data-state="empty"]     .exhausted-text,
[data-state="countdown"] .schedule-text,
[data-state="soon"]      .schedule-text,
[data-state="ended"]     .schedule-text,
[data-state="complete"]  .schedule-text { opacity: 1; }

[data-state="noanswer"] .candidate-name { opacity: .85; }
[data-state="winner"] .candidate-name { animation: winner-pop .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes winner-pop { from { transform: scale(.9); opacity: .4; } }

/* Reel: a clipped window; each tick the previous name rolls up and out while the next rolls in. */
.reel { overflow: hidden; display: block; }
.reel-name, .reel-ghost {
  position: absolute; left: 0; top: 0; height: 128px; display: flex; align-items: center; white-space: nowrap;
  filter: url(#reel-blur);
}
.reel-name { animation: roll-in var(--roll-ms, 120ms) cubic-bezier(.3, .6, .4, 1) both; }
.reel-ghost { animation: roll-out var(--roll-ms, 120ms) cubic-bezier(.3, .6, .4, 1) both; pointer-events: none; }
@keyframes roll-in  { from { transform: translateY(100%); } }
@keyframes roll-out { to   { transform: translateY(-100%); } }
/* On the rewind pass the names roll downward instead. */
.reel.down .reel-name  { animation-name: roll-in-down; }
.reel.down .reel-ghost { animation-name: roll-out-down; }
@keyframes roll-in-down  { from { transform: translateY(-100%); } }
@keyframes roll-out-down { to   { transform: translateY(100%); } }

.subline { margin-top: 6px; height: 64px; font-size: 44px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 64px; letter-spacing: .01em; }
[data-state="empty"] .subline, [data-state="exhausted"] .subline { visibility: hidden; }

/* Hall of fame link, shown on the schedule screens only. */
.hall-link { display: none; margin-top: 30px; text-decoration: none; }
[data-state="countdown"] .hall-link:not([hidden]), [data-state="soon"] .hall-link:not([hidden]),
[data-state="ended"] .hall-link:not([hidden]), [data-state="complete"] .hall-link:not([hidden]) { display: block; }
.hall-link { font-size: 38px; font-weight: 500; color: var(--brand); letter-spacing: .01em; }
.hall-link:hover { text-decoration: underline; text-underline-offset: 8px; }

/* ---------- footer: names that didn't pick up ---------- */
.stage-footer { position: absolute; left: var(--col-left); top: 990px; }
.stage-footer:empty { display: none; }
.tried-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.tried-list li { font-size: 24px; color: var(--muted); padding: 8px 20px; border-radius: 99px; background: rgba(255, 255, 255, .08); text-decoration: line-through; }

/* ---------- effects canvas + offline banner ---------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.offline { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; font: 14px system-ui; padding: 6px 14px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pill, .name { transition: none; }
  [data-state="winner"] .candidate-name, [data-state] .pill { animation: none; }
}

/* ---------- designer preview bar (/?designer) ---------- */
.designer-bar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; background: rgba(0, 0, 0, .8); border-radius: 10px; font: 13px system-ui; z-index: 10; }
.designer-bar button { background: #333; color: #fff; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; }
.designer-bar button.active { background: #4f8cff; }