/* =========================================================
   THE MATER LEAGUE: "Matchday programme" theme
   Cream paper · navy ink · programme red · old gold
   ========================================================= */

:root {
  /* paper + ink */
  --bg: #f1e8d4;          /* page: programme paper */
  --bg-2: #e8dcc2;        /* alternate band */
  --surface: #fbf7ee;     /* cards */
  --surface-2: #ece1c9;   /* inset / placeholders */
  --ink: #0b1f3a;         /* navy: dark bands, text on light chips */
  --ink-2: #16335e;
  --band: #0b1f3a;        /* dark bands (footer, table heads, ticker): stay dark in both themes */
  --text: #0b1f3a;
  --muted: #3c4a60;
  --faint: #5b6577;
  --line: rgba(11, 31, 58, 0.14);
  --line-2: rgba(11, 31, 58, 0.26);

  /* roles */
  --accent: #c8102e;      /* programme red: links, CTAs, highlights */
  --on-accent: #ffffff;
  --pos: #0b1f3a;         /* wins, playoffs, positive numbers */
  --on-pos: #f1e8d4;
  --neg: #c8102e;         /* losses, relegation, negative numbers */
  --gold: #8a6a24;
  --blue: #1f4e8c;
  --shade: rgba(11, 31, 58, 0.05);   /* hover / zebra wash */
  --paper-rgb: 241, 232, 212;

  /* type */
  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing (8pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 600ms;

  /* layers */
  --z-stage: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-skip: 1000;

  --radius: 14px;
  --maxw: 1200px;
  --nav-h: 72px;
}

/* dark bands (hero, footer, sign, tooltip, club banner, pitch, ticker) reuse the role names */
.hero, .nav:not(.is-solid), .footer, .dev-sign, .tooltip, .cp__banner, .pitch, .ticker,
.rec-spot, .rec-board, .final-stage, .cp-derby {
  --text: #fbf7ee;
  --muted: #d5dbe6;
  --faint: #a9b4c6;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.26);
  --accent: #ff5468;
  --on-accent: #0b1f3a;
  --pos: #e6c47a;
  --on-pos: #0b1f3a;
  --neg: #ff5468;
  --gold: #e6c47a;
  --shade: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: var(--z-skip);
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s3);
  font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}

/* ================= NAV ================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background var(--t-med), backdrop-filter var(--t-med), box-shadow var(--t-med);
}
.nav.is-solid {
  background: rgba(var(--paper-rgb), 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 3px 0 -1px var(--ink);
}
.nav__inner {
  max-width: 1440px; margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s6); padding: 0 var(--s5);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__ball { width: 30px; height: 30px; animation: spin 6s linear infinite; }
.brand__word { font-family: var(--f-display); font-size: 26px; letter-spacing: 0.02em; line-height: 1; font-style: italic; }
.brand__word em { font-style: italic; color: var(--accent); margin-left: 4px; }

.nav__links { display: flex; align-items: center; gap: 13px; margin: 0 auto; }
/* dropdown groups (desktop) */
.nav__group { position: relative; }
.nav__drop { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--f-label); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px 2px; }
.nav__drop:hover, .nav__drop.is-active, .nav__group.is-open .nav__drop { color: var(--text); }
.nav__drop.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
.nav__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast); }
.nav__group.is-open .nav__chev, .nav__group:hover .nav__chev { transform: rotate(180deg); }
.nav__menu { position: absolute; top: 100%; left: -14px; min-width: 210px; padding: 8px; margin-top: 6px; display: none; flex-direction: column;
  background: rgba(var(--paper-rgb), 0.98); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
/* the panel is always light, even when the bar above it is see-through over the home video */
.nav__menu { --text: #0b1f3a; --muted: #3c4a60; --line: rgba(11, 31, 58, 0.14); --accent: #c8102e; --shade: rgba(11, 31, 58, 0.05); }
/* the bar's contents (and so the dropdowns) sit above the scroll-progress line underneath the bar */
.nav__inner { position: relative; z-index: 2; }
.nav__progress { z-index: 1; }
.nav__menu { z-index: 3; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* bridge the gap so hover doesn't drop */
.nav__group:hover .nav__menu, .nav__group.is-open .nav__menu { display: flex; }
.nav__links .nav__menu a { padding: 10px 12px; border-radius: 8px; color: var(--text); }
.nav__links .nav__menu a::after { display: none; }
.nav__links .nav__menu a:hover, .nav__links .nav__menu a:focus-visible { background: var(--shade, rgba(0,0,0,.05)); }
.nav__links .nav__menu a.is-active { color: var(--accent); }
/* collapsible groups (phone menu) */
.mm-group { border-bottom: 1px solid var(--line); }
.mm-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; cursor: pointer;
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary .nav__chev { width: 16px; height: 16px; }
.mm-group[open] summary .nav__chev { transform: rotate(180deg); }
.mm-group a { display: block; }
.mm-group a:last-child { border-bottom: 0; }
.nav__links a, .mobile-menu a {
  position: relative; text-decoration: none; white-space: nowrap;
  font-family: var(--f-label); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 10px 2px;
  transition: color var(--t-fast);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); padding: 10px 0;
}
.nav__cta svg, .cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--t-med) var(--ease-out); }
.nav__cta:hover svg, .cta:hover svg { transform: translate(3px, -3px); }

.nav__refresh { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; color: var(--text); cursor: pointer; }
.nav__refresh svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav__refresh.is-spinning svg { animation: refresh-spin .7s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
html.is-standalone .nav__refresh { display: grid; margin-left: auto; }
html.is-standalone .nav__refresh + .nav__toggle { margin-left: 0; }
.nav__toggle { display: none; width: 44px; height: 44px; background: none; border: 0; position: relative; margin-left: auto; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); transition: transform var(--t-med) var(--ease-out); }
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu[hidden] { display: none; }
/* the menu lives in the fixed nav, so cap it at the screen height and let it scroll on its own */
.mobile-menu {
  display: flex; flex-direction: column; padding: var(--s2) var(--s5) var(--s5); background: rgba(var(--paper-rgb), 0.98);
  max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mobile-menu a { flex: none; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 19px; color: var(--text); }
html.menu-open, html.menu-open body { overflow: hidden; }

.nav__progress { position: absolute; left: 0; right: 0; bottom: -12px; height: 14px; pointer-events: none; opacity: 0; transition: opacity var(--t-med); }
.nav.is-solid .nav__progress { opacity: 1; }
.nav__track { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: linear-gradient(90deg, var(--ink), var(--accent) 60%, transparent); opacity: 0.5; }
.nav__roller { position: absolute; top: 0; left: 0; width: 12px; height: 12px; will-change: transform; filter: drop-shadow(0 1px 2px rgba(11, 31, 58, 0.4)); }

/* ================= HERO ================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; align-items: end;
  padding: calc(var(--nav-h) + var(--s7)) var(--s5) var(--s8);
  overflow: hidden; isolation: isolate;
  background: var(--band);
}
.hero__stage { position: absolute; inset: 0; z-index: var(--z-stage); overflow: hidden; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.1) brightness(0.9);
  background: var(--band);
  transition: opacity 1s ease;
}
.hero__video.is-hidden { opacity: 0; }
/* tints the footage toward league purple so the neon accents sit on it */
.hero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.35), rgba(11, 31, 58, 0.12) 60%, rgba(11, 31, 58, 0.5));
  mix-blend-mode: multiply;
}
.hero__grade::before {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(55% 50% at 88% 8%, rgba(255, 244, 214, 0.22), transparent 70%),
    radial-gradient(50% 45% at 8% 0%, rgba(200, 16, 46, 0.22), transparent 70%);
}
.hero__grade::after { content: ""; position: absolute; inset: 0; background: rgba(22, 51, 94, 0.4); mix-blend-mode: color; }
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,31,58,0.85) 0%, rgba(11,31,58,0.45) 36%, rgba(11,31,58,0) 60%),
    linear-gradient(0deg, var(--band) 0%, rgba(11,31,58,0) 30%),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.45));
}

.hero__content { min-width: 0; position: relative; z-index: var(--z-content); max-width: var(--maxw); width: 100%; margin: 0 auto; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 0 rgba(255,84,104,0.7); animation: ping 1.8s var(--ease-out) infinite; }
.hero__title {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(56px, 10.5vw, 148px); line-height: 0.9; letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: rise 900ms var(--ease-out) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 120ms; }
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__sub {
  margin: var(--s4) 0 0; font-family: var(--f-label); font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  opacity: 0; animation: fade-up 700ms 450ms var(--ease-out) forwards;
}
.hero__ctas { display: flex; gap: var(--s7); margin-top: var(--s8); opacity: 0; animation: fade-up 700ms 600ms var(--ease-out) forwards; }
.cta { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 6px 0; min-height: 44px; }
.cta__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cta__hint { font-size: 14px; color: var(--muted); }
.cta:hover .cta__label { color: var(--text); }

.hero__scoreboard {
  position: absolute; z-index: var(--z-content); right: max(var(--s5), calc((100vw - var(--maxw)) / 2 + var(--s5))); bottom: var(--s8);
  width: 300px; padding: var(--s3) var(--s5) var(--s4);
  background: rgba(11, 31, 58, 0.72); border: 1px solid var(--line-2); border-radius: var(--radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; animation: fade-up 700ms 800ms var(--ease-out) forwards;
}
.sb__label {
  display: flex; align-items: center; gap: 8px; margin: var(--s3) 0 2px;
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
.sb__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.sb__label--up { color: var(--pos); }
.sb__label--up::before { background: var(--pos); }
.sb__label--down { color: var(--neg); }
.sb__label--down::before { background: var(--neg); }
.sb__list { list-style: none; margin: 0; padding: 0; }
.sb__row { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s3); align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sb__row:last-child { border-bottom: 0; }
.sb__pos { font-family: var(--f-display); color: var(--faint); }
.sb__name { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.sb__row strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.motion-toggle {
  position: absolute; z-index: var(--z-content); left: var(--s5); bottom: var(--s4);
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  background: rgba(11,31,58,0.6); border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--f-label); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle svg { width: 12px; height: 12px; fill: currentColor; }

/* paused state stops every decorative animation in the stage */
.is-paused .brand__ball { animation-play-state: paused; }

/* ================= TICKER ================= */
.ticker { display: flex; align-items: stretch; background: var(--band); color: #fbf7ee; overflow: hidden; border-top: 3px solid #c8102e; }
.ticker__tag {
  flex: none; display: grid; place-items: center; padding: 0 var(--s5);
  background: #c8102e; color: #fff; font-family: var(--f-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 30px;
}
.ticker__viewport { overflow: hidden; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { display: inline-flex; gap: var(--s7); padding: 12px 0; white-space: nowrap; animation: marquee var(--marquee, 60s) linear infinite; font-family: var(--f-label); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; }
.ticker__track span { display: inline-flex; align-items: center; gap: var(--s3); }
.ticker__track span::before { content: ""; width: 8px; height: 8px; background: #c8102e; transform: rotate(45deg); }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ================= SECTIONS ================= */
.section { position: relative; padding: var(--s9) var(--s5); max-width: calc(var(--maxw) + 48px); margin: 0 auto; }
.section--alt {
  max-width: none; background: var(--bg-2);
  padding-left: max(var(--s5), calc((100% - var(--maxw)) / 2));
  padding-right: max(var(--s5), calc((100% - var(--maxw)) / 2));
}
.section__head { margin-bottom: var(--s7); }
.section__head h2 {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 7vw, 88px); line-height: 0.95; letter-spacing: 0.01em;
}
.section__lede { margin: var(--s3) 0 0; color: var(--muted); max-width: 60ch; }
.subhead { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 28px; margin: 0 0 var(--s2); letter-spacing: 0.02em; }

/* decorative pitch-marking watermark behind section titles */
.section__head { position: relative; }
.section__head::before {
  content: ""; position: absolute; right: 0; top: -20px; width: 160px; height: 160px; border-radius: 50%;
  border: 2px solid rgba(11,31,58,0.1); pointer-events: none;
}
.section__head::after {
  content: ""; position: absolute; right: 79px; top: -20px; width: 2px; height: 160px; background: rgba(11,31,58,0.1); pointer-events: none;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ================= LEAGUE TABLE ================= */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.league-table { width: 100%; min-width: 760px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.league-table .hide-sm, .league-table .hide-md { display: table-cell; }
.league-table th.c-club, .league-table td.c-club { position: sticky; left: 0; z-index: 1; }
.league-table td.c-club { background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.league-table tbody tr:hover td.c-club { background: #f3ede1; }
.league-table th {
  padding: 14px 10px; text-align: center; background: var(--band);
  font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #d5dbe6;
}
.league-table td { padding: 12px 10px; text-align: center; border-top: 1px solid var(--line); font-weight: 600; }
.league-table .c-pos { width: 60px; }
.league-table th.c-club, .league-table td.c-club { text-align: left; }
.league-table tbody tr { position: relative; transition: background var(--t-fast); cursor: pointer; }
.league-table tbody tr:hover, .league-table tbody tr:focus-within { background: var(--shade); }
.league-table tbody tr.is-po td:first-child { box-shadow: inset 4px 0 0 var(--pos); }
.league-table tbody tr.is-spoon td:first-child { box-shadow: inset 4px 0 0 var(--neg); }
.league-table tbody tr.cut td { border-top: 2px dashed rgba(11,31,58,0.45); }
.pos { font-family: var(--f-display); font-size: 22px; font-weight: 400; }
.move { display: block; font-size: 11px; line-height: 1; margin-top: 2px; }
.club-cell { display: flex; align-items: center; gap: var(--s3); text-decoration: none; min-width: 0; }
.club-cell button { all: unset; display: flex; align-items: center; gap: var(--s3); cursor: pointer; min-width: 0; }
.club-cell button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.club-cell .name { display: block; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
.club-cell .mgr { display: block; font-size: 13px; color: var(--faint); font-weight: 500; }
.pf { color: var(--pos); }
.form { display: inline-flex; gap: 4px; }
.form i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 800; font-family: var(--f-body);
}
.form .W { background: var(--pos); color: var(--on-pos); }
.form .L { background: var(--neg); color: var(--on-accent); }
.form .T { background: var(--faint); color: var(--surface); }
.form i:last-child { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px currentColor; }
.table-legend { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0; padding: var(--s4) var(--s5); font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: var(--s3); }
.key:first-child { margin-left: 0; }
.key--ucl { background: var(--pos); }
.key--rel { background: var(--neg); }

/* crest */
.crest { display: inline-block; vertical-align: middle; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 2px rgba(11,31,58,0.12); }
.crest img, .crest svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.crest--lg { width: 96px; height: 96px; }
.crest--xl { width: 128px; height: 128px; }

/* ================= HEAD TO HEAD ================= */
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s6); align-items: center;
  padding: var(--s6); border-radius: 24px;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(11,31,58,0.07), transparent 60%),
    radial-gradient(60% 120% at 100% 50%, rgba(200,16,46,0.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
}
.versus__side { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.versus__side label { font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; color: var(--muted); }
.versus select {
  width: 100%; max-width: 280px; min-height: 48px; padding: 10px 40px 10px 14px; border-radius: 10px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23c8102e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  border: 1px solid var(--line-2); appearance: none; -webkit-appearance: none; font-weight: 600; cursor: pointer;
}
.versus select:hover { border-color: var(--accent); }
.versus__crest { transition: transform var(--t-med) var(--ease-spring); }
.versus__crest.pop { animation: pop 420ms var(--ease-spring); }
.versus__mid { text-align: center; }
.versus__score { font-family: var(--f-display); font-size: clamp(64px, 9vw, 112px); line-height: 1; font-variant-numeric: tabular-nums; display: flex; gap: 16px; align-items: center; justify-content: center; }
.versus__score i { font-style: normal; color: var(--faint); font-size: 0.6em; }
.versus__score span:first-child { color: var(--pos); }
.versus__score span:last-child { color: var(--neg); }
.versus__meta { margin: var(--s2) 0 0; color: var(--muted); font-size: 15px; }

.meetings { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
/* symmetric columns (the ::after mirrors the GW label) so the score sits dead centre */
.meetings li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto minmax(0, 1fr) 64px; gap: var(--s4); align-items: center;
  padding: 12px var(--s5); background: var(--surface); border-radius: 12px; border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.meetings .wk { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 700; font-size: 14px; }
.meetings .sc { font-family: var(--f-display); font-size: 22px; padding: 2px 12px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.meetings .a { text-align: right; }
.meetings li::after { content: ""; }
.meetings .sc { white-space: nowrap; }
.meetings .win { color: var(--pos); font-weight: 700; }

.matrix-wrap { margin-top: var(--s8); }
.matrix-note { margin: 0 0 var(--s4); color: var(--muted); font-size: 15px; }
.matrix-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.matrix { border-collapse: collapse; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: 10px; text-align: center; border: 1px solid var(--line); font-size: 15px; }
.matrix thead th { background: var(--band); }
.matrix th[scope="row"] { text-align: left; background: var(--bg-2); white-space: nowrap; font-weight: 600; }
.matrix th[scope="row"], .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line-2); }
.matrix .crest { width: 30px; height: 30px; margin: 0 auto; display: block; }
.matrix th[scope="row"] .crest { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }
.matrix td.self { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(11,31,58,0.06) 6px 12px); }
.matrix td.up { color: var(--pos); font-weight: 700; }
.matrix td.down { color: var(--neg); font-weight: 700; }
.matrix td.even { color: var(--muted); }
.pending-note, .matrix-empty { margin: var(--s4) 0 0; padding: var(--s4) var(--s5); border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); }
.pending-note code, .matrix-empty code { color: var(--accent); }

/* ================= CLUBS ================= */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }
.club-card {
  position: relative; display: grid; gap: var(--s4); padding: var(--s5); text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
  opacity: 0; transform: translateY(20px) scale(0.97);
}
.club-card.is-in { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), border-color var(--t-med), box-shadow var(--t-med); }
.club-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 96px;
  background: linear-gradient(135deg, var(--c1, var(--band)), var(--c2, var(--neg)));
  opacity: 0.35; transition: opacity var(--t-med);
}
.club-card:hover, .club-card[aria-pressed="true"] { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 40px -18px rgba(11,31,58,0.45); }
.club-card:hover::before { opacity: 0.55; }
.club-card[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.club-card > * { position: relative; }
.club-card .top { display: flex; align-items: center; justify-content: space-between; }
.club-card .rank { font-family: var(--f-display); font-size: 44px; line-height: 1; opacity: 0.9; }
.club-card .cc-name { display: block; margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.club-card .mgr { color: var(--muted); font-size: 14px; margin-top: 2px; }
.club-card .stats { display: flex; gap: var(--s5); font-variant-numeric: tabular-nums; }
.club-card .stats > span { display: grid; }

.club-card .stats b { white-space: nowrap; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.club-card .stats small { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--faint); font-weight: 700; }

.club-profile {
  margin-top: var(--s6); border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); animation: fade-up 500ms var(--ease-out);
}
.cp__banner {
  position: relative; display: flex; align-items: center; gap: var(--s5); padding: var(--s6);
  background: linear-gradient(120deg, var(--c1, var(--band)), var(--c2, var(--neg)));
}
.cp__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,58,0.7), rgba(11,31,58,0.15)); }
.cp__banner > * { position: relative; z-index: 1; }
.cp__banner h3 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.cp__banner p { margin: 6px 0 0; font-weight: 600; }
.cp__close {
  margin-left: auto; align-self: flex-start; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11,31,58,0.5); border: 1px solid var(--line-2); display: grid; place-items: center;
}
.cp__close:hover { background: rgba(11,31,58,0.85); }
.cp__close svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
.cp__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
.cp__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); grid-column: 1 / -1; }
.kpi { padding: var(--s4); background: var(--bg-2); border-radius: 12px; border: 1px solid var(--line); }
.kpi b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--muted); font-weight: 700; }

/* formation pitch */
.formation { position: relative; }
.formation__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
.formation__label b { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--accent); }
.pitch {
  position: relative; min-height: 520px; border-radius: 16px; overflow: hidden; gap: 14px;
  background: repeating-linear-gradient(180deg, #0c5c2d 0 10%, #0f6c36 10% 20%);
  border: 2px solid rgba(255,255,255,0.55);
  display: flex; flex-direction: column-reverse; justify-content: space-around; padding: 36px 2% 44px;
}
/* Pitch markings: our half, halfway line along the top, our goal at the bottom (as in media/originals/soccer_pitch.png).
   Sizes are real-pitch metres scaled to the pitch's width (cqw), so circles stay round at any height:
   68 m wide = the field between the touchlines (94cqw, 3cqw grass outside the lines), 1 m = 94/68 cqw. */
.pitch { container-type: inline-size; border-color: rgba(255,255,255,0.25); --pm: 2px solid rgba(255,255,255,0.7); --m: 3cqw; }
.pitch__lines { position: absolute; inset: 0; pointer-events: none; }
.pitch__lines > span { position: absolute; box-sizing: border-box; }
.pm-field { left: var(--m); right: var(--m); top: 0; bottom: var(--m); border: var(--pm); }                         /* touchlines, goal line, halfway line */
.pm-cc { left: 50%; top: 0; width: 25.3cqw; aspect-ratio: 1; border: var(--pm); border-radius: 50%; transform: translate(-50%, -50%); }   /* centre circle, r 9.15 m */
.pm-cs { left: 50%; top: 0; width: 1.3cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.8); transform: translate(-50%, -50%); }
.pm-box { left: 50%; bottom: var(--m); width: 55.7cqw; height: 22.8cqw; border: var(--pm); border-bottom: 0; transform: translateX(-50%); }  /* 40.3 x 16.5 m */
.pm-six { left: 50%; bottom: var(--m); width: 25.3cqw; height: 7.6cqw; border: var(--pm); border-bottom: 0; transform: translateX(-50%); }   /* 18.3 x 5.5 m */
.pm-spot { left: 50%; bottom: calc(var(--m) + 15.2cqw); width: 1.3cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.8); transform: translate(-50%, 50%); }  /* 11 m */
.pm-d { left: 50%; bottom: calc(var(--m) + 2.55cqw); width: 25.3cqw; aspect-ratio: 1; border: var(--pm); border-radius: 50%; transform: translateX(-50%);
  clip-path: inset(0 0 calc(25.3cqw - 5.05cqw) 0); }                                                             /* the D: r 9.15 m round the spot, outside the box */
.pm-goal { left: 50%; bottom: calc(var(--m) - 2.4cqw); width: 10.1cqw; height: 2.4cqw; border: var(--pm); border-top: 0; transform: translateX(-50%); }  /* 7.32 m goal, behind the line */
.pm-cor { bottom: calc(var(--m) - 2.4cqw); width: 4.8cqw; aspect-ratio: 1; border: var(--pm); border-radius: 50%; }
.pm-cor--l { left: calc(var(--m) - 2.4cqw); clip-path: inset(0 0 50% 50%); }
.pm-cor--r { right: calc(var(--m) - 2.4cqw); clip-path: inset(0 50% 50% 0); }
.pitch__row { position: relative; z-index: 1; display: flex; justify-content: space-evenly; }
.pl { display: grid; justify-items: center; gap: 4px; width: 22%; text-align: center; opacity: 0; animation: drop-in 480ms var(--ease-spring) forwards; }
.pl__shirt { width: 38px; height: 38px; }
.pl__shirt path { fill: var(--c1, var(--band)); stroke: #fff; stroke-width: 1.5; }
.pl__name {
  font-size: 12px; font-weight: 700; line-height: 1.15; padding: 2px 6px; border-radius: 4px;
  background: rgba(11,31,58,0.88); max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual;
}
.pl__club { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: rgba(255,255,255,0.85); font-weight: 600; }
.club-logo { width: 14px; height: 14px; object-fit: contain; flex: none; }

.squad h4 { margin: 0 0 var(--s3); font-family: var(--f-display); font-weight: 400; font-size: 26px; text-transform: uppercase; }
.squad ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.squad li { display: grid; grid-template-columns: 38px 32px 1fr auto; gap: var(--s3); align-items: center; padding: 8px 10px; border-radius: 8px; }
.squad li:nth-child(odd) { background: var(--shade); }
.squad .posb { font-family: var(--f-label); font-weight: 700; font-size: 13px; text-align: center; padding: 2px 0; border-radius: 4px; color: var(--ink); }
.posb.GK { background: #d9b45a; }
.posb.D { background: var(--blue); color: #fff; }
.posb.M { background: #2e6b45; color: #fff; }
.posb.F { background: var(--neg); color: #fff; }
.squad .nm { font-weight: 600; overflow-wrap: anywhere; }
.squad .nm small { display: flex; align-items: center; gap: 4px; color: var(--faint); font-weight: 500; font-size: 13px; }
.squad .tag { font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.squad .tag.inj { color: var(--neg); }
.squad .tag.xi { color: var(--pos); }

/* ================= TRANSFERS ================= */
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chip {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.feed__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  animation: fade-up 420ms var(--ease-out) both;
}
.feed__item .body { min-width: 0; }
.feed__type {
  display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 4px;
  font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.feed__type.waiver { background: var(--blue); color: #fff; }
.feed__type.free_agent { background: var(--ink); color: var(--bg); }
.feed__type.trade { background: var(--accent); color: #fff; }
.feed__head { font-weight: 700; line-height: 1.35; }
.moves { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 15px; }
.moves span { display: inline-flex; align-items: center; gap: 6px; }
.moves .in { color: var(--pos); }
.moves .out { color: var(--neg); }
.moves svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.moves b { color: var(--text); font-weight: 600; }
.feed__side { text-align: right; font-variant-numeric: tabular-nums; }
.feed__fee { font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--gold); }
.feed__fee small { font-family: var(--f-label); font-size: 12px; letter-spacing: 0.1em; color: var(--faint); display: block; margin-top: 4px; }
.feed__when { font-size: 13px; color: var(--faint); margin-top: 4px; }
.btn-more {
  display: block; margin: var(--s5) auto 0; min-height: 48px; padding: 10px 28px; border-radius: 999px;
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--f-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-more:hover { background: var(--accent); color: var(--on-accent); }
.empty { padding: var(--s6); text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 16px; }

/* ================= FOOTER ================= */
.footer { border-top: 4px solid #c8102e; background: var(--band); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s7) var(--s5); display: grid; gap: var(--s2); color: var(--faint); font-size: 14px; }
.footer p { margin: 0; }

/* ================= UTIL ================= */
.skeleton { height: 280px; border-radius: 12px; background: linear-gradient(90deg, rgba(11,31,58,0.04) 25%, rgba(11,31,58,0.09) 50%, rgba(11,31,58,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.error-box { padding: var(--s5); border-radius: 16px; border: 1px solid var(--neg); background: rgba(200,16,46,0.07); }
.error-box button { margin-top: var(--s3); min-height: 44px; padding: 8px 20px; border-radius: 999px; background: var(--neg); border: 0; color: #fff; font-weight: 700; }

/* ================= KEYFRAMES ================= */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,84,104,0.7); } 100% { box-shadow: 0 0 0 10px rgba(255,84,104,0); } }

/* ================= IN DEVELOPMENT SIGN ================= */
.dev-sign {
  position: absolute; z-index: var(--z-content);
  top: calc(var(--nav-h) + 4px); right: max(var(--s5), calc((100vw - var(--maxw)) / 2 + var(--s5)));
  width: min(480px, 42vw);
  padding-top: 34px;
  transform-origin: 50% 0;
  animation: sign-drop 900ms 200ms var(--ease-spring) both, sign-swing 7s 1.1s ease-in-out infinite;
}
.dev-sign__cable { position: absolute; top: 0; width: 2px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.55)); }
.dev-sign__cable--l { left: 18%; }
.dev-sign__cable--r { right: 18%; }
.dev-sign__board {
  position: relative; display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: var(--s4) var(--s5) var(--s5);
  background: #0b1f3a;
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #e6c47a 0 14px, #0b1f3a 14px 28px) 10;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
}
.dev-sign__board::before, .dev-sign__board::after {
  /* bolts */
  content: ""; position: absolute; top: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8a8a8a);
}
.dev-sign__board::before { left: 8px; }
.dev-sign__board::after { right: 8px; }
.dev-sign__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.dev-sign__kicker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dev-sign__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 0.92;
  font-size: clamp(44px, 5.2vw, 78px); letter-spacing: 0.01em; color: #fff;
  text-shadow: none;
}
.dev-sign__sub { max-width: 34ch; font-size: 15px; color: var(--muted); }
@keyframes sign-drop { from { transform: translateY(-120%) rotate(-10deg); } to { transform: rotate(-2deg); } }
@keyframes sign-swing { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(1.5deg); } }
.is-paused .dev-sign { animation-play-state: paused; }

/* ================= SORTABLE TABLE ================= */
.table-scroll { overflow-x: auto; }
.league-table .sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border-radius: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.league-table .sort:hover, .league-table .sort.is-on { color: #fff; }
.league-table .sort:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.league-table .sort::after { content: ""; width: 0; height: 0; border: 4px solid transparent; opacity: 0.35; border-top-color: currentColor; margin-top: 5px; }
.league-table th[aria-sort="descending"] .sort::after { opacity: 1; border-top-color: #ff5468; }
.league-table th[aria-sort="ascending"] .sort::after { opacity: 1; border-top-color: transparent; border-bottom-color: #ff5468; margin-top: -5px; }
.league-table .rec { white-space: nowrap; }
.dim { color: var(--faint); }

/* ================= McQUEEN CUP ================= */
.section--cup { background: radial-gradient(70% 60% at 50% 0%, rgba(176,138,62,0.12), transparent 70%); }
.bracket { position: relative; display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: var(--s3); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.bracket > * { position: relative; z-index: 1; }
/* connector lines drawn by drawBracketLines() */
.bracket__lines { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.bracket__lines path { fill: none; stroke: rgba(11, 31, 58, 0.35); stroke-width: 2; stroke-linejoin: round; }
.bracket__lines path.is-through { stroke: #b08a3e; stroke-width: 3; }
.bracket-hint { display: none; margin: 0 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.bracket__round { flex: 1 0 240px; display: flex; flex-direction: column; scroll-snap-align: start; }
.bracket__name { margin: 0 0 var(--s4); text-align: center; font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.bracket__ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: var(--s4); }
.bracket__link { flex: 0 0 36px; }
.tie { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; }
.bracket__round:last-child .tie { border: 2px solid #b08a3e; }
.tie--tbd { border-style: dashed; background: transparent; }
.tie__row { display: grid; grid-template-columns: 28px 1fr auto 16px; gap: 10px; align-items: center; padding: 8px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.tie__row .crest, .tie__crest { width: 28px; height: 28px; }
.tie__crest { border-radius: 50%; border: 1px dashed var(--line-2); }
.tie__name { font-weight: 600; min-width: 0; overflow-wrap: normal; word-break: normal; line-height: 1.25; }
.tie--tbd .tie__name, .tie--tbd .tie__agg { color: var(--faint); }
.tie__agg { font-family: var(--f-display); font-size: 18px; }
.tie__row svg { width: 16px; height: 16px; fill: none; stroke: var(--pos); stroke-width: 2.4; }
.tie__row.is-win { background: var(--shade); }
.tie__row.is-win .tie__name { color: var(--pos); }
.tie__row.is-out { opacity: 0.55; }
.tie__meta { margin: 4px 8px 4px; font-size: 13px; color: var(--faint); }

/* ---- marquee calendar ---- */
.cal { margin-top: var(--s8); }
.cal .subhead { font-size: clamp(32px, 4vw, 44px); margin: 0; }
.cal__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 6px; }
.cal__row { display: grid; grid-template-columns: 84px minmax(120px, 170px) minmax(0, 1fr); gap: var(--s4); align-items: center;
  padding: 10px var(--s4); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cal__row.is-next { border: 2px solid #b08a3e; background: #fff; }
.cal__row.is-played { opacity: 0.85; }
.cal__gw { display: grid; text-align: center; }
.cal__gw small { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cal__gw b { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; }
.cal__label { display: grid; font-family: var(--f-label); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
.cal__label small { font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--faint); }
.cal__row.is-next .cal__label small { color: var(--accent); }
.cal__match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.cal__match > i { font-style: normal; font-family: var(--f-display); color: var(--faint); }
.cal__club { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cal__club .crest, .cal__club .tie__crest { width: 28px; height: 28px; flex: none; }
.cal__club b { font-weight: 600; overflow-wrap: break-word; }
.cal__club.is-tbd b { color: var(--faint); font-weight: 500; }
.cal__club em { font-style: normal; font-family: var(--f-display); font-size: 18px; }
.cal__club.is-win b, .cal__club.is-win em { color: var(--pos); font-weight: 700; }
.badge--fav { display: inline-flex; align-items: center; gap: 5px; color: #fbf7ee; }
.badge--fav .club-logo { width: 14px; height: 14px; }

/* ================= MATCHUPS ================= */
.mu-weeks { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: var(--s5); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  /* fade the edges so it's clear the row keeps going */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
.mu-weeks .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; scroll-snap-align: center; }
.mu-weeks .chip:first-child { margin-left: 8px; }
.mu-weeks .chip:last-child { margin-right: 24px; }
.mu-dot { width: 7px; height: 7px; border-radius: 50%; background: #b08a3e; }
.mu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.mu-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; min-width: 0; box-shadow: 0 1px 0 rgba(11, 31, 58, 0.06); }
.mu-card.is-derby { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.12), 0 14px 30px -16px rgba(200, 16, 46, 0.55); }
.mu-derby { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 8px var(--s5);
  background: linear-gradient(110deg, #0b1f3a 0 58%, #c8102e 58% 100%); color: #fbf7ee;
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.mu-derby b { font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; text-transform: none; }
.mu-derby small { font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.mu-card__head { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.mu-card__head:hover { background: var(--shade); }
.mu-card__head:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.mu-card.is-open .mu-card__head { border-bottom: 3px double var(--ink); }
.mu-side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "crest name" "score score"; gap: 6px 10px; align-items: center; min-width: 0; }
.mu-side--away { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name crest" "score score"; text-align: right; }
.mu-side .crest { grid-area: crest; width: 36px; height: 36px; }
.mu-side__name { grid-area: name; font-weight: 700; font-size: 15px; line-height: 1.2; overflow-wrap: break-word; min-width: 0; color: var(--muted); }
.mu-side__name small { display: block; font-weight: 500; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mu-side__score { grid-area: score; display: grid; }
.mu-side__score b { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 4vw, 44px); line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; }
.mu-side__score small { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mu-side.is-win .mu-side__score b, .mu-side.is-win .mu-side__name { color: var(--text); }
.mu-card__mid { display: grid; justify-items: center; gap: 8px; }
.mu-card__ft { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--bg); background: var(--ink); padding: 4px 8px; border-radius: 6px; }
.mu-card__chev { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t-fast); }
.mu-card.is-open .mu-card__chev { transform: rotate(-135deg); }
.mu-card__body[hidden] { display: none; }
.mu-card__motm { margin: 0; padding: 10px var(--s5); background: var(--surface-2); font-size: 14px; color: var(--muted); }
.mu-card__motm span { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.mu-card__motm b { color: var(--text); font-variant-numeric: tabular-nums; }
.mu-card__none { margin: 0; padding: var(--s4) var(--s5); color: var(--muted); font-size: 14px; }
.mu-sheets { display: grid; grid-template-columns: 1fr 1fr; }
.mu-sheet { padding: var(--s2) var(--s3) var(--s4); min-width: 0; }
.mu-sheet + .mu-sheet { border-left: 1px solid var(--line); }
.mu-sheet__list { list-style: none; margin: 0; padding: 0; }
.mu-line { margin: var(--s3) 6px 2px; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.mu-p { border-radius: 8px; }
.mu-p__btn { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; }
.mu-p__btn:hover { background: var(--shade); }
.mu-p__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mu-p__photo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 11px; color: var(--muted); }
.mu-p__photo.has-photo { background-color: #fff; }
.mu-p__photo.has-photo span { display: none; }
.mu-p__name { font-size: 14px; font-weight: 600; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-p__name small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }
.mu-p__pts { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2; }
.mu-p__pts small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }
.mu-p.is-blank .mu-p__pts { color: var(--faint); font-weight: 500; }
.mu-p.is-bench .mu-p__name, .mu-p.is-bench .mu-p__pts { color: var(--muted); font-weight: 500; }
.mu-p.is-bench .mu-p__photo { opacity: 0.75; }
.mu-line--bench { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.mu-line--bench small { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
.mu-p.is-star { background: rgba(176, 138, 62, 0.16); box-shadow: inset 3px 0 0 #b08a3e; }
.mu-p.is-star .mu-p__name small { color: var(--gold); font-weight: 700; }

/* ---- player drawer ---- */
.pd { width: min(780px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px -20px rgba(11,31,58,0.55); }
.pd::backdrop { background: rgba(11, 31, 58, 0.55); }
.pd__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.pd__close:hover { color: var(--text); border-color: var(--ink); }
.pd__head { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s8) var(--s4) var(--s5); border-bottom: 3px double var(--ink); }
.pd__photo { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 20px; color: var(--muted); }
.pd__photo.has-photo { background-color: #fff; }
.pd__photo.has-photo span { display: none; }
.pd__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.05; }
.pd__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pd__meta .crest { width: 18px; height: 18px; }
.pd__body { padding: var(--s4) var(--s5) var(--s5); }
.pd__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pd__tiles .stat-tile { padding: var(--s3); }
.pd__tiles .stat-tile__v { font-size: 30px; }
.pd__sub { margin: var(--s5) 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pd__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin: var(--s5) 0 var(--s2); }
.pd__bar .pd__sub { margin: 0; }
.pd__bar .chip { min-height: 32px; }
.pd__table td, .pd__table th { padding: 7px 8px; }
.pd__table thead th { white-space: nowrap; }
.pd__table abbr { text-decoration: none; }
.pd__table td.is-zero { color: var(--faint); opacity: 0.6; }
.pd__table td.is-neg { color: var(--neg); }
.pd__table th[scope="row"], .pd__table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.pd__table td.pd__dnp { text-align: left; color: var(--faint); font-style: italic; }
.pd__table thead th:last-child { text-align: left; }
.pd__table .pd__stats { text-align: left; white-space: normal; font-size: 13px; color: var(--muted); min-width: 160px; }
.pd__table tr.is-dnp td, .pd__table tr.is-dnp th { color: var(--faint); }

/* ================= THE GAZETTE ================= */
.gz-front { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.gz-side { display: grid; gap: var(--s4); }
.gz-story { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: var(--s5); min-width: 0; box-shadow: 0 1px 0 rgba(11, 31, 58, 0.06); scroll-margin-top: calc(var(--nav-h) + 16px); }
.gz-story:target { box-shadow: 0 0 0 3px var(--accent); }
.gz-story--lead { padding: var(--s6); border-top: 6px solid var(--ink); }
.gz-story.is-derby { border-color: var(--accent); }
.gz-story__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.gz-story__tag em { font-style: normal; color: var(--bg); background: var(--ink); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.08em; }
.gz-story__head { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.08; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: break-word; }
.gz-story--lead .gz-story__head { font-size: clamp(34px, 4.4vw, 58px); line-height: 1; }
.gz-story__score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: var(--s4) 0 0; font-size: 15px; }
.gz-story__score .crest { width: 28px; height: 28px; }
.gz-story__score b { font-weight: 700; }
.gz-story__score .gz-count { font-family: var(--f-display); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.gz-story__score i { font-style: normal; color: var(--faint); }
.gz-story__body { margin: var(--s3) 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.gz-story--lead .gz-story__body { font-size: 17px; }
.gz-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.gz-btn { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.gz-btn:hover { filter: brightness(1.08); }
.gz-btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.gz-btn--ghost:hover { border-color: var(--ink); filter: none; }
.gz-btn:disabled { opacity: 0.75; cursor: default; }

.gz-awards { margin-top: var(--s8); }
.gz-awards .subhead, .gz-totw .subhead { margin: 0 0 var(--s4); }
.gz-award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }
.gz-award { display: grid; gap: 6px; align-content: start; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; border-top: 4px solid var(--gold); }
.gz-award--top, .gz-award--potw { border-top-color: var(--ink); }
.gz-award--spoon, .gz-award--flop, .gz-award--under { border-top-color: var(--accent); }
.gz-award__title { margin: 0; font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.gz-award__who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
.gz-award__who .crest { width: 30px; height: 30px; }
.gz-award__who small { flex-basis: 100%; font-size: 12px; color: var(--faint); }
.gz-award__photo { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 12px; color: var(--muted); }
.gz-award__photo.has-photo { background-color: #fff; }
.gz-award__photo.has-photo span { display: none; }
.gz-award__stat { margin: 0; font-family: var(--f-display); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.gz-award__blurb { margin: 0; font-size: 13px; color: var(--muted); }

.gz-totw { margin-top: var(--s8); }
#gzRoot > .gz-totw:first-child { margin-top: 0; }
.gz-totw__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.gz-totw__head .subhead { margin: 0; }
.gz-totw__head p { margin: 0; color: var(--muted); }
.gz-totw__head p b { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--accent); }
.gz-pitch { max-width: 760px; min-height: 560px; }
.gz-pitch .pl__proj { background: #e6c47a; color: #0b1f3a; }
.gz-xi-tabs { margin-bottom: var(--s4); }

/* home: latest from the Gazette */
.home-news { padding-bottom: 0; }
.home-news__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); max-width: var(--maxw); margin: 0 auto var(--s4); }
.home-news__head .subhead { margin: 0; }
.hn { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); max-width: var(--maxw); margin: 0 auto; }
.hn-item { display: grid; align-content: start; gap: 8px; padding: var(--s4) var(--s5); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.hn-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(11, 31, 58, 0.45); }
.hn-item--lead { background: var(--band); border-color: var(--band); color: #fbf7ee; }
.hn-item.is-derby { box-shadow: inset 0 0 0 2px var(--accent); }
.hn-item__tag { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.hn-item--lead .hn-item__tag { color: #ff5468; }
.hn-item__head { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.hn-item--lead .hn-item__head { font-size: clamp(26px, 2.6vw, 34px); }
.hn-item__score { font-size: 13px; color: var(--faint); }
.hn-item--lead .hn-item__score { color: #a9b4c6; }

/* matchup card headline strip */
.mu-card__news { margin: 0; border-top: 1px solid var(--line); }
.mu-card__news a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px var(--s5); text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; line-height: 1.3; }
.mu-card__news a:hover { background: var(--shade); }
.mu-card__news span { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mu-card.is-open .mu-card__news { border-bottom: 1px solid var(--line); }

/* motion: a light sweep across derby banners */
.mu-derby, .gz-story__tag em { position: relative; overflow: hidden; }
.mu-derby::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); animation: flare 5s ease-in-out infinite; pointer-events: none; }
@keyframes flare { 0%, 55% { left: -40%; } 85%, 100% { left: 120%; } }

/* ================= VICTORY ROAD ================= */
.vr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.vr__label { margin: 0 0 var(--s4); font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.vr__season {
  position: relative; display: grid; justify-items: center; gap: var(--s2); text-align: center; overflow: hidden;
  padding: var(--s6) var(--s5); border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(60% 70% at 50% 30%, rgba(176,138,62,0.16), transparent 70%), var(--surface);
}
.vr__season + .vr__season { margin-top: var(--s4); }
.vr__year {
  position: absolute; left: var(--s5); top: var(--s3); font-family: var(--f-display); font-size: 64px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(11,31,58,0.2);
}
.vr__trophy { width: 88px; height: 100px; color: #b08a3e; }
.vr__trophy--img { width: auto; height: 132px; filter: drop-shadow(0 8px 12px rgba(11, 31, 58, 0.3)); }
.vr__season:not(.is-won) .vr__trophy { opacity: 0.55; }
.vr__champ { display: flex; align-items: center; gap: var(--s3); }
.vr__champ b { font-family: var(--f-display); font-weight: 400; font-size: 34px; text-transform: uppercase; line-height: 1.05; }
.vr__ru { margin: 0; color: var(--muted); }
.vr__status { margin-top: var(--s2); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(138,106,36,0.5); color: var(--gold); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ================= ANALYTICS ================= */
.charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s4); }
.chart-card { margin: 0; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; min-width: 0; }
.chart-title { margin: 0; font-size: 18px; font-weight: 700; }
.chart-sub { margin: 4px 0 var(--s5); color: var(--muted); font-size: 14px; }
.chart-note { margin: var(--s3) 0 0; font-size: 13px; color: var(--faint); }
.k { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 var(--s3); }
.k:first-child { margin-left: 0; }
.k--act { background: var(--pos); }
.k--pot, .k--best { border: 1.5px solid rgba(11,31,58,0.5); }
.k--best { border-style: dashed; }

.lc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc__row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; gap: var(--s3); align-items: center; padding: 6px 8px; border-radius: 8px; cursor: default; }
.lc__row:hover, .lc__row:focus-visible { background: var(--shade); }
.lc__name { font-size: 14px; font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.lc__track { position: relative; height: 18px; }
.lc__pot, .lc__act { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.lc__pot { border: 1.5px solid rgba(11,31,58,0.4); border-left: 0; }
.lc__act { background: var(--pos); top: 2px; bottom: 2px; }
.lc__val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc__val small { color: var(--faint); font-weight: 500; }
.lc__row.is-focus { background: var(--shade); box-shadow: inset 3px 0 0 var(--ink); }
.lc__row.is-focus .lc__name { font-weight: 800; }

/* ---- week by week ---- */
section.wk { margin-top: var(--s8); }
.wk .subhead { margin: 0; }
.wk__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.stat-tile { display: grid; gap: 2px; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.stat-tile__label { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.stat-tile__v { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-tile__sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.charts--wk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chart-card--wide { grid-column: 1 / -1; }
.chart-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.chart-toggle {
  flex: none; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--line-2);
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.chart-toggle:hover, .chart-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--ink); }
.viz[hidden], .viz-table[hidden] { display: none; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--s3); font-size: 13px; color: var(--muted); }
.viz-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sw--line { width: 16px; height: 2px; border-radius: 1px; }
.sw--avg { background: var(--ink); }
.sw--bg { background: rgba(11,31,58,0.22); }
.sw--tick { width: 14px; height: 2px; border-radius: 1px; background: var(--ink); }
.sw--outline { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid rgba(11,31,58,0.5); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; font-size: 13px; color: var(--faint); padding-bottom: var(--s2); }
.data-table th, .data-table td { padding: 8px 10px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.data-table thead th { border-top: 0; font-family: var(--f-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.data-table th[scope="row"], .data-table thead th:first-child { text-align: left; font-weight: 600; white-space: normal; }

/* shared svg axis pieces: solid hairline grid, solid crosshair */
.ax__grid { stroke: rgba(11,31,58,0.1); stroke-width: 1; }
.ax__t { fill: var(--faint); font-size: 12px; font-family: var(--f-body); }
.ax__cross { stroke: rgba(11,31,58,0.45); stroke-width: 1; }
.ax__hit { fill: transparent; }

.sc { width: 100%; height: auto; display: block; overflow: visible; }
.sc__bg { fill: none; stroke: rgba(11,31,58,0.16); stroke-width: 1.5; stroke-linejoin: round; }
.sc__avg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; opacity: 0.7; }
.sc__me { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sc__dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.sc__lbl { font-size: 13px; font-weight: 700; fill: var(--text); font-family: var(--f-body); }
.sc__lbl--avg { font-weight: 500; fill: var(--muted); }

.lk { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lk__row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 52px; gap: var(--s3); align-items: center; min-height: 32px; padding: 4px 8px; border-radius: 8px; }
.lk__row:hover, .lk__row:focus-visible { background: var(--shade); }
.lk__row.is-focus { background: var(--shade); box-shadow: inset 3px 0 0 var(--ink); }
.lk__row.is-focus .lk__name { font-weight: 800; }
.lk__name { font-size: 14px; font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.lk__track { position: relative; height: 16px; }
.lk__zero { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: rgba(11,31,58,0.35); }
.lk__bar { position: absolute; top: 0; bottom: 0; }
.lk__bar.is-pos { border-radius: 0 4px 4px 0; }
.lk__bar.is-neg { border-radius: 4px 0 0 4px; }
.lk__val { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.bc { display: flex; gap: 10px; align-items: stretch; }
.bc__col { flex: 1 1 0; min-width: 32px; display: grid; grid-template-rows: 200px auto; gap: 6px; border-radius: 8px; padding: 4px 2px; }
.bc__col:hover, .bc__col:focus-visible { background: var(--shade); }
.bc__plot { position: relative; border-bottom: 1px solid rgba(11,31,58,0.35); }
.bc__bar { position: absolute; left: 22%; right: 22%; bottom: 0; border-radius: 4px 4px 0 0; }
.bc__bar em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.bc__tick { position: absolute; left: 10%; right: 10%; height: 2px; margin-bottom: -1px; background: var(--ink); box-shadow: 0 0 0 1px var(--surface); }
.bc__x { text-align: center; font-size: 12px; color: var(--faint); }

.hm-scroll { overflow-x: auto; }
.hm { display: grid; grid-template-columns: minmax(130px, 200px) repeat(var(--cols), minmax(40px, 1fr)) 64px; gap: 2px; align-items: center; min-width: min-content; }
.hm__x { text-align: center; font-size: 12px; color: var(--faint); padding-bottom: 4px; }
.hm__y { font-size: 14px; font-weight: 600; padding-right: var(--s2); overflow-wrap: break-word; min-width: 0; }
.hm__y.is-focus, .hm__avg.is-focus { font-weight: 800; }
.hm__c { height: 32px; border-radius: 4px; }
.hm__c.is-focus { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); position: relative; z-index: 1; }
.hm__c.is-empty { background: var(--surface-2); }
.hm__avg { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm__key { display: flex; align-items: center; gap: 2px; margin: var(--s4) 0 0; font-size: 12px; color: var(--muted); }
.hm__key i { width: 28px; height: 10px; }
.hm__key i:first-of-type { border-radius: 3px 0 0 3px; }
.hm__key i:last-of-type { border-radius: 0 3px 3px 0; }
.hm__key span { padding: 0 6px; font-variant-numeric: tabular-nums; }

.rk__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.rk__chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.rk__chip:hover, .rk__chip[aria-pressed="true"] { color: var(--text); border-color: var(--c); }
.rk__chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--c); }
.rk__chip .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rk { width: 100%; height: auto; display: block; overflow: visible; }
.rk__line { fill: none; stroke: rgba(11,31,58,0.16); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--t-fast); }
.rk__dot { fill: rgba(11,31,58,0.22); stroke: var(--surface); stroke-width: 2; }
.rk__series.is-on .rk__line { stroke: var(--c); stroke-width: 2.5; }
.rk__series.is-on .rk__dot { fill: var(--c); }
.tt-row.is-me { color: var(--text); font-weight: 700; }

.tooltip {
  position: fixed; z-index: 2000; pointer-events: none; display: grid; gap: 2px; max-width: 280px;
  padding: 10px 12px; border-radius: 10px; background: #0b1f3a; border: 1px solid var(--line-2);
  box-shadow: 0 12px 30px -10px rgba(11,31,58,0.5); font-size: 13px; color: var(--muted);
}
.tooltip[hidden] { display: none; }
.tooltip b { color: var(--text); font-size: 14px; margin-bottom: 2px; }
.tooltip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.tt-row { display: flex; align-items: center; gap: 6px; }
.tt-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ================= CLUB PROFILE EXTRAS ================= */
.cp__id { min-width: 0; }
.cp__id p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cp__badges { margin-top: 10px !important; }
.badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(11,31,58,0.6); border: 1px solid var(--line-2); }
.badge--won { color: var(--pos); border-color: var(--pos); }
.badge--lost { color: var(--neg); border-color: var(--neg); }
.badge--live { color: var(--gold); border-color: var(--gold); }
.badge--tbd { color: var(--muted); }
.cp__groups { grid-column: 1 / -1; }
.cp__glabel { margin: var(--s4) 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cp__glabel:first-child { margin-top: 0; }
.kpi__note { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.cp__wide { grid-column: 1 / -1; }
.cp__block { min-width: 0; }
.spark { width: 100%; height: auto; display: block; }
.spark__axis { stroke: var(--line-2); }
.spark__line { fill: none; stroke: var(--pos); stroke-width: 2; stroke-linejoin: round; }
.spark__best { fill: none; stroke: rgba(11,31,58,0.45); stroke-width: 2; stroke-dasharray: 5 4; }
.spark__dot { fill: var(--pos); stroke: var(--surface); stroke-width: 2; }
.spark__lbl { fill: var(--faint); font-size: 11px; text-anchor: middle; }
.spark__key { margin: var(--s2) 0 0; font-size: 13px; color: var(--muted); }
.nc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.nc__item { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; padding: var(--s4); border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.nc__item small { grid-column: 1 / -1; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.nc__item--nem small { color: var(--neg); }
.nc__item--cup small { color: var(--pos); }
.nc__item b { overflow-wrap: break-word; min-width: 0; }
.nc__item span:last-child { font-family: var(--f-display); font-size: 24px; }

.pl__photo {
  position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c1, var(--band)) center 6% / 150% auto no-repeat; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  font-family: var(--f-display); font-size: 15px;
}
.pl__photo.has-photo span, .sq__photo.has-photo span { display: none; }
.pl__proj { margin-top: -10px; position: relative; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.formation__note { margin: var(--s2) 0 0; font-size: 13px; color: var(--faint); }
.formation__hist { margin: var(--s3) 0 0; font-size: 14px; color: var(--muted); }
.formation__hist b { color: var(--text); }
.formation__hist small { color: var(--faint); }
.sq__photo { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2) center 6% / 150% auto no-repeat; }
.pl__photo.has-photo, .sq__photo.has-photo { background-color: #fff; }
.h2h-mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.h2h-mini td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.h2h-mini td:first-child { display: flex; align-items: center; gap: 10px; }
.h2h-mini .crest { width: 26px; height: 26px; }
.h2h-mini .r { text-align: right; font-weight: 700; }
.rt { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); align-items: center; padding: var(--s4); border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.rt__fee { grid-row: span 2; font-family: var(--f-display); font-size: 40px; color: var(--gold); line-height: 1; }
.rt b { font-size: 18px; }
.rt small { color: var(--faint); }

/* ================= PAGE BANNER (inner pages) ================= */
/* printed-programme masthead: big navy title, red kicker, double rule underneath */
.page-hero { padding: calc(var(--nav-h) + var(--s8)) var(--s5) 0; }
.page-hero__inner {
  max-width: var(--maxw); margin: 0 auto; padding-bottom: var(--s5);
  border-bottom: 3px double var(--ink);
  position: relative;
}
.page-hero__inner::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 96px; height: 4px; background: var(--accent); }
.page-hero h1 {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(52px, 9vw, 120px); line-height: 0.92; letter-spacing: 0.005em; color: var(--ink);
  text-wrap: balance;
}
.page-hero__lede { margin: var(--s3) 0 0; max-width: 62ch; color: var(--muted); font-size: 17px; }
.section--page { padding-top: var(--s7); }
.nav.is-page .nav__progress { opacity: 1; }

/* ================= HOME SNAPSHOT ================= */
.home { padding-top: var(--s8); }
.home__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s4); }
.home-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: var(--s5); min-width: 0; }
.home-card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 3px double var(--ink); }
.home-card__head .eyebrow { margin-bottom: 4px; font-size: 13px; }
.home-card__head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 36px; line-height: 1; }
.more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; text-decoration: none;
  font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--t-med) var(--ease-out); }
.more:hover svg { transform: translate(3px, -3px); }

.mini-head, .mini-row a { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) 64px 64px; gap: var(--s3); align-items: center; }
.mini-head { padding: 0 10px 6px; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.mini-head span:nth-child(2) { grid-column: 2 / 4; }
.mini-head span:nth-child(3), .mini-head span:nth-child(4) { text-align: right; }
.mini-table { list-style: none; margin: 0; padding: 0; }
.mini-row a { padding: 8px 10px; border-radius: 8px; text-decoration: none; font-variant-numeric: tabular-nums; transition: background var(--t-fast); }
.mini-row a:hover, .mini-row a:focus-visible { background: var(--shade); }
.mini-row + .mini-row { border-top: 1px solid var(--line); }
.mini-row .crest { width: 32px; height: 32px; }
.mini-pos { font-family: var(--f-display); font-size: 20px; }
.mini-row.is-po .mini-pos { box-shadow: inset 3px 0 0 var(--pos); padding-left: 7px; margin-left: -10px; }
.mini-row.is-spoon .mini-pos { box-shadow: inset 3px 0 0 var(--neg); padding-left: 7px; margin-left: -10px; }
.mini-name { font-weight: 700; overflow-wrap: break-word; min-width: 0; }
.mini-rec, .mini-pts { text-align: right; font-weight: 600; }
.mini-pts { color: var(--pos); font-weight: 700; }
.mini-row:nth-child(6) { border-bottom: 2px dashed var(--line-2); }

.mini-feed { list-style: none; margin: 0; padding: 0; }
.mini-feed__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 10px 0; }
.mini-feed__item + .mini-feed__item { border-top: 1px solid var(--line); }
.mini-feed__item .crest { width: 36px; height: 36px; }
.mini-feed__body { min-width: 0; }
.mini-feed__body .feed__type { margin-bottom: 2px; }
.mini-feed__head { display: block; font-weight: 600; line-height: 1.35; }
.mini-feed__side { text-align: right; display: grid; }
.mini-feed__side b { font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--gold); }
.mini-feed__side small { color: var(--faint); font-size: 13px; }

.home-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.home-link {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s4); border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--t-fast), transform var(--t-med) var(--ease-out), background var(--t-fast);
}
.home-link:hover, .home-link:focus-visible { border-color: var(--ink); transform: translateY(-2px); }
.home-link__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--bg); }
.home-link__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-link__text { display: grid; min-width: 0; }
.home-link__text b { font-family: var(--f-label); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; }
.home-link__text small { color: var(--muted); font-size: 14px; }
.home-link__arrow { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; transition: transform var(--t-med) var(--ease-out); }
.home-link:hover .home-link__arrow { transform: translate(3px, -3px); }

/* footer page links */
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: var(--s2) 0 var(--s3); }
.footer__links a { color: var(--muted); text-decoration: none; font-family: var(--f-label); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 0; }
.footer__links a:hover { color: var(--text); }

/* programme touches */
.table-wrap, .chart-card, .club-card, .feed__item, .tie, .vr__season, .versus, .matrix-scroll, .meetings li { box-shadow: 0 1px 0 rgba(11, 31, 58, 0.06); }

/* ================= DERBIES ================= */
.derby-days { margin-bottom: var(--s8); }
.derby-days__head { margin-bottom: var(--s5); }
.derby-days__head .subhead, .h2h-pick { font-size: clamp(34px, 4.5vw, 48px); margin: 0; }
.h2h-pick { margin-bottom: var(--s4); padding-top: var(--s4); border-top: 3px double var(--ink); }
.derbies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.derby {
  --ca: var(--ink); --cb: var(--accent);   /* left club navy, right club red */
  position: relative; overflow: hidden; display: grid; gap: var(--s3);
  padding: var(--s5); padding-top: calc(var(--s5) + 8px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
}
/* split kit stripe across the top: one club's colour each side */
.derby::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--ca) 0 50%, var(--cb) 50% 100%); }
.derby.is-target { outline: 3px solid var(--accent); outline-offset: 2px; }
.derby__head { display: grid; gap: 8px; justify-items: start; }
.derby__tag {
  padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff;
  font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.derby__head h3 { margin: 0; padding-top: 0.12em; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; }  /* room for accents (Á, É) */
.derby__clash { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.derby__side { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; transition: transform 700ms var(--ease-spring), opacity 500ms var(--ease-out); }
.derby__side .crest { width: 76px; height: 76px; transition: box-shadow var(--t-med); }
.derby__side.is-lead .crest { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px #b08a3e; }
.derby__side b { font-size: 17px; line-height: 1.2; overflow-wrap: break-word; padding-bottom: 2px; border-bottom: 3px solid var(--ca); }
.derby__side--b b { border-bottom-color: var(--cb); }
.derby__side small { color: var(--faint); font-size: 13px; }
.derby:not(.is-in) .derby__side--a { transform: translateX(-40px); opacity: 0; }
.derby:not(.is-in) .derby__side--b { transform: translateX(40px); opacity: 0; }
.derby__vs {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font-family: var(--f-display); font-size: 20px; letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent);
}
.derby.is-in .derby__vs { animation: vs-hit 600ms 350ms var(--ease-spring) both, vs-pulse 2.8s 1.2s ease-in-out infinite; }
.derby__story { margin: 0; color: var(--muted); font-size: 15px; }
.derby__stats { display: grid; gap: 2px; padding: var(--s2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.derby__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); font-variant-numeric: tabular-nums; }
.derby__row span { font-family: var(--f-display); font-size: 22px; }
.derby__row span:first-child { text-align: right; }
.derby__row small { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); text-align: center; min-width: 88px; }
/* tug of war: each club's share of the pair's combined points */
.derby__bar { height: 10px; border-radius: 999px; background: var(--cb); overflow: hidden; }
.derby__bar span { display: block; height: 100%; background: var(--ca); transform-origin: left; transform: scaleX(0.5); transition: transform 1200ms var(--ease-out) 300ms; box-shadow: 2px 0 0 var(--surface); }
.derby.is-in .derby__bar span { transform: scaleX(var(--share)); }
.derby__verdict { margin: 0; font-weight: 600; }
.derby__open {
  justify-self: start; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: transparent;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast);
}
.derby__open:hover { background: var(--accent); color: #fff; }
@keyframes vs-hit { from { transform: scale(0.3) rotate(-20deg); } to { transform: none; } }
@keyframes vs-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent); } 50% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 11px rgba(200, 16, 46, 0.25); } }

.matrix td.is-derby { background: rgba(176, 138, 62, 0.16); box-shadow: inset 0 0 0 2px #b08a3e; }
.badge--derby { color: #e6c47a; border-color: #e6c47a; }
.cp-derby {
  display: grid; gap: 4px; padding: var(--s4) var(--s5); border-radius: 16px; text-decoration: none;
  background: linear-gradient(110deg, var(--ink), var(--ink-2)); border-left: 6px solid var(--accent);
  transition: transform var(--t-med) var(--ease-out);
}
.cp-derby:hover { transform: translateY(-2px); }
.cp-derby__label { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cp-derby__name { font-family: var(--f-display); font-size: 30px; line-height: 1; text-transform: uppercase; }
.cp-derby__vs { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cp-derby__vs .crest { width: 34px; height: 34px; }
.cp-derby__vs b { font-family: var(--f-display); font-weight: 400; color: var(--accent); }
.cp-derby__vs span { font-weight: 700; }
.cp-derby__verdict { color: var(--muted); font-size: 14px; }

/* ================= RECORDS SCOREBOARD ================= */
.rec-spot {
  --cat: #e6c47a;
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--s7) var(--s6) var(--s5); margin-bottom: var(--s5);
  border-radius: 24px; border: 2px solid #b08a3e;
  background: radial-gradient(90% 80% at 50% 0%, #1d3f70, #0b1f3a 60%, #081830);
  min-height: 380px; display: grid; align-content: space-between;
}
.rec-spot[data-cat="shame"] { --cat: #ff5468; }
.rec-spot[data-cat="market"] { --cat: #7fb2ff; }
.rec-spot[data-cat="matchday"] { --cat: #fbf7ee; }
/* a row of floodlight bulbs across the top of the board */
.rec-spot__lights { position: absolute; left: var(--s6); right: var(--s6); top: 16px; display: flex; justify-content: space-between; }
.rec-spot__lights i { width: 28px; height: 6px; border-radius: 3px; background: #fff7e0; box-shadow: 0 0 10px 2px rgba(255, 247, 224, 0.7); animation: bulb 3s ease-in-out infinite; }
.rec-spot__lights i:nth-child(2n) { animation-delay: -1s; }
.rec-spot__lights i:nth-child(3n) { animation-delay: -2s; }
.rec-spot__body { display: grid; gap: var(--s3); justify-items: start; }
.rec-spot__body.is-in > * { animation: spot-in 600ms var(--ease-out) both; }
.rec-spot__body.is-in > *:nth-child(2) { animation-delay: 60ms; }
.rec-spot__body.is-in > *:nth-child(4) { animation-delay: 380ms; }
.rec-spot__body.is-in > *:nth-child(5) { animation-delay: 460ms; }
.rec-spot__cat { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cat); }
.rec-spot__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.rec-spot__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--cat); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec-spot__title { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 5vw, 64px); line-height: 0.95; }
.rec-spot__val { font-size: clamp(44px, 7vw, 84px); line-height: 1; }
.rec-spot__who { display: flex; align-items: center; gap: var(--s3); }
.rec-spot__who .crest { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--cat); }
.rec-spot__who .crest + .crest { margin-left: -18px; }
.rec-spot__who b { font-size: 22px; line-height: 1.2; }
.rec-spot__blurb { margin: 0; color: var(--muted); max-width: 52ch; }
.rec-spot__controls { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.rec-spot__btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-2); color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rec-spot__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--cat); }
.rec-spot__btn svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.rec-spot__btn[hidden] { display: none; }
.rec-spot__count { margin-left: var(--s2); font-family: var(--f-label); font-weight: 700; letter-spacing: 0.1em; color: var(--faint); font-variant-numeric: tabular-nums; }
.rec-spot__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cat); transform-origin: left; transform: scaleX(0); }
.rec-spot__prog.is-run { animation: spot-prog 7000ms linear forwards; }
@keyframes spot-prog { to { transform: scaleX(1); } }
@keyframes spot-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* split-flap tiles */
.flaps { display: inline-flex; gap: 0.07em; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.flap {
  position: relative; display: inline-grid; place-items: center; width: 0.74em; height: 1.1em;
  border-radius: 0.1em; color: #fbf3dc;
  background: linear-gradient(180deg, #1c3d6b 0 50%, #15325b 50% 100%);
  box-shadow: inset 0 -0.06em 0 rgba(0, 0, 0, 0.35), 0 0.04em 0 rgba(0, 0, 0, 0.4);
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); }
.flap--gap { width: 0.3em; background: none; box-shadow: none; }
.flap--gap::after { display: none; }
.flap.is-spin { color: #e6c47a; }
.flap.is-land { animation: flap-land 240ms var(--ease-out); }
@keyframes flap-land { from { transform: perspective(160px) rotateX(-75deg); } to { transform: none; } }

.rec-board { border-radius: 24px; padding: var(--s5); background: #0b1f3a; border: 2px solid #b08a3e; }
.rec-board__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.rec-board__title { margin: 0; font-family: var(--f-display); font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; }
.rec-board .filters { margin: 0; }
.rec-board .chip { color: var(--muted); border-color: var(--line-2); }
.rec-board .chip:hover { color: var(--text); border-color: var(--text); }
.rec-board .chip.is-active { background: #fbf7ee; border-color: #fbf7ee; color: #0b1f3a; }
.rec-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rec-row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 12px minmax(0, 1.1fr) minmax(0, 1.2fr) 220px; gap: var(--s4); align-items: center;
  padding: 10px var(--s4); border-radius: 12px; background: rgba(255, 255, 255, 0.03); text-align: left;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.rec-row:hover { background: rgba(255, 255, 255, 0.08); }
.rec-row:focus-visible { outline: 3px solid #e6c47a; outline-offset: 2px; }
.rec-row.is-on { background: rgba(255, 255, 255, 0.1); box-shadow: inset 3px 0 0 var(--cat); }
.rec-row.cat-glory { --cat: #e6c47a; }
.rec-row.cat-shame { --cat: #ff5468; }
.rec-row.cat-market { --cat: #7fb2ff; }
.rec-row.cat-matchday { --cat: #fbf7ee; }
.rec-row__light { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 8px var(--cat); }
.rec-row.is-on .rec-row__light { animation: bulb 1.2s ease-in-out infinite; }
.rec-row__title { font-family: var(--f-label); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
.rec-row__who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-weight: 600; font-size: 15px; }
.rec-row__who > span { overflow-wrap: break-word; min-width: 0; }
.rec-row__who .crest { width: 28px; height: 28px; }
.rec-row__who .crest + .crest { margin-left: -12px; }
.rec-row__who svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rec-row__val { font-size: 26px; justify-self: end; }
.rec-row.is-locked { opacity: 0.55; cursor: default; }
.rec-board__note { margin: var(--s4) 0 0; font-size: 14px; color: var(--faint); }

/* ================= TRANSFER MARKET ================= */
.market { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; }
.market__side { position: sticky; top: calc(var(--nav-h) + var(--s4)); display: grid; gap: var(--s3); }
.side-card { padding: var(--s4) var(--s5); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.side-card__title { margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 3px double var(--ink); font-family: var(--f-display); font-weight: 400; font-size: 22px; text-transform: uppercase; display: flex; align-items: baseline; justify-content: space-between; }
.side-card__title small { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.1em; color: var(--faint); }
.mk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.mk-stat { padding: var(--s3); border-radius: 10px; background: var(--bg); }
.mk-stat b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-stat small { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.mk-row .crest { width: 28px; height: 28px; grid-row: span 2; }
.mk-row__name { font-weight: 600; font-size: 14px; overflow-wrap: break-word; min-width: 0; }
.mk-row__val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-row__sub { grid-column: 2 / -1; color: var(--faint); font-size: 12px; }
.mk-bar { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.mk-bar span { display: block; height: 100%; background: var(--pos); border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.side-card.is-in .mk-bar span { transform: scaleX(var(--w)); }

.gw-groups { display: grid; gap: var(--s3); }
.gw { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.gw__sum {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); cursor: pointer; list-style: none;
  border-left: 5px solid var(--accent); transition: background var(--t-fast);
}
.gw__sum::-webkit-details-marker { display: none; }
.gw__sum:hover { background: var(--shade); }
.gw__title { font-family: var(--f-display); font-size: 26px; text-transform: uppercase; line-height: 1; }
.gw__meta { color: var(--muted); font-size: 15px; }
.gw__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.gw__chev { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--text); stroke-width: 2; transition: transform var(--t-med) var(--ease-out); }
.gw[open] .gw__chev { transform: rotate(180deg); }
.gw .feed { padding: 0 var(--s3) var(--s3); }
.gw .feed__item { background: var(--bg); box-shadow: none; }

/* ================= McQUEEN CUP FINAL ================= */
.bracket__round--final { flex: 1.4 0 340px; display: flex; align-items: center; }
.final-stage {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  display: grid; justify-items: center; gap: var(--s2); text-align: center;
  padding: var(--s6) var(--s5) var(--s5); border-radius: 24px; border: 2px solid #b08a3e;
  background: radial-gradient(80% 55% at 50% 28%, #22497f 0%, #0b1f3a 62%, #061429 100%);
  box-shadow: 0 30px 60px -30px rgba(11, 31, 58, 0.8);
}
.final-stage > * { position: relative; }
.final-stage .spot, .final-stage__pool, .final-stage__flashes { position: absolute; z-index: -1; pointer-events: none; }
/* three spotlights sweeping from the roof onto the trophy */
.spot {
  top: -24px; width: 48%; height: 120%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.55), rgba(255, 244, 214, 0.1) 65%, rgba(255, 244, 214, 0));
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(5px); mix-blend-mode: screen;
}
.spot--l { left: -8%; animation: sweep-l 6.5s ease-in-out infinite; }
.spot--r { right: -8%; animation: sweep-r 7.5s ease-in-out infinite; }
.spot--m { left: 26%; opacity: 0.5; animation: sweep-m 9s ease-in-out infinite; }
@keyframes sweep-l { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(6deg); } }
@keyframes sweep-r { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(-6deg); } }
@keyframes sweep-m { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.final-stage__pool { top: 256px; left: 50%; width: 260px; height: 56px; margin-left: -130px; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 200, 116, 0.55), transparent); animation: pool 4.5s ease-in-out infinite; }
@keyframes pool { 0%, 100% { opacity: 0.7; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.12); } }
/* camera flashes in the stands */
.final-stage__flashes {
  left: 0; right: 0; top: 0; height: 45%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.8px);
  background-size: 47px 31px, 71px 43px; background-position: 11px 7px, 30px 19px;
  mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  animation: flashes 2.4s steps(1) infinite;
}
@keyframes flashes { 0% { opacity: 0.2; } 20% { opacity: 0.8; background-position: 11px 7px, 30px 19px; } 40% { opacity: 0.3; } 60% { opacity: 0.9; background-position: 25px 13px, 8px 27px; } 80% { opacity: 0.25; } }
.final-stage__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-display); font-size: 34px; letter-spacing: 0.08em; text-transform: uppercase; color: #fbf7ee; }
.final-trophy { position: relative; display: block; width: 112px; aspect-ratio: 289 / 497; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(233, 200, 116, 0.35)); animation: trophy-float 4.5s ease-in-out infinite; }
.final-trophy img { display: block; width: 100%; height: 100%; }
/* glint: a light band masked to the cup's own shape, sweeping across it */
.final-trophy::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 230, 0.8) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; animation: trophy-shine 4.2s ease-in-out infinite;
  -webkit-mask: url("../media/mcqueen-cup.png") center / contain no-repeat; mask: url("../media/mcqueen-cup.png") center / contain no-repeat;
}
@keyframes trophy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes trophy-shine { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
.final-stage__title { margin: 0; font-family: var(--f-label); font-weight: 700; font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: #e6c47a; }
.final-stage .tie { width: 100%; max-width: 360px; background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); text-align: left; }
.final-stage .tie--tbd { background: rgba(255, 255, 255, 0.03); }
.final-stage__meta { margin: 0; color: var(--faint); font-size: 13px; }
.final-stage.is-crowned { box-shadow: 0 0 0 4px rgba(233, 200, 116, 0.35), 0 30px 60px -30px rgba(11, 31, 58, 0.8); }

/* ================= DATA HUB ================= */
.hub { margin-bottom: var(--s8); }
.hub__head { margin-bottom: var(--s4); }
.hub__head .subhead { font-size: clamp(34px, 4.5vw, 48px); margin: 0; }
.hub__controls { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; margin-bottom: var(--s4); padding: var(--s4); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.hub-field { display: grid; gap: 6px; }
.hub-field > span { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.hub-field select {
  min-width: 220px; min-height: 44px; padding: 8px 40px 8px 12px; border-radius: 10px; font-weight: 600; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23c8102e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  border: 1px solid var(--line-2); appearance: none; -webkit-appearance: none;
}
.hub-field select:hover { border-color: var(--ink); }
.hub-field .filters { margin: 0; }
.hub-field--inline { grid-auto-flow: column; align-items: center; gap: var(--s3); }

.hub__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4); align-items: center; padding: var(--s5); border-radius: 20px; background: var(--band); color: #fbf7ee; margin-bottom: var(--s3); }
.hub-sum { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.hub-sum .crest { width: 72px; height: 72px; box-shadow: 0 0 0 3px #e6c47a; }
.hub-sum__name { margin: 0; font-family: var(--f-display); font-size: 34px; text-transform: uppercase; line-height: 1; overflow-wrap: break-word; }
.hub-sum__sub { margin: 6px 0 0; color: #d5dbe6; font-size: 14px; }
.hub-sum__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hub-sum__lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-sum__label { margin: 0 0 6px; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.hub-sum__label--up { color: #e6c47a; }
.hub-sum__label--down { color: #ff5468; }
.hub-chip { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: 14px; }
.hub-chip b { font-family: var(--f-display); font-weight: 400; font-size: 16px; min-width: 30px; }
.hub-chip--up b { color: #e6c47a; }
.hub-chip--down b { color: #ff5468; }
.hub-chip span { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.hub__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 var(--s3); font-size: 14px; color: var(--muted); }
.hub-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: -8px; vertical-align: middle; }
.hub-key--me { background: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
.hub-key--cmp { background: var(--accent); }
.hub-key--avg { width: 3px; height: 16px; border-radius: 1px; background: #b08a3e; }
.hub-key--other { background: rgba(11, 31, 58, 0.22); }

.hub__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.hub-group { padding: var(--s4) var(--s5) var(--s3); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.hub-group__title { margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 3px double var(--ink); font-family: var(--f-display); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.hub-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(90px, 1.4fr) 76px 84px; gap: var(--s3); align-items: center; padding: 10px 6px; border-radius: 8px; }
.hub-row + .hub-row { border-top: 1px solid var(--line); }
.hub-row:hover, .hub-row:focus-visible { background: var(--shade); }
.hub-row__label { font-weight: 600; font-size: 14px; line-height: 1.25; }
.hub-row__label small { display: block; font-weight: 500; font-size: 12px; color: var(--faint); }
/* strip: every club is a dot on the league's min–max range */
.hub-strip { position: relative; height: 22px; margin: 0 8px; }
.hub-strip::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-2); border-radius: 1px; }
.hub-strip__avg { position: absolute; top: 1px; bottom: 1px; width: 3px; margin-left: -1.5px; background: #b08a3e; border-radius: 1px; }
.hub-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(11, 31, 58, 0.22); transition: left 600ms var(--ease-out); cursor: default; }
.hub-dot::after { content: ""; position: absolute; inset: -8px; }  /* bigger hover target */
.hub-dot--cmp { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); z-index: 1; }
.hub-dot--me { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); z-index: 2; }
.hub-row__val { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.hub-row__val b { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.1; }
.hub-row__val small, .hub-row__rank small { font-size: 12px; color: var(--faint); }
.hub-row__rank { display: grid; text-align: right; }
.hub-row__rank b { font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.hub-row__rank.is-up b { color: var(--pos); }
.hub-row__rank.is-up small { color: var(--pos); }
.hub-row__rank.is-down b, .hub-row__rank.is-down small { color: var(--accent); }

.leaders { margin-top: var(--s6); padding: var(--s5); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.leaders__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 3px double var(--ink); }
.leaders__head .subhead { margin: 0; font-size: 30px; }
.leaders__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.fa-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.leaders__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 4px var(--s5); }   /* 1-5 down the left, 6-10 down the right */
.lead-row { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 8px 6px; border-radius: 10px; }
.lead-row.is-mine { background: rgba(176, 138, 62, 0.14); }
.lead-row__rank { font-family: var(--f-display); font-size: 20px; color: var(--faint); text-align: right; }
.lead-row:nth-child(-n+3) .lead-row__rank { color: var(--accent); }
.lead-row__photo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 14px; }
.lead-row__photo.has-photo { background-color: #fff; }
.lead-row__photo.has-photo span { display: none; }
.lead-row__name { font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.lead-row__name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; color: var(--faint); }
.lead-row__name .crest { width: 16px; height: 16px; box-shadow: none; }
.lead-row__val { font-family: var(--f-display); font-size: 24px; font-variant-numeric: tabular-nums; }

/* ================= POWER RANKINGS ================= */
/* crown / poo emblem next to a club's name, everywhere */
.pr-emblem { display: inline-block; margin-left: 0.3em; font-size: 0.95em; line-height: 1; font-style: normal; text-transform: none; letter-spacing: 0; vertical-align: 0.02em; cursor: default; }
/* top of the power rankings: the crown hops and catches the light every few seconds */
.pr-emblem--top { transform-origin: 50% 90%; animation: crown-bounce 3.6s var(--ease-out) infinite, crown-glint 3.6s ease-in-out infinite; }
@keyframes crown-bounce {
  0%, 62%, 100% { transform: translateY(0) rotate(-6deg); }
  70% { transform: translateY(-5px) rotate(4deg) scale(1.08); }
  78% { transform: translateY(0) rotate(-3deg) scale(0.96, 1.04); }
  84% { transform: translateY(-2px) rotate(2deg); }
  90% { transform: translateY(0) rotate(-6deg); }
}
@keyframes crown-glint {
  0%, 64%, 100% { filter: drop-shadow(0 1px 2px rgba(176, 138, 62, 0.6)); }
  72% { filter: drop-shadow(0 0 6px rgba(255, 214, 102, 0.95)) brightness(1.15); }
}
/* bottom of the power rankings: the poo wobbles like it knows */
.pr-emblem--bottom { transform-origin: 50% 100%; animation: poo-wobble 4.2s ease-in-out infinite; }
@keyframes poo-wobble {
  0%, 58%, 100% { transform: rotate(0) scale(1); }
  64% { transform: rotate(-12deg) scale(1.06, 0.94); }
  70% { transform: rotate(10deg) scale(0.96, 1.05); }
  76% { transform: rotate(-7deg); }
  82% { transform: rotate(4deg); }
  88% { transform: rotate(0); }
}
.pr-dev {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-bottom: var(--s5);
  padding: var(--s3) var(--s5); background: #0b1f3a; color: #fbf7ee;
  border: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, #e6c47a 0 12px, #0b1f3a 12px 24px) 6;
}
.pr-dev__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; color: #e6c47a; }
.pr-dev__tag svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-dev p { margin: 0; color: #d5dbe6; }
.pr-consider { margin: var(--s4) 0 0; padding: var(--s4) var(--s5); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.pr-consider h3 { margin: 0 0 6px; font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.pr-consider ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--muted); font-size: 15px; }
.pr-consider b { color: var(--text); }
.pr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.pr-round { margin: 0; color: var(--muted); }
.pr-round b { color: var(--text); font-family: var(--f-label); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.pr-open { color: var(--accent); font-weight: 700; }
.pr-bar .hub-field select { min-width: 200px; }
.pr-empty { padding: var(--s6) var(--s5); border-radius: 20px; border: 1px dashed var(--line-2); text-align: center; color: var(--muted); }
.pr-empty b { color: var(--text); }
.pr-empty p { margin: 6px auto 0; max-width: 60ch; }
.pr-empty__big { margin: 0 auto !important; max-width: none !important; font-family: var(--f-display); font-size: 34px; color: var(--text); text-transform: uppercase; }
.pr-closed { margin: var(--s8) 0 0; padding: var(--s5); border-radius: 20px; background: var(--surface); border: 1px dashed var(--line-2); text-align: center; color: var(--muted); }
.pr-closed b { color: var(--text); }

.pr-table { list-style: none; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.pr-row {
  display: grid; grid-template-columns: 44px 38px minmax(0, 1.3fr) minmax(140px, 1fr) 82px 90px; gap: var(--s3); align-items: center;
  padding: 12px var(--s4);
}
.pr-row + .pr-row { border-top: 1px solid var(--line); }
.pr-row:first-child { background: linear-gradient(90deg, rgba(176, 138, 62, 0.16), transparent 70%); }
.pr-row__pos { font-family: var(--f-display); font-size: 30px; text-align: center; }
.pr-row:first-child .pr-row__pos { color: #8a6a24; }
.pr-move { font-family: var(--f-label); font-weight: 700; font-size: 14px; color: var(--faint); text-align: center; }
.pr-move.is-up { color: var(--pos); }
.pr-move.is-down { color: var(--accent); }
.pr-row__club { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pr-row__club b { display: block; font-size: 17px; overflow-wrap: break-word; }
.pr-row__club small { color: var(--faint); font-size: 13px; }
.pr-range { position: relative; height: 34px; margin: 0 10px; }
.pr-range__track { position: absolute; left: -10px; right: -10px; top: 12px; height: 6px; border-radius: 3px; background: var(--line); }
.pr-range__span { position: absolute; top: 10px; height: 10px; border-radius: 5px; background: rgba(11, 31, 58, 0.28); min-width: 10px; margin-left: -5px; padding-right: 10px; box-sizing: content-box; }
.pr-range__avg { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.pr-range__lbl { position: absolute; top: 24px; transform: translateX(-50%); font-family: var(--f-label); font-weight: 700; font-size: 11px; color: var(--faint); white-space: nowrap; }
.pr-row__avg { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.pr-row__avg b { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1; }
.pr-row__avg small { font-size: 12px; color: var(--faint); }
.pr-notes-btn {
  justify-self: end; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.pr-notes-btn[aria-expanded="true"] { background: var(--accent); color: #fff; }
.pr-notes-btn.is-empty { border-color: transparent; color: var(--faint); font-weight: 600; }
.pr-notes { grid-column: 3 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.pr-notes li { padding: 8px 12px; border-radius: 10px; background: var(--bg); border-left: 3px solid var(--accent); font-style: italic; }

/* ballot */
.pr-ballot { margin-top: var(--s8); padding: var(--s6); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 16px); }
.pr-ballot .subhead { font-size: clamp(32px, 4vw, 44px); margin: 0; }
.pr-label { margin: var(--s5) 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.pr-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.pr-who__club {
  display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: 10px 12px; text-align: left;
  border-radius: 14px; background: var(--bg); border: 2px solid transparent; transition: border-color var(--t-fast), background var(--t-fast);
}
.pr-who__club:hover { border-color: var(--line-2); }
.pr-who__club[aria-checked="true"] { border-color: var(--ink); background: #fff; box-shadow: inset 4px 0 0 var(--accent); }
.pr-who__club b { display: block; line-height: 1.2; }
.pr-who__club small { color: var(--faint); }
.pr-login { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); margin-top: var(--s5); }
.pr-login input[type="text"] {
  min-width: 200px; min-height: 48px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg);
  font-family: var(--f-display); font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
}
.pr-login input[type="text"]:focus { border-color: var(--ink); }
.pr-check { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--muted); font-size: 15px; }
.pr-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; border-radius: 999px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); text-decoration: none;
  font-family: var(--f-label); font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--t-fast), transform var(--t-fast);
}
.pr-btn:hover { background: #a50d25; }
.pr-btn:active { transform: scale(0.98); }
.pr-btn:disabled { opacity: 0.55; cursor: progress; }
.pr-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.pr-btn--ghost:hover { background: var(--shade); }
.pr-error { min-height: 1.4em; margin: var(--s3) 0 0; color: var(--accent); font-weight: 600; }
.pr-error:empty { min-height: 0; margin: 0; }
.pr-step__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.pr-me { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--muted); }
.pr-saved { margin: var(--s2) 0 0; color: #8a6a24; font-weight: 600; }
.pr-saved:empty { display: none; }

.pr-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 10px; }
.pr-card {
  display: grid; grid-template-columns: 44px 22px minmax(0, 1fr) auto; gap: var(--s3); align-items: start;
  padding: var(--s4); border-radius: 16px; background: var(--bg); border: 1px solid var(--line);
  transition: box-shadow var(--t-fast);
}
.pr-card.is-drag { position: relative; z-index: 5; box-shadow: 0 18px 40px -16px rgba(11, 31, 58, 0.55); border-color: var(--ink); background: #fff; }
.pr-card__rank { font-family: var(--f-display); font-size: 34px; line-height: 1; text-align: center; padding-top: 4px; }
.pr-card:nth-child(1) .pr-card__rank { color: #8a6a24; }
.pr-card__handle { display: grid; place-items: center; height: 44px; cursor: grab; touch-action: none; color: var(--faint); }
.pr-card.is-drag .pr-card__handle { cursor: grabbing; }
.pr-card__handle svg { width: 16px; height: 16px; fill: currentColor; }
.pr-card__main { display: grid; gap: var(--s3); min-width: 0; }
.pr-card__id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.pr-card__id b { display: block; font-size: 18px; line-height: 1.2; }
.pr-card__id small { color: var(--faint); font-size: 13px; }
.pr-card__id .form { margin-left: auto; }
.pr-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pr-stat { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 74px; }
.pr-stat b { font-family: var(--f-display); font-weight: 400; font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-stat small { font-size: 11px; color: var(--faint); font-weight: 600; }
.pr-stat.is-flag { border-color: rgba(200, 16, 46, 0.5); background: rgba(200, 16, 46, 0.06); }
.pr-stat.is-flag b { color: var(--accent); }
.pr-spark { width: 120px; height: 30px; margin-left: 4px; }
.pr-spark path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pr-spark circle.W { fill: var(--pos); }
.pr-spark circle.L { fill: var(--accent); }
.pr-spark circle.D { fill: var(--faint); }
.pr-card__note textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; resize: vertical;
  font: inherit; font-size: 15px; color: var(--text);
}
.pr-card__note textarea:focus { border-color: var(--ink); }
.pr-card__move { display: grid; gap: 6px; }
.pr-card__move button { width: 44px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); }
.pr-card__move button:hover:not(:disabled) { border-color: var(--ink); }
.pr-card__move button:disabled { opacity: 0.35; cursor: default; }
.pr-card__move svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.pr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }
.pr-done { margin: var(--s4) 0 0; padding: 0; list-style: none; counter-reset: done; display: grid; gap: 6px; }
.pr-done li { counter-increment: done; display: flex; align-items: center; gap: var(--s3); padding: 8px 12px; border-radius: 10px; background: var(--bg); }
.pr-done li::before { content: counter(done); font-family: var(--f-display); font-size: 22px; width: 28px; text-align: center; }
.pr-done .crest { width: 30px; height: 30px; }

/* ================= CLUBS: matchday tickets ================= */
.club-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.tk {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 88px; min-height: 184px;
  border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.14), 0 14px 26px -18px rgba(11, 31, 58, 0.5);
  opacity: 0; transform: translateY(18px) rotate(-0.6deg);
  transition: opacity 500ms var(--ease-out), transform 420ms var(--ease-spring), box-shadow var(--t-med);
}
.tk.is-in { opacity: 1; transform: none; }
/* ticket notches where the stub tears off */
.tk::before, .tk::after { content: ""; position: absolute; right: 77px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); z-index: 2; }
.tk::before { top: -11px; }
.tk::after { bottom: -11px; }
.tk:hover { transform: translateY(-4px) rotate(-0.8deg); box-shadow: 0 1px 0 rgba(11, 31, 58, 0.14), 0 22px 34px -18px rgba(11, 31, 58, 0.6); }
.tk:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.tk[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 4px; transform: translateY(-2px); }
.tk__kit {
  display: grid; place-items: center; border-radius: 16px 0 0 16px; overflow: hidden; position: relative;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 9px, transparent 9px 18px), linear-gradient(160deg, var(--c1), var(--c2));
}
/* the club the manager supports, as a big crest behind their avatar (falls back to the kit stripes) */
.tk__kit[data-fav] { background: linear-gradient(160deg, var(--c1), var(--c2)); }
.tk__kit[data-fav]::before {
  content: ""; position: absolute; inset: -12%; background: var(--fav) center / contain no-repeat;
  opacity: 0.38; transform: rotate(-12deg) scale(1.15); filter: saturate(1.1);
}
.tk__kit[data-fav] .crest { position: relative; z-index: 1; }
.tk__kit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); }
.tk:hover .tk__kit::after { transform: translateX(120%); }
.tk__kit .crest { width: 78px; height: 78px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 20px rgba(0, 0, 0, 0.35); }
.tk__main { display: grid; align-content: start; gap: 3px; padding: 14px 16px 12px; min-width: 0; }
.tk__ribbon { justify-self: start; padding: 3px 10px; border-radius: 4px; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.tk__name { font-family: var(--f-display); font-weight: 400; font-size: 27px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; margin-top: 2px; }
.tk__mgr { font-size: 13px; color: var(--faint); }
.tk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; }
.tk__stat b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.tk__stat small { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.tk__form i { width: 19px; height: 19px; font-size: 10px; }
.tk__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.tk__star { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.tk__star > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk__star small { display: block; font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.tk__photo, .dh__photo { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 11px; color: var(--muted); }
.tk__photo.has-photo, .dh__photo.has-photo { background-color: #fff; }
.tk__photo.has-photo span, .dh__photo.has-photo span { display: none; }
.tk__spark { width: 110px; height: 32px; flex: none; overflow: visible; }
.tk__spark polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.75; }
.tk__spark circle { fill: var(--accent); }
.tk__stub {
  display: grid; place-content: center; justify-items: center; gap: 2px; position: relative;
  border-radius: 0 16px 16px 0; background: var(--band); color: #fbf7ee; border-left: 2px dashed rgba(251, 247, 238, 0.5);
}
.tk__stub small { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #a9b4c6; }
.tk__stub b { font-family: var(--f-display); font-weight: 400; font-size: 46px; line-height: 1; }
.tk__barcode { width: 52px; height: 22px; margin-top: 6px; opacity: 0.75; background: repeating-linear-gradient(90deg, #fbf7ee 0 2px, transparent 2px 3px, #fbf7ee 3px 4px, transparent 4px 7px, #fbf7ee 7px 10px, transparent 10px 12px); }
.tk[data-pos="1"] .tk__stub { background: linear-gradient(170deg, #c9a24a, #8a6a24); }
.tk[data-pos="1"] .tk__stub small { color: #0b1f3a; }
.tk[data-pos="8"] .tk__stub { background: linear-gradient(170deg, #c8102e, #7a0a1c); }

/* ticket rip: tug the ticket, tear the stub off along the perforation, let it fall */
.tk__kit { grid-column: 1; grid-row: 1; }
.tk__main { grid-column: 2; grid-row: 1; }
.tk__stub, .tk__seat { grid-column: 3; grid-row: 1; }
.tk__stub { z-index: 1; transform-origin: 0 100%; transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-spring); }
.tk__seat {
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 2px; margin: 10px 8px 10px 4px;
  border: 2px dashed var(--line-2); border-radius: 10px; color: var(--accent);
  font-family: var(--f-display); font-size: 17px; line-height: 1; text-transform: uppercase; opacity: 0;
}
.tk__seat small { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; color: var(--faint); }
.tk.is-ripping { animation: tk-tug 640ms var(--ease-out); }
.tk.is-ripping .tk__stub { clip-path: polygon(0 0%, 7px 5%, 0 10%, 7px 15%, 0 20%, 7px 25%, 0 30%, 7px 35%, 0 40%, 7px 45%, 0 50%, 7px 55%, 0 60%, 7px 65%, 0 70%, 7px 75%, 0 80%, 7px 85%, 0 90%, 7px 95%, 0 100%, 100% 100%, 100% 0); animation: tk-rip 640ms cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }
.tk.is-torn .tk__stub { opacity: 0; transform: translate(70px, 160px) rotate(40deg); pointer-events: none; }
.tk.is-torn .tk__seat { opacity: 1; transition: opacity 300ms 120ms; }
.tk.is-torn::before, .tk.is-torn::after { opacity: 0; }
@keyframes tk-tug { 0% { transform: none; } 20% { transform: translateX(-4px) rotate(-1.2deg); } 38% { transform: translateX(3px) rotate(0.4deg); } 55%, 100% { transform: translateY(-2px); } }
@keyframes tk-rip {
  0% { transform: none; opacity: 1; }
  22% { transform: rotate(5deg) translateX(3px); }
  40% { transform: rotate(-3deg) translateX(8px); opacity: 1; }
  100% { transform: translate(70px, 160px) rotate(40deg); opacity: 0; }
}
/* the club summary unfolds in once the stub is gone */
.club-profile.cp-enter { animation: cp-unfold 700ms var(--ease-out); }
.club-profile.cp-enter .cp-strip, .club-profile.cp-enter .cp-col { animation: cp-rise 600ms var(--ease-out) both; }
.club-profile.cp-enter .cp-col:nth-child(1) { animation-delay: 120ms; }
.club-profile.cp-enter .cp-col:nth-child(2) { animation-delay: 220ms; }
@keyframes cp-unfold { from { opacity: 0; transform: translateY(20px) scale(0.985); clip-path: inset(0 0 92% 0 round 24px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); } }
@keyframes cp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* season sparkline hover */
.spark__hit { fill: transparent; cursor: crosshair; outline: none; }
.spark__guide { stroke: rgba(11, 31, 58, 0.35); stroke-width: 1; }
.spark__dot { transition: r var(--t-fast); }
.spark__dot.is-hot { r: 7; }

/* ================= CLUB PROFILE (compact) ================= */
.cp-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--s4) var(--s6); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cp-chip { display: grid; gap: 2px; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 92px; }
.cp-chip b { font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cp-chip small { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.cp-more { flex-basis: 100%; }
.cp-more summary { cursor: pointer; width: max-content; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 4px 0; }
.cp-more__grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cp-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s5); padding: var(--s5) var(--s6) var(--s6); align-items: start; }
.cp-col { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.cp-card { padding: var(--s4); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); min-width: 0; }
.cp-card__title { margin: 0 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cp-card .spark__key { margin-bottom: 0; }
.cp-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cp-story a { display: grid; grid-template-columns: 24px 42px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 6px; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; line-height: 1.25; }
.cp-story a:hover { background: var(--shade); }
.cp-story__res { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.cp-story__res.W { background: var(--pos); color: var(--on-pos); }
.cp-story__res.L { background: var(--neg); color: #fff; }
.cp-story__res.D { background: var(--faint); color: var(--surface); }
.cp-story__wk { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--faint); }
.cp-h2h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cp-h2h__item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--line-2); }
.cp-h2h__item .crest { width: 26px; height: 26px; }
.cp-h2h__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-h2h__item b { font-variant-numeric: tabular-nums; font-size: 14px; }
.cp-h2h__item.up { border-left-color: var(--pos); }
.cp-h2h__item.down { border-left-color: var(--neg); }
.cp-h2h__item.is-derby { box-shadow: inset 0 0 0 2px var(--d1, #b08a3e); }
.cp-derby__last { font-size: 13px; opacity: 0.9; }
.squad { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: var(--s3) var(--s4); }
.squad summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); cursor: pointer; list-style: none; }
.squad summary::-webkit-details-marker { display: none; }
.squad summary h4 { margin: 0; }
.squad summary span { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.squad[open] summary span { font-size: 0; }
.squad[open] summary span::after { content: "Hide"; font-size: 13px; }
.squad ul { margin-top: var(--s3); }

/* ================= DERBY HISTORY ================= */
.derby__open { justify-self: start; align-self: start; }
.dh { display: grid; gap: 8px; }
.dh__title { margin: 8px 0 0; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.dh__none { margin: 0; color: var(--muted); font-size: 14px; }
.derby__crestwrap { position: relative; display: inline-block; }
.derby__crown { position: absolute; top: -14px; left: -10px; font-size: 26px; line-height: 1; transform: rotate(-22deg); transform-origin: 50% 90%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); animation: derby-crown 3.6s var(--ease-out) infinite, crown-glint 3.6s ease-in-out infinite; }
@keyframes derby-crown { 0%, 62%, 100% { transform: rotate(-22deg); } 70% { transform: translateY(-5px) rotate(-12deg) scale(1.1); } 78% { transform: rotate(-26deg) scale(0.96, 1.04); } 88% { transform: rotate(-20deg); } }
.dh__more summary { cursor: pointer; width: max-content; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 2px 0; }
.dh__more[open] summary { margin-bottom: 6px; }
.dh__list, .dh__legends { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dh__game { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); }
.dh__wk { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; color: var(--faint); }
.dh__score { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dh__score .crest { width: 24px; height: 24px; }
.dh__score b { font-weight: 500; color: var(--faint); }
.dh__score b.is-win { font-weight: 800; color: var(--text); }
.dh__score i { font-style: normal; color: var(--faint); }
.dh__motm { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.dh__motm small { display: block; font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.dh__legends li { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dh__rank { font-family: var(--f-display); color: var(--faint); }
.dh__who { min-width: 0; }
.dh__who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh__who small { font-size: 12px; color: var(--faint); }
.dh__pts { font-family: var(--f-display); font-size: 20px; font-variant-numeric: tabular-nums; }

/* ================= DERBY COLOURWAYS =================
   Each rivalry dresses in its own colours. .dt = a themed surface (banner, badge, card);
   .derby--<slug> just carries the palette for borders and stripes. Slugs come from data/league.js. */
.dt--clifton, .derby--clifton { --d1: #1d5c3a; --d2: #c9a227; }
.dt--brothers, .derby--brothers { --d1: #996633; --d2: #f2a900; }
.dt--upstate, .derby--upstate { --d1: #0e3b5c; --d2: #9fd3f0; }
.dt--i95, .derby--i95 { --d1: #0073cf; --d2: #ffd100; }
.dt.dt--clifton, .dt.dt--brothers, .dt.dt--upstate, .dt.dt--i95 {
  --text: #fbf7ee; --muted: #efe8d6; --faint: #ddd4bf; color: #fbf7ee; position: relative; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); border-color: transparent;
}
/* The Clifton Derby: family heritage, bottle green with gold pinstripe */
.dt.dt--clifton { --accent: #f0d27a; background: repeating-linear-gradient(135deg, rgba(240, 210, 122, 0.16) 0 2px, transparent 2px 13px), linear-gradient(120deg, #0f3a24 0%, #1d5c3a 55%, #2d7d52 100%); }
/* ---- image-backed derbies: the picture sits on ::before, the effect on ::after, text stays on top ---- */
.dt.dt--brothers, .dt.dt--upstate, .dt.dt--i95 { isolation: isolate; background: #0b1f3a; }
.dt.dt--brothers::before, .dt.dt--upstate::before, .dt.dt--i95::before,
.dt.dt--brothers::after, .dt.dt--upstate::after, .dt.dt--i95::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dt.dt--brothers::before, .dt.dt--upstate::before, .dt.dt--i95::before { z-index: -3; }
.dt.dt--brothers::after, .dt.dt--upstate::after, .dt.dt--i95::after { z-index: -1; left: 0; width: auto; transform: none; }

/* El Clásico de Sutphin: the original Sutphin Blvd station photo, still, with the sign centred.
   An even shade keeps the derby name readable over it. */
.dt.dt--brothers { --accent: #ffb347; background: #1f140a; }
.dt.dt--brothers::before {
  background: linear-gradient(rgba(20, 12, 4, 0.5), rgba(20, 12, 4, 0.5)), url("../media/derby-sutphin.jpg") center 43% / 118% auto no-repeat;
}
.dt.dt--brothers::after { content: none; }

/* The Snow Belt Derby: the lake-effect snow clip (JS drops a looping video in the big banners) */
.dt.dt--upstate { --accent: #bfe8ff; }
.dt.dt--upstate::before { background: url("../media/derby-snow.jpg") center 90% / cover; }
.dt.dt--upstate::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.1px, transparent 1.7px) 0 0 / 26px 26px,
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.9px, transparent 1.4px) 13px 9px / 19px 19px,
    linear-gradient(90deg, rgba(8, 24, 40, 0.72), rgba(8, 24, 40, 0.18) 60%, rgba(8, 24, 40, 0.35));
  animation: snowfall 16s linear infinite;
}
@keyframes snowfall { to { background-position: 0 260px, 13px 199px, 0 0; } }
.dt__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 90%; z-index: -2; pointer-events: none; }

/* El Clásico de las Américas: the real flags (Honduras | Ecuador), waving, with a glare rolling across.
   .dt--flip uses the Ecuador | Honduras copy when GlenM22 is the club drawn on the left. */
.dt.dt--i95 { --accent: #ffd100; }
.dt.dt--i95::before { inset: -8%; background: linear-gradient(90deg, rgba(6, 14, 32, 0.74), rgba(6, 14, 32, 0.34) 50%, rgba(6, 14, 32, 0.7)), url("../media/derby-flags-hn-ec.jpg") center / cover; animation: flag-wave 7s ease-in-out infinite; }
.dt.dt--i95.dt--flip::before { background: linear-gradient(90deg, rgba(6, 14, 32, 0.74), rgba(6, 14, 32, 0.34) 50%, rgba(6, 14, 32, 0.7)), url("../media/derby-flags-ec-hn.jpg") center / cover; }
.dt.dt--i95::after {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.34) 49%, transparent 60%),
    repeating-linear-gradient(98deg, rgba(0, 0, 0, 0.14) 0 9%, rgba(255, 255, 255, 0.07) 13% 17%, rgba(0, 0, 0, 0.1) 22% 26%);
  background-size: 260% 100%, 70% 100%;
  animation: flag-ripple 6s linear infinite;
}
@keyframes flag-wave { 0%, 100% { transform: skewY(-1.2deg) scale(1.02) translateX(-1%); } 50% { transform: skewY(1.2deg) scale(1.06) translateX(1%); } }
@keyframes flag-ripple { from { background-position: 160% 0, 0 0; } to { background-position: -70% 0, 140% 0; } }

/* where the palette shows up */
.derby[class*="derby--"] { --ca: var(--d1); --cb: var(--d2); }
.derby[class*="derby--"] .derby__head { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; padding: calc(var(--s5) + 8px) var(--s5) var(--s4); }
.derby__head.dt { align-content: end; min-height: 88px; }
.derby__head.dt .derby__tag { align-self: start; background: rgba(8, 12, 20, 0.62); border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.derby__head.dt--brothers .derby__tag { background: #996633; color: #fff4e0; }
.mu-card.is-derby[class*="derby--"] { border-color: var(--d1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--d1) 20%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--d1) 70%, transparent); }
.gz-story.is-derby[class*="derby--"] { border-color: var(--d1); border-top-color: var(--d1); }
.hn-item.is-derby[class*="derby--"] { box-shadow: inset 0 0 0 2px var(--d1); }
.cp-derby.dt { border-left: 0; }
.badge--derby.dt { border-color: rgba(255, 255, 255, 0.5); }

/* ================= PLAYER PHOTOS ================= */
/* every photo circle zooms Sleeper's half-body shots (150%, face near the top). Close-ups fill the
   circle, wide head-and-shoulders shots are zoomed on the face, Wikipedia photos fill from the top */
[data-photo].has-photo.is-closeup { background-size: 104% auto; background-position: center 38%; }
[data-photo].has-photo.is-wide { background-size: auto 125%; background-position: center 20%; }
[data-photo].has-photo.is-portrait { background-size: cover; background-position: center 18%; }


/* ================= DARK MODE ================= */
/* html[data-theme="dark"] (toggle in the nav, remembered per device). Night-match programme:
   deep navy paper, cream ink, brighter red so it still reads on dark. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1726;
  --bg-2: #111d30;
  --surface: #16233a;
  --surface-2: #1d2c46;
  --ink: #f1e8d4;
  --ink-2: #d9ccb0;
  --band: #08111f;
  --text: #f1e8d4;
  --muted: #b8c1d0;
  --faint: #8e99ab;
  --line: rgba(241, 232, 212, 0.13);
  --line-2: rgba(241, 232, 212, 0.26);
  --accent: #ff4d63;
  --on-accent: #0b1f3a;
  --pos: #f1e8d4;
  --on-pos: #0b1f3a;
  --neg: #ff5468;
  --gold: #e6c47a;
  --blue: #7fa8e0;
  --shade: rgba(241, 232, 212, 0.06);
  --paper-rgb: 13, 23, 38;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .league-table tbody tr:hover td.c-club { background: #1b2a44; }
html[data-theme="dark"] .nav.is-solid { box-shadow: 0 1px 0 var(--line), 0 3px 0 -1px var(--band); }
html[data-theme="dark"] .footer { border-top-color: #c8102e; }
/* the dropdown panel pins light colours for the see-through home bar; in dark mode it's a dark panel */
html[data-theme="dark"] .nav__menu { --text: #f1e8d4; --muted: #b8c1d0; --line: rgba(241, 232, 212, 0.13); --accent: #ff4d63; --shade: rgba(241, 232, 212, 0.06); }

/* dark mode: chart lines and markers that were navy-on-paper become cream-on-navy */
html[data-theme="dark"] .spark__best { stroke: rgba(241, 232, 212, 0.6); }
html[data-theme="dark"] .spark__guide, html[data-theme="dark"] .ax__cross, html[data-theme="dark"] .lk__zero { stroke: rgba(241, 232, 212, 0.4); background: rgba(241, 232, 212, 0.4); }
html[data-theme="dark"] .k--pot, html[data-theme="dark"] .k--best, html[data-theme="dark"] .sw--outline { border-color: rgba(241, 232, 212, 0.6); }
html[data-theme="dark"] .lc__pot { border-color: rgba(241, 232, 212, 0.5); }
html[data-theme="dark"] .sw--bg, html[data-theme="dark"] .hub-key--other, html[data-theme="dark"] .hub-dot, html[data-theme="dark"] .rk__dot { background: rgba(241, 232, 212, 0.3); fill: rgba(241, 232, 212, 0.3); }
html[data-theme="dark"] .ax__grid { stroke: rgba(241, 232, 212, 0.1); }
html[data-theme="dark"] .sc__bg, html[data-theme="dark"] .rk__line { stroke: rgba(241, 232, 212, 0.2); }
html[data-theme="dark"] .bc__plot { border-bottom-color: rgba(241, 232, 212, 0.35); }
html[data-theme="dark"] .bracket__lines path { stroke: rgba(241, 232, 212, 0.35); }
html[data-theme="dark"] .pr-range__span { background: rgba(241, 232, 212, 0.3); }
html[data-theme="dark"] .league-table tbody tr.cut td { border-top-color: rgba(241, 232, 212, 0.45); }
html[data-theme="dark"] .matrix td.self { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(241, 232, 212, 0.06) 6px 12px); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(241, 232, 212, 0.04) 25%, rgba(241, 232, 212, 0.09) 50%, rgba(241, 232, 212, 0.04) 75%); background-size: 200% 100%; }
html[data-theme="dark"] .pr-card.is-drag { background: var(--surface); }

/* theme toggle in the nav */
.nav__theme { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: none; border: 0; border-radius: 50%; color: var(--text); cursor: pointer; }
.nav__theme:hover { background: var(--shade); }
.nav__theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav__theme .i-sun { display: none; }
html[data-theme="dark"] .nav__theme .i-sun { display: block; }
html[data-theme="dark"] .nav__theme .i-moon { display: none; }
/* phones: the bar is brand + theme + (refresh) + menu. Nothing may shrink, or the menu button's lines vanish */
.nav__theme, .nav__refresh, .nav__toggle { flex: none; }
@media (max-width: 1180px) {
  .nav__inner { gap: var(--s1); }
  .brand { flex: 0 1 auto; min-width: 0; }
  .nav__theme { margin-left: auto; }
  .nav__theme ~ .nav__refresh, .nav__theme ~ .nav__toggle { margin-left: 0 !important; }
}
@media (max-width: 360px) {
  .nav__inner { padding: 0 var(--s3); }
  .brand { flex: none; gap: 6px; }
  .brand__ball { width: 24px; height: 24px; }
  .brand__word { font-size: 21px; }
  .nav__theme, .nav__refresh { width: 36px; }
}

/* ================= GET THE APP ================= */
.install-bar { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: 18px; background: #1b0020; color: #fbf7ee; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: install-in .45s cubic-bezier(.2,.8,.2,1) both; }
.install-bar[hidden] { display: none; }
html.menu-open .install-bar { display: none; }
.install-bar img { border-radius: 11px; flex: none; }
.install-bar p { margin: 0; flex: 1; min-width: 0; line-height: 1.2; }
.install-bar p b { display: block; font-size: 15px; }
.install-bar p small { color: #cbbfd0; font-size: 12.5px; }
.install-bar__add { flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #00ff85; color: #1b0020; font: 700 16px/1 var(--f-label, sans-serif); letter-spacing: .04em; cursor: pointer; }
.install-bar__x { flex: none; width: 36px; height: 44px; border: 0; background: none; color: #cbbfd0; font-size: 24px; cursor: pointer; }
html.has-install-bar body { padding-bottom: 92px; }
@keyframes install-in { from { transform: translateY(120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .install-bar { animation: none; } }
.install-sheet { width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 28px 22px 22px; background: var(--bg, #fbf7ee); color: var(--text, #1b0020); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.install-sheet::backdrop { background: rgba(15,0,20,.6); }
.install-sheet img { border-radius: 15px; }
.install-sheet h2 { font-family: var(--f-display, sans-serif); font-weight: 400; font-size: 28px; line-height: 1.05; margin: 12px 0 18px; text-transform: uppercase; }
.install-sheet__x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: var(--muted, #666); cursor: pointer; }
.install-steps { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; display: grid; gap: 14px; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.35; }
.install-steps li > span:last-child { flex: 1; }
.install-steps small { display: block; font-size: 13.5px; color: var(--muted, #666); margin-top: 2px; }
.install-steps__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #1b0020; color: #00ff85; display: grid; place-items: center; font-weight: 700; }
.install-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,122,255,.12); vertical-align: middle; margin: 0 2px; }
.install-ico svg { width: 18px; height: 18px; fill: none; stroke: #007aff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.install-ico circle { fill: #007aff; stroke: none; }
.install-sheet__ok { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #1b0020; color: #fbf7ee; font: 700 16px var(--f-label, sans-serif); letter-spacing: .04em; cursor: pointer; }
.mobile-menu__install { color: var(--accent) !important; font-weight: 700; }

/* ================= AWARDS: WEEKLY RECAP ================= */
.recap { margin-bottom: var(--s7); padding: var(--s5); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.recap__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.recap__text .subhead { margin: 0; flex-basis: 100%; }
.recap__text p { margin: 0; color: var(--muted); flex: 1 1 360px; max-width: 70ch; }
.recap-dl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); }
.recap-dl small { color: var(--faint); font-size: 13px; }
/* the long recap image, shown in a scrollable frame */
.recap__frame { max-width: 440px; max-height: 720px; overflow-y: auto; margin: 0 auto; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); background: #1b0a2b; overscroll-behavior: contain; }
.recap__frame img { display: block; width: 100%; height: auto; }
.recap__ph { aspect-ratio: 1080 / 4700; width: 100%; }

/* ================= AWARDS: PODIUM + FINISHES ================= */
.podium { margin-bottom: var(--s7); }
.podium__stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--s3); max-width: 760px; margin: 0 auto; }
.podium__spot { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.podium__club { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-bottom: var(--s3); min-width: 0; max-width: 100%; }
.podium__club b { font-weight: 700; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.podium__club small { color: var(--faint); font-size: 12px; }
.podium__pts { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--text); margin-top: 2px; }
.podium__spot--1 .podium__pts { font-size: 40px; }
.podium__spot--1 .crest { transform: scale(1.15); margin-bottom: 6px; }
.podium__block { width: 100%; display: grid; place-items: start center; padding-top: 10px; border-radius: 12px 12px 0 0; font-family: var(--f-display); color: #0b1f3a; }
.podium__block span { font-size: 40px; line-height: 1; }
.podium__spot--1 .podium__block { height: 140px; background: linear-gradient(180deg, #f2d27a, #c9a032); }
.podium__spot--2 .podium__block { height: 100px; background: linear-gradient(180deg, #e4e8ee, #aeb6c2); }
.podium__spot--3 .podium__block { height: 72px; background: linear-gradient(180deg, #e2a878, #b06f3e); }
.podium__spot--1 .podium__block span { font-size: 56px; }
.finishes { margin-top: var(--s8); }
.finishes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.finishes__head .subhead { margin: 0; }
.finishes__head p { margin: 0; color: var(--muted); font-size: 14px; }
.finishes__table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
.finishes__table th, .finishes__table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.finishes__table thead th { background: var(--band); color: #d5dbe6; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.finishes__table tbody th { text-align: left; font-weight: 700; white-space: nowrap; }
.finishes__table tbody th .crest { vertical-align: middle; margin-right: 8px; }
.finishes__table td { font-family: var(--f-display); font-size: 20px; }
.finishes__table td.is-zero { color: var(--faint); opacity: .6; }
.finishes__table td.is-mid { background: var(--shade); }
.finishes__table td.is-lead { color: #fff; background: #1f8a4c; }
.finishes__table td.is-shame { color: #fff; background: var(--neg); }
.finishes__table tr:last-child th, .finishes__table tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .podium__stage { gap: var(--s2); }
  .podium__club b { font-size: 13px; }
  .podium__pts { font-size: 22px; }
  .podium__spot--1 .podium__pts { font-size: 28px; }
  .podium__spot--1 .podium__block { height: 104px; }
  .podium__spot--2 .podium__block { height: 76px; }
  .podium__spot--3 .podium__block { height: 56px; }
  .finishes__table th, .finishes__table td { padding: 8px; }
  .finishes__table td { font-size: 17px; }
  .finishes__table tbody th .fin__name { display: none; }
}

/* ================= SQUAD BY CLUB + MAN OF THE MATCH (club profile) ================= */
.sbc__sub { margin: 0 0 var(--s3); font-size: 14px; color: var(--muted); }
.sbc__sub b { color: var(--text); }
.sbc__wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.sbc__donut { position: relative; margin: 0; width: 170px; aspect-ratio: 1; }
.sbc__donut svg { width: 100%; height: 100%; display: block; }
.sbc__donut circle { transition: stroke-width var(--t-fast); }
.sbc__donut circle:hover { stroke-width: 30; }
.sbc__donut figcaption { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
.sbc__donut figcaption b { font-family: var(--f-display); font-weight: 400; font-size: 40px; }
.sbc__donut figcaption small { color: var(--faint); font-size: 12px; }
.sbc__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sbc__legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "sw club n" ". faces faces"; align-items: center; column-gap: 10px; row-gap: 4px; }
.sbc__sw { grid-area: sw; width: 10px; height: 10px; border-radius: 3px; }
.sbc__club { grid-area: club; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sbc__club img { flex: none; object-fit: contain; }
.sbc__club b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc__club small { color: var(--faint); font-size: 12px; }
.sbc__mini { display: inline-flex; }
.sbc__mini img { width: 16px; height: 16px; margin-right: -4px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--surface); }
.sbc__n { grid-area: n; font-family: var(--f-display); font-size: 20px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.sbc__n small { margin-left: 4px; font-family: var(--f-body); font-size: 11px; color: var(--faint); }
.sbc__faces { grid-area: faces; display: flex; align-items: center; }
.sbc__faces em { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--faint); }
.sbc__tile { width: 26px; height: 26px; margin-right: -6px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 10px; color: var(--muted); box-shadow: 0 0 0 2px var(--surface); }
.sbc__tile.has-photo { background-color: #fff; }
.sbc__tile.has-photo span { display: none; }
.sbc__tile:hover, .sbc__tile:focus-visible { position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--accent); outline: none; }
@media (max-width: 560px) { .sbc__wrap { grid-template-columns: 1fr; justify-items: center; } .sbc__legend { width: 100%; } }
.motm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.motm__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 8px 10px; border-radius: 10px; background: var(--shade); cursor: pointer; }
.motm__list li:hover { box-shadow: inset 3px 0 0 var(--accent); }
.motm__photo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 13px; color: var(--muted); }
.motm__photo.has-photo { background-color: #fff; }
.motm__photo.has-photo span { display: none; }
.motm__name b { display: block; font-size: 15px; }
.motm__name small { color: var(--faint); font-size: 12px; }
.motm__n { display: inline-flex; align-items: baseline; gap: 6px; color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.motm__n b { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--text); letter-spacing: 0; }

/* ================= PLAYER STATS DATABASE ================= */
.pdb-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.7fr); gap: var(--s3); margin-bottom: var(--s4); }
.pdb-controls select { width: 100%; min-width: 0; }
.pdb-search input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 16px var(--f-body); }
.pdb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.pdb-bar .filters { margin-bottom: var(--s3); }
.pdb-count { margin: 0 0 var(--s2); font-size: 13px; color: var(--faint); }
.pdb-guide { margin: 0 0 var(--s3); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pdb-guide summary { cursor: pointer; padding: 10px 14px; font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.pdb-guide summary::-webkit-details-marker { display: none; }
.pdb-guide summary::before { content: "?"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: 0; }
.pdb-guide[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
.pdb-guide__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); padding: var(--s4) 14px; }
.pdb-guide__body h3 { margin: 0 0 6px; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pdb-guide__body dl { margin: 0; display: grid; gap: 4px; }
.pdb-guide__body dl div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; }
.pdb-guide__body dt { font-weight: 700; color: var(--text); }
.pdb-guide__body dd { margin: 0; color: var(--muted); }
.pdb-guide__body > p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--faint); }
.pdb-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.pdb-wrap .table-scroll { max-height: 75vh; overflow: auto; }
.pdb { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
.pdb th, .pdb td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pdb thead th { position: sticky; top: 0; z-index: 2; background: var(--band); color: #d5dbe6; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
.pdb thead th button { all: unset; cursor: pointer; display: block; width: 100%; }
.pdb thead th.is-sorted { color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
.pdb .pdb-c-name { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); min-width: 210px; }
.pdb thead .pdb-c-name { z-index: 3; background: var(--band); }
.pdb .pdb-c-own { text-align: left; }
.pdb .pdb-c-own .crest { width: 22px; height: 22px; margin-right: 6px; }
.pdb .pdb-c-own .pdb-own-name { font-size: 13px; }
.pdb-last { display: none; }
.pdb .pdb-c-pts { font-family: var(--f-display); font-size: 17px; background: var(--shade); }
.pdb thead .pdb-c-pts { font-family: var(--f-label); font-size: 13px; background: #16335e; }

.pdb tbody tr:hover td, .pdb tbody tr:hover th { background: var(--surface-2); }
.pdb-player { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pdb-player b { display: block; font-size: 14px; }
.pdb-player small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--faint); }
.pdb-player small .posb { font-size: 11px; padding: 0 5px; }
.pdb-player:hover b { text-decoration: underline; }
.pdb-photo { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 11px; color: var(--muted); }
.pdb-photo.has-photo { background-color: #fff; }
.pdb-photo.has-photo span { display: none; }
.pdb-zero { color: var(--faint); opacity: .6; }
.pdb-inj { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--neg); color: #fff; font-family: var(--f-label); font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.pdb-inj--doubt { background: #d08a1c; }
.pdb .pdb-c-fx { text-align: left; }
.fx { display: inline-block; min-width: 40px; margin-right: 3px; padding: 2px 4px; border-radius: 5px; text-align: center; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .03em; }
.fx i { font-style: normal; font-weight: 500; margin-left: 2px; opacity: .75; text-transform: lowercase; }
.fx--1, .fx--2 { background: #1f8a4c; color: #fff; }
.fx--3 { background: var(--surface-2); color: var(--text); }
.fx--4 { background: #e27c7c; color: #fff; }
.fx--5 { background: #b3172d; color: #fff; }
.pdb-more { display: flex; justify-content: center; margin-top: var(--s4); }
@media (max-width: 760px) {
  .pdb-controls { grid-template-columns: 1fr 1fr; }
  .pdb-search { grid-column: 1 / -1; }
  /* phones: surname only and a slimmer name column, crest only for the fantasy club, so more stats fit */
  .pdb .pdb-c-name { min-width: 0; max-width: 132px; }
  .pdb-player { gap: 8px; }
  .pdb-photo { width: 28px; height: 28px; }
  .pdb-full { display: none; }
  .pdb-last { display: inline; }
  .pdb-player b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
  .pdb .pdb-c-own .pdb-own-name { display: none; }
  .pdb .pdb-c-own .crest { margin-right: 0; }
  .pdb th, .pdb td { padding: 8px 7px; }
}

/* ================= TRADE CALCULATOR ================= */
.wip-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #d08a1c; color: #fff; letter-spacing: .08em; }
.tc-wip { margin: 0 0 var(--s4); padding: 10px 14px; border-radius: 12px; background: rgba(208,138,28,.12); border: 1px solid #d08a1c; font-size: 14px; color: var(--muted); }
.tc-wip b { color: var(--text); }
.tc-sides { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.tc-swap { align-self: center; justify-self: center; font-size: 26px; color: var(--faint); margin-top: 28px; }
.tc-side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--s4); min-width: 0; }
.tc-side select { width: 100%; }
.tc-sends { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; align-items: center; margin: var(--s3) 0; }
.tc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; }
.tc-chip .pdb-photo { width: 26px; height: 26px; }
.tc-chip button { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; }
.tc-chip button:hover { background: rgba(255,255,255,.2); }
.tc-roster { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; border-top: 1px solid var(--line); }
.tc-roster li { border-bottom: 1px solid var(--line); }
.tc-roster label { display: grid; grid-template-columns: 20px minmax(30px, auto) 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 4px; cursor: pointer; }
.tc-roster label:hover { background: var(--shade); }
.tc-roster input { width: 18px; height: 18px; accent-color: var(--accent); }
.tc-roster .posb { font-size: 11px; text-align: center; }
.tc-name { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-name small { display: block; font-weight: 500; font-size: 12px; color: var(--faint); }
.tc-ros { text-align: right; font-family: var(--f-display); font-size: 18px; line-height: 1; }
.tc-ros small { display: block; font-family: var(--f-body); font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.tc-result { margin-top: var(--s6); }
.tc-result .subhead { margin: 0 0 var(--s4); }
.tc-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.tc-res { border-radius: 18px; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--faint); }
.tc-res--win { border-top-color: #1f8a4c; }
.tc-res--loss { border-top-color: var(--neg); }
.tc-res__club { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.tc-res__tag { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; background: var(--surface-2); }
.tc-res--win .tc-res__tag { background: #1f8a4c; color: #fff; }
.tc-res--loss .tc-res__tag { background: var(--neg); color: #fff; }
.tc-res__big { margin: var(--s3) 0 0; font-family: var(--f-display); font-size: 56px; line-height: 1; }
.tc-res--win .tc-res__big { color: #1f8a4c; }
.tc-res--loss .tc-res__big { color: var(--neg); }
.tc-res__big small { display: block; margin-top: 4px; font-family: var(--f-body); font-size: 13px; color: var(--faint); }
.tc-res__sub { margin: var(--s2) 0 var(--s4); color: var(--muted); font-size: 14px; }
.tc-lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tc-lines li { background: var(--shade); border-radius: 10px; padding: 8px; text-align: center; }
.tc-lines span { display: block; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--faint); }
.tc-lines b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; }
.tc-lines em { font-style: normal; font-size: 12px; color: var(--faint); }
.tc-lines em.up { color: #1f8a4c; font-weight: 700; }
.tc-lines em.down { color: var(--neg); font-weight: 700; }
.tc-notes { margin: var(--s3) 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.tc-deal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.tc-deal h3 { margin: 0 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tc-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-players > li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.tc-players .pdb-player small { flex-wrap: wrap; white-space: normal; }
.tc-p__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tc-p__stats > span { text-align: center; background: var(--shade); border-radius: 8px; padding: 6px 2px; }
.tc-p__stats b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 18px; }
.tc-p__stats small { font-size: 11px; color: var(--faint); }
.tc-p__fx { display: flex; flex-wrap: wrap; gap: 3px; }
.tc-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.tc-how__body { padding: var(--s3) 14px var(--s4); font-size: 14px; color: var(--muted); line-height: 1.55; }
.tc-how__body p { margin: 0 0 var(--s2); }
@media (max-width: 760px) {
  .tc-sides { grid-template-columns: 1fr; }
  .tc-swap { margin: 0; transform: rotate(90deg); }
  .tc-res-grid, .tc-deal { grid-template-columns: 1fr; }
  .tc-res__big { font-size: 44px; }
  .tc-roster { max-height: 300px; }
}

.tc-past { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: 14px; background: rgba(230,196,122,.18); border: 1px solid var(--gold); font-size: 14px; }
.tc-past small { display: block; margin-top: 4px; color: var(--muted); }
.tc-history { margin-top: var(--s7); }
.tc-history ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-history li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tc-history li.is-on { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.tc-history__when { font-family: var(--f-display); font-size: 20px; line-height: 1; }
.tc-history__when small { display: block; font-family: var(--f-body); font-size: 12px; color: var(--faint); margin-top: 2px; }
.tc-history__deal { display: grid; gap: 4px; font-size: 14px; min-width: 0; }
.tc-history__deal > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-history__deal .crest { width: 22px; height: 22px; }
.tc-history__deal small { color: var(--faint); font-size: 12px; }
@media (max-width: 560px) { .tc-history li { grid-template-columns: 1fr; } }

/* ================= TACTICS (club profile) ================= */
.tac__sub { margin: var(--s3) 0 var(--s2); font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.tac__sub:first-of-type { margin-top: 0; }
.tac-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.tac-bar span { min-width: 4px; }
.tac-legend { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.tac-legend li { display: inline-flex; align-items: baseline; gap: 6px; }
.tac-legend i { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.tac-legend b { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--text); letter-spacing: 0.02em; }
.tac-legend small { color: var(--faint); font-size: 12px; }
.tac-vs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tac-vs li { display: grid; grid-template-columns: 64px 1fr 1fr auto; align-items: center; gap: var(--s3); padding: 8px 12px; border-radius: 10px; background: var(--shade); border-left: 3px solid transparent; }
.tac-vs b { font-family: var(--f-display); font-weight: 400; font-size: 20px; letter-spacing: 0.02em; }
.tac-vs span { font-variant-numeric: tabular-nums; font-weight: 700; }
.tac-vs small { display: block; font-weight: 500; font-size: 11px; color: var(--faint); }
.tac-vs em { font-style: normal; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.tac-vs li.is-worst { border-left-color: var(--neg); }
.tac-vs li.is-worst em { background: var(--neg); color: #fff; }
.tac-vs li.is-best { border-left-color: #1f8a4c; }
.tac-vs li.is-best em { background: #1f8a4c; color: #fff; }
.tac__note { margin: var(--s3) 0 0; font-size: 12px; color: var(--faint); }
@media (max-width: 560px) { .tac-vs li { grid-template-columns: 52px 1fr 1fr; } .tac-vs em { grid-column: 1 / -1; justify-self: start; } .tac-vs span { white-space: nowrap; } }

/* ================= LIVE GAMEWEEK ================= */
.mu-side__pre { opacity: .7; }
.mu-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0263c; display: inline-block; margin-left: 2px; animation: live-pulse 1.6s ease-in-out infinite; }
.mu-card__ft.is-live { background: #e0263c; color: #fff; }
.mu-card__ft.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: middle; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mu-live-dot, .mu-card__ft.is-live::before { animation: none; } }

/* ================= PLAYER LINKS ================= */
.plink { cursor: pointer; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.plink:hover, .plink:focus-visible { text-decoration: underline; text-decoration-color: currentColor; outline: none; }
[data-player] { cursor: pointer; }
.squad li[data-player]:hover, .lead-row[data-player]:hover { background: var(--shade); }
.pl[data-player]:hover .pl__name, .pl[data-player]:focus-visible .pl__name { background: var(--accent); }
[data-player]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================= DRAFT BOARD ================= */
/* steals and busts stack on the left, the haul runs down the right: both columns end level */
.db-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "steals haul" "busts haul"; gap: var(--s4); margin-bottom: var(--s6); }
.db-sum__steals { grid-area: steals; }
.db-sum__busts { grid-area: busts; }
.db-sum__haul { grid-area: haul; display: grid; grid-template-rows: auto 1fr; }
.db-sum__haul .db-haul { align-content: space-between; }
.db-card { padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; border-top: 4px solid var(--ink); min-width: 0; }
.db-card--up { border-top-color: #2e8b57; }
.db-card--down { border-top-color: var(--accent); }
.db-card__title { margin: 0 0 var(--s3); font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.db-card__title small { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--faint); margin-left: 4px; }
.db-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.db-mini { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--bg-2); cursor: pointer; }
.db-mini:hover { background: var(--shade); box-shadow: inset 0 0 0 1px var(--line-2); }
.db-mini__photo, .db-pick__photo { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2) center 6% / 150% auto no-repeat; font-family: var(--f-display); font-size: 11px; color: var(--muted); }
.db-mini__photo.has-photo, .db-pick__photo.has-photo { background-color: #fff; }
.db-mini__photo.has-photo span, .db-pick__photo.has-photo span { display: none; }
.db-mini__who { min-width: 0; }
.db-mini__who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-mini__who small { font-size: 12px; color: var(--faint); }
.db-mini__rank { text-align: right; }
.db-mini__rank b { display: block; font-variant-numeric: tabular-nums; font-size: 14px; }
.db-mini.up .db-mini__rank b { color: #1f7a45; }
.db-mini.down .db-mini__rank b { color: var(--accent); }
.db-mini__rank small { font-size: 12px; color: var(--faint); }
.db-haul li { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.db-haul .crest { width: 26px; height: 26px; }
.db-haul b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-haul li > span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-haul small { display: block; font-weight: 500; font-size: 11px; color: var(--faint); }
.db-haul__n { font-family: var(--f-display); color: var(--faint); }

.db-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.db-bar .filters { margin: 0; }
.db-bar .filters + .filters { padding-left: var(--s3); border-left: 1px solid var(--line-2); }
.chip--up.is-active { background: #1f7a45; border-color: #1f7a45; }
.chip--down.is-active { background: var(--accent); border-color: var(--accent); }
.db-hint { margin: 0 auto 0 0; font-size: 13px; color: var(--faint); }
.db-nav { display: flex; gap: 8px; }
.db-nav[hidden] { display: none; }
.db-arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.db-arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.db-arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.db-arrow:hover:not(:disabled) svg { stroke: #fbf7ee; }
.db-arrow:disabled { opacity: 0.35; cursor: default; }
.db-scroll { cursor: grab; }
.db-scroll.is-dragging { cursor: grabbing; user-select: none; }
.db-scroll.is-dragging .db-pick { pointer-events: none; }
.db-scroll { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.db { display: grid; grid-template-columns: 56px repeat(var(--teams, 8), minmax(128px, 1fr)); gap: 4px; padding: 8px; min-width: max-content; }
.db-corner, .db-round { position: sticky; left: 0; z-index: 2; background: var(--surface); display: grid; place-content: center; justify-items: center; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.db-round b { font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--text); letter-spacing: 0; line-height: 1; }
.db-round span { font-size: 13px; }
.db-team {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px;
  background: var(--band); color: #fbf7ee; text-align: center; font-size: 12px; line-height: 1.2;
}
.db-team .crest { width: 34px; height: 34px; }
.db-team b { font-weight: 700; overflow-wrap: anywhere; }
.db-team__slot { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; color: #a9b4c6; }
.db-team:hover { background: var(--ink-2); }
.db-team.is-on { background: var(--accent); }
.db-team:focus-visible, .db-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.db-pick {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 7px 8px 8px; border-radius: 10px; min-width: 0;
  background: var(--bg-2); border-left: 4px solid var(--pc, var(--line-2)); transition: opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.db-pick:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(11, 31, 58, 0.5); }
.db-pick.pos-GK { --pc: #d9b45a; }
.db-pick.pos-D { --pc: var(--blue); }
.db-pick.pos-M { --pc: #2e6b45; }
.db-pick.pos-F { --pc: var(--neg); }
.db-pick.is-empty { background: transparent; border: 0; cursor: default; }
.db-pick__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; color: var(--faint); }
.db-pick__pos { color: var(--pc); }
.db-pick__who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-pick__photo { width: 30px; height: 30px; }
.db-pick__name { min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-pick__name small { display: flex; align-items: center; gap: 3px; font-weight: 500; font-size: 11px; color: var(--faint); }
.db-pick__name .club-logo { width: 12px; height: 12px; }
.db-pick__rank { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.db-pick__rank i { font-style: normal; margin-left: 2px; }
.db-pick__rank.up { color: #1f7a45; }
.db-pick__rank.down { color: var(--accent); }
.db-pick__gone { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-pick.is-gone { opacity: 0.55; }
.db-pick.is-gone:hover { opacity: 0.85; }
/* highlight one club's picks, or one position (classes set in renderDraft) */
.db-pick.is-dim { opacity: 0.16; }
.db-pick.is-hl { box-shadow: 0 0 0 2px var(--accent); }
.db-pick.is-hl.is-gone { opacity: 0.7; }

/* ================= RESPONSIVE ================= */
/* 13 tabs need ~1350px across; below that the bar switches to the menu button */
@media (max-width: 1180px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}
@media (max-width: 1024px) {
  .cp__body { grid-template-columns: 1fr; }
  .hide-md { display: none; }
}
@media (max-width: 860px) {
  .db-sum { grid-template-columns: 1fr; grid-template-areas: "steals" "busts" "haul"; }
  .club-grid { grid-template-columns: 1fr; }
  .cp-main { grid-template-columns: 1fr; padding: var(--s4); }
  .cp-col--pitch { order: 2; }
  .cp-strip { padding: var(--s3) var(--s4); }
  .gz-front { grid-template-columns: 1fr; }
  .hn { grid-template-columns: 1fr; }
  .hero__scoreboard { position: relative; right: auto; bottom: auto; width: 100%; max-width: 420px; margin-top: var(--s6); grid-row: 3; }
  .dev-sign { position: relative; top: auto; right: auto; width: 100%; max-width: 460px; grid-row: 1; margin: 0 0 var(--s6); }
  .hero__content { grid-row: 2; }
  .charts { grid-template-columns: 1fr; }
  .lc__row { grid-template-columns: 1fr auto; }
  .lc__name { grid-column: 1 / -1; }
  .charts--wk { grid-template-columns: 1fr; }
  .mu-list { grid-template-columns: 1fr; }
  .wk__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk__row { grid-template-columns: 1fr 52px; }
  .lk__track { grid-column: 1 / -1; grid-row: 2; }
  .bc__col { grid-template-rows: 160px auto; }
  .hm { grid-template-columns: minmax(84px, 1.4fr) repeat(var(--cols), minmax(28px, 1fr)) 46px; }
  .hm__y, .hm__avg { font-size: 13px; }
  .vr { grid-template-columns: 1fr; }
  .home__grid { grid-template-columns: 1fr; }
  .derbies { grid-template-columns: 1fr; }
  .hub__groups, .leaders__list { grid-template-columns: 1fr; }
  .leaders__list { grid-template-rows: none; grid-auto-flow: row; }
  .hub__summary { grid-template-columns: 1fr; }
  .pr-row { grid-template-columns: 36px 30px minmax(0, 1fr) 70px; }
  .pr-range { grid-column: 3 / -1; grid-row: 2; }
  .pr-notes-btn { grid-column: 3 / -1; justify-self: start; }
  .pr-notes { grid-column: 1 / -1; }
  .market { grid-template-columns: 1fr; }
  .market__side { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  /* stays a left-to-right bracket on phones: swipe sideways */
  .bracket { margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4) var(--s3); scroll-padding: 0 var(--s4); }
  .bracket__round { flex: 0 0 214px; }
  .bracket__round--final { flex: 0 0 290px; }
  .bracket__link { flex: 0 0 26px; }
  .bracket-hint { display: block; }
  .tie__row { gap: 8px; padding: 6px; }
  .tie__row .crest, .tie__crest { width: 24px; height: 24px; }
  .tie__name { font-size: 14px; }
  .tie__agg { font-size: 16px; }
  .final-stage { padding: var(--s5) var(--s3) var(--s4); }
  .hero { align-content: end; padding-bottom: var(--s8); }
  .hero__vignette { background: linear-gradient(0deg, var(--band) 0%, rgba(11,31,58,0.7) 30%, rgba(11,31,58,0.25) 55%, rgba(11,31,58,0.1) 100%); }
  .versus { grid-template-columns: 1fr; gap: var(--s4); }
  .versus__mid { order: -1; }
  .cp__kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .db-bar .filters + .filters { padding-left: 0; border-left: 0; }
  .db { grid-template-columns: 40px repeat(var(--teams, 8), 112px); }
  .db-round b { font-size: 18px; }
  .derby__head.dt { min-height: 112px; }
  .derby__head.dt.dt--brothers::before { background-size: auto, 100% auto; background-position: 0 0, center 40%; }
  .tk { grid-template-columns: 84px minmax(0, 1fr) 66px; min-height: 168px; }
  .tk::before, .tk::after { right: 55px; }
  .tk__kit .crest { width: 58px; height: 58px; }
  .tk__main { padding: 12px 12px 10px; }
  .tk__name { font-size: 22px; }
  .tk__stub b { font-size: 34px; }
  .tk__spark { display: none; }
  .cp__banner { flex-wrap: wrap; gap: var(--s3); padding: var(--s4); }
  .cp__banner .crest--xl { width: 76px; height: 76px; }
  .cp__id { flex-basis: 100%; order: 3; }
  .cp__banner h3 { font-size: 34px; }
  .cp-chip { min-width: 0; flex: 1 1 calc(33% - 8px); padding: 8px 10px; }
  .cp-chip b { font-size: 20px; }
  .dh__game { grid-template-columns: 40px minmax(0, 1fr); }
  .dh__motm { grid-column: 1 / -1; }
  .gz-story, .gz-story--lead { padding: var(--s4); }
  .gz-pitch { min-height: 480px; }
  .hn-item { padding: var(--s4); }
  .mu-card__head { padding: var(--s3) var(--s4); gap: var(--s2); }
  .mu-side__score b { font-size: 30px; }
  .mu-side .crest { width: 30px; height: 30px; }
  .mu-side__name { font-size: 14px; }
  .mu-card__motm { padding: 10px var(--s4); }
  .mu-sheet { padding: var(--s2) 4px var(--s3); }
  .mu-p__btn { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; padding: 4px 2px; }
  .mu-p__photo { width: 22px; height: 22px; font-size: 9px; }
  .pd__head { padding: var(--s4) var(--s8) var(--s3) var(--s4); }
  .pd__name { font-size: 24px; }
  .pd__body { padding: var(--s3) var(--s4) var(--s4); }
  .pd__table .pd__stats { min-width: 0; font-size: 12px; }
  .pd__table td, .pd__table th { padding: 6px 5px; }
  .mu-p__name { font-size: 13px; }
  .section, .section--alt { padding: var(--s8) var(--s4); }
  .hero { padding-left: var(--s4); padding-right: var(--s4); }
  .hero__ctas { gap: var(--s5); margin-top: var(--s6); flex-wrap: wrap; }
  .hide-sm { display: none; }
  .league-table th, .league-table td { padding: 10px 6px; }
  .matrix { min-width: 0; }
  .matrix th, .matrix td { padding: 8px 6px; font-size: 14px; }
  .matrix th[scope="row"] { text-align: center; }
  .matrix th[scope="row"] .crest { margin: 0; }
  .matrix__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .club-cell .mgr { display: none; }
  .crest { width: 32px; height: 32px; }
  .meetings li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px var(--s3); padding: 10px var(--s3); }
  .meetings .wk { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .meetings li::after { display: none; }
  .feed__item { grid-template-columns: 1fr auto; }
  .feed__item > .crest { display: none; }
  .cp__banner { padding: var(--s5); gap: var(--s4); }
  .cp__banner .crest--xl { width: 72px; height: 72px; }
  .cp__body { padding: var(--s4); }
  .pitch { min-height: 0; gap: 12px; padding: 28px 4px 36px; }
  .pl { width: 25%; gap: 3px; }
  .pl__photo { width: 40px; height: 40px; font-size: 13px; }
  .pl__proj { font-size: 10px; padding: 1px 4px; margin-top: -8px; }
  .pl__name { font-size: 11px; padding: 2px 4px; }
  .pl__club { font-size: 10px; }
  .section__head::before, .section__head::after { display: none; }
  .motion-toggle { left: auto; right: var(--s4); bottom: auto; top: calc(var(--nav-h) + var(--s2)); }
  .dev-sign { padding-top: 0; }
  .dev-sign__cable { display: none; }
  .nc { grid-template-columns: 1fr; }
  .vr__year { font-size: 44px; }
  .chart-card { padding: var(--s4); }
  .rec-spot { padding: var(--s7) var(--s4) var(--s5); min-height: 0; }
  .rec-spot__lights { left: var(--s4); right: var(--s4); }
  .rec-board { padding: var(--s4) var(--s3); }
  .rec-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s3); padding: 10px var(--s3); }
  .rec-row__who { grid-column: 2 / -1; grid-row: 2; }
  .rec-row__val { grid-column: 3; grid-row: 1; font-size: 20px; }
  .derby { padding: var(--s4); padding-top: calc(var(--s4) + 8px); }
  .derby__side .crest { width: 56px; height: 56px; }
  .gw__sum { flex-wrap: wrap; gap: 4px var(--s3); padding: var(--s3) var(--s4); }
  .gw__chev { margin-left: 0; }
  .gw .feed { padding: 0 var(--s2) var(--s2); }
  .hub-field, .hub-field select { width: 100%; min-width: 0; }
  .hub-sum__lists { grid-template-columns: 1fr; }
  .hub-group { padding: var(--s3); }
  .hub-row { grid-template-columns: minmax(0, 1fr) 70px 64px; row-gap: 6px; }
  .hub-strip { grid-column: 1 / -1; grid-row: 2; }
  .leaders { padding: var(--s4); }
  .pr-ballot { padding: var(--s4); }
  .pr-card { grid-template-columns: 30px minmax(0, 1fr) auto; padding: var(--s3); }
  .pr-card__handle { display: none; }
  .pr-card__rank { font-size: 26px; }
  .pr-card__id .form { margin-left: 0; }
  .pr-stat { min-width: 64px; padding: 4px 8px; }
  .pr-login, .pr-login input[type="text"] { width: 100%; }
  .cal__row { grid-template-columns: 56px minmax(0, 1fr); gap: 6px var(--s3); padding: 10px var(--s3); }
  .cal__gw b { font-size: 24px; }
  .cal__match { grid-column: 1 / -1; }
  .page-hero { padding-left: var(--s4); padding-right: var(--s4); padding-top: calc(var(--nav-h) + var(--s6)); }
  .home-card { padding: var(--s4); }
  .home-card__head { flex-wrap: wrap; }
  .mini-head, .mini-row a { grid-template-columns: 24px 28px minmax(0, 1fr) 52px 52px; gap: var(--s2); }
  .mini-row .crest { width: 28px; height: 28px; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  .derby__crown { animation: none; }
  .dt.dt--upstate::after, .dt.dt--i95::before, .dt.dt--i95::after { animation: none; }
  .dt__video { display: none; }
  .pr-emblem--top, .pr-emblem--bottom { animation: none; }
  .tk.is-ripping, .tk.is-ripping .tk__stub, .club-profile.cp-enter, .club-profile.cp-enter .cp-strip, .club-profile.cp-enter .cp-col { animation: none !important; }
  .dt.dt--upstate { animation: none; }
  .tk { transform: none !important; }
  .mu-derby::after { animation: none; display: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero__title .line > span { transform: none; }
  .hero__sub, .hero__ctas, .hero__scoreboard, .reveal, .club-card, .pl { opacity: 1; transform: none; }
  .dev-sign { transform: rotate(-2deg); }
  .derby .derby__side { transform: none !important; opacity: 1 !important; }
  .derby__bar span { transform: scaleX(var(--share)); }
  .spot--l { transform: rotate(-14deg); } .spot--r { transform: rotate(14deg); }
  .final-trophy::after { display: none; }
  .ticker__track { animation: none; }
}
/* players listed at two positions: split badge in both colours */
.posb--multi { color: #fff; padding-inline: 4px; white-space: nowrap; }
.posb--FM { background: linear-gradient(90deg, var(--neg) 50%, #2e6b45 50%); }
.posb--MF { background: linear-gradient(90deg, #2e6b45 50%, var(--neg) 50%); }
.posb--DM { background: linear-gradient(90deg, var(--blue) 50%, #2e6b45 50%); }
.posb--MD { background: linear-gradient(90deg, #2e6b45 50%, var(--blue) 50%); }
.posb--DF { background: linear-gradient(90deg, var(--blue) 50%, var(--neg) 50%); }
.posb--FD { background: linear-gradient(90deg, var(--neg) 50%, var(--blue) 50%); }

/* club picker: tap a crest */
.tc-side__label { margin: 0 0 8px; font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tc-side__label b { color: var(--ink); letter-spacing: .04em; }
.tc-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tc-pick__club { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; border: 2px solid transparent; min-width: 0; text-align: center; }
.tc-pick__club .crest { width: 40px; height: 40px; }
.tc-pick__club span:last-child { font-size: 11px; font-weight: 600; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.tc-pick__club:hover { background: var(--shade); }
.tc-pick__club:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-pick__club.is-on { border-color: var(--accent); background: var(--shade); }
.tc-pick__club.is-on span:last-child { color: var(--ink); font-weight: 700; }
.tc-pick__club:disabled { opacity: .3; cursor: not-allowed; }
.tc-roster .pdb-photo { width: 32px; height: 32px; }

/* Gazette: written match reports and the "coming soon" post */
.gz-story__report p { margin: 0 0 .85em; line-height: 1.6; }
.gz-story__report p:first-child::first-letter { font-family: var(--f-display); float: left; font-size: 3.1em; line-height: .85; padding: 4px 8px 0 0; color: var(--accent); }
.gz-story__byline { margin: 4px 0 12px; font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.gz-soon { margin: 0 0 var(--s5); padding: var(--s4) var(--s5); border-radius: 16px; border: 2px dashed var(--accent); background: var(--surface); }
.gz-soon__tag { margin: 0 0 4px; font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.gz-soon__head { margin: 0 0 6px; font-family: var(--f-display); font-size: clamp(22px, 4vw, 30px); text-transform: uppercase; line-height: 1.05; }
.gz-soon p:last-child { margin: 0; color: var(--faint); }

/* player stats: rank column and the multi-position toggle */
.pdb .pdb-c-rk { width: 1%; text-align: center; font-family: var(--f-label); font-weight: 700; color: var(--faint); padding-inline: 6px; }
.pdb-check { display: inline-flex; align-items: center; gap: 8px; align-self: end; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pdb-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.pdb td.pdb-c-rk { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 30px; min-width: 30px; max-width: 30px; padding-inline: 2px; }
.pdb thead th.pdb-c-rk { position: sticky; left: 0; z-index: 3; width: 30px; min-width: 30px; max-width: 30px; padding-inline: 2px; color: #d5dbe6; }
/* the pinned rank + player columns: a soft edge so columns scrolling underneath read as sliding under, not cut off */
.pdb .pdb-c-name { left: 30px; box-shadow: 8px 0 8px -6px rgba(11, 31, 58, 0.28); clip-path: inset(0 -16px 0 0); }
@media (max-width: 760px) { .pdb .pdb-c-name { max-width: 162px; } .pdb-player b { max-width: 120px; } }