/* ==========================================================================
   FAMILY FANTASY FOOTBALL, 2026 Draft Lottery
   Design: "Night Game Under the Lights"

   Committed single dark theme. A live broadcast lives in the dark; a light
   mode would only weaken it. This is a choice, not an omission.

   Palette is derived from the league crest: forest turf, chalk cream,
   goal-post gold, pigskin leather.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Turf: the field at night, lit from above */
  --turf-void: #050D08;
  --turf-deep: #0A1A0E;
  --turf: #102616;
  --turf-hi: #16331D;
  --turf-lit: #1C4026;

  /* Chalk: field paint and jersey numerals */
  --chalk: #F4F7EC;
  --chalk-soft: #DCE3D2;
  --chalk-dim: #93A891;
  --chalk-faint: #5C6F5E;
  --chalk-line: #24452C;

  /* Goal-post gold: the accent, and the only thing allowed to glow */
  --gold: #E9B341;
  --gold-bright: #FFD980;
  --gold-deep: #A87A1C;

  /* Pigskin: leather, laces, card stock warmth */
  --pigskin: #8B4A2B;
  --pigskin-hi: #B8652F;

  /* Semantic, kept separate from the accent hue */
  --signal: #FF3B4E;
  --down-orange: #FF7A18;
  --go: #4ADE80;

  --card-stock: #F7F4E9;
  --card-ink: #14251A;

  /* Type */
  --display: 'Barlow Condensed', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Rhythm */
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --radius: 3px;
  --rail-width: clamp(17rem, 24vw, 24rem);

  --ease-slam: cubic-bezier(0.16, 1.2, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--turf-void);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-scrollable { overflow: auto; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

button { font: inherit; color: inherit; }

/* ==========================================================================
   The field, ambient ground layers
   ========================================================================== */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--turf-lit) 0%, var(--turf-deep) 45%, var(--turf-void) 100%);
}

/* Mowed stripes, exactly as a groundskeeper cuts them */
.field__mow {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.022) 0px,
    rgba(255, 255, 255, 0.022) 90px,
    transparent 90px,
    transparent 180px
  );
  animation: mow-drift 90s linear infinite;
}

/* Yard lines with hash marks */
.field__yards {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 158px,
      rgba(244, 247, 236, 0.07) 158px, rgba(244, 247, 236, 0.07) 160px),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 46px,
      rgba(244, 247, 236, 0.035) 46px, rgba(244, 247, 236, 0.035) 47px);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 70%, transparent 100%);
}

/* Floodlight bloom from the rig above the stage */
.field__flood {
  position: absolute;
  left: 50%;
  top: -34vh;
  width: 150vw;
  height: 110vh;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 60% at 50% 50%,
    rgba(255, 217, 128, 0.16) 0%,
    rgba(233, 179, 65, 0.07) 34%,
    transparent 68%
  );
  filter: blur(28px);
  animation: flood-breathe 9s ease-in-out infinite;
  pointer-events: none;
}

.field__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 90% at 50% 42%, transparent 42%, rgba(5, 13, 8, 0.85) 100%);
  pointer-events: none;
}

#fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

@keyframes mow-drift { to { transform: translateX(180px); } }
@keyframes flood-breathe {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}

/* ==========================================================================
   Broadcast frame
   ========================================================================== */

.broadcast {
  position: relative;
  z-index: 10;
  display: grid;
  /* minmax(0, …) not 1fr: a bare 1fr track takes min-content as its floor, and
     the ticker's nowrap line has a min-content width of several thousand
     pixels, which blows the whole grid out past the viewport. */
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "stage  rail"
    "lower  lower";
  height: 100dvh;
  gap: 0;
}

/* --- Top bar ------------------------------------------------------------ */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 0.7rem var(--gutter);
  border-bottom: 1px solid var(--chalk-line);
  background: linear-gradient(180deg, rgba(5, 13, 8, 0.92), rgba(5, 13, 8, 0.55));
  backdrop-filter: blur(6px);
}

.topbar__crest { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.topbar__crest svg { height: 46px; width: auto; flex: none; }

.topbar__title {
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.topbar__season { color: var(--gold); }

.topbar__spacer { flex: 1; }

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}
.live-dot::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  animation: pulse 1.4s ease-in-out infinite;
}
.live-dot[data-live="false"] { color: var(--chalk-faint); }
.live-dot[data-live="false"]::before { background: var(--chalk-faint); box-shadow: none; animation: none; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--chalk-line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  white-space: nowrap;
}
.status-chip[data-tone="dry"]      { color: var(--gold); border-color: var(--gold-deep); background: rgba(233,179,65,0.08); }
.status-chip[data-tone="real"]     { color: var(--turf-void); border-color: var(--signal); background: var(--signal); font-weight: 800; }
.status-chip[data-tone="locked"]   { color: var(--go); border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.08); }

.viewers {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--chalk-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Stage -------------------------------------------------------------- */

.stage {
  grid-area: stage;
  position: relative;
  /* `safe center` is the point here: centre the panel when it fits, but fall
     back to top-aligned the moment it does not. Plain centring pushes an
     overflowing panel's top edge above the scroll origin, where it can never
     be reached, which is exactly what happens to the final board on a phone. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  padding: var(--gutter);
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--chalk-line) transparent;
}

/* Goal-post uprights framing the theater */
.stage__uprights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
}

.stage__panel {
  position: relative;
  width: 100%;
  max-width: 60rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1.5rem;
}

/* Only one scene is visible at a time */
.scene { display: none; width: 100%; }
.scene.is-active { display: grid; place-items: center; gap: 1.25rem; }

.eyebrow {
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  text-indent: 0.42em;
}

.scene__headline {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--chalk);
}

.scene__sub {
  max-width: 46ch;
  color: var(--chalk-dim);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  margin: 0;
  text-wrap: pretty;
}

/* --- Countdown ---------------------------------------------------------- */

.countdown-number {
  font-family: var(--display);
  font-size: clamp(9rem, 34vw, 26rem);
  line-height: 0.8;
  color: var(--chalk);
  text-shadow: 0 0 90px rgba(233, 179, 65, 0.55);
  font-variant-numeric: tabular-nums;
}
.countdown-number.is-hit { animation: slam-in 620ms var(--ease-slam) both; }

@keyframes slam-in {
  0%   { transform: scale(3.4) rotate(-7deg); opacity: 0; filter: blur(22px); }
  55%  { transform: scale(0.88) rotate(1.5deg); opacity: 1; filter: blur(0); }
  75%  { transform: scale(1.06) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* --- The tumbler (scramble) --------------------------------------------- */

.tumbler {
  position: relative;
  width: min(100%, 46rem);
  height: clamp(6rem, 15vw, 11rem);
  overflow: hidden;
  border-top: 2px solid var(--chalk-line);
  border-bottom: 2px solid var(--chalk-line);
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}

.tumbler__name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--chalk-soft);
  white-space: nowrap;
}

.tumbler.is-spinning .tumbler__name { animation: tumble 90ms linear infinite; }
@keyframes tumble {
  0%   { transform: translateY(105%); opacity: 0; filter: blur(3px); }
  35%  { opacity: 1; filter: blur(1px); }
  100% { transform: translateY(-105%); opacity: 0; filter: blur(3px); }
}

.on-the-clock {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--down-orange);
  text-indent: 0.28em;
}

/* --- The draft card (the reveal centerpiece) ---------------------------- */

.draft-card {
  position: relative;
  /* Sizes to the name. A short name gets a tight card instead of a wide one
     with dead space beside it. */
  width: fit-content;
  min-width: min(100%, 26rem);
  max-width: min(100%, 46rem);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  background:
    linear-gradient(160deg, var(--card-stock) 0%, #EDE7D4 100%);
  color: var(--card-ink);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 2px var(--gold-deep),
    0 0 0 5px var(--card-stock),
    0 34px 70px rgba(0, 0, 0, 0.7),
    0 0 140px rgba(233, 179, 65, 0.28);
  text-align: left;
}
.draft-card::after {
  /* stitched inner rule, like the crest */
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(20, 37, 26, 0.28);
  border-radius: 2px;
  pointer-events: none;
}

.draft-card.is-landing { animation: card-slam 780ms var(--ease-slam) both; }
@keyframes card-slam {
  0%   { transform: perspective(1400px) rotateX(72deg) translateY(-120px) scale(1.5); opacity: 0; }
  60%  { transform: perspective(1400px) rotateX(-6deg) translateY(0) scale(1); opacity: 1; }
  78%  { transform: perspective(1400px) rotateX(3deg) scale(1.02); }
  100% { transform: perspective(1400px) rotateX(0) scale(1); opacity: 1; }
}

.draft-card__pick {
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 9.5rem);
  line-height: 0.78;
  color: var(--card-ink);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.draft-card__pick sup {
  display: block;
  font-size: 0.19em;
  letter-spacing: 0.3em;
  color: var(--pigskin);
  margin-bottom: 0.4em;
  text-indent: 0.3em;
}

.draft-card__body { min-width: 0; }

.draft-card__label {
  font-family: var(--display);
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pigskin);
  text-indent: 0.34em;
  margin-bottom: 0.35rem;
}

.draft-card__name {
  font-family: var(--display);
  font-size: clamp(2.2rem, 7.5vw, 5.4rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--card-ink);
  overflow-wrap: anywhere;
  margin: 0;
}

/* The finale gets the full gold treatment */
.draft-card.is-finale {
  background: linear-gradient(155deg, #FFF9E6 0%, #F3E2B0 55%, #E9CE85 100%);
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 7px var(--card-stock),
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 0 240px rgba(255, 217, 128, 0.6);
}
.draft-card.is-finale .draft-card__pick,
.draft-card.is-finale .draft-card__name { color: #2A1D05; }

.finale-banner {
  font-family: var(--display);
  font-size: clamp(1rem, 2.6vw, 2rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-indent: 0.3em;
  text-shadow: 0 0 40px rgba(255, 217, 128, 0.8);
}

/* --- Big board rail ----------------------------------------------------- */

.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--chalk-line);
  background: linear-gradient(180deg, rgba(10, 26, 14, 0.9), rgba(5, 13, 8, 0.96));
  backdrop-filter: blur(4px);
}

.rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--chalk-line);
}

.rail__title {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
}

.rail__count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--chalk-line) transparent;
}

.board-slot {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem var(--gutter);
  border-bottom: 1px solid rgba(36, 69, 44, 0.5);
}

.board-slot__pick {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  text-align: right;
  color: var(--chalk-faint);
  font-variant-numeric: tabular-nums;
}

.board-slot__name {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--chalk-faint);
  overflow-wrap: anywhere;
}

.board-slot[data-state="pending"] .board-slot__name {
  color: transparent;
  background: repeating-linear-gradient(
    -45deg,
    rgba(147, 168, 145, 0.14) 0px, rgba(147, 168, 145, 0.14) 5px,
    transparent 5px, transparent 10px
  );
  border-radius: 2px;
  min-height: 1.1em;
}

.board-slot[data-state="clock"] {
  background: rgba(255, 122, 24, 0.11);
  border-left: 3px solid var(--down-orange);
}
.board-slot[data-state="clock"] .board-slot__pick { color: var(--down-orange); }
.board-slot[data-state="clock"] .board-slot__name {
  color: var(--down-orange);
  background: none;
}

.board-slot[data-state="filled"] { animation: slot-land 620ms var(--ease-out) both; }
.board-slot[data-state="filled"] .board-slot__pick { color: var(--gold); }
.board-slot[data-state="filled"] .board-slot__name { color: var(--chalk); background: none; }

.board-slot[data-first="true"] {
  background: linear-gradient(90deg, rgba(233, 179, 65, 0.2), transparent);
  border-left: 3px solid var(--gold);
}
.board-slot[data-first="true"] .board-slot__name { color: var(--gold-bright); }

@keyframes slot-land {
  0%   { transform: translateX(46px); opacity: 0; background-color: rgba(233, 179, 65, 0.4); }
  100% { transform: translateX(0); opacity: 1; background-color: transparent; }
}

/* --- Lower third -------------------------------------------------------- */

.lower-third {
  grid-area: lower;
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 0.55rem var(--gutter);
  border-top: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(10, 26, 14, 0.97), rgba(5, 13, 8, 1));
  min-height: 3rem;
}

.ticker {
  /* flex-basis 0 + min-width 0 keeps the nowrap track from contributing
     any intrinsic width to its ancestors. */
  flex: 1 1 0;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.ticker__track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-run 42s linear infinite;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.ticker__track span { color: var(--gold); margin: 0 0.6rem; }

@keyframes ticker-run { to { transform: translateX(-100%); } }

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 1px solid var(--chalk-line);
  border-radius: 999px;
  color: var(--chalk-dim);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background-color 160ms;
  white-space: nowrap;
}
.sound-toggle:hover { color: var(--gold); border-color: var(--gold-deep); }
.sound-toggle[data-on="true"] { color: var(--gold); border-color: var(--gold-deep); background: rgba(233,179,65,0.1); }

/* ==========================================================================
   Reduced motion, keep the drama, drop the vestibular load
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .field__mow, .field__flood, .ticker__track { animation: none !important; }
  .tumbler.is-spinning .tumbler__name { animation: none !important; }
}

/* ==========================================================================
   Responsive, a phone on the couch is a first-class seat
   ========================================================================== */

@media (max-width: 900px) {
  .broadcast {
    grid-template-columns: minmax(0, 1fr);
    /* The stage takes the remainder and the board is capped, so the four rows
       always add up to exactly one viewport instead of overflowing it. */
    grid-template-rows: auto minmax(0, 1fr) minmax(7rem, 30vh) auto;
    grid-template-areas:
      "topbar"
      "stage"
      "rail"
      "lower";
  }
  .stage, .rail { min-height: 0; }
  .rail { border-left: none; border-top: 1px solid var(--chalk-line); }
  .draft-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: center;
    justify-items: center;
  }
  .draft-card__pick { font-size: clamp(3rem, 17vw, 5rem); }
  .draft-card__pick sup { text-align: center; }
  .topbar__crest svg { height: 34px; }
  .viewers { display: none; }
}

@media (max-width: 620px) {
  .topbar { gap: 0.6rem; padding-inline: 0.75rem; }
  .topbar__title {
    font-size: 0.82rem;
    white-space: normal;
    line-height: 1.05;
    min-width: 0;
  }
  .topbar__season { display: none; }
  .topbar__crest svg { height: 28px; }
  .status-chip { font-size: 0.58rem; padding: 0.22rem 0.5rem; letter-spacing: 0.06em; }
  .live-dot { font-size: 0.72rem; letter-spacing: 0.1em; }
  .lower-third { gap: 0.6rem; padding-inline: 0.75rem; }
  .sound-toggle { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
}

/* ==========================================================================
   Phone tuning.

   A phone is a first-class seat here: most of the family will watch on one.
   The broadcast frame is fixed-height by design, so on a small screen the
   scarce resource is vertical space and these rules buy it back.
   ========================================================================== */

@media (max-width: 900px) {
  /* Before the draw the board is a column of blank rows: no information, and
     on a phone it was covering the roster and the links underneath it. It
     comes back the moment the countdown starts and it has something to show. */
  body[data-phase="lobby"] .broadcast,
  body[data-phase="armed"] .broadcast,
  .broadcast:has(.rail__list:empty) {
    grid-template-rows: auto minmax(0, 1fr) 0 auto;
  }
  body[data-phase="lobby"] .rail,
  body[data-phase="armed"] .rail,
  .broadcast:has(.rail__list:empty) .rail { display: none; }

  /* Give the board a floor when it does appear, so two picks are visible. */
  .rail__list { padding-bottom: 0.75rem; }
  .board-slot { padding-block: 0.42rem; }
}

@media (max-width: 620px) {
  /* The ticker is decoration; the controls are not. On a narrow screen the
     controls win the row. */
  .lower-third .ticker { display: none; }
  .lower-third {
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
  }
  .sound-toggle { flex: 0 1 auto; font-size: 0.7rem; letter-spacing: 0.08em; }

  /* Five stacked 1.5rem gaps cost more vertical space on a phone than any
     single element. Tightening the rhythm is less destructive than cutting
     content. */
  .scene.is-active { gap: 0.8rem; }
  .stage__panel { gap: 0.8rem; }
  .stage { padding-block: 0.75rem; }

  .scene__headline { font-size: clamp(2rem, 11vw, 3rem); }
  .scene__sub { font-size: 0.92rem; }
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-indent: 0.3em; }

  .tumbler { height: clamp(4.5rem, 17vw, 7rem); }
  .tumbler__name { font-size: clamp(2rem, 13vw, 4rem); }

  .draft-card { padding: 1rem 1.15rem; min-width: 0; }
  .draft-card__pick { font-size: clamp(2.6rem, 15vw, 4rem); }
  .draft-card__name { font-size: clamp(1.7rem, 10vw, 3rem); }

  .countdown-number { font-size: clamp(7rem, 46vw, 14rem); }

  /* Touch targets: 44px is the floor for a thumb. */
  .btn { min-height: 44px; }
  .sound-toggle { min-height: 38px; }
}

/* Very small phones (SE, older Androids) */
@media (max-width: 400px) {
  .topbar { padding-inline: 0.6rem; gap: 0.45rem; }
  .topbar__title { font-size: 0.74rem; }
  .status-chip { font-size: 0.52rem; padding: 0.2rem 0.42rem; }
  .rail__head { padding-inline: 0.75rem; }
  .board-slot { padding-inline: 0.75rem; grid-template-columns: 2.4rem 1fr; }
}

/* Landscape phone: the broadcast frame is taller than the screen, so shrink
   the chrome rather than letting the stage collapse to nothing. */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { padding-block: 0.35rem; }
  .topbar__crest svg { height: 24px; }
  .lower-third { min-height: 2.2rem; padding-block: 0.3rem; }
  .crest-hero { display: none; }
  .scene__headline { font-size: clamp(1.6rem, 6vw, 2.6rem); }
  .scene__sub { display: none; }
}

/* ==========================================================================
   Team names on the reveal.

   The team name is the part people actually chose, so it gets real billing on
   the card rather than being tucked under the person's name as a footnote.
   ========================================================================== */

.draft-card__team {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(139, 74, 43, 0.35);
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pigskin);
  overflow-wrap: anywhere;
}
.draft-card__team[hidden] { display: none; }

/* The finale card is gold, so the leather brown loses contrast on it. */
.draft-card.is-finale .draft-card__team {
  color: #6B4A12;
  border-top-color: rgba(107, 74, 18, 0.4);
}

@media (max-width: 900px) {
  .draft-card__team { text-align: center; }
}