/* thefinal landing — dark-sporty, consistent with the game SPA tokens */
:root {
  --bg: #0a0e12;
  --bg-elev: #121820;
  --bg-elev-2: #1a222c;
  /* The light badge under a dark crest or logo (see .badge__crest--backed). */
  --logo-backing-bg: #eef2f4;
  --logo-backing-radius: 6px;
  --border: rgba(255, 255, 255, 0.07);
  /* The game's ClubBadge boxes (frontend/src/styles/_tokens.scss): a Club
     looks the same size on both sites. */
  --badge-sm-w: 46px;
  --badge-sm-h: 32px;
  --badge-md-w: 68px;
  --badge-md-h: 48px;
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #eaf1f4;
  --text-muted: #8593a0;
  --accent: #c8f751;
  --accent-ink: #0a0e12;
  --live: #ff5a4d;
  /* A lost call is its own signal, softer than --live: on one card a running
     prediction and a lost one must never read as the same red. */
  --negative: #ef8377;
  --radius: 14px;
  /* The game's own tokens the shared timeline styles read (static/timeline.css,
     compiled from the game's SCSS — ADR-0039): the same values as
     frontend/src/styles/_tokens.scss. timeline_test.go fails on any it reads
     that is missing here. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --space-4: 16px;
  /* For the competition table and the game's ClubBadge (static/cup-table.css,
     ADR-0039): the game's values, held to _tokens.scss by
     TestTimelineCSSTokensMatchTheGame. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --dur-medium: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --identity-badge: 20px;
  /* For the game's ranking row (static/ranking-row.css, ADR-0039). */
  --fs-2xs: 0.6875rem;
  --rank-badge: 2rem;
  --identity-stripes-w: 4px;
  --identity-stripes-h: 14px;
  --identity-stripes-gap: 2px;
  --badge-lg-w: 88px;
  --badge-lg-h: 64px;
  --pending: #f5a524;
  --radius-lg: 20px;
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  /* The landing's own big panels; --shadow-card is the game's (ranking rows). */
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  /* For the public Ranks page (static/ranks.css, ADR-0039): the Ranks tab's
     frame and its pager's .btn — the game's values, held
     to _tokens.scss by TestTimelineCSSTokensMatchTheGame. */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --btn-h: 44px;
  --btn-h-sm: 36px;
  --btn-h-lg: 48px;
  --btn-px: var(--space-5);
  --btn-px-sm: var(--space-3);
  --btn-px-lg: var(--space-6);
  --btn-fs: 0.9375rem;
  --btn-fs-sm: 0.8125rem;
  --btn-fs-lg: 1rem;
  --btn-gap: var(--space-2);
  --btn-icon: 18px;
  --btn-icon-sm: 16px;
  --btn-icon-lg: 20px;
  --btn-radius: var(--radius);
  --wrap: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.site-header__brand { display: inline-flex; align-items: center; gap: 8px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.03em; text-decoration: none; color: var(--text);
}
/* The mark (static/logo-mark.svg): our own artwork, decorative beside the name. */
.wordmark__mark { display: block; width: 33px; height: 28px; flex: none; }
.wordmark__accent { color: var(--accent); }
.site-nav { display: none; gap: 24px; }
.site-nav a {
  white-space: nowrap;
  text-decoration: none; color: var(--text-muted); font-weight: 500; font-size: 0.95rem;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--text); }
/* CTA is flush-right on mobile (nav hidden); on desktop the nav takes the auto
   push and the CTA trails it with a fixed gap. */
.site-header .btn { margin-left: auto; }

/* 1000, not 860: a full nav in a longer language (French, with the language
   switcher) does not fit a ~900px header; the menu toggle serves below it. */
@media (min-width: 1000px) {
  .site-nav { display: flex; margin-left: auto; align-items: center; }
  .site-header .btn { margin-left: 28px; }
}
/* Between 1000 and 1299 px the longest navs (Armenian ran 92 px over at
   1040) get tighter gaps, a hair smaller type and the CTA's short label
   rather than pushing the CTA off the edge. */
@media (min-width: 1000px) and (max-width: 1299px) {
  .site-nav { gap: 18px; }
  .site-nav a, .site-nav .menu__trigger { font-size: 0.88rem; }
  .site-header .btn { margin-left: 18px; }
  .site-header .cta-label--long { display: none; }
  .site-header .cta-label--short { display: inline; }
}

/* At 320px the brand + badge + CTA + toggle row runs ~16px past the wrap, and
   body{overflow-x:hidden} would clip the toggle rather than scroll to it. The
   badge is not what gives way — it is a promise, and the smallest phone is
   owed it too — so the nav gaps do. Clear from 344px up. */
@media (max-width: 343px) {
  .site-header__inner { gap: 12px; }
  .site-header__toggle { margin-left: 4px; }
  /* A longer language's short label ("Spielen") still ran 8px past at 320. */
  .site-header .btn--sm { padding-inline: 12px; }
}

/* ---------- Leagues mega-menu ---------- */
.menu { position: relative; }
.menu__trigger {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; border: none; padding: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  color: var(--text-muted); cursor: pointer; transition: color 0.18s ease;
}
.menu__trigger:hover, .menu:hover .menu__trigger, .menu:focus-within .menu__trigger { color: var(--text); }
.menu__trigger::after {
  content: ''; width: 0; height: 0; margin-top: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.menu__panel {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; gap: 32px; min-width: 380px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel); padding: 22px;
}
/* Invisible bridge filling the 16px gap between trigger and panel. Without it,
   the pointer crosses a dead zone on its way down — :hover drops and the panel
   hides before the cursor reaches a league link. The ::before is a descendant
   of .menu, so hovering it keeps .menu:hover (and the panel) alive. */
.menu__panel::before {
  content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
/* Progressive enhancement: without JS, hover/focus-within reveals the panel
   even though [hidden] is present; with JS, the script flips the hidden
   attribute directly and this rule is moot (panel already shown/removed). */
.menu__panel[hidden] { display: none; }
/* Only WITHOUT the script: once menu.js runs it owns `hidden` and
   aria-expanded, and these rules would keep a panel the script just closed on
   screen while focus or the pointer is still inside — a click on the trigger,
   or Escape (which returns focus to it), could never close it. */
:root:not(.js-menus) .menu:hover .menu__panel[hidden],
:root:not(.js-menus) .menu:focus-within .menu__panel[hidden] { display: flex; }
.menu__col { min-width: 160px; }
.menu__heading {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.01em; color: var(--text); margin-bottom: 10px;
}
.menu__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.menu__list a {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--text-muted); font-size: 0.92rem; font-weight: 500;
  transition: color 0.18s ease;
}
.menu__list a:hover { color: var(--accent); }
.menu__live { color: var(--live); font-size: 0.6rem; line-height: 1; }
/* Every League on the plan in two columns on a desktop panel, in the game's
   order (popularity) down each column, however many there are; the Cups
   beside them. */
.menu__list--wide { display: block; columns: 2; column-gap: 24px; }
.menu__list--wide li { break-inside: avoid; margin-bottom: 6px; }
/* The country code beside a name two competitions share (an upstream that still sends one). */
.menu__cc { color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.04em; }
.pill {
  display: inline-flex; align-items: center; font-family: var(--font-body);
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px;
}
/* Alpha is a live claim about the product, not a greyed-out "not yet" like
   --soon: accent-tinted so it reads as current, but only tinted, so it does not
   compete with the accent CTA at the other end of the same header. */
.pill--alpha {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  text-decoration: none;
}
.pill--alpha:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---------- Language switcher (ADR-0030) ---------- */
.flag { width: 20px; height: 15px; flex: none; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.lang-trigger { gap: 8px; }
.lang-trigger__code {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted);
}
/* Centred under its trigger, like the Tables menu. With thirty-odd languages
   the list runs two columns and scrolls inside a bounded panel rather than
   past the bottom of the window. */
.menu__panel--lang { min-width: 0; padding: 12px; max-height: min(70vh, 560px); overflow-y: auto; }
.menu__panel--lang .lang-list { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); column-gap: 4px; }
.lang-list { list-style: none; display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: 0; }
.lang-list a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lang-list a { padding: 8px 10px; border-radius: 8px; color: var(--text-muted); font-size: 0.92rem; font-weight: 500; }
.lang-list a:hover { background: var(--bg-elev-2); color: var(--text); }
.lang-list a[aria-current="page"] { color: var(--text); font-weight: 600; }
.lang__name { flex: 1; white-space: nowrap; }
/* The CTA's short label is for phones only (see the header template). */
.cta-label--short { display: none; }
@media (max-width: 419px) {
  .site-header .cta-label--long { display: none; }
  .site-header .cta-label--short { display: inline; }
  .site-header .wordmark { gap: 5px; }
  .site-header .wordmark__mark { width: 26px; height: 22px; }
}
/* Below 380px the header holds the name, the Alpha pill, the CTA and the menu
   toggle with nothing to spare in the longer languages: the mark gives way. */
@media (max-width: 379px) {
  .site-header .wordmark__mark { display: none; }
}

/* ---------- Mobile nav disclosure ---------- */
.site-header__toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 10px; flex: none;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 10px;
  color: var(--text); cursor: pointer;
}
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: ''; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
}
.site-header__toggle-bars { position: relative; }
.site-header__toggle-bars::before { position: absolute; top: -6px; left: 0; }
.site-header__toggle-bars::after { position: absolute; top: 6px; left: 0; }

@media (max-width: 999px) {
  .site-header__toggle { display: inline-flex; }

  /* Its own scroll: the nav hangs from a sticky header, so a list taller than
     the screen (forty languages) would move with the page and never reveal
     its lower half. */
  .site-nav.site-nav--open {
    max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border);
    padding: 16px clamp(20px, 5vw, 40px) 24px;
    box-shadow: var(--shadow-panel);
  }
  .site-nav.site-nav--open a { padding: 8px 0; }
  .site-nav.site-nav--open .menu { width: 100%; }
  .site-nav.site-nav--open .menu__trigger { padding: 8px 0; }
  .site-nav.site-nav--open .menu__panel {
    position: static; transform: none; z-index: auto;
    width: 100%; min-width: 0; box-shadow: none; border: none;
    background: transparent; padding: 4px 0 8px 12px; margin: 0;
  }
  /* No hover on touch, and the panel is in-flow here — the bridge would just be
     a stray transparent strip that could swallow taps. */
  .site-nav.site-nav--open .menu__panel::before { content: none; }
  .site-nav.site-nav--open .menu__list--wide { columns: 1; }
  /* The open nav lists the languages in full: no trigger to tap first. */
  .site-nav.site-nav--open .menu--lang { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
  .site-nav.site-nav--open .menu--lang .menu__trigger { display: none; }
  .site-nav.site-nav--open .menu--lang .menu__panel[hidden] { display: flex; }
  /* In the phone nav the list is in-flow and one column; the nav scrolls. */
  .site-nav.site-nav--open .menu__panel--lang { max-height: none; overflow: visible; }
  .site-nav.site-nav--open .menu__panel--lang .lang-list { grid-template-columns: 1fr; }
  .site-nav.site-nav--open .lang-list a { padding: 8px 0; }
  /* The open nav runs to the bottom of the screen, where the phone's fixed
     bars sit (the sticky "Play free", the consent banner — both z-index 60):
     they covered its last languages and took their taps. The sticky bar
     steps aside — the header's own Play button is right there — and the
     header lifts over the consent banner until the nav closes. */
  .site-header:has(.site-nav--open) { z-index: 70; }
  body:has(.site-nav--open) .sticky-cta { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #d6ff6b; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 9px 18px; font-size: 0.9rem; }
.btn--lg { padding: 17px 34px; font-size: 1.1rem; }
/* A large CTA may wrap on a phone: nowrap is right for an English "Play free",
   wrong for "Joue à thefinal gratuitement", which ran past a 320px screen. */
@media (max-width: 419px) {
  .btn:not(.btn--sm) { white-space: normal; text-align: center; }
}

/* ---------- Shared section bits ---------- */
.section { padding-block: clamp(64px, 10vw, 120px); }
.section--alt { background: var(--bg-elev); border-block: 1px solid var(--border); }
.section__head { max-width: 640px; margin-bottom: clamp(36px, 6vw, 56px); }
.kicker {
  display: inline-block; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.section__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
}
.section__lede { margin-top: 16px; color: var(--text-muted); font-size: 1.08rem; max-width: 56ch; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(56px, 9vw, 104px); overflow: hidden; }
.hero__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 720px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 18%, rgba(200, 247, 81, 0.16), transparent 70%),
    radial-gradient(45% 45% at 82% 12%, rgba(43, 108, 255, 0.14), transparent 70%);
  filter: blur(8px);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(40px, 6vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 0.85rem; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 15px; margin-bottom: 22px;
}
.eyebrow__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(200, 247, 81, 0.15); }
/* A long compound ("voetbalwedstrijden") at headline size can outgrow a
   phone column; it breaks (hyphenated where the language allows) instead. */
.hero__title {
  overflow-wrap: break-word; hyphens: auto;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
}
.hl { color: var(--accent); }
/* The turning phrase in the headline (index.html's rotator script). Every
   phrase is in the page, stacked in ONE grid cell: the cell takes the widest
   and tallest of them in this language, so a turn never moves the headline,
   the lede or the card beside it — in Russian the phrases differ by a third
   of their width, and a box that followed each one shifted the whole hero.
   A phrase longer than the column wraps inside the cell rather than running
   off a phone. The box is clipped so the leaving and arriving phrases only
   show inside it; padding and a matching negative margin give descenders
   room under the title's tight line-height. */
.rotator {
  display: inline-grid; vertical-align: top; overflow: hidden;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
/* opacity, not visibility: visibility would drop the first phrase from the
   accessibility tree while another shows, leaving the h1 without its end. The
   first phrase is the h1's text throughout; the others are aria-hidden. */
.rotator__word { grid-area: 1 / 1; opacity: 0; }
.rotator__word.is-current, .rotator__word.is-out { opacity: 1; }
.rotator__word.is-in { animation: rotIn 480ms cubic-bezier(0.22, 0.68, 0.3, 1) both; }
.rotator__word.is-out { animation: rotOut 480ms cubic-bezier(0.55, 0, 0.7, 0.4) both; }
@keyframes rotIn { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rotOut { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.hero__lede { margin-top: 22px; font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--text-muted); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__note { margin-top: 18px; font-size: 0.85rem; color: var(--text-muted); }

/* Match card mock */
.hero__card { display: flex; justify-content: center; }
.matchcard {
  width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev));
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-panel);
}
.matchcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.livebadge { display: inline-flex; align-items: center; gap: 8px; color: var(--live); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; }
.livebadge__pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .livebadge__pulse { animation: none; } }
/* A finished match is not live: the game's MatchRow says FT in plain text,
   without the live red or the pulse. */
.livebadge.is-ended { color: var(--text-muted); }
.livebadge.is-ended .livebadge__pulse { display: none; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 90, 77, 0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255, 90, 77, 0); } }
.matchcard__comp { color: var(--text-muted); font-size: 0.82rem; }
.matchcard__score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 18px; }
.team { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Names pulled in against the scoreline, badges pinned to the outer edges. With
   the names left at their natural widths the columns are equal but their
   CONTENT is not — "Real Madrid" filled its 147px while "Man City" left 18px of
   air on the side facing the score, so the score read as sitting nearer Madrid.
   Letting each name span the rest of its column and aligning its text inward
   makes both names touch the score, whatever they are called. */
.team__name { flex: 1; text-align: right; }
.team--right .team__name { text-align: left; }
/* Below ~600px the three-column scoreline leaves each club ~44px and ellipses
   the name away. The name beside the code is not decoration — it is what
   ADR-0012's referential-use argument rests on, "on every surface" — so the
   card takes the shape the live board already uses down here: clubs stacked,
   the scoreline beside them, both names rendered whole. */
@media (max-width: 600px) {
  .matchcard__score { grid-template-columns: 1fr auto; row-gap: 10px; }
  .matchcard__score > div:first-of-type { grid-area: 1 / 1; }
  .matchcard__score > div:last-of-type { grid-area: 2 / 1; }
  .matchcard__score > .score { grid-area: 1 / 2 / span 2; }
  .matchcard__score .team--right { flex-direction: row-reverse; justify-content: flex-end; }
  /* Pulling the names inward is a three-column idea and it does not survive the
     stack: with the clubs on their own rows there is no score between them to
     be equidistant from, and a name still filling its column floated away from
     its own badge — Real Madrid's sat 89px clear of RMA while Man City's hugged
     MCI, so the two rows no longer lined up. Down here each name is just wide
     enough for itself, beside its code. */
  .matchcard__score .team__name { flex: 0 1 auto; text-align: left; }
}
.team--right { justify-content: flex-end; }
.team__name { font-weight: 600; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The badge is a wordmark chip, not a crest: a three-letter club code over the
   club's own two-stop gradient. Deliberately rectangular — a square reads as a
   badge outline and cramps three characters; the wide chip is also visibly not
   a crest, which is the shape ADR-0012 wants. Ink is fixed dark because every
   colour is clamped into a light band at ingest. */
.badge {
  flex: none; width: var(--badge-md-w); height: var(--badge-md-h); border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
  color: #0a0e12; background: linear-gradient(140deg, var(--c1), var(--c2));
}
/* A licensed crest (ADR-0027) keeps the wordmark chip's OUTER box at every size,
   so a board of mixed clubs — some imported, some not — has no ragged edge and
   nothing moves when an import lands or a takedown removes one. Inside that box
   it is drawn bare: no gradient (the club colour has already done its job on
   every badge with no image), no frame, no padding, because the chip is a wide
   rectangle and a crest is roughly square — every pixel spent on a border is a
   pixel off the artwork's height, which is all the height it gets. */
.badge--crest { background: none; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
/* contain, never cover: a crest is artwork with its own aspect ratio, and
   cropping a mark is a modification of it. In a wide box a square crest is
   centred at the row's full height, which is the largest it can legibly be. */
.badge__crest { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
/* Artwork too dark for these surfaces (AssetImage.backing "light", measured at
   import — the Champions League's starball, Metz's dark red) sits on a light
   square badge: the image's own padding and background, border-box, inside the
   same height, so the chip's outer box and the row around it are unchanged.
   Never recoloured, never cropped. Kept in step with the game's club-badge. */
.badge__crest--backed { box-sizing: border-box; aspect-ratio: 1; padding: 3px; background: var(--logo-backing-bg); border-radius: var(--logo-backing-radius); }
.score { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }
/* The hero timeline is the game's own (static/timeline.css, compiled from its
   SCSS; the markup is templates/timeline.html — ADR-0039). The card only adds
   its window: a FIXED height that clips at the bottom, so nothing on the card
   changes its height while it plays. A new line fades in at the top and the
   rest move down inside the window; the oldest leave through the clipped
   bottom. */
.hero-tl {
  height: 23rem; overflow: hidden; margin: 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, #000 85%, transparent);
}
.hero-tl .tl__row.is-new, .hero-tl .tl__phase.is-new { animation: tlIn 380ms cubic-bezier(0.22, 0.68, 0.3, 1) both; }
@keyframes tlIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* A number that has just changed gets one beat of emphasis rather than a
   count-up: the Score is the thing the card is about, and a value that merely
   swaps is easy to miss between two rows arriving. */
.is-bumped { animation: bump 460ms ease-out both; }
@keyframes bump { 0% { transform: none; } 30% { transform: scale(1.14); } 100% { transform: none; } }
/* Reduced motion: no travel, no bump — the animator does not run at all, and
   the server's full-time frame is the card. */
@media (prefers-reduced-motion: reduce) {
  .hero-tl .tl__row.is-new, .hero-tl .tl__phase.is-new, .is-bumped { animation: none; }
}
.matchcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.matchcard__foot strong { font-family: var(--font-display); color: var(--accent); }
.rankjump { color: var(--accent); font-weight: 700; font-size: 0.85rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 24px; position: relative; overflow: hidden;
}
.step::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.6; }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--bg-elev-2); -webkit-text-stroke: 1px var(--border-strong); }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 10px 0 8px; letter-spacing: -0.01em; }
.step p { color: var(--text-muted); }

/* ---------- Predictions grid ---------- */
/* minmax(0, 1fr), not 1fr: a bare 1fr track never shrinks below its longest
   word, and a longer language's word ("remplacement") pushed the two phone
   columns past the screen edge. Same on every multi-column grid below. */
.qgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qcard {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; transition: transform 0.18s ease, border-color 0.18s ease;
}
.section--alt .qcard { background: var(--bg-elev-2); }
.qcard:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.qcard__pts {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--accent-ink); background: var(--accent); border-radius: 8px; padding: 3px 10px; margin-bottom: 14px;
}
.qcard--soon .qcard__pts { background: var(--bg-elev); color: var(--text-muted); border: 1px solid var(--border-strong); }
.qcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 6px; hyphens: auto; overflow-wrap: break-word; }
.qcard p { color: var(--text-muted); font-size: 0.94rem; }

/* ---------- Feature (leagues) ---------- */
.feature { display: grid; gap: clamp(36px, 6vw, 60px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ticks { list-style: none; margin: 22px 0 30px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text); }
.ticks li::before {
  content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(200, 247, 81, 0.16); color: var(--accent); font-size: 0.72rem; font-weight: 800;
  display: grid; place-items: center;
}
.pts { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Pillars ---------- */
.pillars { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 24px; }
.section--alt .pillar { background: var(--bg-elev-2); }
.pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; margin-bottom: 8px; }
.pillar p { color: var(--text-muted); font-size: 0.96rem; }

/* ---------- Final CTA ---------- */
.cta-band { padding-block: clamp(64px, 11vw, 128px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 120% at 50% 0%, rgba(200, 247, 81, 0.12), transparent 60%);
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-size: clamp(2rem, 6vw, 3.4rem); max-width: 16ch; margin-inline: auto; }
.cta-band p { color: var(--text-muted); font-size: 1.1rem; margin: 18px 0 30px; }

/* ---------- Top matches (above every footer) ---------- */
/* layout.html "top-matches": ten cards, each the league page's round row
   (.match.rounds__row, unchanged) under its competition. One column on a
   phone, two from 900px. */
.top-matches { border-top: 1px solid var(--border); padding-block: 48px; }
.top-matches__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 20px;
}
.top-matches__list { list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .top-matches__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.top-match { display: grid; gap: 4px; min-width: 0; padding: 12px 8px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.top-match__league {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%;
  color: var(--text-muted); font-size: 0.8rem; text-decoration: none; padding-inline: 8px;
}
.top-match__league span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-match__league:hover, .top-match__league:focus-visible { color: var(--accent); }
/* A competition logo (competitionLogo): whole artwork in a fixed box. */
.comp-logo { flex: none; width: 20px; height: 20px; object-fit: contain; }
.comp-logo--backed { background: var(--logo-backing-bg); border-radius: 4px; padding: 2px; }

/* ---------- Footer ---------- */
/* The site's directory (layout.html "site-footer"): brand + hand-off, the
   nav of every League (two columns) and Cup, the disclaimers, then the
   operator line with the legal documents. */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); }
.site-footer__inner { display: grid; gap: 40px; padding-block: 56px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } }
.site-footer__brand .wordmark { text-decoration: none; }
.site-footer__brand p { color: var(--text-muted); margin-top: 12px; font-size: 0.94rem; max-width: 32ch; }
.site-footer__cta { margin-top: 18px; }
.site-footer__nav { display: grid; gap: 32px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.site-footer__title {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 14px;
}
.site-footer__links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.site-footer__links--cols { display: block; columns: 2; column-gap: 24px; }
@media (min-width: 1100px) { .site-footer__links--cols { columns: 3; } }
.site-footer__links--cols li { break-inside: avoid; margin-bottom: 8px; }
.site-footer__links a, .site-footer__legal-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; line-height: 1.35; transition: color var(--dur-medium) var(--ease-standard); }
.site-footer__links a:hover, .site-footer__links a:focus-visible,
.site-footer__legal-links a:hover, .site-footer__legal-links a:focus-visible { color: var(--accent); }
.site-footer__cc { font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.7; }
.site-footer__disclaimer { display: grid; gap: 6px; padding-block: 24px; border-top: 1px solid var(--border); }
.site-footer__disclaimer p { color: var(--text-muted); font-size: 0.86rem; max-width: 90ch; }
.site-footer__disclaimer strong { color: var(--text); }
.site-footer__base { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.86rem; }
.site-footer__legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__legal-links a { font-size: 0.86rem; }
/* The language switcher (ADR-0030): a quiet row above the base line, wrapping
   on narrow screens; the current language is plain text-colour, not a link
   colour, so it reads as "you are here". */

/* ---------- Live scoreboard ---------- */
.board__tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 20px; scrollbar-width: none; }
.board__tabs::-webkit-scrollbar { display: none; }
.board__tab {
  flex: none; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.board__tab:hover { color: var(--text); }
.board__tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.board__league { margin-bottom: 26px; }
.board__league-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  color: var(--text-muted); padding: 0 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.board__list { list-style: none; display: grid; gap: 4px; }
.board__empty { color: var(--text-muted); padding: 24px 4px; }
.match {
  display: grid; align-items: center; gap: 12px; padding: 12px 8px; border-radius: var(--radius);
  grid-template-columns: 58px minmax(0, 1fr) auto auto; transition: background 0.15s ease;
}
.match:hover { background: var(--bg-elev); }
.match__status { font-size: 0.82rem; color: var(--text-muted); text-align: center; }
.match__ko { font-weight: 600; }
.match__live { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 700; }
.match__pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .match__pulse { animation: none; } }
.match__ft { font-weight: 700; color: var(--text); }
.standings__pts { font-weight: 700; }
.match__off { color: var(--text-muted); }
.match__teams { display: grid; gap: 6px; min-width: 0; }
.match__team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.match__name { font-weight: 600; font-size: 0.96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge--sm { width: var(--badge-sm-w); height: var(--badge-sm-h); border-radius: 8px; font-size: 0.8rem; }
/* The standings club cell: badge and name on one line. A table cell cannot be a
   flex container without leaving the table layout, so the badge goes inline. */
.standings__club { white-space: nowrap; }
.standings__club > .badge { display: inline-grid; vertical-align: middle; margin-right: 10px; }
.standings__club > .badge--crest { display: inline-flex; }
.standings__name { vertical-align: middle; }
.match__score { display: grid; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-align: center; min-width: 24px; color: var(--text-muted); }
.match--live .match__score, .match--finished .match__score { color: var(--text); }
.match__cta { justify-self: end; }
@media (max-width: 560px) {
  .match { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .match__cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
/* A board row links to the Fixture's Pairing page when it has one: the anchor
   is the Clubs, stretched over the whole row (the row also holds the play
   CTA, and links cannot nest); the CTA sits above the stretch, its own target. */
.match { position: relative; }
a.match__link { color: inherit; text-decoration: none; }
a.match__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.match__link:hover .match__name, a.match__link:focus-visible .match__name { text-decoration: underline; }
a.match__link:focus-visible { outline: none; }
a.match__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.match__cta { position: relative; z-index: 1; }

/* ---------- League page: the season's Fixtures, round by round ---------- */
.rounds { margin-top: clamp(40px, 7vw, 64px); }
.rounds__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.rounds__head .pairing__h2 { margin-bottom: 0; }
.rounds__nav { display: flex; align-items: center; gap: 10px; }
.rounds__label { font-weight: 700; min-width: 9rem; text-align: center; }
.rounds__btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.rounds__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rounds__btn:disabled { opacity: 0.35; cursor: default; }
.rounds__btn[hidden] { display: none; }
.rounds__row { grid-template-columns: 72px minmax(0, 1fr) auto; color: inherit; text-decoration: none; }
a.rounds__row:hover .match__name, a.rounds__row:focus-visible .match__name { text-decoration: underline; }
.rounds__when { display: grid; gap: 2px; }
.rounds__date { font-size: 0.78rem; }
.rounds__row .match__status { display: grid; gap: 2px; justify-items: center; }
@media (max-width: 560px) {
  .rounds__row { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .rounds__head { justify-content: flex-start; }
}

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Rules / documentation page ---------- */
.rules { padding-block: clamp(28px, 6vw, 56px); }
.rules__layout { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rules__layout { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; } }

.rules__toc { position: static; }
@media (min-width: 900px) { .rules__toc { position: sticky; top: 88px; } }
.rules__toc-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
.rules__toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rules__toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 0.92rem; }
.rules__toc a:hover { color: var(--text); background: var(--bg-elev); }

.rules__body { min-width: 0; }
.rules__head { border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 8px; }
.rules__h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-size: clamp(2rem, 5vw, 3rem); margin: 10px 0 14px; }
.rules__lede { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; }
.rules__lede strong { color: var(--text); }
.rules__meta { margin-top: 14px; color: var(--text-muted); font-size: 0.9rem; }

.rules__section { padding-block: 26px; border-bottom: 1px solid var(--border); scroll-margin-top: 88px; }
.rules__section:last-of-type { border-bottom: none; }
.rules__section h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.6rem; margin-bottom: 12px; }
.rules__section h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 22px 0 8px; scroll-margin-top: 88px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rules__section p { color: var(--text-muted); max-width: 68ch; margin-bottom: 10px; }
.rules__section p strong, .rules__section li strong { color: var(--text); }
.rules__section code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text); }

.rules__badge { font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 9px; }

.rules__dl { display: grid; gap: 4px 0; margin-top: 6px; }
.rules__dl dt { color: var(--text); font-weight: 600; margin-top: 12px; }
.rules__dl dd { color: var(--text-muted); max-width: 68ch; }

.rules__steps, .rules__ticks { margin: 6px 0 0; padding-left: 22px; color: var(--text-muted); }
.rules__steps li, .rules__ticks li { margin-bottom: 10px; max-width: 68ch; }
.rules__ticks { list-style: none; padding-left: 0; }
.rules__ticks li { position: relative; padding-left: 26px; }
.rules__ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* A table wider than a phone scrolls inside its own box: the page itself
   hides horizontal overflow (body overflow-x: hidden), so a wide table would
   otherwise be cut off rather than scrollable. tabindex on the wrapper lets a
   keyboard scroll it too. */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table-scroll > .rules__table { margin: 0; }
.table-scroll { margin: 14px 0 4px; }
.rules__table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 0.95rem; overflow: hidden; }
.rules__table th, .rules__table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rules__table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rules__table tbody th { color: var(--text); font-weight: 600; }
.rules__table .pts { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 1.05rem; }
.rules__table .pts--neg { color: var(--live); }


/* ---------- Legal pages ----------------------------------------------------
   The four legal documents (/privacy, /cookies, /terms, /legal) reuse the
   .rules__* documentation layout rather than cloning forty rules under a
   .legal__* prefix: they are the same kind of page — a table of contents beside
   a long body of prose, tables and definition lists. Only what genuinely
   differs is added here. */

/* /legal is short enough that a sticky table of contents beside it would be a
   nav for four headings — so that page drops the sidebar column. */
.rules__layout--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
@media (min-width: 900px) { .rules__layout--single { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Consent banner -------------------------------------------------
   Rendered hidden by the server and revealed by static/consent.js only when
   there is a live choice to make.

   The two buttons are intentionally equal in weight. Making "Accept" the
   visually dominant option is the classic dark pattern that invalidates the
   consent it collects, so .consent__actions gives both children the same box
   and the same .btn--ghost fill — only the label tells them apart, as in the
   game's banner. */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--bg-elev); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
}
.consent[hidden] { display: none; }
.consent__inner { display: grid; gap: 16px; padding-block: 18px; align-items: center; }
@media (min-width: 780px) { .consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.consent__text p { color: var(--text-muted); font-size: 0.92rem; max-width: 72ch; }
.consent__text p strong { color: var(--text); }
.consent__text p + p { margin-top: 6px; }
.consent__text a { color: var(--accent); }
.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1 1 auto; min-width: 132px; justify-content: center; }

/* The persistent control on /cookies — same two choices, always reachable, so
   withdrawing consent is no harder than giving it. */
.consent__more { display: none; }
@media (max-width: 599px) {
  /* One line and a row of two equal buttons: about a third of the height. */
  .consent__inner { gap: 10px; padding-block: 12px; }
  .consent__text p + p { display: none; }
  .consent__more { display: inline; white-space: nowrap; }
  .consent__actions .btn { min-width: 0; flex: 1 1 0; min-height: 44px; }
}
.consent__panel { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 18px; margin-top: 14px; background: var(--bg-elev); }
.consent__status { color: var(--text); font-weight: 600; margin-bottom: 12px; }
.consent__panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__note { color: var(--text-muted); font-size: 0.86rem; margin-top: 12px; max-width: 68ch; }

/* ---------- Pairing pages (/matches/{a}-vs-{b}, …/history/{date}) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pairing { padding-block: 40px 72px; }
.pairing__head { display: grid; gap: 14px; justify-items: center; text-align: center; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.pairing__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.pairing__scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; max-width: 640px; }
.pairing__club { display: flex; align-items: center; gap: 12px; min-width: 0; justify-content: flex-end; }
.pairing__club--away { justify-content: flex-start; }
.pairing__club-name { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pairing__score { min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; }
.pairing__meta { color: var(--text-muted); font-size: 0.95rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.pairing__meta a { color: var(--text); }
.pairing__status { font-weight: 700; color: var(--text); }
.pairing__status--live { color: var(--live); }
.pairing__minute { font-weight: 700; color: var(--live); font-variant-numeric: tabular-nums; }
.pairing__minute:empty, .pairing__status:empty { display: none; }
.pairing__block { padding-block: 32px; border-bottom: 1px solid var(--border); }
.pairing__block:last-child { border-bottom: 0; }
.pairing__h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 14px; }
.pairing__h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 22px 0 10px; color: var(--text-muted); }
.pairing__note { color: var(--text-muted); }
.pairing__cta { margin-top: 20px; }
.pairing__hidden { color: var(--text-muted); font-style: italic; }
.pairing__record { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pairing__record-label { color: var(--text-muted); font-size: 0.88rem; }
.pairing__list { list-style: none; display: grid; gap: 4px; }
.pairing__item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 10px 8px; border-radius: var(--radius); }
.pairing__item:hover { background: var(--bg-elev); }
.pairing__item time { color: var(--text-muted); font-size: 0.9rem; }
.pairing__item .score { font-size: 1.05rem; }
.pairing__fixture { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
a.pairing__fixture { text-decoration: none; }
a.pairing__fixture:hover { text-decoration: underline; }
.pairing__league { color: var(--text-muted); font-size: 0.85rem; }
.pairing__faq { display: grid; gap: 6px; }
.pairing__faq dt { font-weight: 700; margin-top: 12px; }
.pairing__faq dt:first-child { margin-top: 0; }
.pairing__faq dd { color: var(--text-muted); }
.pairing__board td, .pairing__board th { white-space: nowrap; }
.pairing__nav { display: grid; gap: 10px; padding-top: 28px; }
.pairing__nav-link { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; }
.pairing__nav-link:hover { border-color: var(--border-strong); background: var(--bg-elev); }
.pairing__nav-link .score { font-size: 1rem; }
.pairing__nav-dir { display: block; color: var(--text-muted); font-size: 0.82rem; }
.pairing__nav-link--hub { font-weight: 700; }

/* The fans' prediction: three bars and the most named scores. */
/* ---- The Pairing hub (templates/match.html, h2h.go) ----------------------
   --a and --b are the two Clubs' colours (pairStyle: validated, kept apart),
   set on the section; --club is one Club's, on its form card. Colour is never
   the only signal: every bar has its numbers, every chip its letter. */
.badge--xs { width: 28px; height: 20px; border-radius: 6px; font-size: 0; }
.badge--xl { width: 104px; height: 80px; border-radius: 18px; font-size: 1.6rem; }
.h2h-hero { position: relative; isolation: isolate; border-bottom: 0; padding: 28px 0 32px; }
.h2h-hero::before {
  content: ""; position: absolute; inset: -40px calc(50% - 50vw) 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--a) 28%, transparent), transparent 70%),
    radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--b) 28%, transparent), transparent 70%);
  border-bottom: 1px solid var(--border);
}
.h2h-hero__board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(8px, 3vw, 32px); width: 100%; max-width: 720px; margin-top: 8px; }
.h2h-hero__club { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.h2h-hero__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.3rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.h2h-hero__centre { display: grid; justify-items: center; gap: 4px; padding-top: clamp(14px, 4vw, 22px); }
.h2h-hero__score { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; white-space: nowrap; }
.h2h-hero__score--date { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.h2h-hero__time { color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.h2h-hero__vs { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text-muted); }
@media (max-width: 520px) {
  .badge--xl { width: 72px; height: 56px; font-size: 1.15rem; }
  .h2h-hero .form-chips { gap: 2px; }
  .h2h-hero .form-chip { width: 19px; height: 19px; border-radius: 5px; font-size: 0.68rem; }
}

.form-chips { list-style: none; display: flex; gap: 4px; justify-content: center; }
.form-chip {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; line-height: 1; color: var(--accent-ink);
}
.form-chip--W { background: #3ccf7a; }
.form-chip--D { background: #8593a0; }
.form-chip--L { background: var(--negative); }

.h2h { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin-top: 10px; }
.h2h__side { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.h2h__side--d { padding-inline: 8px; }
.h2h__side .badge { margin-bottom: 6px; }
.h2h__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.h2h__side--a .h2h__n { color: var(--a); }
.h2h__side--b .h2h__n { color: var(--b); }
.h2h__side--d .h2h__n { color: var(--text-muted); }
.h2h__label { color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.h2h__name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.h2h__bar { display: flex; gap: 3px; height: 30px; margin: 18px 0 6px; border-radius: 10px; overflow: hidden; }
.h2h__seg {
  display: grid; place-items: center; min-width: 2.6rem; flex-basis: 0;
  font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--accent-ink);
}
.h2h__seg--a { background: var(--a); }
.h2h__seg--d { background: var(--bg-elev-2); color: var(--text); }
.h2h__seg--b { background: var(--b); }
.h2h__insights { list-style: none; display: grid; gap: 8px; margin: 18px 0 4px; }
.h2h__insights li { position: relative; padding: 10px 14px 10px 36px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; }
.h2h__insights li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }
.h2h__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin: 14px 0 22px; }
.h2h__fact { padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.h2h__fact dt { color: var(--text-muted); font-size: 0.82rem; }
.h2h__fact dd { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.h2h__fact--record dd { font-size: 0.95rem; }
.h2h__fact-sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--text-muted); }

.meets { list-style: none; display: grid; gap: 6px; }
.meets + .meets__more, .meets__more .meets { margin-top: 6px; }
.meets__more > summary { list-style: none; margin-top: 12px; cursor: pointer; }
.meets__more > summary::-webkit-details-marker { display: none; }
.meets__more[open] > summary { display: none; }
.meet__link {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none;
}
a.meet__link:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
a.meet__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meet__when { display: grid; gap: 2px; font-size: 0.85rem; color: var(--text-muted); }
.meet__league { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet__club { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-muted); }
.meet__club--home { justify-content: flex-end; text-align: end; }
.meet__club--home .badge { order: 2; }
.meet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.meet--home .meet__club--home, .meet--away .meet__club--away, .meet--draw .meet__club, .meet--upcoming .meet__club { color: var(--text); }
.meet--home .meet__club--home .meet__name, .meet--away .meet__club--away .meet__name { font-weight: 800; }
.meet__score { min-width: 4.2rem; padding: 4px 10px; text-align: center; font-size: 1.1rem; border-radius: 8px; background: var(--bg-elev-2); white-space: nowrap; }
.meet__score--status { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0; }
@media (max-width: 640px) {
  .meet__link { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 6px; padding: 10px 12px; }
  .meet__when { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; }
  .meet__club { gap: 6px; }
  .meet__name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 0.9rem; }
  .meet__score { min-width: 3.4rem; padding: 4px 6px; }
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 12px; }
.form-card { padding: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-top: 3px solid var(--club); border-radius: var(--radius); }
.form-card__head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 12px; min-width: 0; }
.form-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-card .form-chips { justify-content: flex-start; margin-bottom: 10px; }
.form-list { list-style: none; display: grid; }
.form-row { display: grid; grid-template-columns: 3.6rem 1.6rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.form-row__date { color: var(--text-muted); font-size: 0.82rem; }
.form-row__venue { text-decoration: none; display: grid; place-items: center; width: 1.6rem; height: 1.3rem; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.form-row__opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.form-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.form-row__result { min-width: 3.4rem; padding: 3px 8px; border-radius: 7px; text-align: center; color: var(--accent-ink); }
.form-row__result .score { font-size: 0.95rem; }
.form-row__result--W { background: #3ccf7a; }
.form-row__result--D { background: #8593a0; }
.form-row__result--L { background: var(--negative); }

.compare { margin-top: 10px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.compare__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.compare__club { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.compare__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare__club--b { justify-content: flex-end; text-align: end; }
.compare__rows { display: grid; gap: 12px; }
.compare__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; grid-template-areas: "a label b" "bar bar bar"; gap: 6px 10px; align-items: baseline; }
.compare__label { grid-area: label; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
.compare__a { grid-area: a; font-variant-numeric: tabular-nums; font-weight: 600; }
.compare__b { grid-area: b; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.compare__v--better { font-weight: 800; color: var(--text); }
.compare__a:not(.compare__v--better), .compare__b:not(.compare__v--better) { color: var(--text-muted); }
.compare__bar { grid-area: bar; display: flex; gap: 3px; height: 6px; }
.compare__fill { flex-basis: 0; min-width: 3px; border-radius: 3px; }
.compare__fill--a { background: var(--a); }
.compare__fill--b { background: var(--b); }
.compare__note { margin-top: 12px; font-size: 0.82rem; }

.pairing__table { margin-top: 4px; }
.pairing__more { margin-top: 10px; }
.pairing__more a { color: var(--accent); font-weight: 600; }
/* The leaderboards: the game's ranking rows (static/ranking-row.css), in the
   game's list (leaderboards.scss .rows). */
.pairing .rows { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.tag__text--hidden { color: var(--text-muted); font-style: italic; }

/* The hub's call to action when the fans' prediction has nothing to show:
   the copy, and the game's prediction card for this Fixture as a mock
   (.matchcard, as on the home hero — aria-hidden, crests through clubBadge). */
.pitch {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  margin-block: 28px; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(60% 100% at 0% 100%, color-mix(in srgb, var(--a, var(--accent)) 18%, transparent), transparent 70%),
    var(--bg-elev);
}
.pairing__block.pitch { border-bottom: 1px solid var(--border-strong); }
.pitch__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 10px 0 12px; overflow-wrap: anywhere; }
.pitch__body { color: var(--text-muted); font-size: 1.02rem; max-width: 46ch; }
.pitch__note { margin-top: 10px; font-weight: 600; color: var(--text); }
.pitch__cta { margin-top: 22px; }
.pitch__visual { display: grid; justify-items: center; perspective: 1200px; }
.pitch__card { max-width: 380px; transform: rotate(-2deg); box-shadow: var(--shadow-panel), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .pitch__card { transition: transform 0.4s var(--ease-standard); }
  .pitch:hover .pitch__card { transform: rotate(0deg) translateY(-4px); }
}
.pitch__card .matchcard__top { flex-wrap: wrap; gap: 4px 12px; }
.pitch__card-label { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.pitch__pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--accent); color: var(--accent); }
.pitch__colon { color: var(--text-muted); }
.pitch__picks { list-style: none; display: grid; gap: 8px; }
.pitch__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); font-weight: 600; font-size: 0.92rem; }
.pitch__row--on { border-color: var(--accent); }
.pitch__pts { font-family: var(--font-display); font-weight: 800; color: var(--accent); white-space: nowrap; }
.pitch__bold { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.8rem; }
@media (max-width: 760px) {
  .pitch { grid-template-columns: 1fr; }
  .pitch__card { transform: none; }
}

.crowd { list-style: none; display: grid; gap: 10px; max-width: 560px; margin-top: 12px; }
.crowd__row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) 3.5rem; gap: 12px; align-items: center; }
.crowd__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crowd__track { height: 10px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.crowd__bar { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.crowd__row--a .crowd__bar { background: var(--a); }
.crowd__row--b .crowd__bar { background: var(--b); }
.crowd__row--draw .crowd__bar { background: var(--text-muted); }
.crowd__row--away .crowd__bar { background: #7cc6ff; }
.crowd__pct { font-variant-numeric: tabular-nums; text-align: end; color: var(--text-muted); }
.crowd__top { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.crowd__top li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }
.crowd__top .score { font-size: 1.1rem; }

/* Leaderboard tabs with no script: the checked radio shows its panel. The
   radios stay focusable (arrow keys move between tabs) but are drawn as the
   labels, the board's day tabs' look. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tabs__label {
  font-weight: 600; font-size: 0.9rem; color: var(--text-muted); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.tabs__label:hover { color: var(--text); }
.tabs__radio:checked + .tabs__label { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.tabs__radio:focus-visible + .tabs__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabs__panel { display: none; flex-basis: 100%; margin-top: 12px; }
.tabs__panel [hidden] { display: none; }
.tabs__radio:nth-of-type(1):checked ~ .tabs__panel:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .tabs__panel:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .tabs__panel:nth-of-type(3) { display: block; }

/* A finished Fixture minute by minute is the game's own timeline:
   static/timeline.css (ADR-0039). */

@media (max-width: 560px) {
  .pairing__scoreline { gap: 10px; }
  .pairing__club { flex-direction: column; gap: 6px; }
  .pairing__club--away { flex-direction: column-reverse; }
  .pairing__club-name { font-size: 0.92rem; white-space: normal; text-align: center; }
  .pairing__item { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; }
  .pairing__item time { grid-column: 1 / -1; }
  .crowd__row { grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr) 3rem; gap: 8px; }
}
.tabular { font-variant-numeric: tabular-nums; }

/* A competition page's tables (the game's CupTable, static/cup-table.css):
   one after another, a group's or stage's name above each when there are
   several. */
.competition-table + .competition-table { margin-top: 28px; }
.competition-table__title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 10px; }

/* ---------- Ranks page (/ranks/) ----------
   The frame and the rows are the game's (static/ranks.css, compiled from
   its SCSS). What is the landing's own: the page spacing, the links that
   stand in for the game's buttons, and the wide-screen layout — the game is
   a phone column; here the podium stands side by side and the rest reads
   down two columns. */
.ranks-page { padding-block: clamp(32px, 6vw, 72px); }
.ranks-page app-leaderboards { display: block; max-width: 1040px; margin-inline: auto; }
.ranks-page .kicker { display: inline-block; margin-bottom: 8px; }
.ranks-page__lede { margin-top: 8px; color: var(--text-muted); max-width: 60ch; }
/* Links where the game has buttons: same box, same centred label. */
.ranks-page a.scope-tabs__option { display: flex; align-items: center; justify-content: center; min-height: var(--btn-h); text-decoration: none; text-align: center; }
.ranks-page a.scope-tabs__option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ranks-page .rows { margin-block: var(--space-3) 0; }
.ranks-page .ranks-page__rest { margin-top: var(--space-2); }
.ranks-page__foot { max-width: 1040px; margin: 40px auto 0; display: grid; gap: 24px; }
.ranks-page__hidden { color: var(--text-muted); font-size: 0.9rem; max-width: 70ch; }
@media (min-width: 720px) {
  .ranks-page .board__title { font-size: clamp(2rem, 4vw, 2.75rem); }
  .ranks-page .scope-tabs { max-width: 480px; }
  .ranks-page .board__periodnav { max-width: 480px; }
}
@media (min-width: 960px) {
  .ranks-page .ranks-page__podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .ranks-page .ranks-page__rest {
    display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--ranks-rows, 1), auto); column-gap: var(--space-4); row-gap: var(--space-2);
    margin-top: var(--space-4);
  }
}

/* A competition's leading players (templates/leaders.html): the game's
   Players grid (cup-hub.scss .cup-hub__leaders-grid), its cards from
   leaders.css. The predictors' ranking: the game's ranking rows. */
.competition-players, .competition-predictors { margin-top: 40px; }
.leaders-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.leaders-grid--full { align-items: start; }
.competition-players__more, .competition-predictors__more { margin-top: 14px; }
.competition-players__more a, .competition-predictors__more a { color: var(--accent); font-weight: 600; }
.competition-predictors__lede { color: var(--text-muted); margin-bottom: 14px; max-width: 60ch; }
.competition-predictors .rows { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); max-width: 720px; }
.competition-predictors__note { margin-top: 14px; color: var(--text-muted); font-size: 0.9rem; max-width: 70ch; }
/* The competition's section switch (templates/competition_sections.html):
   the hub's segmented control, spaced from what follows. */
app-cup-hub { display: block; max-width: 480px; margin-bottom: 28px; }

/* =====================================================================
   Design system 2026-10 — "Matchday broadcast"
   (docs/design/2026-10-26-landing-redesign.md). Sections are surfaces,
   not just headings; every page ends its content in a spotlight CTA that
   holds the game on a phone; phones get a sticky "Play free" bar.
   ===================================================================== */

/* ---------- Section surfaces ---------- */
/* A raised sheet: inset from the screen edge, rounded, its own tone. Two
   sections side by side never share a surface, so the eye finds the seam
   without reading a heading. */
.section--alt {
  /* One shape for every band on the page (owner, 2026-10-26): full width,
     separated by tone and a hairline — never an inset sheet beside a
     full-width band. */
  border-block: 1px solid var(--border);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
    var(--bg-elev);
}
.section { padding-block: clamp(56px, 9vw, 112px); }
.section__head { margin-bottom: clamp(28px, 5vw, 48px); }
.section__title { font-size: clamp(1.75rem, 4.4vw, 2.75rem); text-wrap: balance; }
.section__lede { font-size: clamp(1rem, 1.6vw, 1.08rem); text-wrap: pretty; }
.kicker { display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.12em; }
.kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* ---------- Buttons: one primary look everywhere ---------- */
.btn { font-weight: 600; letter-spacing: -0.005em; }
.btn--primary { box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }

/* ---------- The phone ---------- */
/* A titanium rim around a black bezel around the game's own screen. The
   screen is laid out at the game's real 375×812 and zoomed to the frame
   (--phone-zoom), so every component inside keeps the game's own geometry
   and reads like a screenshot — in the page's language, from live data. */
.phone {
  --phone-zoom: 0.68;
  --phone-rim: 3px;
  --phone-bezel: 9px;
  position: relative; flex: none;
  width: calc(375px * var(--phone-zoom) + 2 * (var(--phone-rim) + var(--phone-bezel)));
  padding: var(--phone-rim);
  border-radius: calc(54px * var(--phone-zoom) + var(--phone-rim) + var(--phone-bezel));
  background: linear-gradient(140deg, #6b717b 0%, #2a2e35 22%, #8a909a 48%, #23272d 72%, #5d636c 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 18px 40px -20px rgba(0, 0, 0, 0.7),
    0 0 90px -30px color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none; user-select: none;
}
.phone__screen {
  position: relative; overflow: hidden;
  border: var(--phone-bezel) solid #050607;
  border-radius: calc(54px * var(--phone-zoom) + var(--phone-bezel));
  background: var(--bg);
}
/* A glass sheen across the top-left, under nothing but light. */
.phone__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, transparent 32%);
}
.phone__key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3f46, #8a909a); }
.phone__key--action { left: -2px; top: 17%; height: 4%; }
.phone__key--up { left: -2px; top: 24%; height: 7.5%; }
.phone__key--down { left: -2px; top: 33%; height: 7.5%; }
.phone__key--power { right: -2px; top: 27%; height: 11%; }
.phone__viewport {
  zoom: var(--phone-zoom);
  width: 375px; height: 812px;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.45; text-align: left;
}
.phone__status {
  flex: none; height: 54px; padding: 0 30px 0 34px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-weight: 600; font-size: 16px;
}
.phone__clock { justify-self: start; }
.phone__island { width: 124px; height: 36px; border-radius: 20px; background: #000; }
.phone__sys { justify-self: end; width: 70px; height: 12px; color: var(--text); }
.phone__appbar {
  flex: none; height: 52px; padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.phone__wordmark { font-size: 1.2rem; }
.phone__wordmark .wordmark__mark { width: 30px; height: 25px; }
.phone__view {
  flex: 1; min-height: 0; overflow: hidden; padding: 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.phone__tabbar {
  flex: none; height: 64px; display: flex; justify-content: space-around;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
}
.phone__tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-muted); font-size: 0.6875rem; font-weight: 600;
}
.phone__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__tab svg { width: 22px; height: 22px; }
.phone__tab--active { color: var(--accent); }
.phone__home {
  flex: none; height: 34px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
}
.phone__home::before { content: ''; width: 134px; height: 5px; border-radius: 3px; background: var(--text); opacity: 0.85; }
.phone__viewport { /* the home indicator sits in its own strip under the tabs */ }

/* ---------- Spotlight CTA ---------- */
.spot {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(56px, 9vw, 112px);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(70% 60% at 75% 55%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(50% 50% at 0% 0%, rgba(43, 108, 255, 0.10), transparent 70%),
    var(--bg);
}
/* The pitch, faintly: halfway line and centre circle behind the phone. */
.spot::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0;
  background:
    radial-gradient(circle at 75% 62%, transparent 0 139px, rgba(255, 255, 255, 0.05) 140px 141px, transparent 142px),
    linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(255, 255, 255, 0.05) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}
.spot__inner { display: grid; gap: clamp(32px, 6vw, 56px); align-items: end; grid-template-columns: minmax(0, 1fr); }
.spot__copy { max-width: 560px; }
.spot__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(2rem, 5.6vw, 3.25rem); text-wrap: balance;
}
.spot__lede { margin-top: 16px; color: var(--text-muted); font-size: clamp(1rem, 1.8vw, 1.12rem); max-width: 48ch; text-wrap: pretty; }
.spot__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.spot__trust { margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); }
/* The phone rises out of the section's bottom edge: on a phone only its
   top shows, which is the part with something on it. */
.spot__visual {
  position: relative; display: flex; justify-content: center;
  height: clamp(380px, 112vw, 470px); overflow: hidden;
  margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
}
.spot__visual .phone { --phone-zoom: 0.72; margin-top: 8px; }
.spot__glow {
  position: absolute; left: 50%; top: 18%; width: 360px; height: 360px; translate: -50% 0; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%);
  filter: blur(20px);
}
.spot__art {
  /* In front of the phone's lower corner, as if it came out of the screen;
     the screen's top rows stay clear. */
  position: absolute; z-index: 2; width: min(46vw, 190px); height: auto; aspect-ratio: 1;
  right: max(0px, calc(50% - 190px)); bottom: 6px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6));
}
.spot__visual .phone { z-index: 1; }
@media (min-width: 940px) {
  /* On a wide screen the whole phone shows, with the band's padding clear on
     every side: it never reaches the edge it shares with the section above. */
  .spot { padding-block: clamp(72px, 7vw, 104px); }
  .spot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }
  .spot__visual { height: auto; margin: 0; align-items: center; overflow: visible; padding-block: 16px; }
  .spot__visual .phone {
    --phone-zoom: 0.74; margin: 0;
  }
  .spot__art { width: 280px; right: calc(50% - 280px); bottom: 0; }
  .spot::before {
    background:
      radial-gradient(circle at 75% 50%, transparent 0 189px, rgba(255, 255, 255, 0.05) 190px 191px, transparent 192px),
      linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(255, 255, 255, 0.05) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
  }
}

/* ---------- Sticky "Play free" bar (phones) ---------- */
.sticky-cta {
  position: fixed; z-index: 60; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 10px 10px 18px; border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform 0.32s var(--ease-standard), opacity 0.2s ease;
}
.sticky-cta[hidden] { display: none; }
/* Off screen it is out of the tab order and the accessibility tree too; the
   visibility flip waits for the slide-out to finish. */
.sticky-cta:not(.is-shown) { visibility: hidden; transition: transform 0.32s var(--ease-standard), opacity 0.2s ease, visibility 0s 0.32s; }
.sticky-cta.is-shown { transform: none; opacity: 1; visibility: visible; }
.sticky-cta__note { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); min-width: 0; }
.sticky-cta .btn { flex: none; padding: 11px 20px; font-size: 0.95rem; }
@media (min-width: 760px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- Home: hero with the phone ---------- */
.hero__card .phone { --phone-zoom: 0.78; }
.hero__card { position: relative; }
.hero__card::before {
  content: ''; position: absolute; inset: 10% -10% auto; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(30px);
}
.phone .matchcard { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.phone .hero-tl { height: 520px; }
@media (max-width: 939px) {
  .hero__card::before { display: none; }
  /* The card clips the phone's lower part; its lime glow would be clipped to
     a visible rectangle, so here the phone keeps only its drop shadow. */
  .hero__card .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.7); }
  .hero__card { margin-inline: calc(-1 * clamp(20px, 5vw, 40px)); }
  /* On a phone the hero's phone shows its top two thirds, then the board. */
  .hero__card { height: 480px; overflow: hidden; align-items: flex-start;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
}
@media (min-width: 940px) {
  .hero__card .phone { --phone-zoom: 0.82; }
}

/* ---------- Home: the board, folded ---------- */
.board:not(.is-open) .is-extra { display: none; }
.board.is-open .board__more { display: none; }
.board__more {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 4px; padding: 14px 18px; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border-strong); cursor: pointer;
}
.board__more:hover { border-color: var(--accent); color: var(--accent); }
.board__more-count {
  min-width: 28px; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem;
  background: var(--bg-elev-2); color: var(--text-muted);
}
.board__list { gap: 8px; }
.board .match {
  background: var(--bg-elev); border: 1px solid var(--border); padding: 12px 12px 12px 6px;
}
.board .match:hover { background: var(--bg-elev-2); }
.board .match--live { border-color: color-mix(in srgb, var(--live) 40%, transparent); }
.board__league-name { border-bottom: 0; padding-bottom: 8px; font-size: 0.92rem; font-weight: 600; }
/* The row's CTA is a small pill at its end on every width: forty full-width
   lime buttons on a phone flattened every other action on the page. */
@media (max-width: 560px) {
  .board .match { grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 10px; }
  /* On a phone the row's CTA is a 40px round arrow; its words stay for
     assistive tech. The Clubs' names get the width back. */
  .board .match__cta {
    grid-column: auto; justify-self: end; width: 40px; height: 40px; padding: 0;
    border-radius: 50%; display: grid; place-items: center;
  }
  .board .match__cta::before {
    content: ''; width: 9px; height: 9px; margin-left: -3px;
    border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
  }
  .board .match__cta-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Home: steps ---------- */
.steps { gap: 14px; }
.step { padding: 24px; border-radius: 22px; background: var(--bg); }
.step::before { display: none; }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1rem; font-weight: 700; color: var(--accent-ink); background: var(--accent);
  -webkit-text-stroke: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
.step__title { font-size: 1.2rem; margin-top: 18px; }

/* ---------- Home: benefit bento ---------- */
.pillars { gap: 14px; }
.pillar { border-left-width: 1px; border-radius: 22px; padding: 24px; position: relative; overflow: hidden; }
/* Three benefits are a row, not a bento (a bento needs five or more items
   and a visual for its large tile); the lead one carries the accent. */
.pillars--bento .pillar:first-child {
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.pillars--bento .pillar:first-child h3 { color: var(--accent); }

/* ---------- Home: what you predict ---------- */
.qcard { border-radius: 20px; padding: 18px; }
.qcard__pts { font-weight: 700; }
@media (max-width: 419px) {
  .qgrid { gap: 10px; }
  .qcard { padding: 14px; }
  .qcard h3 { font-size: 1rem; }
  .qcard p { font-size: 0.86rem; }
}

/* ---------- Trust strip (the fine print, compact) ---------- */
.trust { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); list-style: none; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.trust__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--bg);
}
.trust__icon {
  margin-bottom: 8px; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.trust__icon svg { width: 20px; height: 20px; }
.trust__item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.trust__item p { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- Competition pages: each part on its own sheet ---------- */
.rounds, .competition-players, .competition-predictors {
  margin-top: clamp(20px, 4vw, 32px);
  padding: clamp(18px, 3.5vw, 32px);
  border: 1px solid var(--border); border-radius: clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, var(--bg-elev), color-mix(in srgb, var(--bg-elev) 50%, var(--bg)));
}
.spot .phone .tl { margin: 0; }
/* The game's list of ranking rows (the Ranks tab's .rows), on a page that
   does not load ranks.css. */
.spot .phone .rows { margin: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
/* A competition with several tables (groups, a league phase) shows its first
   on the phone; the page above has them all. */
.phone .competition-table ~ .competition-table { display: none; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
body:has(.consent:not([hidden])) .sticky-cta { display: none; }
/* The phone's screen is a phone at every page width: its match card always
   takes the stacked shape the 600px query gives the page's own card. */
.phone .matchcard__score { grid-template-columns: 1fr auto; row-gap: 10px; }
.phone .matchcard__score > div:first-of-type { grid-area: 1 / 1; }
.phone .matchcard__score > div:last-of-type { grid-area: 2 / 1; }
.phone .matchcard__score > .score { grid-area: 1 / 2 / span 2; }
.phone .matchcard__score .team--right { flex-direction: row-reverse; justify-content: flex-end; }
.phone .matchcard__score .team__name { flex: 0 1 auto; text-align: left; }
/* The narrowest phones: the bar keeps only its button, the board's status
   column and arrow give the Clubs' names a little more. */
@media (max-width: 379px) {
  .sticky-cta { justify-content: center; padding-left: 10px; }
  .sticky-cta__note { display: none; }
  .sticky-cta .btn { flex: 1; }
  .board .match { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 8px; padding-right: 8px; }
  .board .match__cta { width: 34px; height: 34px; }
}
@media (max-width: 339px) { .hero__card .phone { --phone-zoom: 0.7; } }
/* A card on the base surface takes the raised tone; on a sheet it takes the
   base — either way a card is one step away from what it sits on. */
.section:not(.section--alt) .pillar, .section:not(.section--alt) .qcard, .section:not(.section--alt) .trust__item { background: var(--bg-elev); border-color: var(--border-strong); }
.section--alt .pillar, .section--alt .step, .section--alt .trust__item { background: var(--bg-elev-2); border-color: var(--border-strong); }

/* WCAG 2.4.11: a control focused by keyboard is never hidden under the bar. */
@media (max-width: 759px) { html { scroll-padding-bottom: 96px; } }

/* Section header: on a wide screen the title holds the left column and the
   lede the right, bottom-aligned (Apple's and Stripe's pattern); one column
   on a phone. */
@media (min-width: 1024px) {
  .section__head:has(.section__lede) {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(48px, 7vw, 120px); align-items: end;
  }
  .section__head:has(.section__lede) > .kicker { grid-column: 1; }
  .section__head:has(.section__lede) > .section__title { grid-column: 1; }
  .section__head:has(.section__lede) > .section__lede { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- Home: every block ends in its own action ---------- */
.section__cta { margin-top: clamp(28px, 4vw, 40px); display: flex; justify-content: center; }
@media (max-width: 559px) { .section__cta .btn { width: 100%; } }

/* ---------- Home: steps with their 3D marks ---------- */
.steps { counter-reset: none; }
.step { position: relative; padding: 24px; display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; }
.step__art { grid-column: 1; grid-row: 1; width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); margin: -4px 0 6px -6px; }
.step__num {
  grid-column: 2; grid-row: 1; width: auto; height: auto; border-radius: 0; box-shadow: none; background: none;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
}
.step__title, .step p { grid-column: 1 / -1; }
.step__title { margin-top: 10px; }
@media (min-width: 760px) {
  /* The rail: the three steps read as one path. */
  .steps { position: relative; }
  .steps::before {
    content: ''; position: absolute; left: 8%; right: 8%; top: 64px; height: 1px; z-index: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  }
  .step { z-index: 1; }
}

/* ---------- Home: the comparison ---------- */
.cmp { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--bg-elev); }
.cmp__table { width: 100%; border-collapse: collapse; min-width: 340px; }
.cmp__table th, .cmp__table td { padding: 16px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.cmp__table tbody tr:last-child th, .cmp__table tbody tr:last-child td { border-bottom: 0; }
.cmp__table thead th { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); padding-top: 20px; }
.cmp__table tbody th { text-align: left; font-weight: 500; font-size: 0.95rem; padding-left: clamp(14px, 3vw, 28px); width: 52%; }
/* thefinal's column is lit: the one that says yes. */
.cmp__table .cmp__us { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cmp__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.02em; }
.cmp__mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.cmp__mark svg { width: 18px; height: 18px; }
.cmp__mark--yes { background: var(--accent); color: var(--accent-ink); }
.cmp__mark--no { background: var(--bg-elev-2); color: var(--text-muted); }
@media (max-width: 479px) {
  .cmp__table th, .cmp__table td { padding: 14px 6px; }
  .cmp__table tbody th { font-size: 0.86rem; }
  .cmp__table thead th { font-size: 0.75rem; }
  .cmp__mark { width: 26px; height: 26px; }
}

/* ---------- Home: call types with the game's event icon ---------- */
.qcard { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 12px; row-gap: 10px; }
.qcard__icon { width: 34px; height: 34px; grid-column: 1; grid-row: 1; }
.qcard__pts { grid-column: 2; grid-row: 1; justify-self: end; }
.qcard h3, .qcard p { grid-column: 1 / -1; }
.qcard h3 { margin-bottom: 0; }
/* The comparison never scrolls sideways: fixed columns, the long headers
   (Russian "Приложение с результатами") wrap and hyphenate in their own. */
.cmp { overflow: hidden; }
.cmp__table { table-layout: fixed; min-width: 0; }
.cmp__table thead td, .cmp__table tbody th { width: 46%; }
.cmp__table thead th { hyphens: auto; overflow-wrap: anywhere; line-height: 1.25; }
@media (min-width: 640px) { .cmp__table thead td, .cmp__table tbody th { width: 52%; } }

/* ---------- Competition pages: the first screen ---------- */
.comp-hero { margin-bottom: clamp(28px, 4vw, 40px); }
.comp-hero__id { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.comp-hero__id .kicker { margin-bottom: 0; }
.comp-hero__logo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--border-strong); }
.comp-hero__logo .comp-logo { width: 36px; height: 36px; }
.comp-hero__hook { margin-top: 14px; max-width: 60ch; color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.1rem); text-wrap: pretty; }
.comp-hero__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.comp-hero__live { display: inline-flex; align-items: center; gap: 8px; color: var(--live); font-weight: 700; font-size: 0.85rem; }
.comp-facts { list-style: none; margin-top: clamp(24px, 3vw, 32px); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .comp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comp-fact--next { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .comp-facts { grid-template-columns: 1fr 1fr 1.25fr; } .comp-fact--next { grid-column: auto; } }
/* One shape for every fact: the picture, what it is, the number — a card the
   eye reads left to right in one pass, the same height across a row. */
.comp-fact {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px; border-radius: 20px; min-width: 0;
  background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev)); border: 1px solid var(--border-strong);
}
.comp-fact__media { display: grid; place-items: center; }
.comp-fact__media--photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bg-elev-2); border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.comp-fact__media--photo img { width: 100%; height: 100%; object-fit: cover; }
.comp-fact__initials { font-weight: 700; color: var(--text-muted); }
.comp-fact__body { display: grid; gap: 2px; min-width: 0; }
.comp-fact__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.comp-fact__name { font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-fact__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); min-width: 0; }
.comp-fact__stat { display: grid; justify-items: end; align-items: center; grid-auto-flow: column; gap: 6px; }
.comp-fact__stat strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--accent); }
.comp-fact__stat small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); align-self: end; padding-bottom: 3px; }
.comp-fact__icon { width: 20px; height: 20px; }
/* The next match: both Clubs face each other, the action under them. */
.comp-fact--next { grid-template-columns: minmax(0, 1fr); gap: 12px; border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev)); }
.comp-fact--next .rounds__when { display: inline; text-transform: none; letter-spacing: 0; font-weight: 500; }
.comp-fact--next .rounds__date { font-size: inherit; }
.comp-fact__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.comp-fact__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.comp-fact__side--away { flex-direction: row-reverse; text-align: right; }
.comp-fact__club { font-weight: 600; font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-fact__vs { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.comp-fact__go { justify-self: stretch; }
.comp-note { margin-top: 16px; font-size: 0.82rem; color: var(--text-muted); max-width: 80ch; }

/* ---------- Ranks page: the first screen and the invitation ---------- */
.ranks-hero { display: grid; gap: 16px; align-items: center; grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
.ranks-hero__hook { margin-top: 10px; color: var(--text); font-weight: 500; max-width: 56ch; }
.ranks-hero__actions { margin-top: 20px; margin-bottom: 8px; }
.ranks-hero__art { display: none; }
@media (min-width: 900px) {
  .ranks-hero { grid-template-columns: minmax(0, 1fr) 300px; }
  .ranks-hero__art { display: block; width: 300px; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)); }
}
.ranks-ghost {
  display: grid; grid-template-columns: var(--rank-badge) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin-top: var(--space-2); padding: 12px 14px; border-radius: var(--radius);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  text-decoration: none; color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ranks-ghost:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.ranks-ghost__rank {
  width: var(--rank-badge); height: var(--rank-badge); border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: var(--accent-ink); background: var(--accent);
}
.ranks-ghost__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranks-ghost__cta { font-weight: 600; font-size: 0.9rem; color: var(--accent); white-space: nowrap; }
@media (max-width: 380px) { .ranks-ghost__cta { font-size: 0.8rem; } }
.ranks-week { margin-top: var(--space-4); padding: 14px 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 0.92rem; }
.ranks-week a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
a.eyebrow--today { text-decoration: none; color: var(--text); transition: border-color 0.15s ease; }
a.eyebrow--today:hover { border-color: var(--accent); }
.eyebrow__dot--live { background: var(--live); box-shadow: 0 0 0 4px rgba(255, 90, 77, 0.18); animation: pulse 1.6s ease-in-out infinite; }
.eyebrow__live { color: var(--live); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .eyebrow__dot--live { animation: none; } }
/* The next match names both Clubs whole: they wrap above the link. */
.comp-fact--next .comp-fact__value { flex-wrap: wrap; row-gap: 4px; }
.comp-fact--next .comp-fact__name { white-space: normal; overflow: visible; }
.comp-fact--next .comp-fact__label time { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* The invitation's words are never cut: the line wraps instead. */
.ranks-ghost__name { white-space: normal; overflow: visible; }
@media (max-width: 479px) {
  .ranks-ghost { grid-template-columns: var(--rank-badge) minmax(0, 1fr); row-gap: 2px; }
  .ranks-ghost__cta { grid-column: 2; }
}

/* ---------- The newcomer's line (rules, match pages) ---------- */
.entry-hook {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 16px 18px; border-radius: 18px; text-align: left;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.entry-hook__text { flex: 1 1 260px; font-size: 0.95rem; color: var(--text); }
.entry-hook .btn { flex: none; }
@media (max-width: 479px) { .entry-hook .btn { width: 100%; } }

/* ---------- Rules: on a phone the contents are one scrolling row ---------- */
@media (max-width: 899px) {
  /* One sticky row of chips above the article instead of a thirteen-line
     list that filled the whole first screen. */
  .rules__toc--chips { margin-inline: calc(-1 * clamp(20px, 5vw, 40px)); padding-inline: clamp(20px, 5vw, 40px); }
  .rules__toc--chips { position: sticky; top: 64px; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding-block: 8px; }
  .rules__toc--chips .rules__toc-title { display: none; }
  .rules__toc--chips ol { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .rules__toc--chips ol::-webkit-scrollbar { display: none; }
  .rules__toc--chips a { white-space: nowrap; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; }
  /* Anchors land under the header (64px) and the chip row (~52px). */
  .rules__section, .rules__section h3 { scroll-margin-top: 132px; }
}
@media (max-width: 899px) { .rules__layout { gap: 16px; } }
@media (max-width: 899px) { .rules__layout { grid-template-columns: minmax(0, 1fr); } .rules__toc--chips, .rules__toc--chips nav { min-width: 0; } }

/* Iteration 2 — names are never cut (they take a second line), the next
   match is a face-off, and a wide screen gets the league's mark as the hero's
   picture. */
.comp-fact__name { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.comp-fact__pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.comp-fact__side, .comp-fact__side--away { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.comp-fact__club { white-space: normal; overflow: visible; line-height: 1.2; font-size: 0.9rem; }
.comp-fact__vs { align-self: center; margin-top: -18px; padding: 4px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-strong); }
.comp-fact--next .comp-fact__label { text-align: center; }
.comp-hero { position: relative; }
.comp-hero__mark { display: none; }
@media (min-width: 1100px) {
  .comp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 48px; }
  .comp-hero > * { grid-column: 1; }
  .comp-hero > .comp-facts { grid-column: 1 / -1; }
  .comp-hero__mark {
    display: grid; place-items: center; grid-column: 2; grid-row: 1 / span 4; align-self: center;
    width: 220px; height: 220px; justify-self: end; border-radius: 48px; position: relative;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--bg-elev);
    border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  }
  .comp-hero__mark .comp-logo { width: 128px; height: 128px; padding: 0; background: none; }
  .comp-hero__mark .comp-logo--backed { background: var(--logo-backing-bg); border-radius: 24px; padding: 16px; width: 140px; height: 140px; }
  .comp-hero__id .comp-hero__logo { display: none; }
}
/* Iteration 3 — a logo that needs a light backing makes the whole tile its
   backing (one surface, not a light square inside a dark one); the face-off
   draws both Clubs at the game's md badge. */
@media (min-width: 1100px) {
  .comp-hero__mark:has(.comp-logo--backed) {
    background: var(--logo-backing-bg); border-color: transparent;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 80px -10px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .comp-hero__mark .comp-logo--backed { background: none; padding: 0; width: 140px; height: 140px; }
}
/* Iteration 4 — on a phone the facts are a swipe row (each card most of the
   width, the next one peeking), so the table a searcher came for starts on
   the first screen after the CTA instead of two screens down. */
@media (max-width: 759px) {
  .comp-facts {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px)); padding-inline: clamp(20px, 5vw, 40px);
    scroll-padding-inline: clamp(20px, 5vw, 40px); padding-bottom: 4px;
  }
  .comp-facts::-webkit-scrollbar { display: none; }
  .comp-fact { scroll-snap-align: start; }
  /* The match goes first in the row: it is the one with an action. */
  .comp-fact--next { order: -1; }
}
@media (min-width: 1100px) { .comp-hero__mark { width: 196px; height: 196px; } .comp-hero__mark .comp-logo, .comp-hero__mark .comp-logo--backed { width: 120px; height: 120px; } }

/* Review fixes 2026-10-26 */
/* The players page's header carries the hero's hook and button: it stays one
   column (the title | lede grid would push the button into the right one). */
.section__head:has(.comp-hero__hook) { display: block; max-width: 720px; }
.section__head:has(.comp-hero__hook) > .section__lede { margin-top: 16px; }
/* A call type's points never leave the card: no stray margin, and on the
   narrowest phones the pill takes its own line under the icon. */
.qcard .qcard__pts { margin-bottom: 0; white-space: nowrap; }
@media (max-width: 419px) {
  .qcard { grid-template-columns: 1fr; }
  .qcard__icon { grid-row: 1; }
  .qcard .qcard__pts { grid-column: 1; grid-row: 2; justify-self: start; font-size: 0.8rem; }
}
/* The brand in the comparison's head never breaks mid-word. */
.cmp__brand { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 639px) { .cmp__brand { font-size: 0.85rem; } }
/* Ranks on a phone: one paragraph before the board — the newcomer's. */
@media (max-width: 759px) { .ranks-hero .ranks-page__lede { display: none; } }
/* The players page's header is a competition hero too: the league's mark
   on the right from 1100px. */
@media (min-width: 1100px) { .section__head.comp-hero { display: grid; max-width: none; } }
/* Long column heads ("Appli de scores") hyphenate at a syllable, never
   between any two letters. */
.cmp__table thead th { overflow-wrap: normal; word-break: normal; hyphens: auto; }
@media (max-width: 479px) { .cmp__table thead th { font-size: 0.7rem; padding-inline: 4px; } }
@media (min-width: 1100px) {
  .section__head.comp-hero { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .section__head.comp-hero > .section__lede { grid-column: 1; grid-row: auto; margin-top: 12px; }
}
@media (max-width: 479px) {
  .cmp__table thead td, .cmp__table tbody th { width: 40%; }
  .cmp__brand { font-size: 0.74rem; letter-spacing: -0.03em; }
}
/* The count is one run of text, so a long language wraps it as a sentence. */
.eyebrow__text { min-width: 0; }

/* ---- Club links (club-hubs design, decision 5) ---------------------------
   A Club's name links to its Club page wherever the landing knows its slug:
   the CupTable's Club cell and the LeadersCard's Club line (both a landing
   difference of their contracts, ADR-0039 — the game's row opens a card),
   the Pairing hero and the history header. Each link draws exactly as the
   text it replaces; only hover and focus say it is one. The table cell's
   link fills the cell's height, so the target is the row, not the word. */
app-cup-table a.cup-table__club-inner { color: inherit; text-decoration: none; margin-block: calc(-1 * var(--space-2)); padding-block: var(--space-2); }
app-leaders-card a.leaders__club { text-decoration: none; }
a.club-link { color: inherit; text-decoration: none; }
app-cup-table a.cup-table__club-inner:hover .cup-table__name, app-cup-table a.cup-table__club-inner:focus-visible .cup-table__name,
app-leaders-card a.leaders__club:hover .leaders__club-name, app-leaders-card a.leaders__club:focus-visible .leaders__club-name,
a.club-link:hover, a.club-link:focus-visible { color: var(--accent); text-decoration: underline; }
/* The Club line and a name are short: their targets grow to 44px tall
   without moving a pixel (the thefinal-ui-standard ::after rule). A table
   row is 37px and its neighbours are links too, so its cell stays the row. */
app-leaders-card a.leaders__club, a.club-link { position: relative; }
app-leaders-card a.leaders__club::after, a.club-link::after { content: ""; position: absolute; inset: -12px 0; }
/* The Pairing page's links under its table: the League table and its
   players page, side by side, wrapping on a phone. */
.pairing__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }