/* ============================================================
   EVERFIELD — views.css  (v2: the pyramid)
   View-specific styling for js/ui/views.js. Uses ONLY tokens from
   style.css; the only raw color literals are transparent
   whites/blacks and rgba() forms of the existing token colors
   (volt 215,249,92 · gold 242,201,76 · danger 255,93,69 ·
   sky 110,207,246 — same triples style.css already uses).
   All classes prefixed .v-
   The phone breakpoint in style.css is max-width:700px; every
   surface here must stay usable at 393px.
   ============================================================ */

/* ---------- shared atoms ---------- */
.v-dim { color: var(--ink-3); }
.v-serif { font-family: var(--font-serif); font-style: italic; }
.v-empty {
  font-family: var(--font-serif); font-style: italic; color: var(--ink-3);
  padding: 30px 6px; font-size: 15px;
}
.v-ent { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.v-ent-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ent[data-nav]:hover .v-ent-name, tr[data-nav]:hover .v-ent-name { color: var(--volt); }
.v-plink[data-nav] { color: var(--ink); border-bottom: 1px dotted var(--ink-3); }
.v-plink[data-nav]:hover { color: var(--volt); border-bottom-color: var(--volt); }
.v-crest-hole { border: 1px dashed var(--line); border-radius: 4px; opacity: 0.5; }

.v-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; padding: 2px 6px; border-radius: 4px; margin-left: 7px;
  vertical-align: 2px; border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap;
}
.v-badge-volt { color: var(--volt); border-color: rgba(215, 249, 92, 0.4); background: rgba(215, 249, 92, 0.07); }
.v-badge-gold { color: var(--gold); border-color: rgba(242, 201, 76, 0.4); background: rgba(242, 201, 76, 0.07); }
.v-badge-red { color: var(--danger); border-color: rgba(255, 93, 69, 0.4); background: rgba(255, 93, 69, 0.06); }
.v-badge-sky { color: var(--sky); border-color: rgba(110, 207, 246, 0.4); background: rgba(110, 207, 246, 0.06); }
.v-badge-dim { color: var(--ink-3); }

.v-hon {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line);
  margin: 2px 4px 2px 0; white-space: nowrap;
}
.v-hon-gold { color: var(--gold); border-color: rgba(242, 201, 76, 0.35); }
.v-hon-volt { color: var(--volt); border-color: rgba(215, 249, 92, 0.35); }
.v-hon-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

/* the honours SUMMARY — big numbers first, so a club with 300 seasons of history
   still says what it IS in one glance (SPEC3 §4) */
.v-hon-tally { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 10px; }
.v-hon-tally-cell .num {
  font-family: var(--font-mono); font-weight: 700; font-size: 30px; line-height: 1; display: block;
}
.v-hon-volt-num { color: var(--volt); }
.v-hon-tally-cell label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-top: 4px;
}
.v-hon-roll { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; }
.v-hon-more { color: var(--ink-2); border-bottom: 1px dotted var(--line); }

.v-form-up { color: var(--win); font-weight: 700; }
.v-form-dn { color: var(--loss); font-weight: 700; }
.v-form-ok { color: var(--ink-3); }
.v-form-inline { display: inline-flex; align-items: center; }

.v-kit { display: inline-flex; width: 16px; height: 12px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px var(--line); }
.v-kit span { flex: 1; }

.v-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-block { margin-top: 14px; }
.v-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.v-scroll-x { overflow-x: auto; }

.v-ov-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; margin-bottom: 6px;
}
.v-ov-title {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; text-align: center;
  letter-spacing: 0.01em; margin-bottom: 6px;
}
.v-ov-sub { text-align: center; color: var(--ink-2); margin-bottom: 16px; font-size: 15px; }

.v-laurel { width: 64px; margin: 0 auto 4px; opacity: 0.9; }
.v-laurel svg { width: 100%; height: auto; display: block; }
.v-laurel-dim { color: var(--ink-3); }

/* ---------- the four tiers, as colour ----------
   One hue per tier, used everywhere a division is named: chips, dots, the
   trajectory chart's bands, the club page's tier ribbon. Learn it once, read it
   anywhere. */
.v-tier-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 7px; vertical-align: 0;
}
.v-tier-1 { background: var(--gold); }
.v-tier-2 { background: var(--volt); }
.v-tier-3 { background: var(--sky); }
.v-tier-4 { background: var(--ink-3); }
.v-tier-bg-1 { color: var(--gold); border-color: rgba(242, 201, 76, 0.35); background: rgba(242, 201, 76, 0.07); }
.v-tier-bg-2 { color: var(--volt); border-color: rgba(215, 249, 92, 0.35); background: rgba(215, 249, 92, 0.06); }
.v-tier-bg-3 { color: var(--sky); border-color: rgba(110, 207, 246, 0.35); background: rgba(110, 207, 246, 0.06); }
.v-tier-bg-4 { color: var(--ink-2); border-color: var(--line); background: var(--surface-3); }
.v-div-chip { text-transform: none; letter-spacing: 0.04em; }

/* ================================================== tabs (tables view) */
.v-tabs {
  display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.v-tabs::-webkit-scrollbar { display: none; }
.v-tab {
  flex: 1 1 0; min-width: 108px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-sm);
  color: var(--ink-2); font-family: var(--font-body);
  transition: all 0.15s ease;
}
.v-tab:hover { color: var(--ink); border-color: var(--ink-3); background: var(--surface-2); }
.v-tab-lbl { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.v-tab-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.v-tab-on, .v-tab-on:hover {
  color: var(--volt); border-color: rgba(215, 249, 92, 0.5);
  background: rgba(215, 249, 92, 0.08);
}
.v-tab-on .v-tab-sub { color: rgba(215, 249, 92, 0.7); }

/* ================================================== tables view */
.v-league-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.v-league-head .panel-title { margin-bottom: 0; font-size: 12px; color: var(--ink); letter-spacing: 0.18em; }
.v-ladder { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.v-ladder-up { color: var(--win); }
.v-ladder-dn { color: var(--loss); }
.v-ladder-top { color: var(--ink-3); }

.v-table td { white-space: nowrap; }
.v-table .v-pos { color: var(--ink-3); width: 24px; }
.v-table .v-pts { font-weight: 700; color: var(--ink); }
.v-table .v-gd { color: var(--ink-2); }
.v-table tr[data-nav] { cursor: pointer; }

tr.v-zone-title td { background: linear-gradient(90deg, rgba(242, 201, 76, 0.09), transparent 65%); }
tr.v-zone-title td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
tr.v-zone-pro td { background: linear-gradient(90deg, rgba(215, 249, 92, 0.07), transparent 65%); }
tr.v-zone-pro td:first-child { box-shadow: inset 2px 0 0 var(--volt); }
tr.v-zone-po td { background: linear-gradient(90deg, rgba(110, 207, 246, 0.07), transparent 65%); }
tr.v-zone-po td:first-child { box-shadow: inset 2px 0 0 var(--sky); }
tr.v-zone-rel td { background: linear-gradient(90deg, rgba(255, 93, 69, 0.07), transparent 65%); }
tr.v-zone-rel td:first-child { box-shadow: inset 2px 0 0 var(--danger); }

.v-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.v-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.v-key-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.v-key-gold { background: var(--gold); }
.v-key-volt { background: var(--volt); }
.v-key-sky { background: var(--sky); }
.v-key-red { background: var(--danger); }

/* ================================================== play-offs */
.v-po-note { color: var(--ink-2); margin: -4px 0 12px; font-size: 14px; }
.v-po-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.v-po-card { min-width: 0; }
.v-po-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.v-po-head .panel-title { margin-bottom: 0; color: var(--ink); }
.v-po-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.v-po-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v-po-col .v-round-name { margin-bottom: 0; }
.v-po-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.v-po-seed {
  font-size: 9.5px; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 4px; flex: 0 0 auto;
}
.v-po-final { border-color: rgba(242, 201, 76, 0.4); background: rgba(242, 201, 76, 0.05); }
.v-po-winner {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft); font-family: var(--font-display); font-size: 14px;
}

/* ================================================== cup bracket (7 rounds) */
.v-bracket-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; margin: -6px 0 10px; }
/* the bracket and its columns keep their own scroll across a re-render (see
   views.renderCup) — contain the chaining so a flick inside a column never drags
   the whole page with it */
.v-bracket-wrap { overflow-x: auto; padding-bottom: 12px; overscroll-behavior-x: contain; }
.v-bracket {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr);
  gap: 10px; min-width: 1080px; max-width: 1500px; align-items: start;
}
.v-round-final { grid-column: span 1; }
.v-round-name {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.v-round-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-round-count { margin-left: auto; font-size: 10px; color: var(--ink-3); opacity: 0.7; }
.v-round-live .v-round-name { color: var(--volt); }
.v-round-final .v-round-name { color: var(--gold); }
.v-round-next {
  font-size: 8.5px; padding: 1px 6px; border: 1px solid rgba(215, 249, 92, 0.45);
  border-radius: 99px; color: var(--volt); flex: 0 0 auto;
}
/* early rounds are 28-32 ties deep: cap them and let the column scroll rather
   than letting the page grow to the height of a small building */
.v-round-stack {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 560px; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 2px;
  scrollbar-width: thin;
}
.v-round-final .v-round-stack { justify-content: center; max-height: none; }
.v-cupmatch {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad-sm);
  padding: 6px 8px; font-size: 12px; flex: 0 0 auto;
}
.v-cup-final {
  border-color: rgba(242, 201, 76, 0.45); padding: 12px 10px;
  background: radial-gradient(180px 90px at 50% 0%, rgba(242, 201, 76, 0.10), transparent 70%), var(--surface-2);
}
.v-cup-ghost {
  border-style: dashed; background: transparent; color: var(--ink-3);
  font-family: var(--font-serif); font-style: italic; font-size: 12px; text-align: center; padding: 12px 9px;
}
.v-cup-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; min-width: 0; }
.v-cup-side .v-ent { min-width: 0; }
.v-cup-g { flex: 0 0 auto; }
.v-cup-w { color: var(--ink); font-weight: 700; }
.v-cup-w .v-cup-g { color: var(--volt); }
.v-cup-l { color: var(--ink-3); }
.v-cup-l .crest { opacity: 0.6; }
.v-cup-pens {
  font-family: var(--font-mono); font-size: 10px; color: var(--gold);
  border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px;
}

/* ================================================== chronicle */
.v-filters { display: flex; gap: 8px; margin-bottom: 16px; }
.v-filter { cursor: pointer; transition: all 0.15s ease; background: var(--surface-2); }
.v-filter:hover { color: var(--ink); border-color: var(--ink-3); }
.v-filter-on, .v-filter-on:hover { background: var(--volt); color: var(--volt-ink); border-color: var(--volt); font-weight: 700; }

.v-feed { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.v-season-div {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.v-season-div::before, .v-season-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.v-news { padding: 12px 16px; }
.v-dateline {
  font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--ink-3);
  margin-bottom: 3px;
}
.v-news-head { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.v-news-head-3 { font-size: 20px; color: var(--gold); }
.v-news-body { color: var(--ink-2); margin-top: 5px; font-size: 13.5px; }
.v-news-refs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--ink-2); }

/* ================================================== records */
.v-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-width: 1100px; }
.v-rec-val { font-family: var(--font-mono); font-weight: 700; font-size: 34px; line-height: 1; color: var(--volt); margin: 4px 0 8px; }
.v-rec-unit { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 6px; letter-spacing: 0.04em; }
.v-rec-holder { font-size: 14px; font-weight: 600; }
.v-rec-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ================================================== hall of fame */
/* paged, like the Players browser: same controls panel, same pager (SPEC3 §4) */
.v-hof-controls .v-fld:not(.v-fld-search) { flex: 0 1 220px; }
#v-hof-list .v-pager { max-width: 1280px; }
.v-hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; max-width: 1280px; }
.v-hof-card { position: relative; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; overflow: hidden; }
.v-hof-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, rgba(242, 201, 76, 0.75), transparent 70%);
}
.v-hof-card:hover { border-color: rgba(242, 201, 76, 0.45); transform: translateY(-2px); }
.v-hof-rank {
  position: absolute; top: 10px; right: 14px; font-family: var(--font-mono);
  font-size: 26px; font-weight: 700; color: var(--ink-3); opacity: 0.4;
}
.v-hof-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-top: 2px; }
.v-hof-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.v-hof-clubs { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.v-hof-stats { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.v-hof-stats b { color: var(--ink); font-weight: 700; margin-right: 3px; }
.v-hof-hons { margin-top: 8px; }
.v-hof-legacy { position: absolute; bottom: 12px; right: 14px; text-align: right; }
.v-hof-legacy .num { font-family: var(--font-mono); font-weight: 700; font-size: 22px; display: block; line-height: 1; }
.v-hof-legacy label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.v-hof-blurb { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 13px; margin-top: 10px; max-width: 82%; }

/* ---------- expanders (SPEC3 §4) ----------
   The same button everywhere something is collapsed: the club's 300-season
   history, the history feed, the champions strip. One gesture, learned once. */
.v-expander {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
}
.v-expander:hover { color: var(--volt); border-color: rgba(215, 249, 92, 0.45); }
.v-expander .v-dim { font-size: 10.5px; }
/* opened, three centuries of rows scroll inside the panel instead of turning the
   drawer into a mile of table */
.v-clubhist-open .v-clubhist-wrap { max-height: 46vh; overflow-y: auto; }

/* ================================================== history */
.v-hist-more { max-width: 860px; margin-top: 14px; text-align: center; }
.v-hist-more .v-expander { margin-top: 0; }
.v-era-head { margin: 26px 0 12px; max-width: 860px; }
.v-era-head:first-of-type { margin-top: 4px; }
.v-era-name { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--ink); }
.v-era-span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.v-era-desc { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; max-width: 640px; }
.v-hist-group { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.v-hist-row { display: flex; gap: 16px; padding: 13px 16px; }
.v-hist-season .num { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--ink-3); }
.v-hist-main { flex: 1; min-width: 0; }
.v-hist-champ { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-hist-champ b { font-family: var(--font-display); font-size: 16px; }
.v-hist-champ-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.v-meta-chip { font-style: italic; font-family: var(--font-serif); text-transform: none; letter-spacing: 0.02em; font-size: 12px; }
.v-hist-chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.v-hist-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.v-hist-lower {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  padding-top: 6px; border-top: 1px solid var(--line-soft);
}
.v-hist-digest { font-family: var(--font-serif); font-style: italic; color: var(--ink-2); font-size: 13.5px; margin-top: 8px; }
.v-hist-moves { display: flex; gap: 18px; margin-top: 7px; font-size: 11.5px; font-family: var(--font-mono); }
.v-hist-tbl td { white-space: nowrap; }

/* ================================================== club & player pages */
.v-page { position: relative; }
.v-kitbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.v-kitbar span { flex: 1; }
.v-club-head { display: flex; gap: 18px; align-items: flex-start; }
.v-club-head-txt { flex: 1; min-width: 0; }
.v-page-title { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.1; letter-spacing: 0.01em; }
.v-page-sub { color: var(--ink-2); margin-top: 4px; font-size: 13.5px; }
.v-club-head .v-chip-row { margin-top: 10px; }

.v-meter { position: relative; height: 5px; background: var(--surface-3); border-radius: 3px; margin-top: 14px; max-width: 300px; }
.v-meter span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--ink-3), var(--volt)); border-radius: 3px; }
.v-meter label {
  position: absolute; top: -16px; right: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

/* tier history ribbon: one cell per season, coloured by division */
.v-tierhist { padding-bottom: 12px; }
.v-tier-ribbon { display: flex; gap: 2px; flex-wrap: wrap; }
.v-tier-cell {
  flex: 1 1 6px; min-width: 5px; max-width: 22px; height: 22px; border-radius: 2px;
  border: 1px solid var(--line); opacity: 0.95;
}
/* three centuries of seasons: thinner cells, still one per season — the whole
   life of a club as a single heat strip */
.v-tier-ribbon-long { gap: 1px; }
.v-tier-ribbon-long .v-tier-cell { min-width: 3px; flex-basis: 4px; height: 18px; border-radius: 1px; }
.v-tier-cell.v-tier-bg-1 { background: rgba(242, 201, 76, 0.55); }
.v-tier-cell.v-tier-bg-2 { background: rgba(215, 249, 92, 0.38); }
.v-tier-cell.v-tier-bg-3 { background: rgba(110, 207, 246, 0.3); }
.v-tier-cell.v-tier-bg-4 { background: var(--surface-3); }
.v-tier-story { color: var(--ink-2); font-size: 13.5px; margin-top: 10px; }
.v-tier-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.v-tier-span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.v-mgr-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.v-tactic { margin-top: 10px; }
.v-tactic-chip { color: var(--volt); border-color: rgba(215, 249, 92, 0.35); text-transform: none; letter-spacing: 0.03em; font-size: 12px; }
.v-rival { margin-top: 12px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.v-squad td { white-space: nowrap; }
.v-squad tr[data-nav] { cursor: pointer; }
.v-role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.v-chart-mount:empty { display: none; }

.v-hero { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.v-hero-txt { min-width: 0; }
.v-ovr-big { text-align: center; flex: 0 0 auto; padding: 6px 4px 0; }
.v-ovr-big .rate { font-size: 54px; line-height: 1; display: block; text-shadow: 0 0 30px rgba(215, 249, 92, 0.18); }
.v-ovr-big label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }

.v-attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; }
.v-attr { display: flex; align-items: center; gap: 10px; }
.v-attr-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); width: 74px; flex: 0 0 auto; }
.v-attr-track { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.v-attr-fill { display: block; height: 100%; border-radius: 3px; background: var(--ink-2); }
.v-attr-fill.rate-elite { background: var(--gold); }
.v-attr-fill.rate-great { background: var(--volt); }
.v-attr-fill.rate-good { background: var(--win); }
.v-attr-fill.rate-mid { background: var(--ink-2); }
.v-attr-fill.rate-low { background: var(--ink-3); }
.v-attr-val { width: 24px; text-align: right; font-size: 12px; flex: 0 0 auto; }

/* ---------- the archive round-trip (SPEC3 §1) ----------
   The compact record paints instantly; the per-season table is fetched. These are
   the four seconds-of-nothing that would otherwise be a blank panel. */
.v-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.v-skel-note {
  font-family: var(--font-serif); font-style: italic; color: var(--ink-3); font-size: 13px;
  margin-bottom: 2px;
}
.v-skel-row {
  display: block; height: 13px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-3) 0%, rgba(99, 115, 92, 0.16) 50%, var(--surface-3) 100%);
  background-size: 300% 100%;
  animation: v-skel-sweep 1.5s ease-in-out infinite;
}
.v-skel-row:nth-child(2) { width: 100%; }
.v-skel-row:nth-child(3) { width: 96%; }
.v-skel-row:nth-child(4) { width: 92%; }
.v-skel-row:nth-child(5) { width: 97%; }
.v-skel-row:nth-child(6) { width: 88%; }
.v-skel-row:nth-child(7) { width: 94%; }
@keyframes v-skel-sweep { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) {
  .v-skel-row { animation: none; }
}
.v-career-gone {
  font-size: 14px; line-height: 1.6; max-width: 460px; padding: 6px 0 2px;
}

/* ---------- the retrospective (an archived career) ---------- */
.v-hero-retro { border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
.v-retro-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.v-retro-blurb {
  font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--ink-2);
  margin: 16px 0 4px; max-width: 560px; line-height: 1.5;
}
.v-retro-stats { padding-top: 16px; }
.v-retro-clubs { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.v-retro-best { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 13.5px; }

/* memorial & lost pages */
.v-memorial { text-align: center; padding: 26px 10px 10px; }
.v-mem-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.v-mem-name { font-family: var(--font-display); font-weight: 800; font-size: 34px; margin-top: 6px; }
.v-mem-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.v-mem-clubs { color: var(--ink-2); margin-top: 8px; font-size: 14px; }
.v-mem-stats { display: flex; justify-content: center; gap: 26px; margin-top: 4px; flex-wrap: wrap; text-align: center; }
.v-mem-stats .num { font-family: var(--font-mono); font-weight: 700; font-size: 22px; display: block; line-height: 1.1; }
.v-mem-stats label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.v-mem-hons { justify-content: center; margin-top: 16px; }
.v-mem-blurb { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--ink-2); max-width: 420px; margin: 20px auto 0; }
.v-lost { text-align: center; padding: 60px 24px; }
.v-lost-note { font-family: var(--font-serif); font-style: italic; color: var(--ink-3); font-size: 15px; max-width: 380px; margin: 14px auto 0; }

/* ================================================== players browser */
.v-pl-controls { padding: 12px 14px; margin-bottom: 12px; }
.v-pl-row1 { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.v-pl-row2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 12px;
}
.v-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-fld-search { flex: 1 1 240px; }
.v-fld-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.v-input, .v-select {
  width: 100%; background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--rad-sm);
  padding: 8px 10px; font-family: var(--font-body); font-size: 13px;
  transition: border-color 0.15s ease;
}
.v-input:focus, .v-select:focus { outline: none; border-color: var(--volt); }
.v-input::placeholder { color: var(--ink-3); }
.v-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 17px, calc(100% - 9px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.v-select option { background: var(--surface-2); color: var(--ink); }
.v-pl-status { display: flex; gap: 6px; flex-wrap: wrap; }

.v-pl-panel { padding: 8px 10px 12px; }
.v-pl-tbl { font-size: 12.5px; }
.v-pl-tbl td { white-space: nowrap; }
.v-pl-tbl tr[data-nav] { cursor: pointer; }
.v-pl-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.v-pl-retired td { color: var(--ink-2); }
.v-pl-retired .v-ent-name { color: var(--ink-2); }
.v-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.v-sortable:hover { color: var(--ink); }
.v-sortable:focus-visible { outline: 1px solid var(--volt); outline-offset: -1px; }
.v-sort-on { color: var(--volt); }
.v-sort-caret { margin-left: 5px; opacity: 0.55; font-size: 9px; }
.v-sort-on .v-sort-caret { opacity: 1; }

.v-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.v-pager-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.v-pager-btns { display: flex; align-items: center; gap: 6px; }
.v-pager-now { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding: 0 6px; white-space: nowrap; }
.v-pager .ctl-btn:disabled { opacity: 0.35; cursor: default; }
.v-pager .ctl-btn:disabled:hover { color: var(--ink-2); border-color: var(--line); }

/* ================================================== live side rail */
.v-scores { padding: 12px 12px 8px; }
/* 46 fixtures in a 360px box: this list IS a scroller, and it must look and
   behave like one. The rail is patched in place during a match (never rebuilt),
   so the offset the reader chose survives the whole ninety minutes. */
.v-scores-scroll {
  max-height: 360px; overflow-y: auto; padding-right: 2px;
  overscroll-behavior-y: contain;
}
.v-scores-scroll:focus-visible { outline: 1px solid var(--volt); outline-offset: 2px; }
.v-score-group { margin-bottom: 8px; }
.v-score-group-title {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin: 4px 0 5px; position: sticky; top: 0;
  background: var(--surface-2); padding: 3px 0; z-index: 1;
}
.v-score-row {
  display: grid; grid-template-columns: 30px 1fr auto 1fr; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: var(--rad-sm); font-size: 12px;
}
.v-score-row:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.v-score-row.v-feat { background: rgba(215, 249, 92, 0.07); box-shadow: inset 2px 0 0 var(--volt); }
.v-score-row.v-done .v-min { color: var(--ink-3); }
.v-min { font-size: 10.5px; color: var(--volt); }
.v-sc-team { min-width: 0; }
.v-sc-team .v-ent { max-width: 100%; }
.v-sc-a { justify-self: end; }
.v-sc-a .v-ent { flex-direction: row-reverse; }
.v-sc-score { font-weight: 700; font-size: 12.5px; }

.v-mini-tbl td { padding: 4px 6px; font-size: 12px; }
.v-mini-hot td { background: rgba(215, 249, 92, 0.05); }
.v-mini-hot td:first-child { box-shadow: inset 2px 0 0 var(--volt); }

.v-next-label { font-size: 13px; font-weight: 600; }
.v-next-fx { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }

/* ================================================== prematch rail */
.v-pm-team { padding: 7px 0; }
.v-pm-team-id { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; min-width: 0; }
.v-pm-tac { font-family: var(--font-mono); font-size: 10.5px; color: var(--volt); margin: 4px 0 0 24px; }
.v-pm-pos { font-family: var(--font-mono); font-size: 10px; margin: 2px 0 0 24px; letter-spacing: 0.06em; }
.v-pm-stake {
  font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 13.5px;
  margin: -2px 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(242, 201, 76, 0.25);
}
.v-pm-vs {
  text-align: center; font-family: var(--font-serif); font-style: italic; color: var(--ink-3);
  font-size: 14px; margin: 2px 0; position: relative;
}
.v-pm-venue { color: var(--ink-2); font-size: 12.5px; margin-top: 10px; }
.v-duel { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 12px; gap: 2px; }
.v-duel span { border-radius: 3px; }
.v-duel-lbl { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 11px; }
.v-duel-lbl label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

.v-xi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.v-xi-row {
  display: flex; align-items: center; gap: 6px; padding: 2.5px 4px; font-size: 11.5px;
  border-radius: 4px; min-width: 0;
}
.v-xi-row[data-nav]:hover { background: rgba(255, 255, 255, 0.04); }
.v-xi-role { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); width: 20px; flex: 0 0 auto; }
.v-xi-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-xi-star { color: var(--gold); font-size: 10px; }

/* ================================================== results overlay */
.v-results { text-align: left; }
.v-res-hero { margin: 10px auto 16px; max-width: 720px; padding: 16px 22px 18px; }
.v-rh-comp {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; margin-bottom: 10px;
}
.v-rh-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.v-rh-team { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; min-width: 0; }
.v-rh-away { flex-direction: row-reverse; text-align: right; }
.v-rh-team .v-ent-name { cursor: pointer; }
.v-rh-win .v-ent-name { color: var(--volt); }
.v-rh-mid { text-align: center; }
.v-rh-score { font-family: var(--font-mono); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0.02em; }
.v-rh-pens { font-family: var(--font-mono); font-size: 10.5px; color: var(--gold); margin-top: 4px; }
.v-rh-scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.v-rh-sc-a { text-align: right; }
.v-scorer { font-size: 12.5px; color: var(--ink-2); padding: 1px 0; }
.v-scorer[data-nav]:hover { color: var(--volt); }

/* the match report: cards · subs · injuries — home column, away column, one
   event a line, minute order. The scorers block above uses the same shape, so
   the eye already knows which side is which. */
.v-rh-report {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
}
.v-rep-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-rep-col-a { text-align: right; }
.v-rep-line { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-rep-line [data-nav]:hover { color: var(--volt); cursor: pointer; }
.v-rep-min { display: inline-block; min-width: 26px; color: var(--ink-3); font-size: 10.5px; }
.v-rep-col-a .v-rep-min { min-width: 0; margin-left: 6px; }
.v-rep-note {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.v-rep-inj { color: var(--danger); }
.v-rep-cross { color: var(--danger); font-size: 10px; }

/* man of the match — the role-fair rating's night-of debut */
.v-rh-motm {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-2); text-align: center;
}
.v-rh-motm b { color: var(--gold); }
.v-rh-motm .num { font-family: var(--font-mono); color: var(--gold); }
.v-rh-motm[data-nav]:hover { color: var(--volt); cursor: pointer; }

/* the day's arithmetic: clinched, sealed, confirmed */
.v-res-decided { margin: 0 0 12px; padding: 10px 14px; }
.v-res-dec-row {
  font-family: var(--font-serif); font-style: italic; font-size: 14px; padding: 3px 0;
}
.v-res-dec-row.v-dec-down { color: var(--danger); }

/* the goal that never was */
.v-scorer.v-ruled { color: var(--ink-3); }
.v-scorer.v-ruled s { text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; }
.v-flagchip {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--danger); border: 1px solid rgba(255, 93, 69, 0.4); border-radius: 3px;
  padding: 0 3px; vertical-align: 1px; white-space: nowrap;
}

/* match stats strip (possession / shots / on target / offside) */
.v-mstats {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  display: grid; gap: 7px;
}
.v-stat-row {
  display: grid; grid-template-columns: 42px 1fr 42px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}
.v-stat-row b:last-child { text-align: right; }
.v-stat-lbl {
  text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.v-stat-bar {
  height: 3px; border-radius: 2px; margin-top: 3px; overflow: hidden;
  background: rgba(120, 150, 110, 0.16);
}
.v-stat-bar > i { display: block; height: 100%; background: var(--volt); border-radius: 2px; }
.v-stat-note {
  text-align: center; font-family: var(--font-serif); font-style: italic;
  font-size: 12.5px; color: var(--danger); margin-top: 2px;
}

.v-res-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; max-width: 980px; margin: 0 auto;
}
.v-res-col-wide { grid-column: 1 / -1; max-width: 460px; margin: 0 auto; width: 100%; }
.v-res-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--rad-sm); font-size: 12.5px;
}
.v-res-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.v-res-row.v-feat { background: rgba(215, 249, 92, 0.06); box-shadow: inset 2px 0 0 var(--volt); }
.v-rr-team { min-width: 0; }
.v-rr-team:last-child { justify-self: end; }
.v-rr-team:last-child .v-ent { flex-direction: row-reverse; }
.v-rr-w .v-ent-name { font-weight: 700; color: var(--ink); }
.v-rr-score { font-weight: 700; }
.v-rr-p { font-style: normal; color: var(--gold); font-size: 9px; margin-left: 2px; }

.v-movers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px auto 0; max-width: 860px; }
.v-movers .panel-title { margin: 0 6px 0 0; }
.v-mover { display: inline-flex; align-items: center; gap: 7px; text-transform: none; }

/* play-off finals night: three promotions, gold */
.v-promo { margin-top: 20px; }
.v-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; max-width: 720px; margin: 0 auto; }
.v-promo-card {
  text-align: center; cursor: pointer; padding: 14px 12px 16px;
  border-color: rgba(242, 201, 76, 0.4);
  background: radial-gradient(220px 120px at 50% 0%, rgba(242, 201, 76, 0.10), transparent 70%), var(--surface-2);
}
.v-promo-card .v-laurel { width: 42px; margin-bottom: 2px; }
.v-promo-card .crest { margin: 2px 0 6px; }
.v-promo-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.15; }
.v-promo-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 6px; }

/* ================================================== awards overlay */
.v-awards { text-align: center; }
.v-awards .v-ov-eyebrow { color: var(--gold); }
.v-aw-champ {
  max-width: 560px; margin: 4px auto 16px; padding: 24px 20px 20px; position: relative;
  border-color: rgba(242, 201, 76, 0.45);
  background:
    radial-gradient(340px 160px at 50% 0%, rgba(242, 201, 76, 0.10), transparent 70%),
    var(--surface-2);
  box-shadow: 0 0 60px rgba(242, 201, 76, 0.08);
}
.v-aw-champ .crest { margin: 6px 0 4px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.v-aw-champ-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.v-aw-champ-name { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1.05; margin-top: 6px; cursor: pointer; }
.v-aw-record { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 8px; }

.v-aw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 880px; margin: 0 auto; }
.v-aw-card { padding: 16px 12px 14px; text-align: center; }
.v-aw-glyph { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.v-tone-gold { color: var(--gold); text-shadow: 0 0 18px rgba(242, 201, 76, 0.4); }
.v-tone-volt { color: var(--volt); text-shadow: 0 0 18px rgba(215, 249, 92, 0.35); }
.v-tone-sky { color: var(--sky); text-shadow: 0 0 18px rgba(110, 207, 246, 0.35); }
.v-aw-eyebrow-sm { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); min-height: 22px; }
.v-aw-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-top: 4px; }
.v-aw-name[data-nav]:hover { color: var(--volt); }
.v-aw-sub { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.v-aw-stat { font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.v-aw-digest {
  font-family: var(--font-serif); font-style: italic; font-size: 15.5px; color: var(--ink-2);
  max-width: 620px; margin: 18px auto 0;
}
.v-aw-lower { max-width: 620px; margin: 16px auto 0; text-align: left; }
.v-aw-lower-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 18px; }
.v-aw-lower-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line-soft);
}
.v-aw-lower-w { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.v-aw-strip { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; }
.v-aw-strip-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ================================================== offseason overlay */
.v-off-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 880px; margin: 0 auto; text-align: left; }
.v-off-panel { min-width: 0; }
.v-off-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 5px 6px; border-radius: var(--rad-sm); font-size: 12.5px;
}
.v-off-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.v-off-row.v-marquee { background: rgba(215, 249, 92, 0.06); box-shadow: inset 2px 0 0 var(--volt); }
.v-off-row.v-marquee > span:first-child { font-weight: 700; }
.v-off-route { display: inline-flex; align-items: center; gap: 6px; }
.v-off-arrow { color: var(--ink-3); }
.v-off-fee { color: var(--ink-3); font-size: 12px; }
.v-off-minor { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.v-off-more { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.06em; }
.v-off-notes { list-style: none; max-width: 620px; margin: 16px auto 0; color: var(--ink-2); font-size: 14px; text-align: center; }
.v-off-notes li { padding: 2px 0; }

/* ==================================================================
   FOLLOW A CLUB (SPEC4 §2)
   One club is yours. Gold is the language of the followed club — it is
   already the language of glory here, and that is the point: their
   fourth-division Tuesday night is the biggest thing on the screen.
   ================================================================== */

/* YOUR CLUB'S ★, SITTING LEVEL WITH THE NAME.
   `.v-ent` is an inline-flex box whose first item is a 16px crest, so the browser takes ITS
   baseline from the crest — not from the club name. A plain inline ★ next to it sits on the
   row's text baseline instead, which left the star visibly below the name it belongs to.
   Making the star a flex SIBLING of `.v-ent` inside a centred row aligns the two by
   construction rather than by a nudge that would break at another font size. */
.v-tbl-club { display: flex; align-items: center; min-width: 0; }
.v-mine-star { color: var(--gold); font-size: 11px; margin-left: 6px; line-height: 1; flex: none; }
.v-res-W { color: var(--win); }
.v-res-D { color: var(--draw); }
.v-res-L { color: var(--loss); }

/* the ★ control itself — club page, picker, anywhere */
.v-follow {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--ink-2);
  transition: all 0.15s ease;
}
.v-follow:hover { color: var(--gold); border-color: rgba(242, 201, 76, 0.5); background: rgba(242, 201, 76, 0.08); }
.v-follow .v-follow-star { font-size: 13px; }
.v-follow-on, .v-follow-on:hover {
  background: rgba(242, 201, 76, 0.12); border-color: rgba(242, 201, 76, 0.55); color: var(--gold);
  font-weight: 700;
}
.v-follow-on .v-follow-star { text-shadow: 0 0 14px rgba(242, 201, 76, 0.6); }

.v-club-title-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.v-mine-chip { color: var(--gold); border-color: rgba(242, 201, 76, 0.4); background: rgba(242, 201, 76, 0.08); }
.v-page-mine .v-club-head { position: relative; }

/* the followed club, wherever they appear in a list */
tr.v-tbl-mine td { background: rgba(242, 201, 76, 0.07) !important; }
tr.v-tbl-mine td:first-child { box-shadow: inset 3px 0 0 var(--gold) !important; }
tr.v-tbl-mine .v-ent-name { color: var(--gold); font-weight: 700; }
.v-score-row.v-mine { background: rgba(242, 201, 76, 0.09); box-shadow: inset 2px 0 0 var(--gold); }
.v-score-row.v-mine.v-feat { box-shadow: inset 2px 0 0 var(--gold), inset 0 0 0 1px rgba(242, 201, 76, 0.22); }
.v-res-row.v-mine { background: rgba(242, 201, 76, 0.1); box-shadow: inset 2px 0 0 var(--gold); }
.v-news-mine { border-left-color: var(--gold); }
.v-filter-mine { color: var(--gold); border-color: rgba(242, 201, 76, 0.4); }
.v-filter-mine.v-filter-on, .v-filter-mine.v-filter-on:hover {
  background: var(--gold); color: #1a1405; border-color: var(--gold);
}

/* ---------- the picker ---------- */
.v-fp { max-width: 720px; margin: 0 auto; padding: 18px 20px 16px; }
.v-fp-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-align: center; }
.v-fp-note { color: var(--ink-2); font-size: 14px; text-align: center; max-width: 520px; margin: 6px auto 14px; }
.v-fp-current {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 12px; font-size: 13px;
  border: 1px solid rgba(242, 201, 76, 0.35); border-radius: var(--rad-sm);
  background: rgba(242, 201, 76, 0.06);
}
.v-fp-unfollow { margin-left: auto; color: var(--danger); }
.v-fp-unfollow:hover { border-color: var(--danger); color: var(--danger); }
.v-fp-search { margin-bottom: 12px; }
.v-fp-list { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.v-fp-group { margin-bottom: 14px; }
.v-fp-group-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px; position: sticky; top: 0;
  background: var(--surface-2); padding: 4px 0; z-index: 1;
}
.v-fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.v-fp-club {
  display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left;
  padding: 6px 8px; border-radius: var(--rad-sm); cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 13px; transition: all 0.12s ease;
}
.v-fp-club:hover { background: rgba(242, 201, 76, 0.08); border-color: rgba(242, 201, 76, 0.35); }
.v-fp-club[hidden] { display: none; }
.v-fp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.v-fp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-fp-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); }
.v-fp-form { flex: 0 0 auto; }
.v-fp-star { color: var(--ink-3); flex: 0 0 auto; }
.v-fp-club:hover .v-fp-star { color: var(--gold); }
.v-fp-on { background: rgba(242, 201, 76, 0.1); border-color: rgba(242, 201, 76, 0.45); }
.v-fp-on .v-fp-star, .v-fp-on .v-fp-name { color: var(--gold); }

/* ---------- the live rail's My Club panel ---------- */
.v-myclub-panel {
  border-color: rgba(242, 201, 76, 0.35);
  background: radial-gradient(220px 90px at 0% 0%, rgba(242, 201, 76, 0.08), transparent 70%), var(--surface-2);
}
.v-myclub-panel .panel-title { color: var(--gold); }
.v-mc-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.v-mc-id { flex: 1; min-width: 0; }
.v-mc-name {
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v-mc-head:hover .v-mc-name { color: var(--gold); }
.v-mc-meta { font-size: 11px; color: var(--ink-2); margin-top: 1px; }
.v-mc-pos b { font-family: var(--font-mono); color: var(--ink); }
.v-mc-form { flex: 0 0 auto; }
.v-mc-line {
  display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px;
  padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.v-mc-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); width: 34px; flex: 0 0 auto;
}
.v-mc-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.v-mc-val b { font-family: var(--font-mono); font-weight: 700; }
.v-mc-sub { font-family: var(--font-mono); font-size: 10px; margin-top: 4px; letter-spacing: 0.04em; }
.v-mc-live {
  display: flex; align-items: center; gap: 9px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line-soft); font-size: 12px;
}
.v-mc-score { font-family: var(--font-mono); font-weight: 700; font-size: 16px; }

/* ---------- your result, pinned to the top of the matchday ---------- */
.v-res-pin {
  max-width: 720px; margin: 10px auto 14px; padding: 14px 20px 12px;
  border-color: rgba(242, 201, 76, 0.5);
  background: radial-gradient(320px 120px at 50% 0%, rgba(242, 201, 76, 0.10), transparent 72%), var(--surface-2);
  box-shadow: 0 0 44px rgba(242, 201, 76, 0.07);
}
.v-res-pin .v-rh-comp { color: var(--gold); }
.v-pin-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.v-pin-score { font-family: var(--font-mono); font-weight: 700; font-size: 30px; line-height: 1; }
.v-pin-verdict {
  text-align: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-2);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.v-pin-W { border-color: rgba(127, 224, 138, 0.45); }
.v-pin-L { border-color: rgba(255, 122, 104, 0.4); }
.v-res-hero.v-res-mine { border-color: rgba(242, 201, 76, 0.5); }
.v-res-hero.v-res-mine .v-rh-comp { color: var(--gold); }

/* ---------- awards night, for your club ---------- */
.v-mine-season {
  max-width: 560px; margin: 0 auto 14px; padding: 14px 18px; text-align: left;
  border-color: rgba(242, 201, 76, 0.4);
}
.v-mine-glory {
  background: radial-gradient(320px 140px at 50% 0%, rgba(242, 201, 76, 0.14), transparent 72%), var(--surface-2);
  box-shadow: 0 0 50px rgba(242, 201, 76, 0.1);
}
.v-mine-up { border-color: rgba(127, 224, 138, 0.45); }
.v-mine-down { border-color: rgba(255, 122, 104, 0.4); }
.v-mine-flat { border-color: var(--line); }
.v-mine-head { display: flex; align-items: center; gap: 10px; }
.v-mine-eyebrow {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.v-mine-eyebrow .v-mine-star { margin-left: 0; margin-right: 2px; }
.v-mine-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; cursor: pointer; }
.v-mine-name:hover { color: var(--gold); }
.v-mine-lines { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.v-mine-podium {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-2);
}

/* ---------- prematch: your club, and who cannot play ---------- */
.v-pm-yours { border-color: rgba(242, 201, 76, 0.4); }
.v-pm-yours .panel-title { color: var(--gold); }

/* the man in the dugout: what he is, and what he believes */
.v-mgr-card { margin-top: 7px; }
.v-mgr-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.v-mgr-standing {
  font-size: 11px; letter-spacing: 0.02em; color: var(--ink-2);
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-soft);
}
.v-mgr-elite { color: var(--gold); border-color: rgba(242, 201, 76, 0.4); }
.v-mgr-good { color: #b9e08a; border-color: rgba(185, 224, 138, 0.3); }
.v-mgr-poor { color: #c98d8d; border-color: rgba(201, 141, 141, 0.28); }
.v-mgr-tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-soft); color: var(--ink-2);
}
.v-mgr-rising { color: #8fd6c2; border-color: rgba(143, 214, 194, 0.34); }
.v-mgr-past { color: #a89a86; border-color: rgba(168, 154, 134, 0.3); }
/* the heretic built his football to beat the champion — the sim's engine of change */
.v-mgr-heretic {
  color: #e0a3f0; border-color: rgba(224, 163, 240, 0.45);
  background: rgba(224, 163, 240, 0.07);
}
.v-mgr-phil { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* "your club is idle today" — the reason the camera is somewhere else */
.v-idle {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px dashed rgba(242, 201, 76, 0.28);
  background: rgba(242, 201, 76, 0.04);
  font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.v-idle-star { color: var(--gold); opacity: 0.75; flex: none; line-height: 1.45; }
.v-idle-txt { min-width: 0; }
.v-idle-txt b { color: var(--gold); }
.v-pm-mine .v-ent-name { color: var(--gold); }
.v-xi-out-title { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.v-xi-out { display: flex; flex-direction: column; gap: 2px; }
.v-xi-outrow {
  display: flex; align-items: baseline; gap: 6px; padding: 2px 4px; border-radius: 4px;
  font-size: 11.5px; min-width: 0;
}
.v-xi-outrow[data-nav]:hover { background: rgba(255, 255, 255, 0.04); }
.v-xi-outname { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-xi-outwhy { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; }
.v-out-susp { color: var(--danger); }
.v-out-inj { color: var(--ink-3); }
.v-xi-out-none { font-family: var(--font-serif); font-style: italic; font-size: 12px; padding: 2px 4px; }

/* ---------- discipline (SPEC4 §1) ---------- */
.v-badge-susp {
  color: var(--danger); border-color: rgba(255, 93, 69, 0.5);
  background: rgba(255, 93, 69, 0.1); font-weight: 700;
}

/* the farewell lap — an announced final season */
.v-badge-final {
  color: var(--gold); border-color: rgba(242, 201, 76, 0.5);
  background: rgba(242, 201, 76, 0.08); font-weight: 700;
}
.v-card-chip { text-transform: none; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 5px; }
.v-card {
  display: inline-block; width: 8px; height: 11px; border-radius: 1px;
  vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.45);
}
.v-card-y { background: var(--gold); }
.v-card-r { background: var(--danger); }

/* ================================================== responsive */
@media (max-width: 980px) {
  .v-po-cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .v-two-col, .v-off-grid, .v-attr-grid { grid-template-columns: 1fr; }
  .v-aw-grid { grid-template-columns: 1fr 1fr; }
  .v-rh-score { font-size: 32px; }
  .v-page-title { font-size: 22px; }
}

/* ---------- phones (393px is the target) ---------- */
@media (max-width: 700px) {
  /* tables: drop the columns a phone cannot show without shrinking the club name
     into nothing. Pos / club / played / GD / points / form is a real table. */
  .v-c-wdl, .v-c-g { display: none; }
  /* THE TAB MUST FIT ITS OWN NAME. `flex: 1 1 0` forces every tab to an equal share, and
     on a 393px phone that share is 76px of content — while "Second Division" needs 105px,
     so the label escaped the tab's border by up to 29px. The strip is already an
     overflow-x scroller, so let each tab be as wide as the division it names and let the
     strip scroll: full names, no ellipsis, nothing outside the box. */
  .v-tabs { gap: 5px; }
  .v-tab { flex: 0 0 auto; min-width: 0; padding: 7px 11px; }
  .v-league-head { gap: 6px; }
  .v-ladder { font-size: 9px; gap: 8px; }

  /* the bracket keeps its shape but narrows, and the wrapper scrolls */
  .v-bracket { grid-auto-columns: minmax(136px, 1fr); min-width: 980px; gap: 8px; }
  .v-round-stack { max-height: 420px; }
  .v-cupmatch { font-size: 11px; padding: 5px 6px; }

  /* players browser */
  .v-c-nat, .v-c-div, .v-c-peak, .v-c-leg { display: none; }
  .v-pl-name { max-width: 150px; }
  .v-pl-tbl { font-size: 11.5px; }
  .v-pl-tbl .v-badge { font-size: 8px; padding: 1px 4px; margin-left: 4px; }
  /* the row stacks — and `flex-basis` now means HEIGHT, not width. Left as it
     was, the search field claimed 240px of vertical nothing above the chips and
     the sort select claimed 220 more. Every field is content-height on a phone. */
  .v-pl-row1 { flex-direction: column; align-items: stretch; }
  .v-pl-row1 > .v-fld, .v-fld-search, .v-hof-controls .v-fld:not(.v-fld-search) { flex: 0 0 auto; }
  .v-pl-row2 { grid-template-columns: 1fr 1fr; }
  .v-pager { justify-content: center; }
  .v-pager-count { width: 100%; text-align: center; }

  .v-scores-scroll { max-height: 300px; }
  .v-po-grid { grid-template-columns: 1fr; }
  .v-mem-stats { gap: 16px; }
  .v-retro-blurb { font-size: 15px; }
  .v-tier-cell { height: 18px; }
  /* the legacy badge is absolute on desktop and the blurb keeps 82% clear of it.
     At 393px there is no 18% to give, so the badge drops into the flow instead of
     printing itself on top of the last line of a man's epitaph. */
  .v-hof-blurb { max-width: 100%; }
  .v-hof-legacy {
    position: static; display: flex; align-items: baseline; justify-content: flex-end;
    gap: 7px; margin-top: 10px;
  }
  .v-hof-legacy .num { display: inline; font-size: 19px; }
  .v-ov-title { font-size: 23px; }
  .v-rh-team { font-size: 14px; gap: 8px; }
  .v-rh-team .crest { width: 32px !important; height: 32px !important; }

  /* follow-a-club at 393px */
  .v-fp { padding: 14px 12px 12px; }
  .v-fp-title { font-size: 21px; }
  .v-fp-note { font-size: 13px; }
  .v-fp-grid { grid-template-columns: 1fr; }
  .v-fp-list { max-height: 40vh; }
  .v-fp-current { font-size: 12px; }
  .v-fp-unfollow { margin-left: 0; width: 100%; text-align: center; }
  .v-club-title-row { gap: 8px; }
  .v-follow { padding: 5px 10px; font-size: 10px; }
  .v-pin-score { font-size: 24px; }
  .v-res-pin { padding: 12px 12px 10px; }
  .v-pin-row { gap: 8px; }
  .v-pin-row .crest { width: 26px !important; height: 26px !important; }
  .v-mine-lines { font-size: 13.5px; }
  .v-mine-season { padding: 12px 12px; }
  .v-xi-outwhy { font-size: 8.5px; }
}

@media (max-width: 420px) {
  .v-aw-grid { grid-template-columns: 1fr; }
  .v-pl-row2 { grid-template-columns: 1fr; }
}

/* Small phones (≤360px: smaller Android, iPhone SE 1st-gen). The players list and the
   standings carry more columns than a tiny screen can show, and the ones that fall off
   the right edge are the WRONG ones: at 320px the player's OVERALL RATING — the whole
   point of the browser — was pushed off-screen, and the standings FORM guide was clipped
   to a sliver. So below 360px drop the genuinely secondary columns (appearances, goals,
   form) so the essentials — for players, name/club/role/RATING; for the table,
   pos/club/P/GD/Pts — always fit without a horizontal scroll. 375px+ (all current
   iPhones) keep every column. */
@media (max-width: 360px) {
  .v-c-apps, .v-c-pg, .v-c-pa { display: none; } /* players: appearances, goals, assists */
  .v-c-form, .v-form-cell { display: none; }     /* standings: the form guide */
  .v-pl-name { max-width: 118px; }
}
@media (max-width: 340px) {
  .v-c-age { display: none; }                    /* the last to go, so the RATING always shows */
}

/* the "search everyone" escape hatch from the status-filter trap */
.v-pl-widen {
  font: inherit; font-size: 11.5px; margin-left: 8px; padding: 2px 10px;
  border: 1px solid var(--volt); border-radius: 6px; background: transparent;
  color: var(--volt); cursor: pointer;
}
.v-pl-widen:hover { background: rgba(157, 255, 66, 0.08); }

/* ============================================================ SPEC5 §18 — the tracking wave */

/* the sitting manager's record + the men before him (club page dugout panel) */
.v-mgr-rec { margin-top: 7px; font-size: 12px; }
.v-pastmgrs { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.v-pastmgrs-title { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.v-pastmgr-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 2.5px 0; font-size: 12px; min-width: 0; }
.v-pastmgr-name { font-weight: 600; }
.v-pastmgr-span { font-size: 11px; }
.v-pastmgr-note { font-size: 11px; min-width: 0; }

/* the journey line on a player page */
.v-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12.5px; row-gap: 5px; }
.v-journey-leg { display: inline-flex; align-items: center; white-space: nowrap; }
.v-journey-arr { flex: none; }

/* the all-time meeting line in the prematch */
.v-h2h { margin-top: 9px; text-align: center; }
.v-h2h-line { font-size: 12px; }
.v-h2h-streak { margin-top: 3px; font-size: 12.5px; color: var(--gold, #d3b662); }

/* the great managers (Hall of Fame) */
.v-gm-panel { margin-top: 18px; }
.v-gm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.v-gm-row:last-child { border-bottom: none; }
.v-gm-rank { flex: none; width: 20px; color: var(--ink-3); }
.v-gm-name { font-weight: 600; }
.v-gm-span { font-size: 11px; }
.v-gm-hons { color: var(--gold, #d3b662); }
.v-gm-note { font-size: 11px; }

/* managers browser + manager page (SPEC5 §19b) */
.v-mode-tabs { display: inline-flex; gap: 6px; margin-right: 8px; }
.v-m-hon { color: var(--gold, #d3b662); white-space: nowrap; }
.v-mg-tbl .v-m-span { white-space: nowrap; }
/* the honours column is the point of the table — it must sit inside the first
   screenful on a phone (v16c: a scroller that hides the key column reads as
   clean to every detector). Age and the career span go first; matches last. */
@media (max-width: 480px) { .v-mg-tbl .v-m-age, .v-mg-tbl .v-m-span { display: none; } }
@media (max-width: 360px) { .v-mg-tbl .v-m-m { display: none; } }
.v-pastmgr-row[data-nav], .v-gm-row[data-nav] { cursor: pointer; }
.v-pastmgr-row[data-nav]:hover .v-pastmgr-name, .v-gm-row[data-nav]:hover .v-gm-name { color: var(--volt); }

/* SPEC6 §7 — the world menu / nation lens */
.v-world-menu { max-width: 760px; margin: 0 auto; }
.v-world-hon { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 10px 0 14px; font-size: 12.5px; display: grid; gap: 4px; }
.v-world-region { margin-bottom: 12px; }
.v-nat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.v-nat-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 8px; min-width: 0; }
.v-nat-name { font-weight: 600; font-size: 12.5px; }
.v-nat-sub { font-size: 10.5px; color: var(--ink-3); }
.v-nat-champ { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 480px) { .v-nat-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

/* ==================================================== THE GLOBAL-FIRST WAVE
   One bar, in every aggregating view, so the choice between the world and one
   nation reads as a property of the app rather than a feature of one page. It
   sits ABOVE the section title deliberately: the reader should know what they
   are looking at before they read what it is called. */
.v-scope-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.v-scope-btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
}
.v-scope-btn:hover { color: var(--volt); border-color: var(--volt); }
.v-scope-btn.v-scope-on {
  color: var(--bg-0, #070b08); background: var(--volt); border-color: var(--volt);
}
.v-scope-nat { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.v-scope-nat .v-fld-lbl { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.v-scope-select { max-width: 210px; }
@media (max-width: 520px) {
  .v-scope-nat { margin-left: 0; width: 100%; }
  .v-scope-select { flex: 1 1 auto; max-width: none; }
}

/* the world ranking table (Tables, world scope) */
.v-nat-table tbody tr { cursor: pointer; }
.v-nat-table tbody tr:hover .v-ent-name { color: var(--volt); }
.v-nat-row.v-nat-here { background: color-mix(in srgb, var(--volt) 8%, transparent); }
.v-nat-flag {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; display: inline-block;
  background: var(--ink-3);
}
.v-nat-aurelia { background: #6ea8d8; }
.v-nat-meridia { background: #d8a04a; }
.v-nat-sirocca { background: #c96f4a; }
.v-nat-pacifica { background: #63bb92; }
.v-nat-medal { font-size: 10.5px; margin-left: 5px; white-space: nowrap; }

/* the nation stamp on a world record card and a world Hall card */
.v-rec-nat { display: block; color: var(--ink-2); font-size: 10.5px; margin-top: 2px; }
.v-hof-nat, .v-news-nat { color: var(--ink-2); }
.v-hof-nat[data-nat], .v-news-nat[data-nat], [data-nat] { cursor: pointer; }
.v-hof-nat[data-nat]:hover, .v-news-nat[data-nat]:hover { color: var(--volt); }

/* world history: tournaments above, then the champions band by band */
.v-wh-row .v-hist-main { gap: 8px; }
.v-wh-tours { display: grid; gap: 4px; margin-bottom: 4px; }
.v-wh-tour {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding: 4px 8px;
  border-left: 2px solid var(--line); border-radius: 0 5px 5px 0;
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 60%, transparent);
}
.v-wh-tour-world { border-left-color: var(--gold, #d3b662); }
.v-wh-tour-regional { border-left-color: var(--volt); }
.v-wh-tour-name { font-weight: 700; }
.v-wh-band { display: grid; gap: 3px; }
.v-wh-band-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
}
.v-wh-minors { opacity: .82; }

/* the international career panel on a player page */
.v-intl-panel .v-intl-list { display: grid; gap: 2px; margin-top: 8px; }
.v-intl-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
  align-items: baseline; font-size: 12.5px; padding: 3px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.v-intl-comp { font-weight: 600; }
.v-hon-dim { color: var(--ink-3); }
@media (max-width: 520px) {
  .v-intl-row { grid-template-columns: 1fr auto; row-gap: 2px; }
}

/* the Players browser gained a Country column. The mobile budget is unchanged:
   country drops before division, because the division dot already carries the
   tier and a phone reader filters by country rather than reading it per row. */
.v-c-cty { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .v-pl-tbl .v-c-cty, .tbl .v-c-cty { display: none; } }

/* the world choice at the head of the world menu */
.v-world-all { margin: 0 0 12px; }
.v-nat-cell-world { width: 100%; }
.v-nat-cell.v-nat-camera { border-color: color-mix(in srgb, var(--volt) 40%, var(--line)); }

/* SPEC6 §9 — a career that crossed a border. The country is named only where it
   CHANGES, and the arrow between two nations is drawn heavier than the one between
   two clubs in the same league: the move abroad is the story, not the club order. */
.v-journey-abroad .v-journey-nat {
  margin-left: 5px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--volt); cursor: pointer;
}
.v-journey-arr-intl { color: var(--volt); font-weight: 700; }