/* Stats tab, the Fantasy Box layout on the tracker's tokens (light + dark).
   Everything is scoped under body.sp so the Live page is untouched. */

:root {
  --neg-tint: #fdf5f5;                 /* opaque: it also paints the sticky header */
  --neg-line: rgba(229, 35, 27, 0.45);
}
:root.themed[data-theme="dark"] {
  --neg-tint: #221641;
  --neg-line: rgba(255, 82, 71, 0.5);
}

/* same 1060px frame as the Live tab, so the header and tabs never shift
   between pages; the wide box-score table scrolls inside its card */
.sp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp .muted { font-weight: 600; }
.sp .rp-bottom.is-done { background: var(--green); color: #fff; }

/* navy-on-pill segmented toggles (rounds, positions) */
.sp .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sp .seg::-webkit-scrollbar { display: none; }
.sp .seg-btn { flex: none; white-space: nowrap; }
.sp .seg-btn:hover:not(:disabled) { color: var(--ink); }
.sp .seg-btn[aria-pressed="true"], .sp .seg-btn[aria-current="true"] { background: var(--accent-bg); color: #fff; }
.sp .seg-btn:disabled { color: var(--text-faint); opacity: 0.7; cursor: default; }
.sp .rounds { justify-self: start; background: var(--surface); box-shadow: var(--shadow); }
.sp .rounds .seg-btn { padding: 0.45rem 1rem; font-size: 0.74rem; }
.sp .rounds .seg-btn span { margin-left: 0.4rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; opacity: 0.75; }

/* games strip: every card is a filter button */
.sp .games-strip { grid-auto-columns: minmax(150px, 1fr); padding: 0 1.1rem 1rem; }
.sp .game {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.sp .game:hover:not(:disabled) { border-color: var(--hover-border); }
.sp .game[aria-pressed="true"] { border-color: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-bg); }
.sp .game:disabled { cursor: default; }
.sp .game .all { grid-column: 1 / -1; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 2.55; }

/* leaders: four podium cards */
.sp .ld-track { grid-auto-columns: minmax(230px, 1fr); }
.sp .ld-row { grid-template-columns: 1.85rem minmax(0, 1fr) auto; cursor: default; }
.sp .ld-row:hover { background: none; }
.sp .ld-name > span { text-transform: uppercase; font-size: 0.98rem; }
.sp .ld-name small { font-weight: 600; }
.sp .ld-val { font-weight: 600; }
.sp .ld-empty { padding: 1rem 0.9rem; color: var(--gray); font-size: 0.82rem; }

/* rank discs: gold / silver / bronze for the podium */
.sp .rank { font-size: 1.05rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sp .medal {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border-radius: 50%;
  font-size: 0.92rem;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(30, 24, 82, 0.22);
}
.sp .medal-1 { background: linear-gradient(160deg, #ffd75e, #e6a817); color: #5b4300; }
.sp .medal-2 { background: linear-gradient(160deg, #eceef5, #b6bccd); color: #474c60; }
.sp .medal-3 { background: linear-gradient(160deg, #e8a56b, #b96a32); color: #4c2708; }

/* box score table */
.sp .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0 1.1rem 0.9rem; }
.sp .search { position: relative; flex: 1 1 220px; }
.sp .search svg { position: absolute; left: 0.75rem; top: 50%; width: 16px; height: 16px; color: var(--gray); transform: translateY(-50%); }
.sp .search input, .sp select {
  height: 2.3rem;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.86rem;
}
.sp .search input { width: 100%; padding: 0 0.9rem 0 2.2rem; }
.sp select { max-width: 100%; padding: 0 0.6rem; font-weight: 600; }

.sp .scroller { overflow: auto; max-height: calc(100vh - 24px); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.sp table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; --grp-h: 1.9rem; }
.sp th, .sp td { padding: 0.55rem 0.3rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sp td { font-size: 0.9rem; font-weight: 600; }
/* two sticky header rows: the group labels, then the column labels below them */
.sp thead th { position: sticky; top: 0; z-index: 2; padding: 0.35rem 0.3rem 0.5rem; background: var(--surface); }
.sp thead tr + tr th { top: var(--grp-h); }
.sp thead .grp { height: var(--grp-h); padding: 0.55rem 0.4rem 0; border-bottom: 0; text-align: center; }
.sp .grp span { display: block; padding-bottom: 0.2rem; border-bottom: 2px solid; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.sp .grp-pos { color: var(--green); }
.sp .grp-neg { color: var(--live); }
.sp .grp-score, .sp .grp-price { color: var(--gray); }
/* column groups: a rule where each group starts, the negative block tinted and ruled in red */
.sp .gs { border-left: 1px solid var(--rule-strong); }
.sp .g-neg { background: var(--neg-tint); }
.sp .gs.g-neg { border-left: 2px solid var(--neg-line); }
.sp thead th button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray);
  cursor: pointer;
  font: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sp thead th button::after { content: ""; border: 3.5px solid transparent; }
.sp thead th[aria-sort] button { color: var(--total-ink); font-weight: 800; }
.sp thead th[aria-sort="descending"] button::after { border-top-color: currentColor; margin-top: 4px; }
.sp thead th[aria-sort="ascending"] button::after { border-bottom-color: currentColor; margin-top: -4px; }
.sp .player { position: sticky; left: 0; z-index: 1; padding-left: 1.1rem; text-align: left; background: var(--surface); }
.sp thead th.player { z-index: 3; }
.sp th:last-child, .sp td:last-child { padding-right: 1rem; }
.sp tbody tr:hover td { background: var(--hover); }
.sp tbody tr:last-child td { border-bottom: 0; }
.sp td.on { color: var(--total-ink); font-weight: 800; }
.sp td.fp { color: var(--total-ink); font-size: 1.02rem; font-weight: 800; }
.sp .pcell { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); align-items: center; gap: 0.6rem; min-width: 172px; }
.sp .pn { font-size: 0.95rem; font-weight: 800; }
.sp .st { display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: var(--green); }
.sp .ps { color: var(--gray); font-size: 0.72rem; font-weight: 600; }
.sp .tag { margin-right: 0.3rem; padding: 0 0.35rem; border-radius: 5px; background: var(--chip); color: var(--ink); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; }
.sp .W, .sp .up { color: var(--green); font-weight: 800; }
.sp .L, .sp .down, .sp .neg { color: var(--live); font-weight: 800; }
.sp .lv { color: var(--live); font-weight: 800; }
.sp .flat, .sp .dnp { color: var(--text-faint); }
.sp .empty { padding: 3rem 1rem; text-align: center; color: var(--gray); }
.sp .foot-note { max-width: 60rem; }
.sp .foot-note .st { margin: 0 4px 0 0; }