/* Stats, seasons and the night recap (0.11.0). Built only from the look tokens (var(--fg), var(--accent) ...),
   so it reads right in Game Table, Clean light, Clean dark and Full Magic without per-look rules.
   Three things live here (all drawn by js/stats.js):
     .st-numbers   "The numbers" on a player card
     .st-season    the Season card on the Nights tab
     .st-recap     the recap inside an opened night
   Rules this file keeps to: no text under 13px, taps 44px or taller, nothing wider than the phone. Inside
   a .card the tokens already point at the card's own values (app.css), so a parchment card, an oak-table
   card and a dark band all get readable text from the same var(--fg) / var(--muted) / var(--accent-text). */

.st-card { gap: 12px; }
.st-card .eyebrow { font-size: max(13px, var(--eyebrow-size)); }
.st-empty { margin: 0; font-size: 15px; }
.st-go { align-self: flex-start; }
.st-sub {
  font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.st-line { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.st-line b { font-weight: 700; }

/* ---------- the numbers: tiles of three ---------- */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; padding: 10px 6px; text-align: center; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.st-tile b {
  font-family: var(--f-display); font-size: 26px; font-weight: var(--display-weight); line-height: 1.05;
  letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; color: var(--fg);
}
.st-tile span { font-size: 13px; line-height: 1.2; color: var(--muted); }

/* ---------- the season table ---------- */
.st-table { display: flex; flex-direction: column; }
.st-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--rule); }
.st-row:first-child { border-top: 0; }
.st-pos {
  flex: 0 0 30px; text-align: right; font-family: var(--f-code); font-size: 14px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.st-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.st-who b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.st-who span { font-size: 13px; line-height: 1.3; color: var(--muted); }
/* A shared place is labelled on the row itself: a tie is never left for the reader to work out. */
.st-tie {
  display: inline-block; margin-left: 8px; padding: 0 8px; font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.5;
  color: var(--accent-text); border: 1px solid currentColor; border-radius: 999px; vertical-align: 1px;
}
.st-wins {
  flex: 0 0 auto; min-width: 28px; text-align: right; font-family: var(--f-display); font-size: 24px;
  font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums;
}
.st-row.lead .st-pos, .st-row.lead .st-wins { color: var(--accent-text); }

/* ---------- seasons that are over ---------- */
.st-past { gap: 0; }
.st-past .st-sub { padding-bottom: 6px; }
.st-past-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule);
}
.st-past-row .st-who { flex: 1 1 0; }
.st-champ { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; max-width: 55%; gap: 1px; }
.st-champ b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; color: var(--accent-text); }
.st-champ span { font-size: 13px; line-height: 1.3; color: var(--muted); }

/* ---------- the recap inside an opened night ---------- */
.st-recap {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0;
  border: 1px solid var(--accent-line, var(--rule)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.st-headline { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.18; overflow-wrap: anywhere; text-wrap: balance; }
.st-awards { display: flex; flex-direction: column; }
.st-award { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.st-award:first-child { border-top: 0; }
.st-award-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.st-award-who i { font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--accent-text); }
.st-award-who b { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.st-award-val { flex: 0 0 auto; max-width: 55%; text-align: right; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted-2); text-wrap: balance; }

/* ---------- a small fix beside the recap ----------
   The per-player lines under an opened night (and "Everyone's numbers" under Leaders) put a name and its
   numbers in a .li-text inside a .pn-rank, and .li-text only stacks inside a .list-item, so they ran
   together ("Dan1 won"). Stack them the way every other list in the app does. */
.pn-rank .li-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pn-rank .li-text span { font-size: 13px; line-height: 1.3; color: var(--muted); }