/* =============================================================================
   VERSUS — the screens' styles. Loaded after app.css, so these come after both
   of its 700px blocks: a Versus rule for phones goes in a media query HERE, and
   the early/late trap in CLAUDE.md does not apply to .vs-* at all.

   The panels are Unlimited's (.unl-panel, .unl-hook, .unl-rule, .unl-err,
   .unl-pick-go), so the chooser Versus borrows and the screens around it read as
   one piece. Palette tokens only; Anton for numbers and buttons, Inter for
   labels, Newsreader for prose -- as everywhere else.
   ========================================================================== */

/* The menu row: Coming Soon while shut (is-soon) or in preview (is-preview --
   it looks shut but works; VERSUS_PREVIEW). Styled as the menu's own is-soon. */
#menu-versus.is-preview,
#menu-versus.is-preview:hover { color: rgba(var(--paper-rgb), 0.38); background: none; }
#menu-versus:not(.is-soon):not(.is-preview) .menu-soon { display: none; }

.vs-sub {
  margin-top: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- How many players: 2 to 8, one tap ---- */
.vs-count {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.vs-count button,
.vs-seg button {
  min-height: 56px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: 'Anton', sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vs-count button:hover:not(.active),
.vs-seg button:hover:not(.active) { border-color: var(--ink); }
.vs-count button.active,
.vs-seg button.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* The chosen draft type in the draft order's red -- the numbered circles'
   (by request, 26 September); the player count keeps ink. */
.vs-seg button.active { background: var(--rust); border-color: var(--rust); }

/* ---- Names: two across at every width, one field per player ---- */
.vs-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  text-align: left;
}
/* Baseline, not centre: the number is Anton and the name Newsreader, and centred
   the two sat at different heights -- "Player 1" rode above its "1". On the
   baseline the bottom of the P meets the bottom of the 1. */
.vs-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0 12px;
}
.vs-name:focus-within { border-color: var(--ink); }
.vs-name span {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: var(--muted);
  min-width: 1ch;
}
/* 16px or more, or iOS zooms the page into the field. */
.vs-name input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.vs-name input::placeholder { color: var(--muted); font-weight: 400; }

/* ---- Snake or linear ---- */
.vs-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vs-seg button {
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The hints sit in the buttons' own two columns, each under its button, and
   only the chosen one shows (the other is [hidden]); pinned to their columns
   so hiding the snake one does not slide the linear one left. */
.vs-hints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vs-hint {
  margin-top: 10px;
  /* Room either side, so the text sits well inside its button's width. */
  padding: 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.vs-hint[data-type="snake"] { grid-column: 1; }
.vs-hint[data-type="linear"] { grid-column: 2; }
/* The two checkboxes as one block, centred, with the boxes lined up. */
.vs-toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  margin: 18px auto 0;
}
.vs-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.vs-toggle input { width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }

/* The panel's one action, full width at the foot. */
.vs-go { width: 100%; margin-top: 26px; }

/* ---- The draft order ---- */
.vs-week {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Each drafter a soft card, the number in a filled rust circle, the grip in
   pale grey at the right (to the user's mockup, 26 September). */
.vs-order {
  list-style: none;
  counter-reset: vs-order;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px auto 0;
  max-width: 420px;
  text-align: left;
}
.vs-order li {
  counter-increment: vs-order;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  padding: 0 6px 0 12px;
  /* A light wash of ink over the paper -- softer than --cream, as the mockup. */
  background: rgba(var(--ink-rgb), 0.05);
  border-radius: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}
.vs-order-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The grip: the only thing that starts a drag, so the list still scrolls the
   page everywhere else. touch-action none, or the phone scrolls instead. */
.vs-order-grip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: rgba(var(--ink-rgb), 0.28);
  cursor: grab;
  touch-action: none;
}
.vs-order-grip svg { fill: currentColor; }
.vs-order-grip:hover, .vs-order-grip:focus-visible { color: var(--ink); outline: none; }
/* The row being dragged lifts above the others as it follows the finger. */
.vs-order li.is-dragging {
  position: relative;
  z-index: 2;
  /* Opaque while it passes over the others. */
  background: var(--cream);
  box-shadow: 0 6px 18px rgba(var(--ink-rgb), 0.18);
}
.vs-order li.is-dragging .vs-order-grip { cursor: grabbing; color: var(--ink); }
.vs-order li::before {
  content: counter(vs-order);
  flex: 0 0 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rust);
  color: var(--paper);
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.vs-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  margin-top: 26px;
}
.vs-actions .vs-go { margin-top: 0; }
/* The draft order's two buttons, by request (26 September): each the width
   Reshuffle had -- a third of the panel -- side by side and centred. Choose the
   Week alone, when the order is typed rather than shuffled, keeps that width. */
#versus-order .vs-actions { display: flex; justify-content: center; gap: 10px; }
#versus-order .vs-actions > button { flex: 0 0 calc((100% - 20px) / 3); width: auto; }
.vs-reshuffle {
  min-height: 56px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.vs-reshuffle:disabled { opacity: 0.4; cursor: default; }

/* A text button: Discard, Undo, Draft Board. */
.vs-link {
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- A draft saved on this phone ---- */
.vs-resume {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 12px 12px 16px;
  background: rgba(var(--gold-rgb), 0.25);
  border: 2px solid var(--gold);
  border-radius: 14px;
  text-align: left;
}
/* The state, and under it the year and week in the same type, muted -- both
   at the Results button's size and spacing (by request, 27 September). */
.vs-resume-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.15em;
  text-transform: uppercase; white-space: nowrap;
}
.vs-resume-title, .vs-resume-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The week three quarters of the state's size (by request, 27 September): 13.5px, 11.25 on phones. */
.vs-resume-detail { color: var(--muted); font-size: 0.75em; }
.vs-resume-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.vs-resume-actions .unl-pick-go { flex: 0 0 auto; padding: 0 18px; }

/* ---- The Draft Board: a card per team, in draft order ---- */
.vs-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  text-align: left;
}
.vs-team { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.vs-team.is-up { border-color: var(--rust); }
.vs-team-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}
.vs-team.is-up .vs-team-head { background: var(--rust); }
.vs-team-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-team-up {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vs-team-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-top: 1px solid var(--rule);
}
.vs-team-pos { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 0.06em; }
.vs-team-player {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-team-nfl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.vs-team-row.is-open .vs-team-player { color: var(--muted); font-weight: 400; }

/* ---- The standings: a row per team, tap to see its seven ---- */
.vs-res-winner { margin-top: 2px; }
.vs-standings {
  list-style: none;
  margin: 20px auto 0;
  max-width: 560px;
  text-align: left;
}
.vs-standing { border-bottom: 1px solid var(--rule); }
.vs-standing-head {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto 1em;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 0 12px;
  background: none;
  border: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.vs-standing.is-winner .vs-standing-head { background: var(--gold); border-radius: 12px; }
.vs-standing-rank { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--rust); }
.vs-standing.is-winner .vs-standing-rank { color: var(--ink); }
.vs-standing-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The total is the leaderboard's score (.lb-score), its font and sizes, since
   27 September; it was Inter for its tabular figures, which the split whole and
   fraction now stand in for. */
.vs-standing-total { white-space: nowrap; }
/* Up against the chevron (by request, 27 September): the fraction box the
   leaderboard sizes for ".4%" (1.9em) held to one digit and its point, so no
   gap is left before the arrow; the point still starts each box, so the column
   still lines up on it. */
.vs-standing-total b { min-width: 0.75em; }
.vs-standing-chev { font-size: 22px; color: var(--muted); transition: transform 0.15s; }
.vs-standing.is-open .vs-standing-chev { transform: rotate(90deg); }
.vs-standing-picks { padding: 4px 12px 12px; }
.vs-pick {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) auto 4.5em;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.vs-pick-pos { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 0.06em; }
.vs-pick-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-pick-team { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.vs-pick-pts {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* The best single player on the team -- the tiebreaker. */
.vs-pick.is-best .vs-pick-pts { color: var(--rust); }
/* At the foot of the standings panel, the panel's own padding below them. */
.vs-res-actions { margin-top: 14px; }

/* ---- Desktop: the panels widen to Unlimited's 800, as its chooser does ---- */
@media (min-width: 881px) {
  #versus .unl-panel, #versus-order .unl-panel,
  #versus-board .unl-panel, #versus-results .unl-panel { max-width: 800px; }
  .vs-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Phones: Unlimited's phone panel and headline sizes, and tighter doors.
   Seven count buttons fit a 320px phone at 34px each. ---- */
@media (max-width: 700px) {
  #versus .unl-panel, #versus-order .unl-panel,
  #versus-board .unl-panel, #versus-results .unl-panel { padding: 18px 14px 18px; border-radius: 16px; }
  #versus .unl-hook, #versus-order .unl-hook, #versus-board .unl-hook,
  #versus-results .unl-hook { font-size: 27.6px; }
  .vs-standing-head { gap: 8px; padding: 0 8px; min-height: 54px; }
  .vs-standing-name { font-size: 18px; }
  .vs-standing-picks { padding: 2px 8px 10px; }
  .vs-pick { grid-template-columns: 2.6em minmax(0, 1fr) auto 3.9em; gap: 6px; }
  .vs-pick-name { font-size: 15px; }
  .vs-pick-pts { font-size: 14px; }
  #versus .unl-rule, #versus-order .unl-rule { margin: 24px 0 14px; font-size: 16.5px; letter-spacing: 0.04em; }
  .vs-resume { padding: 10px 10px 10px 12px; gap: 8px; }
  /* Tighter on a phone, so a long playoff week fits its line (fitResumeLine
     steps the size down if it still does not). */
  .vs-resume-text { font-size: 15px; letter-spacing: 0.04em; }
  .vs-resume-actions .unl-pick-go { padding: 0 12px; font-size: 15px; }
  .vs-link { font-size: 12px; padding: 0 6px; }
  /* One team a row on a phone: two across leaves a name 70px. */
  .vs-teams { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vs-sub { font-size: 15.5px; }
  .vs-count { gap: 5px; }
  .vs-count button { font-size: 21px; border-radius: 10px; }
  .vs-names { gap: 8px; }
  .vs-name { padding: 0 10px; gap: 6px; }
  .vs-name input { font-size: 19px; }
  .vs-toggle { font-size: 13px; text-align: left; }
  .vs-hint { padding: 0 10px; }
  .vs-week { font-size: 24px; }
  /* Reshuffle takes a third of the row: 94px at 320, where 18px Anton at the
     desktop spacing overran it. */
  .vs-reshuffle { font-size: 15px; letter-spacing: 0.06em; padding: 0 6px; }
  /* A third of a phone's panel is ~100px, which cannot hold CHOOSE THE WEEK on
     one line, so on a phone the two are a half each -- still the same size as
     each other, still centred -- at Reshuffle's phone type. */
  #versus-order .vs-actions > button { flex-basis: calc((100% - 10px) / 2); }
  #versus-order .vs-actions .unl-pick-go { font-size: 15px; letter-spacing: 0.06em; padding: 0 6px; }
  .vs-order li { font-size: 18px; }
}

/* ---- Five to eight players: the order in two columns ----
   Down the first column and then the second (grid-auto-flow: column, with the
   row count set by renderVersusOrder), so the numbers read 1-4 left and 5-8
   right. Half the height of one column, which is what lets eight fit a phone. */
.vs-order.is-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 6px 8px;
  max-width: 600px;
}
.vs-order.is-two-col li { gap: 10px; padding: 0 2px 0 8px; font-size: 18px; }
.vs-order.is-two-col li::before { flex-basis: 30px; height: 30px; font-size: 16px; }
.vs-order.is-two-col .vs-order-grip { width: 36px; }
/* A phone's column is ~150px: the name gets the room the circle, the gap and
   the grip can spare, so "Christopher" and "Bartholomew" fit whole. */
@media (max-width: 700px) {
  .vs-order.is-two-col { gap: 6px; }
  .vs-order.is-two-col li { gap: 7px; padding: 0 0 0 6px; font-size: 16px; }
  .vs-order.is-two-col li::before { flex-basis: 24px; height: 24px; font-size: 13px; }
  .vs-order.is-two-col .vs-order-grip { width: 28px; }
}

/* ---- Fitting one screen (fitVersusScreen) ----
   The draft order's first step is only this: the Snake / Linear hints go
   before anything is made smaller (by request, 26 September). */
#versus-order.vs-fit-hints .vs-hints { display: none; }

   Three steps, applied one after another only while the Back button is still
   below the fold. Last in the file and scoped by id, so they win over every
   rule above, including the site-wide 56px button height. */
#versus.vs-fit-1 .unl-rule, #versus-order.vs-fit-1 .unl-rule { margin: 12px 0 8px; font-size: 14px; }
#versus.vs-fit-1 .vs-count button { min-height: 46px; }
#versus.vs-fit-1 .vs-name input { height: 42px; }
#versus.vs-fit-1 .vs-names { margin-top: 10px; gap: 8px; }
#versus.vs-fit-1 .vs-go { margin-top: 14px; }
#versus-order.vs-fit-1 .vs-seg button { min-height: 46px; }
#versus-order.vs-fit-1 .vs-order { margin-top: 8px; }
#versus-order.vs-fit-1 .vs-order li { min-height: 46px; }
#versus-order.vs-fit-1 .vs-toggles { margin-top: 10px; }
#versus-order.vs-fit-1 .vs-actions { margin-top: 14px; }
#versus.vs-fit-1 > .play-again, #versus-order.vs-fit-1 > .play-again { margin-top: 16px; }

#versus.vs-fit-2 .unl-hook, #versus-order.vs-fit-2 .unl-hook { font-size: 24px; }
#versus.vs-fit-2 .vs-sub { margin-top: 4px; font-size: 14px; }
#versus.vs-fit-2 .vs-count button { min-height: 40px; font-size: 19px; }
#versus.vs-fit-2 .vs-name input { height: 36px; }
#versus.vs-fit-2 .vs-go,
#versus-order.vs-fit-2 .vs-actions > button,
#versus.vs-fit-2 > .play-again, #versus-order.vs-fit-2 > .play-again { min-height: 46px; }
#versus-order.vs-fit-2 .vs-seg button { min-height: 40px; }
#versus-order.vs-fit-2 .vs-hint { margin-top: 6px; font-size: 12px; line-height: 1.35; padding: 0 4px; }
#versus-order.vs-fit-2 .vs-order li { min-height: 40px; }
#versus-order.vs-fit-2 .vs-order:not(.is-two-col) li::before { flex-basis: 26px; height: 26px; font-size: 14px; }
#versus-order.vs-fit-2 .vs-order-grip { height: 36px; }
#versus.vs-fit-2 .unl-panel, #versus-order.vs-fit-2 .unl-panel { padding-top: 12px; padding-bottom: 12px; }

#versus.vs-fit-3 .unl-rule, #versus-order.vs-fit-3 .unl-rule { display: none; }
#versus.vs-fit-3 .vs-count { margin-top: 10px; }
#versus-order.vs-fit-3 .vs-seg { margin-top: 8px; }
#versus.vs-fit-3 > .play-again, #versus-order.vs-fit-3 > .play-again { margin-top: 10px; }

/* ---- Draft Order, tablet and desktop: the cards fill the panel's width ---- */
@media (min-width: 701px) {
  #versus-order .vs-order, #versus-order .vs-order.is-two-col { max-width: none; }
}

/* ---- Draft Order, phones: spacing by request (26 September) ----
   More room under DRAFT before Snake / Linear, and under ORDER before the
   cards; Reshuffle / Choose the Week lowered, and Back lowered by less, so the
   buttons sit closer to Back. After the fit steps and at their specificity, so
   each step keeps these proportions. */
@media (max-width: 700px) {
  /* The gap under DRAFT and ORDER is the heading's own bottom margin: set on
     the element below it, it merged with that margin and changed nothing. */
  #versus-order .unl-rule { margin-bottom: 20px; }
  #versus-order .vs-seg { margin-top: 0; }
  #versus-order .vs-order { margin-top: 0; }
  #versus-order .vs-actions { margin-top: 40px; }
  #versus-order > .play-again { margin-top: 4px; }
  #versus-order.vs-fit-1 .unl-rule { margin-bottom: 16px; }
  #versus-order.vs-fit-1 .vs-actions { margin-top: 34px; }
  #versus-order.vs-fit-1 > .play-again { margin-top: 0; }
  #versus-order.vs-fit-2 .vs-actions { margin-top: 24px; }
  #versus-order.vs-fit-3 .vs-seg { margin-top: 6px; }
  #versus-order.vs-fit-3 .vs-order { margin-top: 12px; }
  #versus-order.vs-fit-3 .vs-actions { margin-top: 20px; }
  #versus-order.vs-fit-3 > .play-again { margin-top: 0; }
}

/* =============================================================================
   The Versus reveal (27 September): the week pinned on top (the daily reveal's
   .reveal-head, double line and all), the highlights one at a time in the
   nostalgia reveal's type with their drafter in a column of their own, then
   the standings built a team at a time. Each team's players, and the winner's
   popup, are drawn as the daily results page draws a lineup (.res-bar).
   ============================================================================= */
.vs-reveal { max-width: 800px; margin: 0 auto; }
.vs-res-status {
  text-align: center; font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 18px; color: var(--muted); margin: 10px 0 20px;
}
.vs-res-block { margin-bottom: 36px; scroll-margin-top: 190px; }
/* The standings in the daily results' bordered panel (.scoreboard: paper, a 2px
   ink border, 20px corners, 14px inside; 16 and 10 on phones). */
.vs-standings-panel {
  padding: 14px; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 20px;
}
/* The heading in the leaderboard's date type (.lb-date: Anton 26px, 22 on
   phones; by request, 27 September). */
.vs-standings-head {
  margin: 4px 0 12px; text-align: center;
  font-family: 'Anton', sans-serif; font-size: 26px; font-weight: 400;
  letter-spacing: 0.04em; line-height: 1.05; text-transform: uppercase; color: var(--ink);
}

/* The highlights: the nostalgia reveal's size and serif (.prelude-item), the
   player's name marked as it marks its words -- bold, italic, rust. */
.vs-highlights { list-style: none; margin: 0; padding: 0; }
.vs-hl {
  /* A little room each side (by request, 27 September); 12px on phones. */
  padding: 12px 24px;
  /* A slow fade up, as the nostalgia reveal's lines arrive. */
  opacity: 0; animation: prelude-fadein 1.2s ease forwards;
  scroll-margin-top: 190px; scroll-margin-bottom: 24px;
}
.vs-hl-text {
  margin: 0; font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(30px, 3.27vw, 40px); line-height: 1.4; color: var(--ink);
}
.vs-hl-text em { font-style: italic; font-weight: 700; color: var(--rust); }

/* The standings, as the leaderboard page's rows (.lb-list, .lb-row), across the
   column: rank, name, the top-picks trophy and count in centred columns of
   their own, the score, the chevron. The winner's row takes the leaderboard's
   first-place gold. */
.vs-reveal .vs-standings { max-width: none; margin: 0; padding: 0; list-style: none; background: none; border-radius: 0; overflow: visible; }
/* Each team its own rounded row, apart from the next, as the daily results'
   bars are (.res-bar: 10px corners, 7px between; by request, 27 September). */
/* The row is the head, rounded on all four corners whether or not the team is
   open (by request, 27 September); an open team's players sit under it. */
.vs-standing { border-bottom: 0; }
.vs-standing + .vs-standing { margin-top: 7px; }
.vs-reveal .lb-row.vs-standing-head {
  /* Fixed tracks after the name, so the count and score columns line up down
     the list: each row is its own grid, and an 'auto' score track pushed its
     row's columns left of the others'. 72px holds 288.88 in 19px Anton split as
     the leaderboard's score, 96px holds "7 top picks". No trophy column since
     27 September. */
  grid-template-columns: 44px minmax(0, 1fr) 96px 72px 14px;
  width: 100%; min-height: 0; margin: 0; border: 0; border-radius: 10px; padding: 11px 16px; gap: 10px;
  background: var(--cream); color: var(--ink); text-align: left; cursor: pointer;
}
/* First place keeps the grey of every row, its race bar over it (by request,
   27 September; it wore the leaderboard's first-place gold before). */
.vs-reveal .vs-standing.is-winner .lb-rank { color: var(--ink); font-size: 13.2px; }
.vs-reveal .vs-standing.is-winner .lb-name { font-size: 15.4px; }
/* Left-justified, as the leaderboard's (by request, 27 September; right before). */
.vs-reveal .vs-standing-rank {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Left on desktop, where the words follow the number, so the numbers stack;
   centred on phones, where the number stands alone. */
.vs-standing-count {
  text-align: left; font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* The number in the words' own type -- Inter at their size, not bold (by request). */
.vs-tops-n { font: inherit; letter-spacing: inherit; color: inherit; }
.vs-reveal .vs-standing-total { min-width: 3.4em; text-align: right; }
.vs-standing-chev { font-size: 20px; color: var(--muted); text-align: center; transition: transform 0.15s; }
/* The race bar (27 September): behind the row's words and inside its rounded
   corners, growing left to right as the team's points are counted, its colour
   blended from red to yellow to green (vsSetRaceBar). Each step's change eases
   over --vs-step, set by the reveal from the count's pace. */
.vs-reveal .lb-row.vs-standing-head { position: relative; isolation: isolate; overflow: hidden; }
.vs-race-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: -1; pointer-events: none;
  transition: width var(--vs-step, 600ms) cubic-bezier(.45, .05, .55, .95), background-color var(--vs-step, 600ms) linear;
}
/* While the count runs a team cannot be opened: its players would tell the end. */
.vs-standings.is-racing .vs-standing-head { pointer-events: none; }
.vs-standings.is-racing .vs-standing-chev { opacity: 0.35; }
/* An open team's players under its row, on the panel's paper, edge to edge with
   the rows and 7px apart like them, with room below FLEX so the next team's
   row is not read as one of them. */
/* Indented the same on both sides, by as much as puts each player's decimal
   point under the team total's (by request, 27 September): with the total up
   against the chevron its point sits 52.1px in from the row's right edge and a
   bar's 24.8px in from its own, so 27px (at 19px / 18px Anton; 21 on phones,
   from 44.9 and 23.5; 23 below 375). Change the score columns, the fraction
   box or the type and re-measure. */
.vs-standing-picks { background: none; padding: 7px 27px 14px; }
/* An open team's player bars keep the daily's rounded corners (square for a
   while on 27 September, rounded again the same day, by request). */

/* The team's seven, as the daily results page's bars. */
.vs-team-list { margin: 0; }
.vs-winner-teams { margin: 6px 0 18px; }
.vs-winner-name {
  font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 12px 0 6px;
}
/* The winner's popup is wide enough for the bars and for the daily's two score
   cards side by side at their own size (about 370px each). */
.rfp-card.rfp-card:has(.vs-winner-teams) { max-width: 800px; }
/* Its title, words and button centred. */
.rfp-card:has(.vs-winner-teams) .rfp-title,
.rfp-card:has(.vs-winner-teams) .rfp-text { text-align: center; }
.rfp-card:has(.vs-winner-teams) .rfp-actions { justify-content: center; }
/* Its title at the results page's header size (.reveal-head h1): 48px, and 34
   on phones, where the popup is a sheet. */
.rfp-overlay .rfp-card:has(.vs-winner-teams) .rfp-title {
  font-size: 48px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}
.rfp-overlay .rfp-sheet:has(.vs-winner-teams) .rfp-title { font-size: 34px; }
/* The daily's score cards over the team; one card alone when the week's best
   is unknown (a game scored before 20260927000004). */
.vs-winner-cards { margin: 14px 0 16px; text-align: left; }
.vs-winner-cards.is-single { grid-template-columns: minmax(0, 1fr); }
/* The standings hold a screen's height while they fill, so the page can move
   them to the top (under the pinned week, about 190px on desktop, 150 on phones). */
.vs-res-block.is-filling { min-height: calc(100svh - 190px); }

@media (max-width: 700px) {
  .vs-res-block { scroll-margin-top: 150px; }
  .vs-standings-panel { padding: 10px; border-radius: 16px; }
  .vs-res-actions { margin-top: 10px; }
  .vs-standing-picks { padding: 7px 21px 14px; }
  .vs-standings-head { margin: 2px 0 10px; font-size: 22px; }
  .vs-res-block.is-filling { min-height: calc(100svh - 150px); }
  .vs-hl { padding: 10px 12px; scroll-margin-top: 150px; }
  /* The nostalgia reveal's phone size. */
  .vs-hl-text { font-size: 30px; }
  /* The leaderboard's phone row, the trophy and the count centred in columns
     of their own, the words gone. */
  /* 62px holds 288.88 in the phone's 17px Anton, split the same way. */
  .vs-reveal .lb-row.vs-standing-head { grid-template-columns: 38px minmax(0, 1fr) 22px 62px 12px; gap: 10px; padding: 10px 12px; }
  .vs-reveal .vs-standing-total { min-width: 0; }
  /* The leaderboard's phone sizes: the rank 11px, first place's rank and name
     12.1 / 14.3 (by request, 27 September: the standings as today's leaderboard). */
  .vs-reveal .vs-standing-rank { font-size: 11px; }
  .vs-reveal .vs-standing.is-winner .lb-rank { font-size: 12.1px; }
  .vs-reveal .vs-standing.is-winner .lb-name { font-size: 14.3px; }
  .vs-tops-label { display: none; }
  .vs-standing-count { text-align: center; }
}

/* Start a New Draft on one line beside Home: at 360, inside the standings
   panel, the words need ~174px of the 201 the button has. */
@media (max-width: 470px) {
  #vs-res-again { padding-left: 10px; padding-right: 10px; }
}

/* Below 375 a bar's decimal point sits 2px nearer its edge, so the indent
   takes it up. */
@media (max-width: 374px) {
  .vs-standing-picks { padding-left: 23px; padding-right: 23px; }
}