/* Match detail page — header + tabs ported 1:1 from v1 (app.css L2860-3950).
 *
 * Token mapping (v1 → v2):
 *   --bg-primary       → --color-bg
 *   --bg-card          → --color-surface
 *   --text-primary     → --color-text
 *   --text-secondary   → --color-text-muted
 *   --text-muted       → --color-text-disabled
 *   --accent-primary   → --color-accent
 *   --border-color     → --color-border
 *   --live-red         → --color-live
 *
 * Iter 1: header + sticky behaviour + tabs nav. Tab content blocks
 * (_overview, _liveblog, _lineup, _stats, _h2h) keep skeleton styling
 * until their dedicated iters land.
 */

@layer pages {
  /* ── Entity-sticky override for match ───────────────── */

  /* Match lives under the shared `.entity-sticky` + `.entity-hero`
     scaffold (see `docs/ui/entity-sticky.md`). The shared `.entity-hero`
     ::before is a single-accent radial for team / league / player;
     match needs a home+away split gradient driven by per-match colors,
     so we override just the `background` here. Under B.2 sticky-only
     the gradient scrolls away with the big hero — no opacity transition
     on stick. */

  /* The custom props ship as solid hex from the wire (e.g. `#D0274C`),
     not pre-attenuated `hsla(..., 0.15)` like v1. Mix them down here so
     downstream callers don't need to know the alpha contract — keeps
     the gradient subtle (~60% mixed into transparent) without losing the
     team identity. Falls back to the global accent stops when the team
     vars aren't set. */
  .entity-hero.match-hero::before {
    /* Pseudo needs a full descriptor — the shared `.entity-hero::before`
       base was removed during the B.2 refactor, so this rule has to
       declare `content` + positioning itself or the gradient never
       paints. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    --team-home-tint: color-mix(
      in srgb,
      var(--team-home-gradient, var(--color-accent)) 60%,
      transparent
    );
    --team-away-tint: color-mix(
      in srgb,
      var(--team-away-gradient, var(--color-accent-secondary)) 60%,
      transparent
    );

    background:
      radial-gradient(ellipse 70% 100% at 15% 30%, var(--team-home-tint) 0%, transparent 60%),
      radial-gradient(ellipse 70% 100% at 85% 30%, var(--team-away-tint) 0%, transparent 60%);
  }

  /* ── Score section ──────────────────────────────────── */

  /* The 40px horizontal padding pulls the logos in toward the score so
     they're visually closer (compact livescore compactness). The 15px
     vertical padding mirrors v1. */
  .match-score-section {
    position: relative;
    padding: 15px 40px 24px;
    transition: all 0.3s var(--easing-default);
  }

  /* Match-detail re-uses the shared `.entity-hero-expanded__inner` from
     `team-detail.css` (logo + title + subtitle column for team / league /
     player), but the match hero has its own padding owner — the inner
     `.match-score-section`. The team rule's 16px horizontal padding caged
     `.match-teams-row` into ~75% of the viewport (logos drifted toward
     center, score read as cramped). Zero out the inner-wrapper padding
     when it's hosting a match-hero so `match-score-section` is the only
     padding source — same indentation v1 had. */
  .entity-hero.match-hero .entity-hero-expanded__inner {
    padding: 0;
  }

  /* The shared inner wrapper is `display: flex; align-items: center`
     because team / league / player heroes are columns (logo + title +
     subtitle) that shrink-wrap around their content. Match's score-
     section is a row whose intrinsic width is the sum of its team
     columns — about 290 px on a 375 px viewport — so `align-items:
     center` made it collapse to that intrinsic width and float, leaving
     ~42 px of dead space on each side. `align-self: stretch` opts the
     section out of the parent's center alignment without touching the
     rule that the other hero types depend on. */
  .entity-hero.match-hero .match-score-section {
    align-self: stretch;
  }

  /* Background shields — positioned against `.entity-hero` (root of the
     hero), so they read through the transparent `.hero-nav` AND the
     expanded score section. `.entity-hero > *` defaults to z-index 1
     (set by entity-sticky.css); we override back to 0 here so the
     shields sit above the gradient ::before but below nav / content.

     `top` uses a fixed pixel value (not `50%`) so the shield's vertical
     center is anchored to a stable y coordinate. Under B.2 the hero
     just scrolls away, so no transition is needed — the entire hero
     leaves the viewport together with the shields. `overflow: hidden`
     on `.entity-hero` keeps anything clipping past the bounds out of
     sight. */
  .entity-hero.match-hero {
    overflow: hidden;
  }

  .entity-hero.match-hero > .match-bg-shield {
    position: absolute;
    width: 160px;
    height: 160px;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
  }

  .match-bg-shield--home {
    left: 28%;
    top: 120px;
    transform: translate(-50%, -50%);
  }

  .match-bg-shield--away {
    right: 28%;
    top: 120px;
    transform: translate(50%, -50%);
  }

  /* `align-items: flex-start` (not center) anchors the logos to the top
     of the row — they stay put while the score / status badge / kickoff
     row beneath them grows downward. Centering would let a 50-goal
     scoreline drag the logos vertically out of place; flex-start keeps
     the anchor stable regardless of the score's height. v1 parity. */
  .match-teams-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* `padding-top` shifts the logo down so its centre lines up with the
     centre of the score in the sibling `.match-center` column.
     Geometry: comp label (14px) + comp↔score gap (8px) + half score
     (font-size 42 ÷ 2 with line-height 1 = 21px) = 43px from the row
     top → score centre. Logo centre = padding-top + half-logo (28px),
     so padding-top = 43 − 28 = 15px. The match-center column itself
     starts at the row top with normal flow (no padding hack), so its
     internal gaps stay as visible breathing room between comp / score
     / badge. */
  /* Column wrapper: the flex item in `.match-teams-row`. Holds the team link
     (logo + name) plus the optional FIFA badge below it (the badge sits
     OUTSIDE the link so its tap opens the ranking modal instead of navigating
     to the team page). */
  .match-detail-team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 120px;
  }

  .match-detail-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 15px;
  }

  /* Logo uses transform:scale (not width/height) for the compact shrink
     so its layout box stays 56 × 56 in both states. That's what anchors
     the shield's on-screen position: `align-items:center` on the row
     and a fixed row height (driven by the 56 × 56 logo) mean the logo
     center doesn't travel vertically when the score/badge transitions
     fire. Visual size transitions via scale, which is compositor-only
     (no reflow). */
  .team-logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    overflow: hidden;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.3s var(--easing-default);
  }

  .team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .team-logo-placeholder {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  .team-name {
    font-size: 12px;
    font-weight: var(--weight-bold);
    text-align: center;
    max-width: 90px;
    transition:
      opacity 0.3s ease,
      max-height 0.3s ease;
    max-height: 50px;
    opacity: 1;
    color: var(--color-text-secondary, var(--color-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team-name--eliminated {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: currentcolor;
    opacity: 0.55;
  }

  /* ── Header events (centred-icon grid, grouped by type) ──────
     Two stacked blocks (goals first, reds second). Each block is a
     3-column grid: a list of home scorers/booked on the left, ONE
     centred icon, a list of away scorers/booked on the right. The icon
     is shared by every player in the block — no per-event icon
     repetition.

     Vertical alignment of the icon: `align-items: center` on the block
     centres it against the taller column. When both sides have the
     same number of players the centre is also the shared mid-line; on
     unequal sides the icon sits in the visual middle of the longer
     list, which reads as "this icon belongs to all of them". */
  .hero-events {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 16px;
    padding: 0 16px;
    transition:
      opacity 0.3s ease,
      max-height 0.3s ease;
  }

  /* Top-align so the centred icon glyph sits on the same baseline as
     the FIRST goal/red row, not vertically centred across the column.
     With multiple events on one side and none on the other, centring
     drifted the icon away from the first event row and broke the
     visual reading "icon → first goal at minute X". */
  .hero-events__block {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-text-secondary, var(--color-text));
  }

  .hero-events__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .hero-events__col--home {
    align-items: flex-end;
    text-align: right;
  }

  .hero-events__col--away {
    align-items: flex-start;
    text-align: left;
  }

  .hero-events__row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-events__player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--weight-medium);
    color: var(--color-text);
  }

  .hero-events__minute {
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .hero-events__tag {
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .hero-events__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
  }

  .hero-events__icon-glyph {
    font-size: 16px;
    line-height: 1;
  }

  /* Red-card glyph — same rounded rectangle used in the events timeline
     (`.card-icon.red`) and the home match-card pip
     (`.match-card__red-card`). Single source of "this is a red". */
  .hero-events__icon-glyph--red {
    display: inline-block;
    width: 11px;
    height: 15px;
    background: var(--color-card-red);
    border-radius: 2px;
  }

  /* ── Center column (comp + score/status/kickoff) ────── */

  /* Match-center is the single source of truth for vertical breathing
     space between comp label, score and status badge. The `.match-detail-
     team` column is offset down 15px (see `padding-top` there) so the
     logo centre lines up with the score centre — no hacks needed inside
     this block. The 8px gap reads as deliberate compact livescore air
     between the three rows. */
  .match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
  }

  .match-center-comp {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
    transition:
      opacity 0.3s ease,
      max-height 0.3s ease;
  }

  .match-center-comp-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .match-kickoff {
    font-family: var(--font-title);
    font-size: 30px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: 2px;
    line-height: 1;
    transition: font-size 0.3s var(--easing-default);
  }

  /* Inline-flex so the three score children (home / sep / away) and the
     compact-only inline badge can align vertically. Gap is 0 so the
     visible spacing is owned by per-child margins on sep / inline-badge
     — that way they can collapse to 0 cleanly when hidden (a shared
     `gap` would leave a residual 4 px gap between home and away even
     after the sep collapses). */
  .match-score {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-title);
    font-size: 42px;
    font-weight: var(--weight-bold);

    /* `line-height: 1` collapses the score's box to its glyph height
       (42px). The browser default of 1.5 left a 63px box and pushed the
       score's optical centre 10px below the logo centre. Forcing 1 makes
       `padding-top: 3px + gap 4px + font-size/2 = 28px` the centre,
       which matches the logo centre (56/2 = 28px). */
    line-height: 1;
    color: var(--color-text);
    letter-spacing: 4px;
    transition: font-size 0.3s var(--easing-default);
  }

  /* Sep/inline crossfade — PARALLEL 300 ms (not staggered).
     Staggering produced a visible "mirror" effect: during the gap
     between sep's exit and inline's entry the combined slot width
     briefly collapsed to ~0, so home + away scores drifted inward then
     outward, which read as them swapping positions. Parallel keeps the
     slot width monotonic: as sep shrinks, inline grows; the sum stays
     roughly constant, and home/away move in a single direction without
     reversing. */
  .match-score__sep {
    display: inline-block;
    margin: 0 8px;
    max-width: 40px;
    opacity: 1;
    overflow: hidden;
    transition:
      opacity 0.3s var(--easing-default),
      max-width 0.3s var(--easing-default),
      margin 0.3s var(--easing-default);
  }

  /* Penalty shootout aggregate (X-Y pen.) shown under the regular score
     when the match was decided on penalties. Sits as a block under the
     big score row — small, muted, doesn't compete with the main result. */
  .match-score__penalties {
    color: var(--color-text-secondary);
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    margin-top: 2px;
    text-align: center;
  }

  /* Two coordinated badge variants — one between the scores for the
     compact state (`--inline`, max-width 0 until compact), one on its
     own row beneath the score for expanded (`--block`). Both stay in
     layout always and crossfade during the full 300 ms transition.
     Inline also slides up subtly (translateY 4 → 0) for the "arrive
     into the scoreline" cue without adding width asymmetry.

     Two-class specificity on --inline is needed because the base
     `.match-status-badge { display: inline-flex }` is declared later
     in the file and would otherwise win on same-class-count. */
  .match-score .match-status-badge--inline {
    display: inline-flex;
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding-inline: 0;
    border-width: 0;
    overflow: hidden;
    transform: translateY(4px);
    transition:
      opacity 0.3s var(--easing-default),
      max-width 0.3s var(--easing-default),
      margin 0.3s var(--easing-default),
      padding 0.3s var(--easing-default),
      transform 0.3s var(--easing-default);
  }

  .match-status-badge--block {
    max-height: 40px;
    transform: translateY(0);
    transition:
      opacity 0.3s var(--easing-default),
      transform 0.3s var(--easing-default),
      max-height 0.3s var(--easing-default),
      margin 0.3s var(--easing-default),
      padding 0.3s var(--easing-default);
  }

  .match-vs {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: 2px;
    line-height: 1;
    margin-top: -6px;
    transition:
      font-size 0.3s var(--easing-default),
      margin 0.3s var(--easing-default);
  }

  .match-venue-inline {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 0;
    max-width: 200px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
      opacity 0.3s ease,
      max-height 0.3s ease;
  }

  /* ── Status badges ──────────────────────────────────── */
  .match-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--color-surface);
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  .match-status-badge.ft {
    background: rgb(107 114 128 / 20%);
  }

  .match-status-badge.live {
    background: rgb(239 68 68 / 20%);
    color: var(--color-live);
  }

  .match-status-badge.live::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-live);
    border-radius: 50%;
    animation: match-live-pulse 1.5s ease-in-out infinite;
  }

  /* ── Aggregate badge (two-legged knockout ties) ─────── */
  .aggregate-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-title);
    border-radius: 4px;
    padding: 3px 8px;
    text-decoration: none;
    margin: 2px 0;
    transition:
      background 0.2s,
      opacity 0.3s,
      max-height 0.3s;
  }

  .aggregate-badge-label {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .aggregate-badge-score {
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.5px;
  }

  /* `--decided` keeps a neutral surface tint — the global score is
     informational, painting it green/red would read as "good/bad"
     against the eliminated side. */
  .aggregate-badge--decided {
    color: var(--color-text);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-subtle);
  }

  .aggregate-badge--open {
    color: var(--color-warning);
    background: rgb(251 191 36 / 6%);
    border: 1px solid rgb(251 191 36 / 15%);
  }

  .aggregate-badge--live {
    color: var(--color-warning);
    background: rgb(251 191 36 / 6%);
    border: 1px solid rgb(251 191 36 / 30%);
    animation: aggregate-pulse 2s ease-in-out infinite;
  }

  @keyframes aggregate-pulse {
    0%,
    100% {
      border-color: rgb(251 191 36 / 15%);
      background: rgb(251 191 36 / 6%);
    }

    50% {
      border-color: rgb(251 191 36 / 40%);
      background: rgb(251 191 36 / 10%);
    }
  }

  .match-status-badge.postponed {
    background: rgb(245 158 11 / 20%);
    color: var(--color-warning-strong);
  }

  @keyframes match-live-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }

  /* Legacy `.entity-sticky.compact` collapse removed (2026-05-16) —
     match now uses the B.2 sticky-only model (slim nav pins at top,
     big hero scrolls away). The slim-nav fade-in title lives in
     `.hero-nav__match-title` (entity-hero.css). */

  /* ── Tabs nav (entity-sticky sibling) ───────────────── */

  /* Lives inside `.entity-sticky` as a sibling of `.entity-hero`.
     Sticky behaviour itself is set in entity-sticky.css under
     `body.match-page .match-tabs-wrapper` (B.2 cascade) — same as the
     team/league/player `.entity-tabs-wrapper`. The rules here just own
     the local chrome (background, border) and the buttons inside. */
  .match-tabs-wrapper {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  .match-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .match-tabs::-webkit-scrollbar {
    display: none;
  }

  .match-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
      color 0.2s,
      border-color 0.2s;
  }

  .match-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .match-tab:hover:not(.match-tab--active) {
    color: var(--color-text);
  }

  .match-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  .match-tab__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    animation: match-live-pulse 1.5s ease-in-out infinite;
  }

  /* ── Match content — tabs panel area ─────────────────
     min-height mirrors `.team-content` (see team-detail.css for the
     why — prevents the "ping pong" oscillation on short tabs). */
  .match-content {
    min-height: calc(100dvh + 200px);
    padding: 4px;
  }

  .tab-content {
    display: none;
    padding: 12px;
  }

  .tab-content.active {
    display: block;
  }

  .tab-content[hidden] {
    display: none;
  }

  /* ── Empty state — ported from v1 (_empty_state.html.twig widget) ─── */
  .empty-state[hidden] {
    display: none;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
  }

  .empty-state-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .empty-state-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentcolor;
    stroke-width: 1.5;
    fill: none;
  }

  .empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-secondary, var(--color-text));
  }

  .empty-state-text {
    max-width: 280px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  /* .card + .card-title + .card-title--standalone live in
     assets/styles/components/card.css (canonical, shared). */

  /* ── Postponed banner ─── */
  .postponed-banner {
    border-color: var(--color-warning-strong);
  }

  .postponed-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-warning-strong);
  }

  .postponed-banner-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .postponed-banner-content {
    margin-top: 8px;
  }

  .postponed-banner-reason {
    font-size: 13px;
    color: var(--color-text);
    margin: 0;
  }

  /* ── MOTM compact ─── */
  .motm-wrapper {
    position: relative;
  }

  .motm-card-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-surface) 0%, rgb(255 215 0 / 5%) 100%);
    border: 1px solid rgb(255 215 0 / 30%);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .motm-compact-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .motm-compact-star {
    width: 18px;
    height: 18px;
    color: var(--color-gold-1);
    fill: currentcolor;
    flex-shrink: 0;
  }

  .motm-compact-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgb(255 215 0 / 40%);
  }

  .motm-compact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .motm-compact-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .motm-compact-info {
    flex: 1;
    min-width: 0;
  }

  .motm-compact-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-gold-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  .motm-compact-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .motm-compact-team {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
  }

  .motm-compact-team img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }

  /* MOTM rating uses .rating-tier.size-lg.tier-* — see URC v1.0 canonical
     section at end of file. No motm-compact-rating block needed. */

  /* ── Resumen fusionado: vídeo oficial + MOTM en una sola card ─────────
     `.summary-vm` es una `.card.mh-spotlight`. El vídeo (facade) conserva su
     chrome de spotlight (radio inset, en @layer components). El MOTM, cuando
     vive aquí, deja de ser card standalone: se le quita el borde/gradiente/
     margen propio para que lea como sección del card, no como card-en-card. */
  .summary-vm .motm-card-compact {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  /* Separador sutil entre vídeo y MOTM cuando ambos están presentes. El espacio
     superior + el filete dan el "respiro" sin pintar dos cajas. */
  .summary-vm--split .motm-card-compact {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-subtle);
  }

  /* ── Stats bars (quick-stats-vertical / stat-row) ─── */
  .stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .quick-stats-vertical {
    padding-bottom: 8px;
  }

  .quick-stats-vertical .stat-row {
    padding: 8px 0;
  }

  .quick-stats-vertical .stat-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }

  .stat-value {
    min-width: 36px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
  }

  .stat-value.home {
    text-align: right;
  }

  .stat-value.away {
    text-align: left;
  }

  .stat-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .stat-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgb(255 255 255 / 3%);
  }

  .stat-bar-home {
    background: linear-gradient(
      90deg,
      var(--team-home-color, var(--color-accent)),
      color-mix(in srgb, var(--team-home-color, var(--color-accent)) 35%, transparent)
    );
    transition: width 0.5s ease;
  }

  .stat-bar-away {
    background: linear-gradient(
      270deg,
      var(--team-away-color, var(--color-accent)),
      color-mix(in srgb, var(--team-away-color, var(--color-accent)) 35%, transparent)
    );
    transition: width 0.5s ease;
  }

  /* Neutral middle band for the momentum dominance bar — the balanced
     minutes (neither side led) get their own slot so the 3 segments close
     to 100 instead of the away bar absorbing the gap. */
  .stat-bar-balanced {
    background: rgb(255 255 255 / 10%);
    transition: width 0.5s ease;
  }

  /* ── Momentum dominance — per-phase pills over the dominance bar ── */
  .momentum-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  .momentum-pill {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-medium);
    line-height: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--easing-default),
      color var(--duration-fast) var(--easing-default),
      border-color var(--duration-fast) var(--easing-default);
  }

  .momentum-pill.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: var(--color-accent);
  }

  /* ── Stats tab — grouped variant + Feeberse Momentum section headers ─── */
  .quick-stats-grouped .stats-group-title,
  .momentum-section .stats-group-title {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    padding-bottom: 6px;
  }

  .quick-stats-grouped .stats-group-title:first-child {
    margin-top: 0;
  }

  .quick-stats-grouped .stat-row--primary {
    padding: 10px 0;
  }

  .quick-stats-grouped .stat-row--primary .stat-value {
    font-size: 17px;
    font-weight: 800;
  }

  .quick-stats-grouped .stat-row--primary .stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .quick-stats-grouped .stat-row--primary .stat-bar {
    height: 12px;
  }

  .quick-stats-grouped .stat-row.first-goal-info {
    justify-content: center;
    padding: 10px 0 2px;
    border-bottom: none;
  }

  .quick-stats-grouped .first-goal-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
  }

  /* ── Stats tab — Feeberse Momentum ─── */
  .momentum-section {
    padding: 16px;
  }

  .momentum-section .card-title {
    margin-bottom: 12px;
    color: var(--color-warning);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .momentum-chart-container {
    position: relative;
    height: 220px;
    margin-bottom: 12px;
    touch-action: pan-y;
  }

  .momentum-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* ── Overview-tab compact variant — smaller chart, bigger legend, deep-link to Stats ── */
  .momentum-overview {
    padding: 16px;
  }

  /* Team legend sits BELOW the chart now (centered) so the coloured dots read
     against the curves they label. The compact variant (Overview inline +
     Overview momentum card) sits under the smaller canvas, so trim the top
     gap — the canvas already carries its own bottom padding. Names wrap rather
     than overflow on narrow viewports. */
  .momentum-chart-container--compact + .momentum-legend--compact,
  .momentum-inline .momentum-legend--compact {
    margin-top: 0;
    padding-top: 4px;
    flex-wrap: wrap;
  }

  .momentum-chart-container--compact {
    height: 160px;
    padding: 4px 8px 0;
  }

  /* Inline momentum embedded in the Overview key-stats card: the chart sits
     below the host `.card-header` (which owns the title + legend), then the
     "Momentum" dominance bar (a host stat-row). A little bottom margin
     separates the chart from the first stat row. */
  .momentum-inline {
    margin-bottom: 14px;
  }

  @media (width <= 380px) {
    .momentum-chart-container--compact {
      height: 140px;
    }

    .momentum-legend--compact .momentum-legend-name {
      font-size: 10px;
    }
  }

  /* Goal/red-card marker strips rendered by momentum_chart_controller.
     Two absolute-positioned strips: --top for home team (above chart
     centerline), --bottom for away team (below). Each marker is
     positioned by JS via inline `left:` anchored to Chart.js x-scale. */
  .momentum-event-markers {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    left: 0;
    right: 0;
    height: 20px;
  }

  .momentum-event-markers--top {
    top: 6px;
  }

  .momentum-event-markers--bottom {
    bottom: 6px;
  }

  .momentum-event-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    /* Visual indicators only (no longer clickable) — keep pointer-events so
       the native title tooltip works on hover, but show the default cursor
       so there is no false click affordance. */
    pointer-events: auto;
    cursor: default;
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%));
  }

  .momentum-event-marker--card {
    font-size: 15px;
  }

  .momentum-halftime-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1px dashed rgb(255 255 255 / 20%);
    z-index: 5;
    pointer-events: none;
  }

  .momentum-halftime-label {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    color: rgb(255 255 255 / 35%);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 6;
    pointer-events: none;
  }

  .momentum-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mc-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }

  .mc-pred-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .mc-pred-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent;
  }

  .mc-pred-card.is-max {
    background: rgb(251 191 36 / 10%);
    border-color: rgb(251 191 36 / 40%);
  }

  .mc-pred-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .mc-pred-card-pct {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
  }

  .mc-pred-card.is-max .mc-pred-card-pct {
    color: var(--color-warning);
  }

  .mc-duo-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mc-duo-card {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mc-duo-card-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .mc-duo-card-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mc-duo-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
  }

  .mc-duo-card-key {
    color: var(--color-text-muted);
  }

  .mc-duo-card-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .mc-duo-card-val--white {
    color: var(--color-text);
  }

  .mc-duo-card-val--muted {
    color: var(--color-text-muted);
  }

  .mc-duo-card-val--green {
    color: var(--color-success);
  }

  .mc-duo-card-diff {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  .mc-duo-card-diff--green {
    background: rgb(34 197 94 / 15%);
    color: var(--color-success);
  }

  .mc-duo-card-diff--red {
    background: rgb(239 68 68 / 15%);
    color: var(--color-card-red);
  }

  .momentum-info-link {
    margin-top: 4px;
  }

  /* "Cómo se calcula" modal */
  .momentum-formula-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    padding: 16px;
  }

  /* El atributo HTML `hidden` queda neutralizado por `display: flex`
     de arriba si no se reaplica aquí. Ver feedback_hidden_attribute_display_override. */
  .momentum-formula-modal[hidden] {
    display: none;
  }

  .momentum-formula-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .momentum-formula-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 75%);
    backdrop-filter: blur(4px);
  }

  .momentum-formula-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgb(0 0 0 / 50%);
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
  }

  .momentum-formula-content::-webkit-scrollbar {
    display: none;
  }

  .momentum-formula-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 1;
  }

  .momentum-formula-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-warning);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .momentum-formula-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
  }

  .momentum-formula-close:hover {
    color: var(--color-text);
  }

  .momentum-formula-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .momentum-formula-overview {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary, var(--color-text));
    margin: 0;
  }

  .momentum-formula-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgb(251 191 36 / 8%);
    border: 1px solid rgb(251 191 36 / 25%);
    border-radius: 10px;
  }

  .momentum-formula-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .momentum-formula-code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--color-text);
  }

  .momentum-formula-components {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .momentum-formula-component {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
  }

  .momentum-formula-component-var {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgb(251 191 36 / 15%);
    color: var(--color-warning);
    font-weight: 800;
    font-size: 14px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .momentum-formula-component > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .momentum-formula-component strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
  }

  .momentum-formula-component span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  .momentum-formula-weights {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .momentum-formula-weights-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
  }

  .momentum-formula-weights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .momentum-formula-weight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    font-size: 12px;
  }

  .momentum-formula-weight-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }

  .momentum-formula-weight-name {
    flex: 1;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .momentum-formula-weight-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-warning);
    flex-shrink: 0;
  }

  .momentum-formula-extras {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .momentum-formula-extra {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .momentum-formula-extra-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .momentum-formula-extra > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .momentum-formula-extra strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
  }

  .momentum-formula-extra span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  /* ── Stats tab — xG timeline + comparison cards ─── */
  .xg-comparison-section {
    padding: 16px;
  }

  .xg-comparison-section .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .xg-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .xg-badge--estimated {
    background: rgb(250 204 21 / 15%);
    color: var(--color-gold-2);
  }

  .xg-timeline-chart-container {
    position: relative;
    height: 180px;
    margin-bottom: 16px;
  }

  .xg-timeline-chart-container canvas {
    max-width: 100%;
    height: 100% !important;
  }

  .xg-comparison-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .xg-comparison-card {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .xg-comparison-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .xg-comparison-card-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .xg-comparison-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .xg-comparison-card-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .xg-comparison-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .xg-comparison-card-label {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .xg-comparison-card-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .xg-comparison-card-value--goals {
    font-size: 18px;
  }

  .xg-comparison-card-diff {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .xg-comparison-card-diff--over {
    background: rgb(34 197 94 / 15%);
    color: var(--color-success);
  }

  .xg-comparison-card-diff--under {
    background: rgb(239 68 68 / 15%);
    color: var(--color-card-red);
  }

  /* ── Stats tab — player ratings section ─── */
  .player-ratings-section {
    padding: 12px 0;
  }

  .player-ratings-section .card-title {
    margin-bottom: 8px;
  }

  /* ── Team-toggle pills (player-ratings + cup-journey-dual) ─────────
     Reuses `.pst-per90-toggle` chrome but each button shows logo +
     team name. Names truncate with ellipsis so equipos largos no
     desbordan el botón. Width 100% del contenedor — el padding lateral
     ya viene del padre (`.card`, `.standings-view-switcher-panels`),
     no añadimos margin lateral aquí. */
  .player-ratings-section__toggle,
  .cup-journey-dual__toggle {
    width: 100%;
    margin: 0 0 12px;
  }

  .player-ratings-section__toggle .pst-per90-btn,
  .cup-journey-dual__toggle .pst-per90-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
  }

  .player-ratings-section__toggle-logo,
  .cup-journey-dual__toggle-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-ratings-section__toggle-name,
  .cup-journey-dual__toggle-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .player-ratings-section .player-stats-team-block {
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .player-ratings-section .player-stats-team-block:first-of-type {
    border-top: none;
  }

  .player-ratings-section .player-stats-team-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgb(255 255 255 / 3%);
    border-bottom: 1px solid var(--border-color);
    list-style: none;
    min-height: 44px;
  }

  .player-ratings-section .player-stats-team-header::-webkit-details-marker {
    display: none;
  }

  .player-ratings-section .player-stats-team-header.collapsible {
    cursor: pointer;
    transition: background 0.15s;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .player-ratings-section .player-stats-team-header .team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .player-ratings-section .player-stats-team-header .team-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    flex: 1;
    max-width: fit-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    text-align: left;
  }

  .player-ratings-section .player-stats-team-header .collapse-indicator {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: transform 0.2s;
    transform: rotate(-90deg);
  }

  .player-ratings-section
    .player-stats-team-block[open]
    > .player-stats-team-header
    .collapse-indicator {
    transform: rotate(0deg);
  }

  .player-ratings-section .player-stats-list-full {
    display: flex;
    flex-direction: column;
    padding-bottom: 4px;
  }

  .player-ratings-section .player-stat-row-full {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgb(255 255 255 / 3%);
  }

  .player-ratings-section .player-stat-row-full:last-child {
    border-bottom: none;
  }

  .player-ratings-section .player-stat-row-full.player-clickable {
    cursor: pointer;
  }

  .player-ratings-section .player-stat-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(255 255 255 / 4%);
    flex-shrink: 0;
  }

  .player-ratings-section .player-stat-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .player-ratings-section .player-stat-number {
    min-width: 28px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
  }

  .player-ratings-section .player-stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .player-ratings-section .player-stat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-ratings-section .player-stat-position {
    font-size: 11px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .player-ratings-section .player-stat-flag {
    width: 14px;
    height: 10px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
  }

  .player-ratings-section .rating-tier {
    flex-shrink: 0;
  }

  /* ── Events timeline ─── */
  .events-card {
    padding: 16px;
  }

  .events-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .event-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: 8px;
  }

  .event-minute {
    width: 32px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .event-local .event-minute {
    text-align: left;
  }

  .event-visitor .event-minute {
    text-align: right;
  }

  .event-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .event-icon svg {
    width: 18px;
    height: 18px;
  }

  .event-icon.goal .goal-ball {
    font-size: 18px;
  }

  .event-icon.own-goal .goal-ball {
    font-size: 18px;
    filter: grayscale(1) brightness(0.7);
  }

  .event-icon.yellow .card-icon {
    width: 12px;
    height: 16px;
    background: var(--color-card-yellow);
    border-radius: 2px;
  }

  .event-icon.red .card-icon {
    width: 12px;
    height: 16px;
    background: var(--color-card-red);
    border-radius: 2px;
  }

  .event-icon.sub {
    color: var(--color-text);
  }

  .event-icon.sub-out-icon {
    color: var(--color-card-red);
  }

  .event-icon.sub-out-icon.injured {
    color: var(--color-card-red);
    background: #fff;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    padding: 2px;
  }

  .event-injury-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-card-red);
    margin-left: 4px;
  }

  .event-icon.penalty-missed {
    color: var(--color-text-muted);
  }

  .event-row.sub-out {
    padding-top: 0;
    margin-top: -8px;
  }

  .event-player.sub-out-player {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .event-content {
    flex: 1;
    min-width: 0;
  }

  .event-content.right {
    text-align: right;
  }

  .event-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .event-content.right .event-main {
    justify-content: flex-end;
  }

  .event-player {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .event-penalty-tag {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 11px;
  }

  .event-score {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .event-detail {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
  }

  .event-spacer {
    flex: 1;
  }

  .event-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
    margin: 8px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .separator-badge {
    background: var(--color-bg);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .separator-score {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* ── Link button (below cards) ─── */
  .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 14px 0;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    text-decoration: none;
  }

  .link-button:hover {
    background: rgb(0 255 135 / 4%);
  }

  .link-button svg {
    width: 16px;
    height: 16px;
  }

  /* ── Venue card ─── */
  .venue-card .venue-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
  }

  .venue-card .venue-card-meta-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
  }

  .venue-card .venue-card-meta-stage {
    color: var(--color-text);
    font-weight: var(--weight-bold);
  }

  .venue-card .venue-card-meta-sep {
    opacity: 0.5;
  }

  .venue-card .weather-icon {
    object-fit: contain;
    flex-shrink: 0;
  }

  .venue-card .venue-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .venue-card .venue-image {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-surface-hover), var(--color-surface-active));
    position: relative;
  }

  .venue-card .venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Fallback when Sportmonks venue image 404s — onerror strips the img and
     adds this class. Shows stadium emoji on muted gradient. */
  .venue-card .venue-image--fallback::after {
    content: "🏟️";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.55;
  }

  .venue-card .venue-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .venue-card .venue-location,
  .venue-card .venue-capacity,
  .venue-card .venue-kickoff {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .venue-card .venue-location svg,
  .venue-card .venue-capacity svg,
  .venue-card .venue-kickoff svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .venue-card .venue-kickoff time {
    text-transform: capitalize;
  }

  /* Attendance % chip: 11px rounded badge with traffic-light tiers
     keyed off the live aforo ratio (low <60% red, mid 60–79% amber,
     high ≥80% green). Background uses the same alpha blend as form-
     squares / status pills so it reads on both light and dark themes. */
  .attendance-pct-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    line-height: 1.4;
    border: 1px solid transparent;
  }

  .attendance-pct-badge--high {
    background: rgb(34 197 94 / 14%);
    border-color: rgb(34 197 94 / 35%);
    color: #16a34a;
  }

  .attendance-pct-badge--mid {
    background: rgb(245 158 11 / 14%);
    border-color: rgb(245 158 11 / 35%);
    color: #b45309;
  }

  .attendance-pct-badge--low {
    background: rgb(239 68 68 / 14%);
    border-color: rgb(239 68 68 / 35%);
    color: #dc2626;
  }

  /* ── Referees ─── */
  .referees-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
  }

  .referee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg);
    border-radius: 8px;
  }

  .referee-role {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
  }

  .referee-name {
    font-size: 12px;
    color: var(--color-text);
  }

  .referee-role-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
  }

  .referee-flag {
    width: 16px;
    height: 12px;
    object-fit: cover;
    border-radius: 1.5px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 15%);
  }

  /* ── Feeberse views counter ─── */
  .feeberse-views-card {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgb(0 255 135 / 5%), rgb(16 185 129 / 5%));
    border: 1px solid rgb(0 255 135 / 15%);
    border-radius: 12px;
  }

  .feeberse-views-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .feeberse-views-card .feeberse-views-content svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-accent);
    opacity: 0.8;
  }

  .feeberse-views-card .feeberse-views-content .views-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
  }

  .feeberse-views-card .feeberse-views-content .views-label {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* ───────────────────────────── LINEUP TAB (iter 3) ─────────────────────────
     Ported 1:1 from v1 app.css. Blocks: pitch-view (L5157-5620), lineup team
     cards (L12380-13513), status banner + predicted (L13564-13708), unified
     field (L13710-14306), sub-card (L14307-14422), subs cards grid (L15040-
     15210), referees (L14724-15039), plus player-photo/team-logo helpers.

     stylelint disables: v1 CSS intentionally redeclares helpers (.team-logo-sm,
     .referee-role, .referee-name) and the predicted-state overrides come
     after the base .unified-* rules by design. */
  /* stylelint-disable no-duplicate-selectors, no-descending-specificity */
  .formation-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .formation-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
  }

  .formation-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }

  .formation-badge.confirmed {
    background: var(--color-accent);
    color: #000;
  }

  .formation-badge.predicted {
    background: var(--color-gold-2);
    color: #000;
  }

  .formation-badge svg {
    flex-shrink: 0;
  }

  .formation-avg {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .pitch-container {
    background: #1a472a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    aspect-ratio: 68/105;
    overflow: hidden;
  }

  .pitch-lines {
    position: absolute;
    inset: 16px;
    border: 2px solid rgb(255 255 255 / 30%);
    border-radius: 4px;
  }

  .pitch-center-line {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 2px;
    background: rgb(255 255 255 / 30%);
  }

  .pitch-center-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
  }

  .pitch-player {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .player-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    position: relative;
  }

  .player-circle.home {
    background: #fff;
    color: #000;
  }

  .player-circle.away {
    background: #ef0107;
    color: #fff;
  }

  .player-rating {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
  }

  .player-rating.top {
    background: var(--rating-top);
  }

  .player-rating.good {
    background: var(--color-rating-good);
  }

  .player-rating.avg {
    background: var(--color-rating-avg);
  }

  .player-rating.bad {
    background: var(--rating-bad);
  }

  .player-name {
    font-size: 8px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
    max-width: 50px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-sub-icon {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-live);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
  }

  /* Subs List */
  .subs-section {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .subs-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .sub-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .sub-player:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .sub-player-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
  }

  .sub-player-info {
    flex: 1;
  }

  .sub-player-name {
    font-size: 13px;
    font-weight: 600;
  }

  .sub-player-detail {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .sub-player-rating {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
  }

  /* Bench (Pre-match) */
  .bench-section {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .bench-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .bench-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bench-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--color-bg);
    border-radius: 8px;
  }

  .bench-player-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
  }

  .bench-player-info {
    flex: 1;
  }

  .bench-player-name {
    font-size: 13px;
    font-weight: 600;
  }

  .bench-player-pos {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* Unavailable Players */
  .unavailable-section {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
  }

  .unavailable-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-live);
  }

  .unavailable-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .unavailable-player:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .unavailable-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(239 68 68 / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .unavailable-info {
    flex: 1;
  }

  .unavailable-name {
    font-size: 13px;
    font-weight: 600;
  }

  .unavailable-reason {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .insight-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .insight-icon {
    width: 32px;
    height: 32px;
    background: rgb(0 255 135 / 10%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .insight-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-accent);
    stroke-width: 2;
    fill: none;
  }

  .insight-title {
    font-size: 14px;
    font-weight: 700;
  }

  .insight-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .insight-highlight {
    color: var(--color-accent);
    font-weight: 600;
  }

  /* Prediction Poll */
  .prediction-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .prediction-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .prediction-options {
    display: flex;
    gap: 8px;
  }

  .prediction-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--color-bg);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
  }

  .prediction-btn:hover {
    background: var(--bg-card-hover);
  }

  .prediction-btn.selected {
    border-color: var(--color-accent);
    background: rgb(0 255 135 / 10%);
  }

  .prediction-team-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .prediction-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .prediction-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .prediction-pct {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-accent);
    display: none;
  }

  .prediction-btn.voted .prediction-pct {
    display: block;
  }

  .prediction-votes {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 12px;
  }

  .team-logo-sm {
    width: 20px;
    height: 20px;
  }

  .team-logo-sm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .team-logo-md {
    width: 40px;
    height: 40px;
  }

  .team-logo-md img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .player-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .player-initials {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .player-info .player-name {
    font-size: 14px;
    font-weight: 600;
  }

  .player-nationality {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .player-number {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-muted);
    min-width: 30px;
    text-align: right;
  }

  /* Stats Tab */
  .lineup-team-card {
    background: var(--color-surface);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .lineup-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-card-hover);
  }

  .lineup-team-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lineup-team-logo {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .lineup-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .lineup-team-name {
    font-size: 14px;
    font-weight: 700;
  }

  .lineup-coach {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Collapsible sections */

  /* Match .lineup-dual-section chrome for the referees section so it
     renders as its own card (parity with coaches / subs / sidelined). */
  .lineup-section {
    margin: 12px 8px 0;
    padding: 12px 16px;
    background: var(--color-surface);
    border-radius: 10px;
  }

  .lineup-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .lineup-section-header:hover {
    background: var(--bg-card-hover);
  }

  .lineup-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .lineup-section-count {
    background: var(--bg-active);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .lineup-section-arrow {
    color: var(--color-text-disabled);
    transition: transform 0.2s;
  }

  .lineup-section.collapsed .lineup-section-arrow {
    transform: rotate(180deg);
  }

  .lineup-section-content {
    padding: 0 16px 12px;
  }

  .player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .player-row:last-child {
    border-bottom: none;
  }

  .lineup-section-content .player-number {
    width: 24px;
    height: 24px;
    background: var(--bg-active);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  /* Scoped: lineup list rows use 32px photos (tighter than the 40px subs
     widget). Canonical .player-photo is defined in the subs section above. */
  .lineup-section-content .player-photo {
    width: 32px;
    height: 32px;
    background: var(--bg-card-hover);
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .player-info {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding-right: 8px;
  }

  .player-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }

  .player-position {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .player-events {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .player-event-badge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
  }

  .player-event-badge.goal {
    background: rgb(34 197 94 / 15%);
    color: var(--color-text);
  }

  .player-event-badge.goal.own {
    background: rgb(239 68 68 / 15%);
    color: var(--color-live);
  }

  .player-event-badge.yellow {
    background: rgb(251 191 36 / 15%);
    color: var(--yellow-card);
  }

  .player-event-badge.red {
    background: rgb(239 68 68 / 15%);
    color: var(--color-live);
  }

  .player-event-badge.sub-out {
    background: rgb(239 68 68 / 10%);
    color: var(--color-live);
  }

  .player-event-badge.sub-in {
    background: rgb(34 197 94 / 10%);
    color: var(--color-text);
  }

  /* Substitution rows */
  .substitution-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .substitution-row:last-child {
    border-bottom: none;
  }

  .sub-minute {
    min-width: 32px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .sub-players {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Scoped: substitution-event rows (player-in / player-out) differ from
     the bench sub-card (.sub-player above) — no border, no number/rating,
     just inline name with directional colour. */
  .sub-players .sub-player {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }

  .sub-players .sub-player.in {
    color: var(--color-text);
  }

  .sub-players .sub-player.out {
    color: var(--color-text-muted);
  }

  .table-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Table filters row - view and location filters side by side */
  .table-filters-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .table-filters-row .table-filters {
    margin-bottom: 0;
  }

  /* Modern app-style select - reusable across the app */
  .app-select {
    position: relative;
    min-height: 44px;
    padding: 10px 36px 10px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgb(17 17 19 / 80%) 100%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    appearance: none;

    /* Custom arrow background */
    background-image:
      linear-gradient(135deg, var(--color-surface) 0%, rgb(17 17 19 / 80%) 100%),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="rgba(255,255,255,0.6)" d="M6 8L2 4h8z"/></svg>');
    background-repeat: no-repeat;
    background-position:
      center,
      right 12px center;
  }

  .app-select:hover {
    border-color: rgb(0 255 135 / 30%);
    box-shadow:
      0 2px 12px rgb(0 0 0 / 30%),
      0 0 0 1px rgb(0 255 135 / 10%);
    transform: translateY(-1px);
  }

  .app-select:focus {
    border-color: var(--color-accent);
    box-shadow:
      0 2px 16px rgb(0 0 0 / 40%),
      0 0 0 3px rgb(0 255 135 / 15%);
    transform: translateY(-1px);
  }

  .app-select:active {
    transform: translateY(0);
  }

  .app-select option {
    background: var(--color-surface);
    color: var(--color-text);
    padding: 12px;
    font-weight: 500;
  }

  /* Location select wrapper */
  .table-location-wrapper {
    display: flex;
    align-items: center;
  }

  .table-location-wrapper .app-select {
    min-width: 120px;
  }

  /* On very small screens, stack the filter groups */
  @media (width <= 360px) {
    .table-filters-row {
      flex-direction: column;
      align-items: stretch;
    }

    .filter-group {
      width: 100%;
    }

    .table-location-wrapper {
      width: 100%;
    }

    .table-location-wrapper .app-select {
      width: 100%;
      min-width: auto;
    }
  }

  .filter-group {
    display: flex;
    background: var(--color-surface);
    border-radius: 8px;
    overflow: hidden;
  }

  .filter-btn {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-disabled);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn:hover {
    color: var(--color-text-muted);
  }

  .filter-btn.active {
    background: var(--color-accent);
    color: #000;
  }

  /* Standings - With Simple/Complete filter and zones */
  .standings-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .standings-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .standings-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  .standings-card {
    min-width: fit-content;
  }

  .standings-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
  }

  .standings-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
  }

  .standings-row:last-child {
    border-bottom: none;
  }

  .standings-row.highlight {
    background: rgb(0 255 135 / 8%);
  }

  /* Zone indicators - using box-shadow to avoid layout shift */
  .standings-row.zone-champions {
    box-shadow: inset 3px 0 0 var(--zone-champions);
  }

  .standings-row.zone-europa {
    box-shadow: inset 3px 0 0 var(--zone-europa);
  }

  .standings-row.zone-conference {
    box-shadow: inset 3px 0 0 var(--zone-conference);
  }

  .standings-row.zone-relegation {
    box-shadow: inset 3px 0 0 var(--zone-relegation);
  }

  /* FLIP animation highlight for rows that moved when switching Total/Home/Away */
  .standings-row-moved {
    animation: standings-flash 0.6s ease-out;
  }

  @keyframes standings-flash {
    0% {
      background: rgb(0 255 135 / 18%);
    }

    100% {
      background: transparent;
    }
  }

  .standings-pos {
    width: 24px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    text-align: center;
  }

  .standings-team-cell {
    flex: 1;
    min-width: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .standings-card .standings-team-logo {
    font-size: 14px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .standings-card .standings-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .standings-card .standings-team-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .standings-stat {
    width: 26px;
    text-align: center;
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .standings-pts {
    width: 30px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
  }

  .standings-form-cell {
    display: flex;
    gap: 3px;
    width: 75px;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  /* Form dot canonical definition is in the H2H section below (search "Form Dots").
     Form dot with opponent logo (future enhancement) */
  .form-dot-extended {
    position: relative;
    width: 24px;
    height: 24px;
  }

  .form-dot-extended .form-result {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
  }

  .form-dot-extended .form-opponent {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-surface);
    padding: 1px;
  }

  .form-dot-extended .form-opponent img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Simple view - hide elements, show others */
  .view-simple .hide-simple {
    display: none !important;
  }

  .view-simple .standings-card {
    min-width: auto;
  }

  /* Complete view - sticky team column with horizontal scroll on stats */
  .view-complete .standings-scroll-wrapper {
    position: relative;
    overflow-x: auto;
  }

  .view-complete .standings-team-cell {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    z-index: 2;
    padding-right: 8px;
  }

  .view-complete .standings-row:hover .standings-team-cell {
    background: transparent;
  }

  .view-complete .standings-row.highlight .standings-team-cell {
    background: transparent;
  }

  /* Complete view - hide simple-only elements */
  .view-complete .show-simple,
  .standings-card:not(.view-simple, .view-complete) .show-simple {
    display: none !important;
  }

  /* Default to simple view styles when no class applied */
  .standings-card:not(.view-complete) .hide-simple {
    display: none !important;
  }

  .standings-card:not(.view-complete) .show-simple {
    display: inline !important;
  }

  /* Form view - show only form column, hide stats */
  .view-form .hide-form {
    display: none !important;
  }

  .view-form .show-form-only {
    display: flex !important;
  }

  /* Hide form-only elements in simple and complete views */
  .view-simple .show-form-only,
  .view-complete .show-form-only {
    display: none !important;
  }

  /* Default hide form-only elements */
  .standings-card:not(.view-form) .show-form-only {
    display: none !important;
  }

  /* Competition Header */
  .standings-competition-header {
    padding: 12px;
    margin-bottom: 8px;
  }

  .competition-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.15s ease;
  }

  .competition-link:hover {
    opacity: 0.8;
  }

  .competition-link img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .competition-link svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--text-tertiary);
  }

  .competition-round {
    background: var(--color-surface-muted, var(--color-surface));
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
  }

  /* Clickable team in standings */
  .standings-team-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
  }

  .standings-team-link:hover .standings-team-name {
    color: var(--color-accent);
  }

  /* Team clickable in standings table (modal trigger) */
  .standings-team-cell.team-clickable {
    cursor: pointer;
  }

  .standings-team-cell.team-clickable:hover .standings-team-name {
    color: var(--color-accent);
  }

  /* Standings Legend */
  .standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    background: var(--color-surface);
    border-radius: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }

  .legend-dot.champions {
    background: var(--zone-champions);
  }

  .legend-dot.europa {
    background: var(--zone-europa);
  }

  .legend-dot.conference {
    background: var(--zone-conference);
  }

  .legend-dot.relegation {
    background: var(--zone-relegation);
  }

  /* ==================== KNOCKOUT/CUP VIEW ==================== */
  .knockout-view {
    padding: 16px;
  }

  .knockout-header {
    margin-bottom: 16px;
  }

  .knockout-header .competition-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .knockout-header .competition-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .knockout-header .competition-link svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    margin-left: auto;
  }

  .knockout-round-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(
      135deg,
      var(--color-surface) 0%,
      var(--color-surface-muted, var(--color-surface)) 100%
    );
    border-radius: 12px;
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
  }

  .knockout-round-icon {
    font-size: 20px;
  }

  .knockout-round-name {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .knockout-current-match {
    margin-bottom: 20px;
  }

  .knockout-match-card {
    background: var(--color-surface);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-border);
  }

  .knockout-match-card.current {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgb(0 255 135 / 15%);
  }

  .knockout-match-team {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
  }

  .knockout-match-team:last-child {
    border-bottom: none;
  }

  .knockout-match-team.winner {
    background: rgb(0 255 135 / 5%);
  }

  .knockout-match-team.winner .knockout-team-name {
    font-weight: 700;
  }

  .knockout-match-team.winner .knockout-team-score {
    color: var(--color-accent);
  }

  .knockout-team-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-surface-muted, var(--color-surface));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .knockout-team-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .knockout-team-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
  }

  .knockout-team-score {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    min-width: 32px;
    text-align: center;
  }

  .knockout-info-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--color-surface-muted, var(--color-surface));
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .knockout-info-message svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .knockout-info-message span {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
  }

  .knockout-view-bracket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: opacity 0.2s ease;
  }

  .knockout-view-bracket-btn:hover {
    opacity: 0.9;
  }

  /* H2H TAB styles are defined earlier in this file (search "H2H Summary") */

  /* Form Dots — .form-row canonical definition is below (search "Recent form") */
  .form-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
  }

  .form-team-logo {
    font-size: 16px;
    width: 20px;
    height: 20px;
  }

  .form-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .form-team-name {
    font-size: 12px;
    font-weight: 600;
  }

  .form-results {
    display: flex;
    gap: 4px;
  }

  .form-dot {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
  }

  .form-dot.win {
    background: var(--win-green);
    color: #000;
  }

  .form-dot.draw {
    background: var(--draw-gray);
    color: #fff;
  }

  .form-dot.lose {
    background: var(--lose-red);
    color: #fff;
  }

  /* Form squares (no text, just colored squares) */
  .form-square {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .form-square.win {
    background: var(--win-green);
  }

  .form-square.draw {
    background: var(--draw-gray);
  }

  .form-square.lose {
    background: var(--lose-red);
  }

  .nm-no-match {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .next-match-col.empty {
    background: var(--color-surface);
    justify-content: center;
    min-height: 80px;
  }

  /* Channels List */
  .channels-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .channel-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-card-hover);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
  }

  /* TV Channels inside venue card */
  .venue-tv-channels {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .venue-tv-channels .tv-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
  }

  .venue-tv-channels .channels-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .venue-tv-channels .channel-badge {
    padding: 4px 10px;
    font-size: 11px;
    background: rgb(255 255 255 / 6%);
    border-radius: 6px;
    color: var(--color-text);
  }

  /* Referee Row */
  .referee-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .referee-row:last-child {
    border-bottom: none;
  }

  /* Scoped overrides: list-row layout differs from the grid-card layout above
     (.referees-grid → .referee-item). Accent colour → muted/uppercase label. */
  .referee-row .referee-role {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    min-width: 80px;
  }

  .referee-row .referee-name {
    font-size: 13px;
    font-weight: 500;
  }

  /* Empty State Inline */
  .empty-state-inline {
    padding: 12px 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  /* Better card spacing in match detail tabs */
  .tab-content .card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .tab-content .card:last-child {
    margin-bottom: 0;
  }

  /* Section titles inside cards - inherits from .card-title */

  /* Player names in lineup */
  .player-row .player-name {
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    max-width: 100%;
    line-height: 1.3;
  }

  /* Standings row highlight - removed, using rule in standings section */

  /* Stats card specific spacing */
  .stats-card .stat-row:first-child {
    padding-top: 0;
  }

  .lineup-status-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--color-surface);
  }

  .lineup-status-banner.predicted {
    background: rgb(251 191 36 / 12%);
    border: 1px dashed rgb(251 191 36 / 40%);
  }

  .lineup-status-banner.confirmed {
    background: rgb(34 197 94 / 12%);
    border: 1px solid rgb(34 197 94 / 30%);
  }

  .lineup-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .lineup-status-banner.predicted .lineup-status-icon {
    background: rgb(251 191 36 / 20%);
  }

  .lineup-status-banner.predicted .lineup-status-icon svg {
    stroke: var(--color-warning);
  }

  .lineup-status-banner.confirmed .lineup-status-icon {
    background: rgb(34 197 94 / 20%);
  }

  .lineup-status-banner.confirmed .lineup-status-icon svg {
    stroke: var(--color-success);
  }

  .lineup-status-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .lineup-status-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
  }

  .lineup-status-banner.predicted .lineup-status-title {
    color: var(--color-warning);
  }

  .lineup-status-banner.confirmed .lineup-status-title {
    color: var(--color-success);
  }

  .lineup-status-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Predicted lineup visual indicators */
  .lineup-unified.predicted .unified-player-marker,
  .lineup-unified.predicted .unified-player-number {
    opacity: 0.85;
  }

  .lineup-unified.predicted .unified-field-player {
    position: relative;
  }

  /* Subtle pulsing effect for predicted players - centered on photo */
  .lineup-unified.predicted .unified-player-photo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 42px;
    height: 42px;
    border: 2px dashed rgb(251 191 36 / 40%);
    border-radius: 50%;
    opacity: 0;
    animation: predicted-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

  @keyframes predicted-pulse {
    0%,
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
    }

    50% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1.1);
    }
  }

  /* Predicted lineup - List format visual indicators */
  .lineup-team-card.predicted {
    border: 1px dashed rgb(251 191 36 / 30%);
  }

  .lineup-team-card.predicted .player-row {
    opacity: 0.9;
  }

  .lineup-team-card.predicted .player-photo {
    border: 2px dashed rgb(251 191 36 / 40%);
  }

  /* Predicted disclaimer footer */
  .lineup-predicted-disclaimer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--color-text-muted);
    background: rgb(251 191 36 / 6%);
    border: 1px dashed rgb(251 191 36 / 20%);
    border-radius: 8px;
  }

  .lineup-predicted-disclaimer svg {
    stroke: rgb(251 191 36 / 60%);
    flex-shrink: 0;
  }

  .lineup-unified {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
  }

  /* Team Strip Header (above/below field) */
  .lineup-team-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
  }

  .lineup-team-strip.away {
    border-top: 1px solid rgb(255 255 255 / 8%);
  }

  .team-rating-badge {
    min-width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--color-rating-good);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
  }

  .team-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }

  .team-logo-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .team-identity .team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    max-width: fit-content;
  }

  .lineup-team-strip .formation-badge {
    padding: 4px 10px;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
  }

  .lineup-team-strip .formation-badge.away {
    background: var(--color-accent);
    color: #000;
  }

  /* Unified Field */
  .lineup-unified-field {
    position: relative;
    padding: 0;
  }

  .unified-field-grass {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
      repeating-linear-gradient(
        180deg,
        rgb(22 78 40 / 45%) 0,
        rgb(22 78 40 / 45%) 40px,
        rgb(26 92 50 / 45%) 40px,
        rgb(26 92 50 / 45%) 80px
      ),
      linear-gradient(180deg, #0d1f14 0%, #0a1a10 100%);
    min-height: 820px;
    width: 100%;
    overflow: visible;
    padding: 16px 4px 20px;
  }

  /* Each half fills vertically via flexbox space-between */

  /* Field Lines - subtle markings matching team detail style */
  .unified-field-lines {
    position: absolute;
    inset: 0;
    border: 2px solid rgb(255 255 255 / 12%);
    pointer-events: none;
    z-index: 1;
  }

  .unified-field-lines .center-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgb(255 255 255 / 12%);
  }

  .unified-field-lines .center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
  }

  .unified-field-lines .center-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: rgb(255 255 255 / 15%);
    border-radius: 50%;
  }

  /* Penalty areas */
  .unified-field-lines .penalty-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 10%;
    border: 1px solid rgb(255 255 255 / 12%);
  }

  .unified-field-lines .penalty-area.top {
    top: 0;
    border-top: none;
  }

  .unified-field-lines .penalty-area.bottom {
    bottom: 0;
    border-bottom: none;
  }

  /* Goal areas */
  .unified-field-lines .goal-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 4%;
    border: 1px solid rgb(255 255 255 / 12%);
  }

  .unified-field-lines .goal-area.top {
    top: 0;
    border-top: none;
  }

  .unified-field-lines .goal-area.bottom {
    bottom: 0;
    border-bottom: none;
  }

  /* Penalty arcs */
  .unified-field-lines .penalty-area.top::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-top: none;
    border-radius: 0 0 30px 30px;
  }

  .unified-field-lines .penalty-area.bottom::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-bottom: none;
    border-radius: 30px 30px 0 0;
  }

  /* Players container - each half fills 50%, rows positioned via absolute top% */
  .unified-field-players {
    position: relative;
    z-index: 2;
    flex: 1;
  }

  /* Each formation row — absolute positioned at top% set via inline style */
  .unified-field-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    transform: translateY(-50%);
  }

  /* Individual player */
  .unified-field-player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% / var(--row-players, 4));
    max-width: 80px;
    min-width: 56px;
    z-index: 3;
  }

  /* When rendered as <a> (team/league Best XI pitch → player page link)
     reset anchor chrome so the marker keeps the same visual contract. */
  a.unified-field-player {
    text-decoration: none;
    color: inherit;
  }

  /* Substitution minute badge */
  .sub-minute-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    z-index: 5;
    white-space: nowrap;
  }

  .sub-minute-badge.in {
    background: var(--color-success);
    color: #000;
  }

  .sub-minute-badge.out {
    background: var(--color-card-red);
    color: #fff;
  }

  /* Injured-out variant: same "player left the pitch" direction as .out
     but highlighted white-on-red so the reason (injury, not tactical
     sub) reads at a glance. Icon rendered inline in the pill by the
     `getSubMinute` macro. */
  .sub-minute-badge.injured {
    background: #fff;
    color: var(--color-card-red);
  }

  /* Sub minute badge positioning in field view — canonical top-left
     corner of the 40 px photo. Exclusive to this corner (no other
     overlay shares it) so a sub-out + yellow + goal can coexist
     visually with events stacking in the top-right. Was top-center,
     which collided with the first event badge of `.unified-player-
     events`. */
  .unified-field-player .sub-minute-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    transform: none;
    z-index: 12;
    padding: 1px 4px;
    font-size: 9px;
  }

  /* Player marker - container for photo and rating badge */
  .unified-player-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .unified-player-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgb(255 255 255 / 85%);
    background: var(--color-surface);
    flex-shrink: 0;
  }

  .unified-player-marker.away .unified-player-photo {
    border-color: var(--color-accent);
  }

  .unified-player-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
    flex-shrink: 0;
  }

  .unified-player-number.away {
    background: var(--color-accent);
    color: #000;
  }

  /* Player rating - badge overlaid on bottom-right of photo */
  .unified-player-rating {
    position: absolute;
    bottom: -4px;
    right: -6px;
    min-width: 22px;
    padding: 1px 3px;
    background: #6b7280;
    color: #fff;
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
    z-index: 10;
    line-height: 1.3;
  }

  /* Captain badge — top-left corner of the marker, opposite the rating
     (bottom-right). Small "C" pill, yellow on white-ish so it reads on
     any photo background. Only renders when `player.captain === true`. */
  .unified-player-captain-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 14px;
    height: 14px;
    background: var(--color-warning);
    color: #000;
    font-family: var(--font-title);
    font-size: 9px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
    z-index: 10;
  }

  /* Nationality flag SW corner of the marker. Used by Best XI tab; the
     match-lineup pitch can opt-in by adding `<img class="unified-player-
     flag">` next to `.unified-player-photo`. */
  .unified-player-flag {
    position: absolute;
    bottom: -4px;
    left: -6px;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
    z-index: 9;
  }

  /* Club crest variant — used by the Best XI "Todos los equipos" pitch
     where the marker overrides the country flag with the player's club
     logo. PNG crests need a square aspect + `contain` so they don't get
     squashed into the 16×11 flag rectangle, and a drop-shadow instead
     of a background so transparent badges don't get a white box. */
  .unified-player-flag--crest {
    width: 14px;
    height: 14px;
    border-radius: 0;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 3px rgb(0 0 0 / 80%)) drop-shadow(0 0 6px rgb(0 0 0 / 50%));
  }

  /* Pitch-scoped override for the global .rating-tier (12px / 26 min-w /
     4px 8px padding). On the pitch the badge must stay 9px / 22 min-w to
     fit under the 40 px photo without overflowing adjacent players. */
  .unified-player-rating.rating-tier {
    min-width: 22px;
    padding: 1px 3px;
    font-size: 10px;
    border-radius: 4px;
    line-height: 1.3;
  }

  .unified-player-rating.high {
    background: var(--color-rating-good);
    color: #000;
  }

  .unified-player-rating.good {
    background: var(--color-rating-above-avg);
    color: #000;
  }

  .unified-player-rating.avg {
    background: #eab308;
    color: #000;
  }

  .unified-player-rating.low {
    background: var(--color-card-red);
    color: #fff;
  }

  /* Lineup pitch rating colors: see URC v1.0 canonical section at end
     of file. Apply `.rating-tier.tier-<class>` alongside
     `.unified-player-rating` for color; this class keeps only
     position/size/shadow. */

  /* ===============================================
     RATING TOOLTIP - Detailed Breakdown (PRE v2.2)
     =============================================== */

  .unified-player-rating.has-tooltip {
    cursor: help;
    position: relative;
  }

  .unified-player-rating.has-tooltip::before {
    content: "Base: " attr(data-rating-baseline) "\A" "Eventos: +" attr(data-rating-events) "\A"
      "Contexto: +" attr(data-rating-context) "\A" "Pasivo: +" attr(data-rating-passive) "\A"
      "─────────────\A" "PRE: " attr(data-rating-pre) "\A" "Normalized: "
      attr(data-rating-normalized) "/10";
    white-space: pre;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgb(17 17 19 / 98%);
    color: #fff;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.6;
    font-family:
      Manrope,
      -apple-system,
      sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    min-width: 160px;
    text-align: left;
    box-shadow:
      0 4px 12px rgb(0 0 0 / 40%),
      0 0 0 1px rgb(255 255 255 / 10%);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  /* Tooltip arrow */
  .unified-player-rating.has-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 6px solid transparent;
    border-top-color: rgb(17 17 19 / 98%);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  /* Show tooltip on hover (desktop) */
  .unified-player-rating.has-tooltip:hover::before,
  .unified-player-rating.has-tooltip:hover::after {
    opacity: 1;
  }

  /* Show tooltip on focus (mobile tap) */
  .unified-player-rating.has-tooltip:focus::before,
  .unified-player-rating.has-tooltip:focus::after {
    opacity: 1;
  }

  /* Remove default focus outline */
  .unified-player-rating.has-tooltip:focus {
    outline: none;
  }

  /* ===============================================
    .referees-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .referee-row-detailed {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .referee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary, #1a1a1d);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .referee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .referee-placeholder {
    font-size: 18px;
    color: var(--color-text-muted);
  }

  .referee-info {
    flex: 1;
  }

  .referee-info .referee-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
  }

  .referee-info .referee-role {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
  }

  .referee-assistants-row,
  .referee-extras-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-left: 52px;
  }

  .referee-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .referee-name-sm {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
  }

  .referee-role-sm {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  

  .coaches-grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .coach-item-list {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .coach-item-list.away {
    justify-content: flex-end;
    text-align: right;
  }

  .coach-avatar-list {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary, #1a1a1d);
    flex-shrink: 0;
  }

  .coach-avatar-placeholder-list {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-tertiary, #1a1a1d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .coach-info-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .coach-name-list {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
  }

  .coach-team-list {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Referees List Format */
  .referees-list-format {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .referee-row-list {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .referee-row-list.main {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
  }

  .referee-row-list.assistants,
  .referee-row-list.extras {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-left: 0;
  }

  .referee-avatar-list {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary, #1a1a1d);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .referee-avatar-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .referee-avatar-list span {
    font-size: 18px;
    color: var(--color-text-muted);
  }

  .referee-info-list {
    flex: 1;
  }

  .referee-name-list {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
  }

  .referee-role-list {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
  }

  .referee-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .referee-compact.var .referee-role-compact {
    color: var(--color-accent);
  }

  .referee-name-compact {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
  }

  .referee-role-compact {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .referees-grid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .referee-item-list {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-surface);
    border-radius: 6px;
  }

  .referee-role-badge-list {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    background: var(--color-accent);
    color: #000;
    border-radius: 3px;
    text-transform: uppercase;
  }

  /* Player stats row for substitutes */
  .player-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
    background: rgb(0 0 0 / 20%);
    border-radius: 6px;
    margin-top: 2px;
  }

  .player-stats-row .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .player-stats-row .stat-item .stat-icon {
    font-size: 11px;
    opacity: 0.7;
  }

  .player-stats-row .stat-item.goal {
    color: var(--color-success);
  }

  .player-stats-row .stat-item.goal .stat-icon {
    opacity: 1;
  }

  .player-stats-row .stat-item.assist {
    color: var(--color-zone-champions);
  }

  .player-stats-row .stat-item.assist .stat-icon {
    opacity: 1;
  }

  /* ── Player info (name below photo on pitch) + event icons overlay ─
     Missing from v2 because ported piecemeal; ported verbatim from v1
     app.css so names don't render unstyled and event badges (goal,
     card, sub-in/out) can position top-left of the player marker. */

  .unified-player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    max-width: 72px;
  }

  .unified-player-name {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgb(0 0 0 / 90%);
    white-space: nowrap;
    line-height: 1.3;
  }

  /* Goal badges — top-right of the photo. Cards moved to the opposite
     corner (`.unified-player-cards`) so a Vinícius-tier player (2 goals
     + 1 yellow) stops covering the whole face. Goal cluster is now
     just `[⚽][+N][own-goal]` — narrower, leaves the eye/forehead area
     clear. */
  .unified-player-events {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 11;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 2px;
  }

  /* When the goal cluster has 2+ children (e.g. `[⚽][+2]`, or
     `[⚽][+N][own-goal]`) it gets wide enough to creep over the
     player's face. Nudge the anchor 5 px further right (-10 vs -5) so
     the cluster grows OUT of the photo instead of INTO it. Single-icon
     case keeps the original `-5` so the icon sits flush at the corner. */
  .unified-player-events:has(:nth-child(2)) {
    right: -10px;
  }

  /* Card badges — bottom-left of the photo. Free corner (only the
     opt-in Best XI nationality flag uses it, and that tab doesn't
     render cards). Sequence is yellow → red/second-yellow → penalty-
     missed in chronological order — useful when a player picks up a
     yellow then a second-yellow in the same match. */
  .unified-player-cards {
    position: absolute;
    bottom: -5px;
    left: -5px;
    z-index: 11;
    display: flex;
    flex-direction: row;
    gap: 2px;
  }

  /* Multi-goal counter chip MUST hug the ball icon — override the
     container gap for this specific adjacency so [⚽][+2] reads as one
     unit, while [+2][🟨] still has the standard 2 px gap. */
  .player-icon-badge.goal + .player-icon-badge.goal-count {
    margin-left: -2px;
  }

  /* Base badge — chrome-less by default. Variants opt into dimensions
     and background when needed (yellow/red cards declare their own
     8×10 rectangle; goal-count, own-goal, injured, penalty-missed all
     declare backgrounds). The .goal variant deliberately stays naked
     so the ball glyph reads as content, not as a chip. */
  .player-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
  }

  .player-icon-badge.goal {
    font-size: 13px;
  }

  /* Counter chip that follows the .goal badge when a player scores 2+
     goals — "+2", "+3", etc. Black chip keeps contrast vs the green
     pitch and stays out of the way of the ball icon. Text is wider
     than a card/symbol so width is auto, not the 14 px square. */
  .player-icon-badge.goal-count {
    width: auto;
    min-width: 14px;
    padding: 0 4px;
    background: #000;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .player-icon-badge.own-goal {
    background: var(--color-card-red);
    font-size: 10px;
  }

  .player-icon-badge.yellow {
    width: 8px;
    height: 10px;
    background: var(--color-card-yellow);
    border-radius: 1px;
  }

  .player-icon-badge.red {
    width: 8px;
    height: 10px;
    background: var(--color-card-red);
    border-radius: 1px;
  }

  .player-icon-badge.injured {
    background: #fff;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-card-red);
  }

  .player-icon-badge.sub-out {
    font-size: 10px;
    color: var(--color-card-red);
  }

  .player-icon-badge.sub-in {
    font-size: 10px;
    color: var(--color-success);
  }

  /* Penalty missed badge */
  .player-icon-badge.penalty-missed {
    background: var(--color-card-red);
    color: #fff;
    font-size: 8px;
  }

  .player-event-badge.penalty-missed {
    background: rgb(239 68 68 / 20%);
    color: var(--color-card-red);
  }

  /* Substitutes section improvements */
  .subs-section .dual-section-content.subs {
    background: transparent;
    gap: 0;
  }

  .subs-section .dual-column {
    padding: 8px;
    gap: 10px;
  }

  /* ── Substitutes cards (Stage list-style 2-col grid) ─────── */
  .subs-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px;
    max-width: 100%;
  }

  .subs-cards-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }

  /* Sub-card sits inside `.lineup-dual-section.card` (which uses
     --color-surface). Bumping each pill to --color-surface-active gives
     the grid visible separation: the section card reads as background,
     the cards inside as content. Hover lifts one more step. */
  .sub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    background: var(--color-surface-active);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .sub-card:hover {
    background: #26262a;
  }

  .sub-card-photo-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
  }

  .sub-card-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface-active);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--color-border);
  }

  .sub-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sub-card-photo span {
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  .sub-card-rating {
    position: absolute;
    top: 0;
    right: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: var(--weight-bold);
    color: var(--color-on-accent);
  }

  /* Sub-card rating colors: see URC v1.0 canonical section at end of
     file. Apply `.rating-tier.tier-<class>` alongside `.sub-card-rating`
     for color; this class keeps only position/size. */

  .sub-card-minute {
    position: absolute;
    top: 0;
    left: 4px;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: var(--weight-semibold);
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

  /* Captain badge for bench cards — same chrome as the field marker
     variant so the visual identity is consistent across the lineup tab.
     Anchored top-right next to the rating instead of top-left so it
     coexists with `.sub-card-minute` (which lives top-left). */
  .sub-card-captain-badge {
    position: absolute;
    top: 0;
    right: 28px;
    width: 14px;
    height: 14px;
    background: var(--color-warning);
    color: #000;
    font-family: var(--font-title);
    font-size: 9px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
    z-index: 10;
  }

  .sub-card-events {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
  }

  .sub-card-event-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }

  /* Goal icon detaches from the events cluster and sits next to the
     photo's right-bottom corner, slightly overlapping it. The wrapper
     is wider than the photo (photo is centred), so a `right:` offset
     would float the icon all the way to the wrapper edge — too far.
     Instead anchor by `left: calc(50% + 14px)` to nail the icon to the
     photo's right edge regardless of column width. Naked glyph (no
     chip bg/border). */
  .sub-card-event-icon.goal {
    position: absolute;
    bottom: -2px;
    left: calc(50% + 14px);
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    z-index: 11;
  }

  .sub-card-event-icon.yellow {
    background: var(--color-gold-2);
  }

  .sub-card-event-icon.red {
    background: var(--color-card-red);
  }

  .sub-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    width: 100%;
  }

  .sub-card-name {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .sub-card-number {
    color: var(--color-text-muted);
    margin-right: 3px;
  }

  .sub-card-pos {
    font-size: 9px;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  /* Replacement story: shown instead of position on bench cards of
     players that entered the match. "46' Sale: Antañón" condensed in
     one line. UX convention — gives the fan the "who went in
     for whom" at a glance without crowding the card. */
  .sub-card-swap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    color: var(--color-text-muted);
    line-height: 1.2;
  }

  .sub-card-swap__label {
    flex-shrink: 0;
    text-transform: none;
  }

  /* Sidelined variant of .sub-card — reuses the bench layout for
     visual consistency (two-column grid, same photo size, same info
     stack) but swaps the sub-minute chip for a red medical cross and
     uses the injury reason as the position line. */
  .sub-card--injured .sub-card-injury-badge {
    position: absolute;
    top: 0;
    left: 4px;
    padding: 1px 5px;
    background: var(--color-card-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    line-height: 1;
  }

  .sub-card--suspended .sub-card-injury-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    background: var(--color-warning-strong);
    line-height: 0;
  }

  .sub-card--injured .sub-card-pos {
    color: #f87171;
  }

  /* Placeholder card used when a team has zero sidelined — keeps the
     two-column grid balanced so a team with injuries doesn't render
     alone on a full-width card. */
  .sub-card--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    background: transparent;
    border: 1px dashed var(--color-border);
    cursor: default;
  }

  .sub-card--empty .sub-card-pos {
    font-style: italic;
  }

  .sub-card-swap__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--color-text);
  }

  /* ── Dual-column sections (Coaches shell) ────────────────
     Ported from v1 app.css L14231-14305. Used by the Coaches
     block inside the Lineup tab. Subs section has its own
     overrides above (.subs-section .dual-section-content.subs).
  */

  /* Lineup sections (coaches / substitutes / sidelined) inherit the
     base `.card` padding so the title and the inner grid breathe like
     every other card on the page. The grid columns stop at the card's
     internal padding rather than running edge-to-edge — visual parity
     with venue / referees / events cards. */
  .lineup-dual-section.card {
    overflow: hidden;
  }

  .dual-section-header {
    text-align: center;
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .dual-section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgb(255 255 255 / 8%);
  }

  .dual-column {
    background: var(--color-surface);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Coach card (inside .dual-column) */
  .coach-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .coach-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgb(255 255 255 / 5%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .coach-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .coach-placeholder {
    font-size: 20px;
    color: var(--color-text-muted);
  }

  .coach-name {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-align: center;
  }

  .coach-meta {
    font-size: 10px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* end of lineup tab block */

  /* ════════════════════════════════════════════════════════════════
     PRE-MATCH (NS) BRANCH — spotlight, poll, form, last5, h2h, venue,
     weather, channels. Ported from v1 app.css (5492-6470, 12115-13470).
     v1 token shim: bg-card=color-surface, bg-primary=color-bg,
     bg-card-hover=color-surface-hover, accent-primary=color-accent,
     border-color=color-border, text-primary=color-text,
     text-secondary=color-text-muted, text-muted=color-text-disabled,
     win-green=color-win, lose-red=color-loss, draw-gray=color-draw.
     ════════════════════════════════════════════════════════════════ */

  /* Spotlight card (about preview, wrap-up) */
  .spotlight-card {
    position: relative;
    background: var(--color-surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 5%);
    margin-bottom: 10px;
  }

  .spotlight-glow {
    position: absolute;
    inset: 0 0 auto;
    height: 80px;
    pointer-events: none;
  }

  .spotlight-glow--league {
    background: linear-gradient(180deg, rgb(16 185 129 / 12%) 0%, transparent 100%);
  }

  .spotlight-content {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .spotlight-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .spotlight-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
  }

  .spotlight-badge--league {
    background: #10b981;
  }

  .spotlight-comp {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .spotlight-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
  }

  /* Poll card */
  .poll-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .poll-options {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  .poll-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--color-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    color: inherit;
  }

  .poll-option:hover:not(.voted) {
    background: var(--color-surface-hover);
    border-color: rgb(255 255 255 / 10%);
  }

  .poll-team-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .poll-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .poll-team-logo.draw-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-active);
    border-radius: 50%;
  }

  .poll-team-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .poll-pct {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      height 0.25s ease,
      opacity 0.3s ease;
    line-height: 1;
  }

  .poll-option.voted .poll-pct {
    height: 16px;
    opacity: 1;
  }

  .poll-option.voted .poll-team-name {
    display: none;
  }

  .poll-bar-track {
    width: 100%;
    height: 3px;
    background: rgb(255 255 255 / 6%);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-top: auto;
  }

  .poll-option.voted .poll-bar-track {
    opacity: 1;
  }

  .poll-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .poll-bar-home {
    background: var(--color-accent);
  }

  .poll-bar-draw {
    background: rgb(255 255 255 / 35%);
  }

  .poll-bar-away {
    background: #3b82f6;
  }

  .poll-option.selected {
    border-color: var(--color-accent);
    background: rgb(0 255 135 / 8%);
  }

  .poll-option.voted {
    cursor: default;
  }

  .poll-option.voted:not(.selected) {
    opacity: 0.65;
  }

  /* Pre-match the pick is still editable: the voted options stay
     interactive so the user can change their mind before kick-off. Restores
     the pointer + hover that `.voted` drops, and lifts the dim on the
     non-chosen options so they read as clickable (not locked). The `.voted`
     in the selector matches the `.poll-option.voted` specificity it has to
     override (changeable always co-occurs with voted). */
  .poll-option.voted.poll-option--changeable {
    cursor: pointer;
  }

  .poll-option.voted.poll-option--changeable:hover {
    background: var(--color-surface-hover);
    border-color: rgb(255 255 255 / 10%);
  }

  .poll-option.voted.poll-option--changeable:not(.selected) {
    opacity: 0.85;
  }

  .poll-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 16px;
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
  }

  .poll-participants-icon {
    font-size: 13px;
    line-height: 1;
  }

  /* "Tap to change your vote" — shown only while the pick is editable. */
  .poll-change-hint {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* Recent form */
  .form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .form-row:last-child {
    margin-bottom: 0;
  }

  .form-team-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .form-team-name {
    font-size: 13px;
    font-weight: 600;
    min-width: 80px;
  }

  .form-results {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
  }

  .form-square {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .form-square.win {
    background: var(--color-win);
  }

  .form-square.draw {
    background: var(--color-draw);
  }

  .form-square.lose {
    background: var(--color-loss);
  }

  /* Last 5 matches grid */
  .last-matches-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .last-matches-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .last-matches-col-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }

  .last-matches-col-header img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .last-matches-col-header span {
    font-size: 12px;
    font-weight: 600;
  }

  .last-match-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }

  a.last-match-row:hover,
  a.last-match-row:active {
    background: rgb(255 255 255 / 5%);
  }

  .lm-team {
    font-size: 20px;
    width: 28px;
    text-align: center;
  }

  .lm-team img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .lm-result {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .lm-result.win {
    background: var(--color-win);
    color: #000;
  }

  .lm-result.draw {
    background: var(--color-draw);
    color: #fff;
  }

  .lm-result.lose {
    background: var(--color-loss);
    color: #fff;
  }

  /* Next matches grid */
  .next-matches-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .next-match-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--color-surface-hover);
    border-radius: 10px;
  }

  .next-match-col .next-match-teams {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nm-team,
  .nm-rival {
    font-size: 28px;
  }

  .nm-team img,
  .nm-rival img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .nm-vs {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .nm-rival-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
  }

  .nm-datetime {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .venue-weather-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    margin-top: 4px;
  }

  .venue-weather-compact .weather-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .venue-weather-compact .weather-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* H2H bars (NS overview variant — flex bars with numbers inside) */
  .card .h2h-bars {
    display: flex;
    gap: 4px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .card .h2h-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    min-width: 28px;
  }

  /* Per-team accents — same solid → 35% fade gradient as stat-bar
     (`.stat-bar-home/-away`) so the historial card lines up visually
     with the stats card. Solid edge sticks to the team side; the centre
     fades into the surface for readability. */
  .card .h2h-bar.home {
    background: linear-gradient(
      90deg,
      var(--team-color-home, var(--color-accent)),
      color-mix(in srgb, var(--team-color-home, var(--color-accent)) 35%, transparent)
    );
  }

  .card .h2h-bar.draw {
    /* Match the home/away fade silhouette: faded edges → solid centre,
       so the draw band reads as a continuation of the gradients on
       either side instead of a hard slab in between. */
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-text-muted) 35%, transparent),
      var(--color-surface-active),
      color-mix(in srgb, var(--color-text-muted) 35%, transparent)
    );
    color: var(--color-text);
  }

  .card .h2h-bar.away {
    background: linear-gradient(
      270deg,
      var(--team-color-away, var(--color-accent-secondary)),
      color-mix(in srgb, var(--team-color-away, var(--color-accent-secondary)) 35%, transparent)
    );
  }

  /* Flip numerals to white when PHP flags the team colour as dark
     (luminance < 0.55) — overlaying black on navy/maroon kit accents
     was unreadable. */
  .card .h2h-bar.h2h-bar--on-dark {
    color: #fff;
  }

  .card .h2h-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .h2h-legend__team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;

    /* Caps the team chunk so long names don't push the "Empates" label
       off-centre or eat the bar legend (Bundesliga's "Borussia
       Mönchengladbach" was occupying ~60% of the row). */
    max-width: 42%;
  }

  .h2h-legend__team--away {
    flex-direction: row;
    justify-content: flex-end;
  }

  .h2h-legend__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .h2h-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
  }

  .h2h-legend__logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* ── H2H tab (summary card + recent meetings list — v1 markup) ── */

  .h2h-summary-card__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .h2h-summary-card__title {
    margin: 0;
  }

  .h2h-summary-card__count {
    margin-left: auto;
    font-size: 12px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text-muted);
  }

  /* Recent meetings — wrapped as card section. */
  .h2h-recent-card {
    margin-top: 12px;
  }

  .h2h-recent-title {
    margin: 0 0 8px;
  }

  .match-row {
    margin-top: 8px;
    border-radius: 10px;
    background: var(--color-surface);
    color: inherit;
    overflow: hidden;
    /* Listas grandes (Finalizados con 50 matches, league/matches view
       team con 38 jornadas) — el browser salta layout/paint de las
       rows off-screen. `contain-intrinsic-size` evita layout shift
       al scrollear. */
    content-visibility: auto;
    contain-intrinsic-size: 0 88px;
  }

  .match-row__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 12px 12px;
    color: inherit;
    text-decoration: none;
  }

  .match-row-comp {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-decoration: none;
  }

  a.match-row-comp:hover {
    background: var(--color-surface-hover);
  }

  .match-row-comp__logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .match-row-comp__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .h2h-recent-card .match-row {
    background: var(--color-surface-hover);
  }

  a.match-row__main:hover {
    background: var(--color-surface-hover);
  }

  .h2h-recent-card a.match-row__main:hover {
    background: var(--color-surface-elevated, var(--color-surface));
  }

  .match-row-date {
    margin-left: auto;
    font-size: 11px;
    font-weight: var(--weight-semibold, 600);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  /* Live minute pulse — swaps the kickoff date out for the
     current minute (`62'`) with the same pulsing dot the
     `.match-card--live` header on the home livescore uses. Keeps the
     visual language consistent across surfaces (home card, team
     overview, team matches row) so the user reads the same signal
     "this is happening NOW" everywhere. */
  .match-row-date--live {
    color: var(--color-live);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .match-row-date__live-dot {
    width: 7px;
    height: 7px;
    background: var(--color-live);
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
  }

  /* Red-card pip rendered next to a team name in `.match-row-team`.
     Mirrors `.match-card__red-card` from the home livescore so reading
     across surfaces stays consistent. */
  .match-row__red-card {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    flex-shrink: 0;
  }

  .match-row__red-card .card-icon.red {
    display: inline-block;
    width: 9px;
    height: 12px;
    background: var(--color-card-red);
    border-radius: 1.5px;
  }

  .match-row__red-card-count {
    font-size: 11px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text-muted);
    line-height: 1;
  }

  .match-row-teams {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .match-row-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    min-width: 0;
  }

  .match-row-team.winner {
    color: var(--color-text);
    font-weight: var(--weight-semibold, 600);
  }

  .match-row-team > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-row-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text-muted);
  }

  .match-row-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .match-row-score {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
    min-width: 24px;
    font-variant-numeric: tabular-nums;
  }

  /* ── H2H tab — recent form per team (last 5 horizontal scroll) ───── */

  .h2h-form-card {
    margin-top: 12px;
  }

  .h2h-form-section + .h2h-form-section {
    margin-top: 16px;
  }

  .h2h-form-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 4px;
  }

  .h2h-form-section__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .h2h-form-section__name {
    font-size: 14px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text);
  }

  /* .last5-* canonical styles live in assets/styles/components/last5.css
     (shared with team overview form card). */

  /* ── URC v1.0 rating tier system (canonical) ─────────── */

  /* Single source of truth for player rating colors. Apply
     `.rating-tier.tier-<class>` to any rating badge. Thresholds live in
     PHP: App\Service\Builder\MatchViewBuilder::ratingClass() + the
     |rating_class Twig filter (App\Twig\RatingTierExtension). Do NOT
     duplicate color rules in component-specific selectors
     (.unified-player-rating, .sub-card-rating, .motm-compact-rating
     keep only sizing/position; color comes from .tier-*). */

  .rating-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #0a0a0b;
    flex-shrink: 0;
  }

  /* Size variants. Default (no modifier) = inline lists/sub cards.
     .size-lg = MOTM card / player modal hero. */
  .rating-tier.size-lg {
    min-width: 42px;
    padding: 6px 10px;
    font-size: 18px;
    border-radius: 10px;
  }

  .rating-tier.size-xs {
    min-width: 22px;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 4px;
  }

  .rating-tier.tier-elite {
    background: linear-gradient(135deg, var(--color-rating-elite) 0%, #ffa000 100%);
    color: #0a0a0b;
    box-shadow: 0 0 6px rgb(255 215 0 / 50%);
    animation: urc-elite-pulse 2.5s ease-in-out infinite;
  }

  .rating-tier.tier-excellent {
    background: linear-gradient(135deg, var(--color-rating-excellent) 0%, #ff8f00 100%);
    color: #0a0a0b;
  }

  .rating-tier.tier-very-good {
    background: var(--color-rating-very-good);
    color: #0a0a0b;
  }

  .rating-tier.tier-good {
    background: var(--color-rating-good);
    color: #0a0a0b;
  }

  .rating-tier.tier-above-avg {
    background: #84cc16;
    color: #0a0a0b;
  }

  .rating-tier.tier-avg {
    background: #c084fc;
    color: #0a0a0b;
  }

  .rating-tier.tier-below-avg {
    background: #f97316;
    color: #0a0a0b;
  }

  .rating-tier.tier-poor {
    background: #f87171;
    color: #0a0a0b;
  }

  .rating-tier.tier-none {
    background: transparent;
    color: var(--color-text-muted);
  }

  @keyframes urc-elite-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.92;
      transform: scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rating-tier.tier-elite {
      animation: none;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     Predictions tab — consensus cards + modals.
     Data comes from PredictionConsensusService. Visual reference:
     /tmp/v2-predictions-tab-visual.md §8 tokens.
  ═══════════════════════════════════════════════════════════════ */

  .predictions-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 24px;
  }

  /* Hero summary (FT only) — big "N/M mercados" card at the top with a
     segmented meter mirroring the order of the market cards below. */
  .predictions-summary {
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgb(255 107 107 / 14%) 0%, rgb(168 255 62 / 9%) 100%);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .predictions-summary__title {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold, 600);
  }

  .predictions-summary__stat {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 28px;
    font-weight: var(--weight-bold, 700);
    line-height: 1;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .predictions-summary__hits {
    color: var(--prediction-fav-default);
    font-size: 32px;
  }

  .predictions-summary__sep {
    color: var(--color-text-muted);
  }

  .predictions-summary__total {
    color: var(--color-text);
  }

  .predictions-summary__label {
    font-size: 13px;
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-muted);
    margin-left: 6px;
  }

  .predictions-summary__meter {
    display: flex;
    gap: 3px;
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
    overflow: hidden;
  }

  .predictions-summary__seg {
    flex: 1;
    border-radius: 2px;
  }

  .predictions-summary__seg--hit {
    background: var(--prediction-fav-default);
  }

  .predictions-summary__seg--miss {
    background: rgb(255 107 107 / 75%);
  }

  .predictions-summary__seg--na {
    background: rgb(255 255 255 / 10%);
  }

  .predictions-tab__page-title {
    margin: 4px 0 0;
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
    letter-spacing: -0.01em;
  }

  /* ── Header: title + sources chip ─────────────────── */

  .predictions-tab__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px;
  }

  .predictions-tab__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
    letter-spacing: 0.02em;
  }

  .predictions-tab__sources {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: var(--weight-medium, 500);
    cursor: pointer;
    transition:
      border-color 0.15s,
      color 0.15s;
  }

  .predictions-tab__sources:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
  }

  .predictions-tab__sources-icon {
    width: 14px;
    height: 14px;
  }

  /* ── Category title ───────────────────────────────── */

  .predictions-category {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .predictions-category__title {
    margin: 4px 2px 0;
    font-size: 11px;
    font-weight: var(--weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
  }

  /* ── Market card (shared base) ────────────────────── */

  .market-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition:
      background 0.15s,
      border-color 0.15s;
  }

  .market-card:hover,
  .market-card:focus-visible {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
  }

  .market-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .market-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .market-card__title {
    font-size: 13px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text);
    white-space: nowrap;
  }

  .market-card__sources {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .market-card__sources-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .market-card__chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .market-card__header:not(:has(.market-card__sources)) .market-card__chevron {
    margin-left: auto;
  }

  /* ── Accuracy — FT only ─────────────────────────
     Chip below the title on its own row (prevents wrap on narrow
     mobile). Background color + styled labels already communicate
     hit/miss — no redundant ✓/✗ icon needed.
     · HIT  → green chip with just "{pct}% {label}".
     · MISS → coral chip with "{pct}% {ourPick} → {actual}" (arrow
       carries the "we said X, {actual} happened" story). */
  .market-card__accuracy-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--weight-medium, 500);
    line-height: 1.35;
    max-width: 100%;
    text-align: left;
  }

  .market-card__accuracy-chip strong {
    font-weight: var(--weight-bold, 700);
  }

  .market-card__accuracy-icon {
    font-size: 12px;
    font-weight: var(--weight-bold, 700);
    flex-shrink: 0;
    line-height: 1;
  }

  .market-card__accuracy-chip--hit {
    background: color-mix(in oklab, var(--prediction-fav-default) 15%, transparent);
    color: var(--prediction-fav-default);
  }

  .market-card__accuracy-chip--hit strong {
    color: var(--prediction-fav-default);
  }

  .market-card__accuracy-chip--miss {
    background: color-mix(in oklab, var(--color-prediction-miss) 12%, transparent);
    color: var(--color-prediction-miss-fg);
  }

  .market-card__accuracy-chip--miss strong {
    color: var(--color-prediction-miss-fg);
  }

  .market-card.is-correct {
    box-shadow: inset 3px 0 0 0 var(--prediction-fav-default);
  }

  .market-card.is-wrong {
    box-shadow: inset 3px 0 0 0 var(--color-prediction-miss);
  }

  /* The actual outcome gets a subtle dashed underline so the real result
     reads even when it wasn't our favorite. */
  .market-outcome.is-actual .market-outcome__label {
    text-decoration: underline dashed;
    text-decoration-color: rgb(255 255 255 / 45%);
    text-underline-offset: 3px;
  }

  /* On a missed card the graph should call out the miss: the actual
     winner (is-actual) switches to coral so the "what actually happened"
     stat reads immediately, and our wrong favorite loses its green so it
     doesn't falsely advertise confidence. */
  .market-card.is-wrong .market-outcome.is-actual .market-outcome__value,
  .market-card.is-wrong .market-outcome.is-actual .market-outcome__label {
    color: var(--color-prediction-miss-fg);
  }

  .market-card.is-wrong .market-outcome.is-actual .market-outcome__bar-fill {
    background: var(--color-prediction-miss-fg);
  }

  .market-card.is-wrong .market-outcome.is-favorite .market-outcome__value {
    color: var(--color-text-muted);
  }

  .market-card.is-wrong .market-outcome.is-favorite .market-outcome__bar-fill {
    background: var(--color-text-muted);
  }

  /* ── Outcome rows (v1 parity: label · value · inline bar) ──
     Each outcome is a full-width row stacked vertically inside the card,
     with label left + percentage + horizontal bar filling remaining width.
     Lime/chartreuse accent mirrors v1 — overridden per-team via --outcome-color
     when the service emits a team-favorite. */

  .predictions-tab {
    --prediction-fav-default: var(--color-prediction-hit);
    --prediction-bar-bg: rgb(255 255 255 / 6%);
  }

  .market-outcomes {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .market-outcome {
    display: grid;
    grid-template-columns: 40px 48px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .market-outcome__label {
    font-size: 11px;
    font-weight: var(--weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .market-outcome.is-favorite .market-outcome__label {
    color: var(--color-text);
  }

  .market-outcome__value {
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text-muted);
    text-align: left;
  }

  .market-outcome.is-favorite .market-outcome__value {
    color: var(--prediction-fav-default);
  }

  .market-outcome__bar {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 0;
    border-radius: 4px;
    background: var(--prediction-bar-bg);
    overflow: hidden;
  }

  .market-outcome__bar-fill {
    display: block;
    height: 100%;

    /* Non-favorite outcomes stay muted gray; the favorite swaps to the
       feeberse accent. Single color per card → clean scan-reading. */
    background: var(--color-text-muted);
    border-radius: 4px;
    transition: width 0.4s ease-out;
  }

  .market-outcome.is-favorite .market-outcome__bar-fill {
    background: var(--prediction-fav-default);
  }

  /* ── Correct score grid (3×2) ─────────────────────── */

  .market-card--score-grid {
    padding-bottom: 16px;
  }

  .market-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .market-score-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 8px;
    background: rgb(255 255 255 / 2%);
    border: 1px solid transparent;
  }

  .market-score-cell.is-favorite {
    border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
    background: color-mix(in oklab, var(--color-accent) 10%, transparent);
  }

  /* Missed card: our favorite cell flips to the coral accent — same
     intensity as the green favorite on NS so the "we picked this, it was
     wrong" stamp reads as loud as the "we're backing this" stamp does. */
  .market-card.is-wrong .market-score-cell.is-favorite {
    border-color: color-mix(in oklab, var(--color-prediction-miss) 55%, transparent);
    background: color-mix(in oklab, var(--color-prediction-miss) 14%, transparent);
  }

  .market-card.is-wrong .market-score-cell.is-favorite .market-score-cell__score {
    color: var(--color-prediction-miss-fg);
  }

  /* The actual FT score, when it lands in the top-6 but wasn't our pick,
     gets a softer coral outline so the user can still locate it. */
  .market-card.is-wrong .market-score-cell.is-actual:not(.is-favorite) {
    border-color: color-mix(in oklab, var(--color-prediction-miss) 40%, transparent);
    background: color-mix(in oklab, var(--color-prediction-miss) 8%, transparent);
  }

  .market-card.is-wrong .market-score-cell.is-actual:not(.is-favorite) .market-score-cell__score {
    color: var(--color-prediction-miss-fg);
  }

  .market-score-cell__score {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .market-score-cell__prob {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* ── Footer: methodology link ─────────────────────── */

  .predictions-tab__footer {
    display: flex;
    justify-content: center;
    padding-top: 4px;
  }

  .predictions-tab__methodology {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition:
      color 0.15s,
      border-color 0.15s;
  }

  .predictions-tab__methodology svg {
    width: 14px;
    height: 14px;
  }

  .predictions-tab__methodology:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .market-outcome__bar-fill {
      transition: none;
    }
  }

  /* ══════════════════════════════════════════════════
     Standings tab — v1 literal port.
     Source: v1 app.css §§35988–36167 (team-standings-*).
     Class names mirror v1 so this block reads 1:1 with
     the original CSS from feat-match-planner.
     ══════════════════════════════════════════════════ */

  .team-standings-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .standings-section-header {
    padding: 8px 0 20px;
  }

  .standings-comp-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
  }

  .standings-comp-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .standings-comp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .standings-comp-name {
    font-size: 15px;
    font-weight: var(--weight-bold, 700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .standings-comp-subtitle {
    font-size: 12px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text-secondary);
  }

  .standings-comp-chevron {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
  }

  /* `.standings-toolbar` + `.tab-filter-pill*` base styles live in
     components/standings.css (shared across match / league / team). Al
     estar en @layer pages, cualquier regla NO scoped aquí anula la
     cascade de components (layer precedence), rompiendo el guard
     `.X[hidden] { display: none }` de otros consumers (p.ej. league
     transfers). Scope a `.match-page` para no filtrar fuera. */
  .match-page .standings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
  }

  .match-page .tab-filter-pills {
    display: inline-flex;
    gap: 6px;
  }

  .match-page .tab-filter-pill {
    appearance: none;
    border: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary, var(--color-text));
    font-size: 12px;
    font-weight: var(--weight-semibold, 600);
    padding: 6px 12px;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .match-page .tab-filter-pill:hover {
    background: var(--color-surface-hover);
  }

  .match-page .tab-filter-pill.active {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }

  /* .standings-view-wrapper / .team-standings-scroll(::-webkit-scrollbar) /
     .team-standings-table + [data-view="complete|form"] base declarations
     live in components/standings.css (shared). Match page only keeps overrides
     below (row-moved oklab, padding + border-subtle header, etc.). */

  /* .standings-view-trigger base styles moved to .select-trigger
     (select-modal.css). Match page keeps only the shape-specific
     overrides; no overrides needed today. */

  /* Row moved highlight after FLIP reorder (location switch). */
  .team-standings-table tbody tr.standings-row-moved {
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
  }

  .team-standings-table thead th {
    padding: 10px 6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold, 600);
    text-align: center;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 11px;
  }

  /* .team-standings-table th.st-team / td.st-team: see standings.css (shared). */

  .team-standings-table tbody tr {
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background 0.15s;
  }

  .team-standings-table tbody tr:last-child {
    border-bottom: 0;
  }

  /* .team-standings-table tbody tr:hover: see standings.css (shared). */

  .team-standings-table tbody tr.current-team {
    background: color-mix(in oklab, var(--color-accent) 7%, transparent);
  }

  /* .team-standings-table td: see standings.css (shared). Keeping it here
     would promote the rule into @layer pages and shadow the more-specific
     .st-team text-align:left override from @layer components. */

  .team-standings-table .st-pos {
    width: 36px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text-muted);
  }

  /* .team-standings-table .st-team: see standings.css (shared). */

  .st-team-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
  }

  .st-team-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .st-team-logo:empty {
    display: none;
  }

  /* .st-team-logo img: see standings.css (shared). */

  .st-team-name {
    font-weight: var(--weight-semibold, 500);
    color: var(--color-text);
  }

  /* .current-team .st-team-name: see standings.css (shared). */

  .team-standings-table .st-pts {
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
  }

  /* .current-team .st-pts: see standings.css (shared). */

  /* Live-match row projection — inline badge + projected points color.
     Applied only to the 2 rows of the current in-play match. */
  .st-live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    color: #fff;
  }

  .st-live-badge--winning {
    background: var(--color-success);
  }

  .st-live-badge--drawing {
    background: #94a3b8;
  }

  .st-live-badge--losing {
    background: var(--color-card-red);
  }

  .current-team--live .st-team-name {
    position: relative;
  }

  .current-team--live .st-team-name::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--live-red, var(--color-card-red));
    animation: current-live-pulse 1.5s ease-in-out infinite;
    vertical-align: middle;
  }

  @keyframes current-live-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.4;
      transform: scale(0.75);
    }
  }

  .st-pts--live-winning {
    color: var(--color-success) !important;
  }

  .st-pts--live-drawing {
    color: #94a3b8 !important;
  }

  .st-pts--live-losing {
    color: var(--color-card-red) !important;
  }

  /* Subtle tick on projected stats — "one of these numbers is live" hint. */
  .st-live-tick {
    color: var(--color-text-muted);
    font-size: 9px;
    margin-left: 1px;
    opacity: 0.7;
  }

  .st-stat .positive {
    color: var(--color-accent);
  }

  .st-stat .negative {
    color: var(--color-prediction-miss-fg);
  }

  /* Zones — border-left strip on position cell via box-shadow. */
  .team-standings-table tbody tr.zone-champions td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-champions);
  }

  .team-standings-table tbody tr.zone-europa td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-europa);
  }

  .team-standings-table tbody tr.zone-conference td.st-pos,
  .team-standings-table tbody tr.zone-conference-qual td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-conference);
  }

  .team-standings-table tbody tr.zone-8th-finals td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-champions);
  }

  .team-standings-table tbody tr.zone-play-off td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-europa);
  }

  .team-standings-table tbody tr.zone-relegation td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-relegation);
  }

  /* Second-tier domestic leagues (La Liga 2, Championship, 2. Bundesliga,
     Ligue 2). */
  .team-standings-table tbody tr.zone-promotion td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-promotion);
  }

  .team-standings-table tbody tr.zone-promotion-playoff td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-promotion-playoff);
  }

  .team-standings-table tbody tr.zone-cl-direct td.st-pos,
  .team-standings-table tbody tr.zone-knockout td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-champions);
  }

  .team-standings-table tbody tr.zone-cl-playoff td.st-pos,
  .team-standings-table tbody tr.zone-knockout_playoff td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-europa);
  }

  .team-standings-table tbody tr.zone-cl-eliminated td.st-pos {
    box-shadow: inset 3px 0 0 0 var(--color-zone-relegation);
  }

  /* View mode column toggling (simple/complete/form) lives in
     components/standings.css (shared). */

  /* .form-squares base: see standings.css (shared). */

  .form-square {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-text-muted);
  }

  .form-square.win {
    background: var(--color-accent);
  }

  .form-square.draw {
    background: var(--color-text-muted);
  }

  .form-square.lose {
    background: var(--color-prediction-miss);
  }

  /* Legend */
  .standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0 4px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-text-muted);
  }

  .legend-dot.champions,
  .legend-dot.cl-direct {
    background: var(--color-zone-champions);
  }

  .legend-dot.europa,
  .legend-dot.cl-playoff {
    background: var(--color-zone-europa);
  }

  .legend-dot.conference,
  .legend-dot.conference-qual {
    background: var(--color-zone-conference);
  }

  .legend-dot.relegation,
  .legend-dot.cl-eliminated {
    background: var(--color-zone-relegation);
  }

  .legend-dot.promotion {
    background: var(--color-zone-promotion);
  }

  .legend-dot.promotion-playoff {
    background: var(--color-zone-promotion-playoff);
  }

  /* ── Hybrid (UCL league-phase slice + full-modal) ── */
  .hybrid-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px;
  }

  .hybrid-separator-line {
    flex: 1 1 0;
    height: 1px;
    background: var(--color-border);
  }

  .hybrid-separator-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--weight-bold, 700);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .hybrid-standings-mini .standings-legend {
    display: none;
  }

  .hybrid-standings-mini .link-button {
    width: 100%;
    margin-top: 4px;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
  }

  .hybrid-standings-mini .link-button:hover {
    background: color-mix(in oklab, var(--color-accent) 6%, transparent);
    border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
  }

  .link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 14px 0;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: var(--weight-bold, 600);
    background: transparent;
    transition: background 0.2s;
  }

  .link-button svg {
    width: 16px;
    height: 16px;
  }

  /* Full-standings bottom-sheet modal (distinct from select-modal). */
  .standings-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 60%);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .standings-modal-overlay.open {
    display: flex;
    align-items: flex-end;
    opacity: 1;
  }

  .standings-modal {
    width: 100%;
    max-height: 85vh;
    background: var(--color-bg);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  .standings-modal-overlay.open .standings-modal {
    transform: translateY(0);
  }

  .standings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .standings-modal-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / 15%);
  }

  .standings-modal-title {
    font-size: 14px;
    font-weight: var(--weight-bold, 700);
    margin: 0;
  }

  .standings-modal-close {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
  }

  .standings-modal-body {
    overflow-y: auto;
    flex: 1 1 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  @media (prefers-reduced-motion: reduce) {
    .standings-modal-overlay,
    .standings-modal {
      transition: none;
    }
  }

  /* =========================================================
     Knockout bracket — Symmetric tree (convergent)
     Commit 1: nodes only (logos + codes + score).
     Connectors / trophy / TBD fillers land in later commits.
     ========================================================= */

  .bracket-tree {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr);
    padding: 8px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* `hidden` must beat `display: grid`/`flex` inside @layer pages. */
  .bracket-tree[hidden],
  .bracket-list[hidden] {
    display: none !important;
  }

  /* Simple variant: competition name header above the bracket-tree (no toolbar / no pills). */
  .bracket-simple-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    font-family: var(--font-display, inherit);
    font-size: 13px;
    font-weight: var(--weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: color-mix(in oklab, var(--color-text) 65%, transparent);
  }

  .bracket-simple-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .bracket-tree--simple {
    padding-top: 4px;
  }

  .bracket-tree-row {
    position: relative;
    width: 100%;
  }

  .bracket-tree-nodes {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
  }

  .bracket-tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 76px;
    padding: 6px 6px 4px;
    background: var(--color-surface, var(--color-bg));

    /* Borde más legible en mobile con bajo brillo: el `--color-border`
       token quedaba demasiado lavado contra el surface oscuro. */
    border: 1px solid color-mix(in oklab, var(--color-text) 18%, transparent);
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease;
  }

  .bracket-tree-node:hover {
    border-color: color-mix(in oklab, var(--color-text) 32%, transparent);
  }

  /* Clickable ties open the leg modal (multi-leg `<span>`) or link to the
     match (single-leg `<a>`). The anchor variant inherits the pointer, the
     span doesn't — set it explicitly so both read as interactive. The
     `--tbd` variant below re-asserts `cursor: default` (not clickable). */
  .bracket-tree-node--clickable {
    cursor: pointer;
  }

  .bracket-tree-node--live {
    border-color: color-mix(in oklab, var(--color-danger, var(--color-card-red)) 50%, transparent);
  }

  .bracket-tree-node--tbd {
    cursor: default;

    /* TBD = ambos equipos placeholder (?). Antes 0.35 dejaba el WC
       pre-torneo casi ilegible (todo el bracket es TBD). Subimos a
       0.65 para distinguir del nodo activo sin matarlo. */
    opacity: 0.65;
  }

  .bracket-tree-node--highlight {
    border-color: color-mix(in oklab, var(--color-accent) 55%, transparent);
    background: color-mix(in oklab, var(--color-accent) 6%, var(--color-surface, var(--color-bg)));
  }

  /* Compact mode for 6+ nodes per row (R32, R64). */
  .bracket-tree-row--compact .bracket-tree-node {
    min-width: 58px;
    padding: 6px 4px 4px;
  }

  .bracket-tree-row--compact .bracket-tree-logo {
    width: 22px;
    height: 22px;
  }

  .bracket-tree-row--compact .bracket-tree-logos {
    gap: 4px;
  }

  .bracket-tree-row--compact .bracket-tree-codes {
    gap: 2px;
  }

  .bracket-tree-row--compact .bracket-tree-code {
    min-width: 22px;
    font-size: 8px;
  }

  .bracket-tree-row--compact .bracket-tree-score {
    font-size: 9px;
  }

  .bracket-tree-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .bracket-tree-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
  }

  .bracket-tree-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .bracket-tree-logo--tbc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: color-mix(in oklab, var(--color-text) 5%, transparent);
    border: 1px dashed color-mix(in oklab, var(--color-text) 18%, transparent);
    border-radius: 50%;
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
    font-family: var(--font-display, inherit);
    font-size: 10px;
    font-weight: 500;
  }

  .bracket-tree-code--tbc {
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
    font-style: italic;
  }

  .bracket-tree-codes {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .bracket-tree-code {
    min-width: 28px;
    font-family: var(--font-display, inherit);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;

    /* Default code (sin winner/loser) sube a 75% para destacar sobre
       fondo oscuro en mobile con bajo brillo. El ganador queda como
       blanco puro vía `--winner`, así que el contraste relativo
       sigue siendo legible. */
    color: color-mix(in oklab, var(--color-text) 75%, transparent);
    text-align: center;
  }

  .bracket-tree-code--winner {
    color: var(--color-text);
    font-weight: 700;
  }

  .bracket-tree-code--loser {
    opacity: 0.7;
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--color-text) 55%, transparent);
  }

  .bracket-tree-score {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;

    /* Resultados normales legibles incluso con bajo brillo. La final
       queda al 100% (`--row--final .bracket-tree-score`) para que el
       resultado del trofeo destaque sobre el resto. */
    color: color-mix(in oklab, var(--color-text) 75%, transparent);
    text-align: center;
  }

  /* Date variant — partidos aún no jugados muestran la fecha
     (Hoy / Mañana / 28 jun) en lugar del placeholder "-". Tipografía
     más estrecha para que "Hoy 21:00" / "28 jun" quepa sin saltarse
     la altura fija del nodo. */
  .bracket-tree-score--date {
    font-size: 10px;
    letter-spacing: 0.2px;
    color: color-mix(in oklab, var(--color-text) 75%, transparent);
    white-space: nowrap;
  }

  /* Resultado de la FINAL — único score que sube a blanco puro y se
     pone en bold para que el trofeo del bracket atraiga la lectura. */
  .bracket-tree-row--final .bracket-tree-score {
    color: var(--color-text);
    font-weight: 700;
  }

  /* ---- Convergent connectors (Commit 2) ---- */
  .bracket-tree {
    --bracket-line: color-mix(in oklab, var(--color-text) 12%, transparent);
  }

  /* Passthrough: vertical line per node, used between a feeder round
     (UEL Knockout Round Play-offs) and the first main round (R16) where
     each feeder ties is 1:1 with its R16 column instead of merging. */
  .bracket-tree-passthrough-row {
    display: flex;
    position: relative;
    height: 28px;
  }

  .bracket-tree-passthrough-line {
    flex: 1;
    position: relative;
  }

  .bracket-tree-passthrough-line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    background: var(--bracket-line);
    transform: translateX(-1px);
  }

  /* Merge (top half): two nodes converge DOWN into one. */
  .bracket-tree-merge-row {
    display: flex;
    position: relative;
    height: 28px;
  }

  .bracket-tree-merge-pair {
    display: flex;
    position: relative;
    flex: 1;
  }

  .bracket-tree-merge-left,
  .bracket-tree-merge-right {
    position: relative;
    flex: 1;
  }

  .bracket-tree-merge-left::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    height: 50%;
    border-bottom: 1.5px solid var(--bracket-line);
    border-left: 1.5px solid var(--bracket-line);
    border-bottom-left-radius: 8px;
    box-sizing: border-box;
  }

  .bracket-tree-merge-right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    border-right: 1.5px solid var(--bracket-line);
    border-bottom: 1.5px solid var(--bracket-line);
    border-bottom-right-radius: 8px;
    box-sizing: border-box;
  }

  .bracket-tree-merge-pair::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 50%;
    background: var(--bracket-line);
    transform: translateX(-1px);
  }

  /* Split (bottom half): one node splits into two. */
  .bracket-tree-split-row {
    display: flex;
    position: relative;
    height: 28px;
  }

  .bracket-tree-split-pair {
    display: flex;
    position: relative;
    flex: 1;
  }

  .bracket-tree-split-left,
  .bracket-tree-split-right {
    position: relative;
    flex: 1;
  }

  .bracket-tree-split-left::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 50%;
    height: 50%;
    border-top: 1.5px solid var(--bracket-line);
    border-left: 1.5px solid var(--bracket-line);
    border-top-left-radius: 8px;
    box-sizing: border-box;
  }

  .bracket-tree-split-right::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    height: 50%;
    border-top: 1.5px solid var(--bracket-line);
    border-right: 1.5px solid var(--bracket-line);
    border-top-right-radius: 8px;
    box-sizing: border-box;
  }

  .bracket-tree-split-pair::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.5px;
    height: 50%;
    background: var(--bracket-line);
    transform: translateX(-1px);
  }

  /* Vertical spacer line flanking the Final row. */
  .bracket-tree-vert-line {
    width: 1.5px;
    height: 20px;
    margin: 0 auto;
    background: var(--bracket-line);
  }

  /* ---- CENTRE: Final row + trophy (Commit 3) ---- */
  .bracket-tree-row--final {
    position: relative;
    padding: 0;
  }

  /* Pill "FINAL" encima del nodo final del árbol — refuerza la lectura
     visual del centro del bracket sin depender solo del trofeo lateral. */
  .bracket-tree-final-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    font-family: Oswald, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-on-accent, #fff);
    background: var(--color-accent);
    border-radius: 999px;
    white-space: nowrap;
    z-index: 1;
  }

  .bracket-tree-final-trophy {
    position: absolute;
    top: 50%;
    left: calc(50% + 52px);
    color: color-mix(in oklab, var(--color-text) 25%, transparent);
    transition: color 0.2s ease;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .bracket-tree-row--final:hover .bracket-tree-final-trophy {
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
  }

  .bracket-tree-trophy-svg {
    display: block;
  }

  /* ==========================================
     BRACKET STAGE LIST VIEW (tie-cards) + LEG MODAL
     Ported 1:1 from v1 app.css L32284-32591 + L33135-33331.
     ========================================== */

  /* Shared live dot — used inside tie-header / tie-leg / leg-modal badges. */
  .live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-live);
    border-radius: 50%;
    animation: pulse-live-dot 1.5s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .live-dot {
      animation: none;
    }
  }

  /* ---- Stage filter pills ---- */
  .bracket-stage-filters {
    display: flex;
    gap: 6px;
    padding: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .bracket-stage-filters::-webkit-scrollbar {
    display: none;
  }

  .bracket-stage-filters .bracket-pill--current {
    position: relative;
  }

  .bracket-stage-filters .bracket-pill--current::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .bracket-stage-filters .bracket-pill--current.active::after {
    background: var(--color-bg);
  }

  /* ---- Stage list: Stage info header ---- */
  .bracket-list-stage-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
  }

  .bracket-list-count {
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
  }

  /* ---- Stage badges (current / finished pills) ---- */
  .bracket-stage-badge {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-radius: 4px;
  }

  .bracket-stage-badge--current {
    background: color-mix(in oklab, var(--color-accent) 15%, transparent);
    color: var(--color-accent);
  }

  .bracket-stage-badge--finished {
    background: color-mix(in oklab, var(--color-text) 6%, transparent);
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
  }

  /* ---- Stage list: Final card header + trophy ---- */
  .bracket-final-header {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
  }

  .bracket-final-header svg {
    color: var(--color-accent);
    opacity: 0.7;
  }

  /* ---- Fixtures stack ---- */
  .bracket-fixtures {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ---- No-fixtures placeholder ---- */
  .bracket-no-fixtures {
    padding: 20px;
    text-align: center;
    background: var(--color-surface, var(--color-bg));
    border: 1px dashed color-mix(in oklab, var(--color-text) 10%, transparent);
    border-radius: 10px;
  }

  .bracket-no-fixtures-text {
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ---- Tie card (two-legged tie container) ---- */
  .tie-card {
    overflow: hidden;
    background: var(--color-surface, var(--color-bg));
    border: 1px solid color-mix(in oklab, var(--color-text) 6%, transparent);
    border-radius: 10px;
    transition: border-color 0.15s ease;
  }

  .tie-card--live {
    border-color: color-mix(in oklab, var(--color-live) 30%, transparent);
  }

  .tie-card--final {
    border-color: color-mix(in oklab, var(--color-accent) 15%, transparent);
  }

  /* ---- Tie header: logos + aggregate ---- */
  .tie-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in oklab, var(--color-text) 2%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--color-text) 6%, transparent);
  }

  .tie-header-team {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .tie-header-team:last-of-type {
    flex-direction: row-reverse;
    text-align: right;
  }

  .tie-header-team--winner .tie-header-name {
    color: var(--color-text);
    font-weight: 700;
  }

  .tie-header-team--loser .tie-header-name {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--color-text) 30%, transparent);
    opacity: 0.5;
  }

  .tie-header-logo {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
  }

  .tie-header-logo-placeholder {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 8px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
    text-transform: uppercase;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: 3px;
  }

  .tie-header-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    color: color-mix(in oklab, var(--color-text) 70%, transparent);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tie-header-agg {
    flex-shrink: 0;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
  }

  .tie-header-vs {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
    text-transform: uppercase;
  }

  .tie-header-vs--ft {
    font-size: 10px;
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
    letter-spacing: 0.5px;
  }

  .tie-header-vs--live {
    display: flex;
    align-items: center;
  }

  /* ---- Tie legs list ---- */
  .tie-legs {
    display: flex;
    flex-direction: column;
  }

  .tie-leg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--color-text) 4%, transparent);
    transition: background-color 0.15s ease;
  }

  .tie-leg:last-child {
    border-bottom: none;
  }

  .tie-leg:hover {
    background: color-mix(in oklab, var(--color-text) 3%, transparent);
  }

  .tie-leg--live {
    background: color-mix(in oklab, var(--color-live) 4%, transparent);
  }

  .tie-leg-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
  }

  .tie-leg-label {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .tie-leg-status {
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .tie-leg-status--live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-live);
  }

  .tie-leg-date {
    font-size: 11px;
    color: color-mix(in oklab, var(--color-text) 45%, transparent);
  }

  .tie-leg-teams {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .tie-leg-team {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .tie-leg-team--away {
    flex-direction: row-reverse;
  }

  .tie-leg-logo {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
  }

  .tie-leg-name {
    overflow: hidden;
    max-width: 80px;
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in oklab, var(--color-text) 70%, transparent);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tie-leg-score {
    flex-shrink: 0;
    min-width: 34px;
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 80%, transparent);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ==========================================
     LEG SELECTOR MODAL (ida/vuelta picker)
     ========================================== */

  .leg-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 60%);
    opacity: 0;
    transition: opacity 0.15s ease;
    backdrop-filter: blur(4px);
  }

  .leg-modal-overlay--visible {
    opacity: 1;
  }

  .leg-modal {
    width: calc(100% - 40px);
    max-width: 320px;
    padding: 16px 14px;
    background: var(--color-bg);
    border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgb(0 0 0 / 50%);
  }

  .leg-modal-header {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 50%, transparent);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .leg-modal-option {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface, var(--color-bg));
    border: 1px solid color-mix(in oklab, var(--color-text) 6%, transparent);
    border-radius: 10px;
    transition:
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  .leg-modal-option + .leg-modal-option {
    margin-top: 10px;
  }

  .leg-modal-option:hover {
    border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
    transform: scale(1.01);
  }

  .leg-modal-option:active {
    transform: scale(0.99);
  }

  .leg-modal-option--current {
    cursor: default;
    pointer-events: auto;
    border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
  }

  .leg-modal-option--current:hover {
    border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
    transform: none;
  }

  .leg-modal-option--live {
    border-color: color-mix(in oklab, var(--color-live) 30%, transparent);
  }

  .leg-modal-option--live:hover {
    border-color: color-mix(in oklab, var(--color-live) 50%, transparent);
  }

  .leg-modal-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
  }

  .leg-modal-label {
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 40%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  .leg-modal-status {
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .leg-modal-status--live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-live);
  }

  .leg-modal-current-badge {
    margin-left: auto;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: color-mix(in oklab, var(--color-accent) 8%, transparent);
    border-radius: 4px;
  }

  .leg-modal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
  }

  .leg-modal-team {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .leg-modal-team--away {
    flex-direction: row-reverse;
    text-align: right;
  }

  .leg-modal-logo {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
  }

  .leg-modal-logo-placeholder {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 8px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
    text-transform: uppercase;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: 3px;
  }

  .leg-modal-team-code {
    font-family: var(--font-display, inherit);
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 80%, transparent);
    letter-spacing: 0.3px;
    white-space: nowrap;
  }

  .leg-modal-score {
    flex-shrink: 0;
    min-width: 44px;
    font-family: var(--font-display, inherit);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    letter-spacing: 1px;
  }

  .leg-modal-vs {
    flex-shrink: 0;
    min-width: 44px;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
    text-align: center;
    text-transform: uppercase;
  }

  .leg-modal-date {
    padding: 0 12px 8px;
    font-size: 11px;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
    text-align: center;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     CUP JOURNEY TIMELINE — "Camino a la Final"
     Ported from v1 (assets/styles/app.css L36541 + L40518 refinements)
     ══════════════════════════════════════════════════════════════════════════ */
  .cup-journey {
    padding: 12px 0;
  }

  .cup-journey-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 12px;
    color: color-mix(in oklab, var(--color-text) 70%, transparent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .cup-journey-header svg {
    color: color-mix(in oklab, var(--color-text) 50%, transparent);
    stroke: color-mix(in oklab, var(--color-text) 70%, transparent);
  }

  .cup-journey-timeline {
    position: relative;
    padding-left: 28px;
    margin: 0 16px;
  }

  .cup-journey-node {
    position: relative;
    padding-bottom: 16px;
  }

  .cup-journey-node:last-child {
    padding-bottom: 0;
  }

  /* Vertical connecting line */
  .cup-journey-node:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 12px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
  }

  .cup-journey-node:last-child::before {
    display: none;
  }

  .cup-journey-node--won:not(:last-child)::before {
    background: var(--color-accent);
  }

  .cup-journey-node--lost:not(:last-child)::before {
    background: var(--color-danger, var(--color-card-red));
  }

  .cup-journey-node--current:not(:last-child)::before {
    background: linear-gradient(to bottom, var(--color-accent), var(--color-border));
    animation: cup-pulse 2s infinite;
  }

  .cup-journey-node--future::before {
    border-left: 2px dashed color-mix(in oklab, var(--color-text) 15%, transparent);
    background: transparent;
    width: 0;
  }

  /* Dot on timeline */
  .cup-journey-dot {
    position: absolute;
    left: -24px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    z-index: 1;
  }

  .cup-journey-node--won .cup-journey-dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 0 6px color-mix(in oklab, var(--color-accent) 40%, transparent);
  }

  .cup-journey-node--lost .cup-journey-dot {
    border-color: var(--color-danger, var(--color-card-red));
    background: var(--color-danger, var(--color-card-red));
    box-shadow: 0 0 6px color-mix(in oklab, var(--color-danger, var(--color-card-red)) 40%, transparent);
  }

  .cup-journey-node--current .cup-journey-dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 0 8px color-mix(in oklab, var(--color-accent) 50%, transparent);
    animation: cup-dot-pulse 1.5s infinite;
  }

  .cup-journey-node--future .cup-journey-dot {
    background: transparent;
    border: 2px dashed color-mix(in oklab, var(--color-text) 20%, transparent);
    border-style: dashed;
    width: 8px;
    height: 8px;
  }

  @keyframes cup-dot-pulse {
    0%,
    100% {
      box-shadow: 0 0 4px color-mix(in oklab, var(--color-accent) 40%, transparent);
    }

    50% {
      box-shadow: 0 0 12px color-mix(in oklab, var(--color-accent) 80%, transparent);
    }
  }

  @keyframes cup-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  /* Card */
  .cup-journey-card {
    background: var(--color-surface, var(--color-bg));
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
  }

  .cup-journey-round {
    font-size: 11px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 50%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  /* Match card — mini match card with home/away rows */
  .cup-journey-match {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface, var(--color-bg));
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    margin-bottom: 6px;
  }

  .cup-journey-match:last-child {
    margin-bottom: 0;
  }

  .cup-journey-match:hover {
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
  }

  .cup-journey-match + .cup-journey-match {
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    padding-top: 8px;
  }

  /* Team row: logo + name + score */
  .cup-journey-team-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }

  .cup-journey-team-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 2px;
    object-fit: contain;
  }

  .cup-journey-team-placeholder {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: 2px;
    font-size: 8px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 50%, transparent);
  }

  .cup-journey-team-name {
    font-size: 13px;
    font-weight: 400;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: color-mix(in oklab, var(--color-text) 70%, transparent);
  }

  .cup-journey-team-name--highlight {
    color: var(--color-text);
    font-weight: 600;
  }

  .cup-journey-team-score-cell {
    font-size: 14px;
    font-weight: 700;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    color: color-mix(in oklab, var(--color-text) 70%, transparent);
  }

  .cup-journey-score--winner {
    color: var(--color-text);
  }

  /* Live score cell — coloured by outcome relative to the opponent
     (winning green · drawing neutral · losing red). */
  .cup-journey-score--live {
    font-weight: 700;
  }

  .cup-journey-score--live-winning {
    color: var(--color-success);
  }

  .cup-journey-score--live-drawing {
    color: #94a3b8;
  }

  .cup-journey-score--live-losing {
    color: var(--color-card-red);
  }

  /* Match meta (date, FT, live) */
  .cup-journey-match-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
    font-size: 10px;
    color: color-mix(in oklab, var(--color-text) 50%, transparent);
  }

  .cup-journey-live {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-danger, var(--color-card-red));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .cup-journey-ft {
    font-size: 10px;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
  }

  .cup-journey-meta-sep {
    color: color-mix(in oklab, var(--color-text) 20%, transparent);
    font-size: 10px;
    margin: 0 4px;
  }

  .cup-journey-date {
    font-size: 11px;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
  }

  .cup-journey-tbd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-surface, var(--color-bg));
    border-radius: 10px;
    border: 1px dashed var(--color-border);
    opacity: 0.5;
  }

  .cup-journey-tbd-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
  }

  .cup-journey-tbd-text {
    font-size: 13px;
    font-style: italic;
    color: color-mix(in oklab, var(--color-text) 35%, transparent);
  }

  /* ══════════════════════════════════════════════════════════════════════════
     STANDINGS VIEW SWITCHER — reusable sub-tabs (pills + panels).
     Used by match detail standings tab and competition detail pages.
     ══════════════════════════════════════════════════════════════════════════ */
  .standings-view-switcher {
    display: block;
  }

  .standings-view-switcher-toolbar {
    padding: 0 0 14px;
  }

  /* `[hidden]` must beat `display: grid/flex` declarations that live inside
     `@layer pages`. Explicit !important is the documented workaround. */
  .standings-view-switcher-panels > [hidden] {
    display: none !important;
  }

  /* ── Dual cup journey (toggle pills + un equipo visible a la vez) ─── */
  .cup-journey-dual {
    padding: 4px 0 12px;
  }

  .cup-journey-dual__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* `display: flex` neutraliza `[hidden]` en `@layer pages`. Restaurar
     para que el toggle oculte el panel del equipo no seleccionado. */
  .cup-journey-dual__side[hidden] {
    display: none;
  }

  .cup-journey-dual__empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-muted);
  }

  /* ── Compact overview card for cup journey ─── */
  .cup-journey--compact {
    padding: 4px 0 8px;
  }

  .cup-journey--compact .cup-journey-timeline {
    padding-left: 20px;
    margin: 0;
  }

  .cup-journey--compact .cup-journey-node {
    padding-bottom: 0;
  }

  .cup-journey-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: var(--weight-semibold, 600);
    color: var(--color-accent);
    text-decoration: none;
  }

  .cup-journey-card__cta:hover {
    color: color-mix(in oklab, var(--color-accent) 80%, var(--color-text));
  }

  .cup-journey-card__cta svg {
    transition: transform 0.15s;
  }

  .cup-journey-card__cta:hover svg {
    transform: translateX(2px);
  }

  .momentum-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 15px;
    margin-top: 10px;
    margin-bottom: 14px;
  }

  .momentum-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .momentum-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .momentum-legend-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text);
  }

  .momentum-legend-separator {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: lowercase;
  }

  .momentum-breakdown-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  .momentum-breakdown-modal[hidden] {
    display: none;
  }

  .momentum-breakdown-modal.is-open {
    opacity: 1;
    visibility: visible;
  }

  .momentum-breakdown-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 8%);
    backdrop-filter: blur(4px);
  }

  .momentum-breakdown-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .momentum-breakdown-modal.is-open .momentum-breakdown-content {
    transform: translateY(0);
  }

  .momentum-breakdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgb(255 255 255 / 6%);
    background: linear-gradient(135deg, rgb(34 197 94 / 8%), rgb(239 68 68 / 8%));
  }

  .momentum-breakdown-title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
  }

  .momentum-breakdown-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgb(255 255 255 / 5%);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .momentum-breakdown-close:hover,
  .momentum-breakdown-close:active {
    background: rgb(255 255 255 / 12%);
    color: var(--color-text);
  }

  .momentum-breakdown-close svg {
    width: 20px;
    height: 20px;
  }

  .momentum-breakdown-body {
    padding: 16px 16px 32px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .breakdown-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    margin-bottom: 16px;
  }

  .breakdown-minute-badge {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
  }

  .breakdown-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .breakdown-result-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 20px;
    font-weight: 700;
  }

  .breakdown-result.positive .breakdown-result-value {
    color: var(--color-success);
  }

  .breakdown-result.negative .breakdown-result-value {
    color: var(--color-card-red);
  }

  .breakdown-result-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .breakdown-section {
    margin-bottom: 16px;
  }

  .breakdown-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
  }

  .breakdown-no-events {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: rgb(255 255 255 / 2%);
    border-radius: 10px;
    margin-bottom: 16px;
  }

  .breakdown-no-events-icon {
    font-size: 18px;
    color: var(--color-text-muted);
  }

  .breakdown-no-events span {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .breakdown-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .breakdown-event {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 12px;
    border-left: 3px solid var(--color-text-muted);
  }

  .breakdown-event.home {
    border-left-color: var(--color-success);
  }

  .breakdown-event.away {
    border-left-color: var(--color-card-red);
  }

  .breakdown-event-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .breakdown-event-icon {
    font-size: 14px;
  }

  .breakdown-event-type {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
  }

  .breakdown-event-minute {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .breakdown-event-player {
    font-size: 11px;
    color: var(--color-text-secondary, var(--color-text));
    margin-bottom: 8px;
    padding-left: 22px;
  }

  .breakdown-event-calc {
    background: rgb(0 0 0 / 2%);
    border-radius: 6px;
    padding: 8px 10px;
  }

  .breakdown-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .breakdown-calc-row.total {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 4px;
    padding-top: 6px;
  }

  .breakdown-calc-row.red-card {
    color: var(--color-card-red);
  }

  .breakdown-calc-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
  }

  .breakdown-calc-value.positive {
    color: var(--color-success);
  }

  .breakdown-calc-value.negative {
    color: var(--color-card-red);
  }

  .breakdown-totals {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .breakdown-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
  }

  .breakdown-total-row.net {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 6px;
    padding-top: 10px;
  }

  .breakdown-total-row.normalized {
    background: rgb(34 197 94 / 8%);
    margin: 8px -12px -12px;
    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
  }

  .breakdown-total-label {
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .breakdown-total-label.home {
    color: var(--color-success);
  }

  .breakdown-total-label.away {
    color: var(--color-card-red);
  }

  .breakdown-total-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .breakdown-total-value.positive {
    color: var(--color-success);
  }

  .breakdown-total-value.negative {
    color: var(--color-card-red);
  }

  .breakdown-red-card-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgb(239 68 68 / 1%);
    border: 1px solid rgb(239 68 68 / 3%);
    border-radius: 8px;
    font-size: 11px;
    color: var(--color-card-red);
  }

  .breakdown-red-card-icon {
    font-size: 14px;
  }

  .breakdown-header-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 12px;
    margin-bottom: 16px;
  }

  .breakdown-header-new .breakdown-minute-badge {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .breakdown-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .breakdown-bar-team {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
    min-width: 50px;
    text-align: center;
  }

  .breakdown-bar-team.home {
    text-align: right;
  }

  .breakdown-bar-team.away {
    text-align: left;
  }

  .breakdown-bar {
    flex: 1;
    height: 8px;
    background: rgb(239 68 68 / 3%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .breakdown-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  .breakdown-bar-fill.positive {
    background: linear-gradient(90deg, rgb(239 68 68 / 3%), var(--color-success));
  }

  .breakdown-bar-fill.negative {
    background: linear-gradient(90deg, var(--color-card-red), rgb(34 197 94 / 3%));
  }

  .breakdown-bar-center {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 2px;
    height: 12px;
    background: rgb(255 255 255 / 5%);
    transform: translateX(-50%);
  }

  .breakdown-percentage {
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
  }

  .breakdown-percentage.positive {
    color: var(--color-success);
  }

  .breakdown-percentage.negative {
    color: var(--color-card-red);
  }

  .breakdown-events-simple {
    margin-bottom: 16px;
  }

  .breakdown-event-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .breakdown-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    border-left: 3px solid var(--color-text-muted);
  }

  .breakdown-event-row.home {
    border-left-color: var(--color-success);
  }

  .breakdown-event-row.away {
    border-left-color: var(--color-card-red);
  }

  .breakdown-event-row .breakdown-event-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
  }

  .breakdown-event-row .breakdown-event-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
  }

  .breakdown-event-row .breakdown-event-player {
    flex: 1;
    font-size: 11px;
    color: var(--color-text-secondary, var(--color-text));
    margin: 0;
    padding: 0;
  }

  .breakdown-event-row .breakdown-event-minute {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    min-width: 28px;
  }

  .breakdown-event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .breakdown-event-impact {
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
  }

  .breakdown-event-impact--positive {
    color: var(--accent-primary, #00ff87);
    background: rgb(34 197 94 / 8%);
  }

  .breakdown-event-impact--negative {
    color: var(--color-card-red);
    background: rgb(239 68 68 / 8%);
  }

  .breakdown-event-impact--red {
    color: var(--color-warning-strong);
    background: rgb(245 158 11 / 1%);
  }

  .breakdown-siege-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgb(245 158 11 / 12%), rgb(239 68 68 / 8%));
    border: 1px solid rgb(245 158 11 / 25%);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-warning-strong);
  }

  .breakdown-siege-icon {
    font-size: 16px;
  }

  .breakdown-action-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    margin-bottom: 16px;
  }

  .breakdown-action-team {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .breakdown-action-team.home {
    flex-direction: row-reverse;
  }

  .breakdown-action-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
  }

  .breakdown-action-team.home .breakdown-action-name {
    color: var(--color-success);
  }

  .breakdown-action-team.away .breakdown-action-name {
    color: var(--color-card-red);
  }

  .breakdown-action-num {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
  }

  .breakdown-action-vs {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .breakdown-phrase {
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgb(34 197 94 / 8%), rgb(34 197 94 / 3%));
    border: 1px solid rgb(34 197 94 / 15%);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
  }

  .bk-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .bk-minute {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
  }

  .bk-dom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .bk-dom-bar {
    display: flex;
    height: 6px;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
  }

  .bk-dom-home {
    background: var(--team-home-color, var(--color-success));
    border-radius: 3px 0 0 3px;
  }

  .bk-dom-away {
    background: var(--team-away-color, var(--color-card-red));
    border-radius: 0 3px 3px 0;
  }

  .bk-dom-labels {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .bk-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
  }

  .bk-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bk-ev {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bk-ev.home {
    border-left-color: var(--team-home-color, var(--color-success));
  }

  .bk-ev.away {
    border-left-color: var(--team-away-color, var(--color-card-red));
  }

  .bk-ev-min {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    min-width: 26px;
  }

  .bk-ev-icon {
    font-size: 13px;
    min-width: 18px;
    text-align: center;
  }

  .bk-ev-desc {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-ev-desc b {
    color: var(--color-text);
    font-weight: 600;
  }

  .bk-ev-pts {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
  }

  .bk-ev-pts.positive {
    color: var(--color-success);
  }

  .bk-ev-pts.negative {
    color: var(--color-card-red);
  }

  .bk-ev-pts.multiplier {
    color: var(--amber, var(--color-warning-strong));
  }

  .bk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
  }

  .bk-actions {
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-actions b {
    color: var(--color-text);
    font-weight: 700;
  }

  .bk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
  }

  .bk-badge--pts {
    color: var(--color-success);
    background: rgb(34 197 94 / 8%);
  }

  .bk-badge--siege {
    color: var(--amber, var(--color-warning-strong));
    background: rgb(245 158 11 / 8%);
  }

  .bk-pred {
    display: flex;
    gap: 1px;
    background: rgb(255 255 255 / 6%);
    border-radius: 10px;
    overflow: hidden;
  }

  .bk-pred-card {
    flex: 1;
    background: rgb(255 255 255 / 3%);
    padding: 10px 12px;
    text-align: center;
  }

  .bk-pred-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bk-pred-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
  }

  .bk-metric-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .bk-metric-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bk-metric-row > .bk-metric-name:first-child {
    text-align: right;
  }

  .bk-metric-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
  }

  .bk-metric-arrow {
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .bk-metric-arrow.positive {
    color: var(--color-success, var(--accent-primary));
  }

  .bk-metric-arrow.negative {
    color: var(--color-danger, var(--live-red));
  }

  .bk-metric-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .bk-metric-sub b {
    color: var(--color-text-primary);
    font-weight: 700;
  }

  .bk-momentum-summary {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 8%);
  }

  .momentum-legend-score {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 6px;
  }

  .momentum-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .momentum-summary-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .ms-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ms-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .ms-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
  }

  .ms-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ms-act {
    display: grid;
    grid-template-columns: 84px 1fr 88px;
    align-items: center;
    gap: 10px;
  }

  .ms-act--current {
    padding: 4px 0;
    border-top: 1px dashed rgb(255 255 255 / 8%);
    margin-top: 2px;
  }

  .ms-act-phase {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .ms-act-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 6%);
  }

  .ms-act-bar-home,
  .ms-act-bar-away {
    height: 100%;
  }

  .ms-act-bar-balanced {
    background: rgb(255 255 255 / 10%);
  }

  .ms-act-pcts {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
  }

  .ms-act-home {
    color: var(--team-home-color, var(--accent-primary));
  }

  .ms-act-away {
    color: var(--team-away-color, var(--live-red));
  }

  .ms-flip {
    margin: 4px 0 2px;
    padding: 6px 10px;
    background: rgb(245 158 11 / 8%);
    color: var(--amber, var(--color-warning-strong));
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
  }

  .ms-goals {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ms-goal {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    border-left: 3px solid transparent;
  }

  .ms-goal.home {
    border-left-color: var(--team-home-color, var(--accent-primary));
  }

  .ms-goal.away {
    border-left-color: var(--team-away-color, var(--live-red));
  }

  .ms-goal-min {
    grid-row: 1 / span 2;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .ms-goal-team {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .ms-goal-chip {
    grid-row: 1;
    grid-column: 3;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .ms-goal-chip--with-inertia {
    color: var(--color-success);
    background: rgb(34 197 94 / 12%);
  }

  .ms-goal-chip--without-inertia {
    color: var(--amber, var(--color-warning-strong));
    background: rgb(245 158 11 / 12%);
  }

  .ms-goal-detail {
    grid-row: 2;
    grid-column: 2 / span 2;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .ms-block--moments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ms-moment {
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ms-moment-detail {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-primary);
  }

  .ms-conv-headline {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-primary);
    font-weight: 600;
  }

  .ms-conv-stack {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 6%);
    margin-top: 4px;
  }

  .ms-conv-seg {
    height: 100%;
    transition: opacity 0.15s ease;
  }

  .ms-conv-seg:hover {
    opacity: 0.85;
  }

  .ms-conv-seg--effective-home {
    background: var(--team-home-color, var(--accent-primary));
  }

  .ms-conv-seg--effective-away {
    background: var(--team-away-color, var(--live-red));
  }

  .ms-conv-seg--sterile-home {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 45%, transparent);
  }

  .ms-conv-seg--sterile-away {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 45%, transparent);
  }

  .ms-conv-seg--clinical-home {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 70%, var(--color-warning));
  }

  .ms-conv-seg--clinical-away {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 70%, var(--color-warning));
  }

  .ms-conv-seg--quiet {
    background: rgb(255 255 255 / 12%);
  }

  .ms-conv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .ms-conv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .ms-conv-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 30%);
  }

  .ms-conv-chip--effective .ms-conv-chip-dot {
    background: var(--accent-primary);
  }

  .ms-conv-chip--sterile .ms-conv-chip-dot {
    background: rgb(255 255 255 / 35%);
  }

  .ms-conv-chip--clinical .ms-conv-chip-dot {
    background: var(--color-warning);
  }

  .ms-conv-chip--quiet .ms-conv-chip-dot {
    background: rgb(255 255 255 / 18%);
  }

  .ms-conv-chip-label {
    color: var(--color-text-primary);
    font-weight: 600;
  }

  .ms-conv-chip-pct {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .ms-verdict {
    padding: 12px 14px;
    background: rgb(255 255 255 / 4%);
    border-radius: 10px;
    border-left: 3px solid var(--color-text-muted);
  }

  .ms-verdict--home {
    border-left-color: var(--team-home-color, var(--accent-primary));
  }

  .ms-verdict--away {
    border-left-color: var(--team-away-color, var(--live-red));
  }

  .ms-verdict-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
  }

  @media (width <= 480px) {
    .ms-act {
      grid-template-columns: 70px 1fr 70px;
      gap: 8px;
    }

    .ms-block--moments {
      grid-template-columns: 1fr;
    }
  }

  .bk-odds {
    display: flex;
    gap: 1px;
    background: rgb(255 255 255 / 6%);
    border-radius: 10px;
    overflow: hidden;
  }

  .bk-odds-cell {
    flex: 1;
    background: rgb(255 255 255 / 3%);
    padding: 8px 10px;
    text-align: center;
  }

  .bk-odds-label {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .bk-odds-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary, var(--color-text));
    margin-top: 2px;
  }

  .bk-tech {
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .bk-tech summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    list-style: none;
  }

  .bk-tech summary::-webkit-details-marker {
    display: none;
  }

  .bk-tech summary svg {
    width: 16px;
    height: 16px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s;
  }

  .bk-tech[open] summary svg {
    transform: rotate(180deg);
  }

  .bk-tech-body {
    padding: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bk-calc {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-text-muted);
  }

  .bk-calc.home {
    border-left-color: var(--team-home-color, var(--color-success));
  }

  .bk-calc.away {
    border-left-color: var(--team-away-color, var(--color-card-red));
  }

  .bk-calc-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
  }

  .bk-calc-grid {
    background: rgb(0 0 0 / 2%);
    border-radius: 6px;
    padding: 8px 10px;
  }

  .bk-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .bk-calc-row.total {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 4px;
    padding-top: 6px;
  }

  .bk-calc-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
  }

  .bk-calc-val.positive {
    color: var(--color-success);
  }

  .bk-calc-val.negative {
    color: var(--color-card-red);
  }

  .bk-totals {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 12px;
  }

  .bk-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-total-row b {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
  }

  .bk-total-row.net {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 600;
    color: var(--color-text);
  }

  .bk-total-row.normalized {
    background: rgb(34 197 94 / 8%);
    margin: 8px -12px -12px;
    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
  }

  .bk-total-row .positive {
    color: var(--color-success);
  }

  .bk-total-row .negative {
    color: var(--color-card-red);
  }

  .bk-how {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid rgb(255 255 255 / 6%);
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
  }

  .bk-how svg {
    width: 14px;
    height: 14px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
  }

  .bk-how:hover {
    color: var(--color-text-secondary, var(--color-text));
  }

  .breakdown-probabilities {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .breakdown-prob-section {
    background: rgb(255 255 255 / 3%);
    border-radius: 12px;
    padding: 14px 16px;
  }

  .breakdown-prob-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
  }

  .breakdown-prob-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .breakdown-prob-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .breakdown-prob-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
    min-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breakdown-prob-bar-item.home .breakdown-prob-bar-label {
    color: var(--color-success);
  }

  .breakdown-prob-bar-item.away .breakdown-prob-bar-label {
    color: var(--color-card-red);
  }

  .breakdown-prob-bar-track {
    flex: 1;
    height: 8px;
    background: rgb(255 255 255 / 1%);
    border-radius: 4px;
    overflow: hidden;
  }

  .breakdown-prob-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  .breakdown-prob-bar-item.home .breakdown-prob-bar-fill {
    background: linear-gradient(90deg, rgb(34 197 94 / 3%), var(--color-success));
  }

  .breakdown-prob-bar-item.away .breakdown-prob-bar-fill {
    background: linear-gradient(90deg, rgb(239 68 68 / 3%), var(--color-card-red));
  }

  .breakdown-prob-bar-value {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
    color: var(--color-text);
  }

  .breakdown-prob-result {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .breakdown-prob-result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  .breakdown-prob-result-item.highlight {
    background: rgb(34 197 94 / 1%);
    border-color: rgb(34 197 94 / 3%);
  }

  .breakdown-prob-result-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .breakdown-prob-result-value {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
  }

  .breakdown-prob-result-item.highlight .breakdown-prob-result-value {
    color: var(--color-success);
  }

  .breakdown-odds-section {
    background: linear-gradient(135deg, rgb(255 193 7 / 8%), rgb(255 152 0 / 5%));
    border: 1px solid rgb(255 193 7 / 2%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
  }

  .breakdown-odds-section.suspended {
    opacity: 0.6;
    background: rgb(255 255 255 / 3%);
    border-color: rgb(255 255 255 / 1%);
  }

  .breakdown-odds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .breakdown-odds-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .breakdown-odds-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .breakdown-odds-badge.live {
    background: rgb(34 197 94 / 2%);
    color: var(--color-success);
    animation: pulse-glow 2s ease-in-out infinite;
  }

  .breakdown-odds-badge.suspended {
    background: rgb(255 255 255 / 1%);
    color: var(--color-text-muted);
  }

  .breakdown-odds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .breakdown-odds-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: rgb(0 0 0 / 3%);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  .breakdown-odds-item.highlight {
    background: rgb(255 193 7 / 15%);
    border-color: rgb(255 193 7 / 4%);
  }

  .breakdown-odds-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
  }

  .breakdown-odds-value {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #ffc107;
  }

  .breakdown-odds-item.highlight .breakdown-odds-value {
    color: #ffd54f;
    text-shadow: 0 0 8px rgb(255 193 7 / 4%);
  }

  .breakdown-odds-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgb(255 255 255 / 5%);
  }

  .breakdown-odds-comparison-label {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .breakdown-odds-comparison-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
  }

  .breakdown-technical {
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 10px;
    overflow: hidden;
  }

  .breakdown-technical-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgb(255 255 255 / 2%);
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    list-style: none;
  }

  .breakdown-technical-toggle::-webkit-details-marker {
    display: none;
  }

  .breakdown-technical-toggle span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .breakdown-technical-toggle svg {
    transition: transform 0.2s;
    color: var(--color-text-muted);
  }

  .breakdown-technical[open] .breakdown-technical-toggle svg {
    transform: rotate(180deg);
  }

  .breakdown-technical-content {
    padding: 12px;
    background: rgb(0 0 0 / 2%);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .breakdown-calc-event {
    padding: 10px;
    background: rgb(255 255 255 / 2%);
    border-radius: 8px;
    border-left: 2px solid var(--color-text-muted);
  }

  .breakdown-calc-event.home {
    border-left-color: var(--color-success);
  }

  .breakdown-calc-event.away {
    border-left-color: var(--color-card-red);
  }

  .breakdown-calc-event-header {
    font-size: 11px;
    color: var(--color-text-secondary, var(--color-text));
    margin-bottom: 8px;
  }

  .breakdown-calc-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .breakdown-calc-grid .positive {
    color: var(--color-success);
  }

  .breakdown-calc-grid .negative {
    color: var(--color-card-red);
  }

  .breakdown-calc-totals {
    padding: 10px;
    background: rgb(255 255 255 / 2%);
    border-radius: 8px;
  }

  .breakdown-calc-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .breakdown-calc-total-row.net {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 4px;
    padding-top: 8px;
  }

  .breakdown-calc-total-row.normalized {
    color: var(--color-text-secondary, var(--color-text));
    font-weight: 600;
  }

  .breakdown-calc-total-row .positive {
    color: var(--color-success);
  }

  .breakdown-calc-total-row .negative {
    color: var(--color-card-red);
  }

  .bk-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .bk-minute {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
  }

  .bk-dom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .bk-dom-bar {
    display: flex;
    height: 6px;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
  }

  .bk-dom-home {
    background: var(--team-home-color, var(--color-success));
    border-radius: 3px 0 0 3px;
  }

  .bk-dom-away {
    background: var(--team-away-color, var(--color-card-red));
    border-radius: 0 3px 3px 0;
  }

  .bk-dom-labels {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .bk-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
  }

  .bk-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bk-ev {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bk-ev.home {
    border-left-color: var(--team-home-color, var(--color-success));
  }

  .bk-ev.away {
    border-left-color: var(--team-away-color, var(--color-card-red));
  }

  .bk-ev-min {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    min-width: 26px;
  }

  .bk-ev-icon {
    font-size: 13px;
    min-width: 18px;
    text-align: center;
  }

  .bk-ev-desc {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-ev-desc b {
    color: var(--color-text);
    font-weight: 600;
  }

  .bk-ev-pts {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
  }

  .bk-ev-pts.positive {
    color: var(--color-success);
  }

  .bk-ev-pts.negative {
    color: var(--color-card-red);
  }

  .bk-ev-pts.multiplier {
    color: var(--amber, var(--color-warning-strong));
  }

  .bk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
  }

  .bk-actions {
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-actions b {
    color: var(--color-text);
    font-weight: 700;
  }

  .bk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
  }

  .bk-badge--pts {
    color: var(--color-success);
    background: rgb(34 197 94 / 8%);
  }

  .bk-badge--siege {
    color: var(--amber, var(--color-warning-strong));
    background: rgb(245 158 11 / 8%);
  }

  .bk-pred {
    display: flex;
    gap: 1px;
    background: rgb(255 255 255 / 6%);
    border-radius: 10px;
    overflow: hidden;
  }

  .bk-pred-card {
    flex: 1;
    background: rgb(255 255 255 / 3%);
    padding: 10px 12px;
    text-align: center;
  }

  .bk-pred-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bk-pred-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
  }

  .bk-metric-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
  }

  .bk-metric-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .bk-metric-row > .bk-metric-name:first-child {
    text-align: right;
  }

  .bk-metric-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
  }

  .bk-metric-arrow {
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .bk-metric-arrow.positive {
    color: var(--color-success, var(--accent-primary));
  }

  .bk-metric-arrow.negative {
    color: var(--color-danger, var(--live-red));
  }

  .bk-metric-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .bk-metric-sub b {
    color: var(--color-text-primary);
    font-weight: 700;
  }

  .bk-momentum-summary {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 8%);
  }

  .momentum-legend-score {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 6px;
  }

  .momentum-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .momentum-summary-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .ms-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ms-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .ms-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    font-style: italic;
  }

  .ms-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ms-act {
    display: grid;
    grid-template-columns: 84px 1fr 88px;
    align-items: center;
    gap: 10px;
  }

  .ms-act--current {
    padding: 4px 0;
    border-top: 1px dashed rgb(255 255 255 / 8%);
    margin-top: 2px;
  }

  .ms-act-phase {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .ms-act-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 6%);
  }

  .ms-act-bar-home,
  .ms-act-bar-away {
    height: 100%;
  }

  .ms-act-bar-balanced {
    background: rgb(255 255 255 / 10%);
  }

  .ms-act-pcts {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
  }

  .ms-act-home {
    color: var(--team-home-color, var(--accent-primary));
  }

  .ms-act-away {
    color: var(--team-away-color, var(--live-red));
  }

  .ms-flip {
    margin: 4px 0 2px;
    padding: 6px 10px;
    background: rgb(245 158 11 / 8%);
    color: var(--amber, var(--color-warning-strong));
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
  }

  .ms-goals {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ms-goal {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    border-left: 3px solid transparent;
  }

  .ms-goal.home {
    border-left-color: var(--team-home-color, var(--accent-primary));
  }

  .ms-goal.away {
    border-left-color: var(--team-away-color, var(--live-red));
  }

  .ms-goal-min {
    grid-row: 1 / span 2;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .ms-goal-team {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .ms-goal-chip {
    grid-row: 1;
    grid-column: 3;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .ms-goal-chip--with-inertia {
    color: var(--color-success);
    background: rgb(34 197 94 / 12%);
  }

  .ms-goal-chip--without-inertia {
    color: var(--amber, var(--color-warning-strong));
    background: rgb(245 158 11 / 12%);
  }

  .ms-goal-detail {
    grid-row: 2;
    grid-column: 2 / span 2;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .ms-block--moments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ms-moment {
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ms-moment-detail {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-primary);
  }

  .ms-conv-headline {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-primary);
    font-weight: 600;
  }

  .ms-conv-stack {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 6%);
    margin-top: 4px;
  }

  .ms-conv-seg {
    height: 100%;
    transition: opacity 0.15s ease;
  }

  .ms-conv-seg:hover {
    opacity: 0.85;
  }

  .ms-conv-seg--effective-home {
    background: var(--team-home-color, var(--accent-primary));
  }

  .ms-conv-seg--effective-away {
    background: var(--team-away-color, var(--live-red));
  }

  .ms-conv-seg--sterile-home {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 45%, transparent);
  }

  .ms-conv-seg--sterile-away {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 45%, transparent);
  }

  .ms-conv-seg--clinical-home {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 70%, var(--color-warning));
  }

  .ms-conv-seg--clinical-away {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 70%, var(--color-warning));
  }

  .ms-conv-seg--quiet {
    background: rgb(255 255 255 / 12%);
  }

  .ms-conv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .ms-conv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .ms-conv-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 30%);
  }

  .ms-conv-chip--effective .ms-conv-chip-dot {
    background: var(--accent-primary);
  }

  .ms-conv-chip--sterile .ms-conv-chip-dot {
    background: rgb(255 255 255 / 35%);
  }

  .ms-conv-chip--clinical .ms-conv-chip-dot {
    background: var(--color-warning);
  }

  .ms-conv-chip--quiet .ms-conv-chip-dot {
    background: rgb(255 255 255 / 18%);
  }

  .ms-conv-chip-label {
    color: var(--color-text-primary);
    font-weight: 600;
  }

  .ms-conv-chip-pct {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .ms-verdict {
    padding: 12px 14px;
    background: rgb(255 255 255 / 4%);
    border-radius: 10px;
    border-left: 3px solid var(--color-text-muted);
  }

  .ms-verdict--home {
    border-left-color: var(--team-home-color, var(--accent-primary));
  }

  .ms-verdict--away {
    border-left-color: var(--team-away-color, var(--live-red));
  }

  .ms-verdict-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
  }

  @media (width <= 480px) {
    .ms-act {
      grid-template-columns: 70px 1fr 70px;
      gap: 8px;
    }

    .ms-block--moments {
      grid-template-columns: 1fr;
    }
  }

  .bk-odds {
    display: flex;
    gap: 1px;
    background: rgb(255 255 255 / 6%);
    border-radius: 10px;
    overflow: hidden;
  }

  .bk-odds-cell {
    flex: 1;
    background: rgb(255 255 255 / 3%);
    padding: 8px 10px;
    text-align: center;
  }

  .bk-odds-label {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .bk-odds-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary, var(--color-text));
    margin-top: 2px;
  }

  .bk-tech {
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .bk-tech summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    list-style: none;
  }

  .bk-tech summary::-webkit-details-marker {
    display: none;
  }

  .bk-tech summary svg {
    width: 16px;
    height: 16px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s;
  }

  .bk-tech[open] summary svg {
    transform: rotate(180deg);
  }

  .bk-tech-body {
    padding: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bk-calc {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-text-muted);
  }

  .bk-calc.home {
    border-left-color: var(--team-home-color, var(--color-success));
  }

  .bk-calc.away {
    border-left-color: var(--team-away-color, var(--color-card-red));
  }

  .bk-calc-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
  }

  .bk-calc-grid {
    background: rgb(0 0 0 / 2%);
    border-radius: 6px;
    padding: 8px 10px;
  }

  .bk-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .bk-calc-row.total {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 4px;
    padding-top: 6px;
  }

  .bk-calc-val {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
  }

  .bk-calc-val.positive {
    color: var(--color-success);
  }

  .bk-calc-val.negative {
    color: var(--color-card-red);
  }

  .bk-totals {
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    padding: 12px;
  }

  .bk-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .bk-total-row b {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
  }

  .bk-total-row.net {
    border-top: 1px solid rgb(255 255 255 / 1%);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 600;
    color: var(--color-text);
  }

  .bk-total-row.normalized {
    background: rgb(34 197 94 / 8%);
    margin: 8px -12px -12px;
    padding: 10px 12px;
    border-radius: 0 0 10px 10px;
  }

  .bk-total-row .positive {
    color: var(--color-success);
  }

  .bk-total-row .negative {
    color: var(--color-card-red);
  }

  .bk-how {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid rgb(255 255 255 / 6%);
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
  }

  .bk-how svg {
    width: 14px;
    height: 14px;
    stroke: currentcolor;
    fill: none;
    stroke-width: 2;
  }

  .bk-how:hover {
    color: var(--color-text-secondary, var(--color-text));
  }

  .momentum-legend--compact {
    padding: 10px 0 8px;
    gap: 12px;
  }

  .momentum-legend--compact .momentum-legend-dot {
    width: 8px;
    height: 8px;
  }

  .momentum-legend--compact .momentum-legend-name {
    font-size: 11px;
  }

  .event-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  .event-modal-overlay[hidden] {
    display: none;
  }

  .event-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .event-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 85%);
    backdrop-filter: blur(6px);
  }

  .event-modal-content {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 360px;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 24px 20px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 60px rgb(0 0 0 / 5%);
  }

  .event-modal-overlay.is-open .event-modal-content {
    transform: scale(1) translateY(0);
  }

  .event-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 1%);
    border: none;
    border-radius: 50%;
    color: var(--color-text-secondary, var(--color-text));
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .event-modal-close:hover {
    background: rgb(255 255 255 / 2%);
    color: var(--color-text);
  }

  .event-modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .event-modal-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: rgb(34 197 94 / 15%);
    border-radius: 50%;
    animation: event-icon-pulse 2s ease-in-out infinite;
  }

  .event-modal-icon.negative {
    background: rgb(239 68 68 / 15%);
  }

  .event-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .event-modal-type {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .event-modal-minute {
    font-size: 14px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .event-modal-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgb(255 255 255 / 5%);
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .event-modal-team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .event-modal-player-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
  }

  .event-modal-team-name {
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .event-modal-impact {
    margin-bottom: 16px;
  }

  .event-modal-impact-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
  }

  .event-modal-momentum-change {
    background: rgb(255 255 255 / 3%);
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 10px;
    overflow: hidden;
  }

  .event-modal-momentum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
  }

  .event-modal-momentum-row:last-child {
    border-bottom: none;
  }

  .event-modal-momentum-row--change {
    background: rgb(255 255 255 / 3%);
  }

  .event-modal-momentum-label {
    font-size: 13px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .event-modal-momentum-value {
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
  }

  .event-modal-momentum-value.positive {
    color: var(--color-success);
  }

  .event-modal-momentum-value.negative {
    color: var(--color-card-red);
  }

  .event-modal-points {
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .event-modal-points-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
  }

  .event-modal-points-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .event-modal-points-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .event-modal-points-row--penalty {
    color: var(--color-card-red);
  }

  .event-modal-points-row--total {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed rgb(255 255 255 / 1%);
    font-weight: 600;
    color: var(--color-text);
  }

  .event-modal-points-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
  }

  .event-modal-points-value.positive {
    color: var(--color-success);
  }

  .event-modal-points-value.negative {
    color: var(--color-card-red);
  }

  .event-modal-header-new {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
  }

  .event-modal-icon-big {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: rgb(34 197 94 / 15%);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .event-modal-icon-big.negative {
    background: rgb(239 68 68 / 15%);
  }

  .event-modal-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .event-modal-type-big {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .event-modal-minute-big {
    font-size: 14px;
    color: var(--color-text-muted);
  }

  .event-modal-player-new {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgb(255 255 255 / 5%);
    border-radius: 12px;
    margin-bottom: 20px;
  }

  .event-modal-team-logo-new {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .event-modal-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .event-modal-player-name-new {
    font-weight: 600;
    color: var(--color-text);
    font-size: 15px;
  }

  .event-modal-team-name-new {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .event-modal-momentum-new {
    margin-bottom: 20px;
  }

  .event-modal-momentum-new .event-modal-momentum-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    display: block;
  }

  .event-modal-momentum-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgb(255 255 255 / 3%);
    border-radius: 12px;
  }

  .event-modal-momentum-before,
  .event-modal-momentum-after {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    min-width: 50px;
  }

  .event-modal-momentum-before {
    text-align: left;
  }

  .event-modal-momentum-after {
    text-align: right;
  }

  .event-modal-momentum-before.positive,
  .event-modal-momentum-after.positive {
    color: var(--color-success);
  }

  .event-modal-momentum-before.negative,
  .event-modal-momentum-after.negative {
    color: var(--color-card-red);
  }

  .event-modal-momentum-arrow {
    flex: 1;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgb(255 255 255 / 5%);
  }

  .event-modal-momentum-arrow.positive {
    color: var(--color-success);
    background: rgb(34 197 94 / 1%);
  }

  .event-modal-momentum-arrow.negative {
    color: var(--color-card-red);
    background: rgb(239 68 68 / 1%);
  }

  .event-calc-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .event-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
  }

  .event-calc-row:last-of-type {
    border-bottom: none;
  }

  .event-calc-row--red {
    color: var(--color-card-red);
  }

  .event-calc-label {
    font-size: 12px;
    color: var(--color-text-secondary, var(--color-text));
  }

  .event-calc-hint {
    font-size: 10px;
    color: var(--color-text-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }

  .event-calc-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .event-calc-formula {
    padding: 10px 12px;
    background: rgb(255 255 255 / 3%);
    border-radius: 8px;
    text-align: center;
    margin: 4px 0;
  }

  .event-calc-formula-text {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--color-text-secondary, var(--color-text));
    letter-spacing: 0.5px;
  }

  .event-calc-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 4px;
  }

  .event-calc-result.positive {
    background: rgb(34 197 94 / 1%);
    border: 1px solid rgb(34 197 94 / 2%);
  }

  .event-calc-result.negative {
    background: rgb(239 68 68 / 1%);
    border: 1px solid rgb(239 68 68 / 2%);
  }

  .event-calc-result-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text));
  }

  .event-calc-result-value {
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
  }

  .event-calc-result.positive .event-calc-result-value {
    color: var(--color-success);
  }

  .event-calc-result.negative .event-calc-result-value {
    color: var(--color-card-red);
  }

  /* ──────────────────────────────────────────────────────────
   * LIVEBLOG v2 — unified timeline rendering
   * Partial: `templates/pages/match/liveblog/tab.html.twig`.
   * View-model: `match.liveblog[]` from MatchViewBuilder::buildLiveblog().
   * Scoped under `.liveblog-timeline--v2` so it can coexist with any
   * legacy liveblog markup. BEM-ish: `.lbc` (liveblog card) + modifiers
   * `--goal/--yellow/--red/--sub/--narrator/--commentary[-important]`.
   * Tokens: pulls from @layer tokens (var(--color-accent), var(--color-surface),
   * etc). Team accent injected inline via `--team-color` custom prop.
   * ────────────────────────────────────────────────────────── */
  .liveblog-container {
    padding: 0;
  }

  .liveblog-timeline--v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
  }

  .liveblog-timeline--v2 .lbc {
    background: color-mix(in oklab, var(--color-text) 3%, transparent);
    border: 1px solid var(--color-border-subtle);
    border-radius: 18px;
    padding: 14px 18px 16px;
    position: relative;
    /* Opción B "moment-hero" feel: a soft directional glow tinted by the card's
       own team colour (set inline as --team-color on goal/event cards; absent on
       commentary → transparent → no glow). Reused by the chat (.lbc injection). */
    box-shadow: 0 10px 30px -16px color-mix(in oklab, var(--team-color, transparent) 55%, transparent);
  }

  /* Phase markers (kick-off, half-time, full-time, ET, penalties) —
     rendered as a chip flanked by a horizontal rule, mirroring a
     standard liveblog timeline divider. They override the .lbc
     card chrome above to read as a separator, not a card. */
  .liveblog-timeline--v2 .lbc--phase {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  .liveblog-timeline--v2 .lbc-phase__rule {
    height: 1px;
    background: var(--color-border-subtle);
  }

  .liveblog-timeline--v2 .lbc-phase__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;

    /* Same width across every phase divider so the timeline reads
       as a stack of equal-weight section headers (kick-off,
       half-time, full-time, extra time, penalties). The longest
       Spanish copy — "Comienza la tanda de penaltis" — caps the
       width; shorter chips centre their text. */
    min-width: 260px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
  }

  .liveblog-timeline--v2 .lbc--phase-fulltime .lbc-phase__chip,
  .liveblog-timeline--v2 .lbc--phase-penalties .lbc-phase__chip {
    color: var(--color-text);
    border-color: var(--color-text);
  }

  .liveblog-timeline--v2 .lbc-phase__icon {
    line-height: 1;
    font-size: 14px;
  }

  .liveblog-timeline--v2 .lbc-phase__score {
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-weight: var(--weight-bold);
    padding-left: 6px;
    margin-left: 4px;
    border-left: 1px solid var(--color-border-subtle);
  }

  .liveblog-timeline--v2 .lbc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .liveblog-timeline--v2 .lbc-min {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: color-mix(in oklab, var(--color-text) 10%, transparent);
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }

  /* Opción B "moment" pill: real game events (goal/card/sub/VAR) get the
     live-red minute chip; plain commentary keeps the neutral pill above so
     the timeline reads with a clear event/chatter hierarchy. Reused verbatim
     by the chat (.lbc injection). */
  .liveblog-timeline--v2 .lbc--goal .lbc-min,
  .liveblog-timeline--v2 .lbc--red .lbc-min,
  .liveblog-timeline--v2 .lbc--yellow .lbc-min,
  .liveblog-timeline--v2 .lbc--sub .lbc-min {
    background: var(--color-live);
    color: var(--color-on-live);
  }

  .liveblog-timeline--v2 .lbc-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .liveblog-timeline--v2 .lbc-narrator-name {
    font-size: 14px;
    font-weight: 700;
    color: #c4b5fd;
    letter-spacing: 0.1px;
  }

  .liveblog-timeline--v2 .lbc-head-team-logo {
    margin-left: auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
  }

  .liveblog-timeline--v2 .lbc-text {
    font-size: 15px;
    line-height: 1.65;
    color: color-mix(in oklab, var(--color-text) 85%, transparent);
  }

  .liveblog-timeline--v2 .lbc-text strong {
    color: var(--color-text);
    font-weight: 600;
  }

  .liveblog-timeline--v2 .lbc-text--narrator {
    font-size: 14.5px;
    color: color-mix(in oklab, var(--color-text) 82%, transparent);
    font-style: italic;
  }

  .liveblog-timeline--v2 .lbc-player-link {
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px dashed color-mix(in oklab, var(--color-text) 20%, transparent);
  }

  .liveblog-timeline--v2 .lbc-player-link:hover {
    border-bottom-color: color-mix(in oklab, var(--color-text) 50%, transparent);
  }

  /* ── Goal (team color radial tint) ─────────────────────── */
  .liveblog-timeline--v2 .lbc--goal {
    background-color: color-mix(in oklab, var(--color-text) 3%, transparent);
    background-image: radial-gradient(
      ellipse 120% 100% at 0% 0%,
      var(--team-bg, color-mix(in oklab, var(--color-accent) 14%, transparent)) 0%,
      var(--team-bg-edge, transparent) 55%,
      transparent 100%
    );
    border: 1px solid var(--team-border, color-mix(in oklab, var(--color-accent) 28%, transparent));
  }

  .liveblog-timeline--v2 .lbc--goal .lbc-label {
    font-family: var(--font-title);
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--team-color, var(--color-text));
  }

  .liveblog-timeline--v2 .lbc--goal .lbc-head {
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .liveblog-timeline--v2 .lbc--goal .lbc-text {
    color: color-mix(in oklab, var(--color-text) 92%, transparent);
  }

  /* ── Red card ──────────────────────────────────────────── */
  .liveblog-timeline--v2 .lbc--red {
    background-color: color-mix(in oklab, var(--color-text) 3%, transparent);
    background-image: radial-gradient(
      ellipse 120% 100% at 0% 0%,
      rgb(239 68 68 / 14%) 0%,
      rgb(239 68 68 / 2%) 55%,
      transparent 100%
    );
    border: 1px solid rgb(239 68 68 / 32%);
  }

  .liveblog-timeline--v2 .lbc--red .lbc-label {
    font-size: 17px;
    font-weight: 700;
    color: #f87171;
  }

  /* ── Yellow card ───────────────────────────────────────── */
  .liveblog-timeline--v2 .lbc--yellow {
    background-color: color-mix(in oklab, var(--color-text) 3%, transparent);
    background-image: radial-gradient(
      ellipse 120% 100% at 0% 0%,
      rgb(251 191 36 / 10%) 0%,
      rgb(251 191 36 / 2%) 55%,
      transparent 100%
    );
    border: 1px solid rgb(251 191 36 / 26%);
  }

  .liveblog-timeline--v2 .lbc--yellow .lbc-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-warning);
  }

  /* ── Commentary important (subtle accent) ──────────────── */
  .liveblog-timeline--v2 .lbc--commentary-important {
    background: color-mix(in oklab, var(--color-text) 5%, transparent);
    border-left: 3px solid color-mix(in oklab, var(--color-accent) 55%, transparent);
  }

  /* ── Narrator (AI-generated · violet theme · semantic #c4b5fd) ── */
  .liveblog-timeline--v2 .lbc--narrator {
    background: color-mix(in oklab, #c4b5fd 8%, transparent);
    border-color: color-mix(in oklab, #c4b5fd 22%, transparent);
  }

  /* ── Card icons (small rectangles inside label) ────────── */
  .liveblog-timeline--v2 .lbc-card-icon {
    display: inline-block;
    width: 12px;
    height: 16px;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  }

  .liveblog-timeline--v2 .lbc-card-icon--yellow {
    background: var(--color-card-yellow);
  }

  .liveblog-timeline--v2 .lbc-card-icon--red {
    background: var(--color-card-red);
  }

  /* ── Player chip (goal/card attribution) ───────────────── */
  .liveblog-timeline--v2 .lbc-player {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 12px 10px 14px;
    background: var(--team-bg, color-mix(in oklab, var(--color-text) 5%, transparent));
    border: 1px solid var(--team-border, var(--color-border-subtle));
    border-radius: 14px;
    cursor: pointer;
    transition: filter 0.15s;
  }

  .liveblog-timeline--v2 .lbc-player:hover {
    filter: brightness(1.15);
  }

  .liveblog-timeline--v2 .lbc-player-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--color-text) 10%, transparent),
      color-mix(in oklab, var(--color-text) 4%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
    flex-shrink: 0;
    overflow: visible;
  }

  .liveblog-timeline--v2 .lbc-player-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .liveblog-timeline--v2 .lbc-player-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 60%, transparent);
  }

  .liveblog-timeline--v2 .lbc-player-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--color-bg);
  }

  .liveblog-timeline--v2 .lbc-player-badge--goal {
    background: color-mix(in oklab, var(--color-accent) 20%, var(--color-bg));
  }

  .liveblog-timeline--v2 .lbc-player-info {
    flex: 1;
    min-width: 0;
  }

  .liveblog-timeline--v2 .lbc-player-name {
    display: block;
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.15;
  }

  .liveblog-timeline--v2 .lbc-player-role {
    display: block;
    font-size: 12px;
    color: color-mix(in oklab, var(--color-text) 55%, transparent);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Substitution widget ───────────────────────────────── */
  .liveblog-timeline--v2 .lbc-sub {
    position: relative;
    margin-top: 12px;
    padding: 4px;
    background: color-mix(in oklab, var(--color-text) 4%, transparent);
    border-radius: 12px;
  }

  .liveblog-timeline--v2 .lbc-sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s;
  }

  .liveblog-timeline--v2 .lbc-sub-row:hover {
    background: color-mix(in oklab, var(--color-text) 4%, transparent);
  }

  .liveblog-timeline--v2 .lbc-sub-row + .lbc-sub-row {
    margin-top: 2px;
  }

  .liveblog-timeline--v2 .lbc-sub-photo {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--color-text) 10%, transparent),
      color-mix(in oklab, var(--color-text) 4%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
    flex-shrink: 0;
    overflow: visible;
  }

  .liveblog-timeline--v2 .lbc-sub-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .liveblog-timeline--v2 .lbc-sub-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: color-mix(in oklab, var(--color-text) 55%, transparent);
  }

  .liveblog-timeline--v2 .lbc-sub-arrow {
    position: absolute;
    bottom: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--color-bg);
  }

  .liveblog-timeline--v2 .lbc-sub-arrow--out {
    background: var(--color-card-red);
    color: #fff;
  }

  .liveblog-timeline--v2 .lbc-sub-arrow--in {
    background: var(--color-success);
    color: #fff;
  }

  .liveblog-timeline--v2 .lbc-sub-name {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
  }

  /* ── Responsive ────────────────────────────────────────── */
  @media (width <= 380px) {
    .liveblog-timeline--v2 .lbc {
      padding: 12px 14px 14px;
    }

    .liveblog-timeline--v2 .lbc-text {
      font-size: 14px;
    }

    .liveblog-timeline--v2 .lbc--goal .lbc-label {
      font-size: 17px;
    }
  }

  /* ── Convergence — per-team pill toggle ──────────────────────────────────
     A pill per side (home | away) swaps which team's breakdown shows: a
     mini-stack (effective / sterile / clinical / shared quiet) + the matching
     chips. Reuses `.momentum-pill` chrome; the dot carries the team colour so
     the selector reads at a glance. Declared last in the layer so it wins over
     the two earlier (duplicated) momentum-summary CSS copies. */
  .ms-conv-pills {
    margin-top: 4px;
  }

  .ms-conv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .ms-conv-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ms-conv-pill-dot--home {
    background: var(--team-home-color, var(--accent-primary));
  }

  .ms-conv-pill-dot--away {
    background: var(--team-away-color, var(--live-red));
  }

  .ms-conv-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }

  .ms-conv-panel[hidden] {
    display: none;
  }

  /* Per-team chip dots — same colours as the matching stack segments. */
  .ms-conv-chip--effective-home .ms-conv-chip-dot {
    background: var(--team-home-color, var(--accent-primary));
  }

  .ms-conv-chip--effective-away .ms-conv-chip-dot {
    background: var(--team-away-color, var(--live-red));
  }

  .ms-conv-chip--sterile-home .ms-conv-chip-dot {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 45%, transparent);
  }

  .ms-conv-chip--sterile-away .ms-conv-chip-dot {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 45%, transparent);
  }

  .ms-conv-chip--clinical-home .ms-conv-chip-dot {
    background: color-mix(in oklab, var(--team-home-color, var(--accent-primary)) 70%, var(--color-warning));
  }

  .ms-conv-chip--clinical-away .ms-conv-chip-dot {
    background: color-mix(in oklab, var(--team-away-color, var(--live-red)) 70%, var(--color-warning));
  }

  /* ──────────────────────────────────────────────────────────────────────
     Momentum block — late overrides. Placed at the END of @layer pages so
     they win over the DUPLICATED momentum-summary blocks earlier in this
     same layer (same specificity → source order decides). Three concerns:
       1. Unify the chart height across both tabs (Resumen + Stats).
       2. Pin the legend right under the chart (kill the dead gap).
       3. Convergence: per-team scope caption + zero-state chips + quiet aside.
     ────────────────────────────────────────────────────────────────────── */

  /* 1 + 2 · One chart height everywhere. The compact (Resumen) and full
     (Stats) variants now share 180px — tall enough for the curve + marker
     bands to breathe on mobile, shorter than the old 220px so the legend
     reads close to the curve. */
  .momentum-chart-container,
  .momentum-chart-container--compact {
    height: 180px;
  }

  @media (width <= 380px) {
    .momentum-chart-container,
    .momentum-chart-container--compact {
      height: 170px;
    }
  }

  /* The canvas reserves a bottom band (Chart.js `layout.padding.bottom`) for
     the away markers + minute labels, so the drawn axis already sits well
     inside the canvas. Any legend margin on top of that compounds into a dead
     gap. Pin the legend tight under the canvas in BOTH variants — the canvas
     padding is the only separation we need. */
  .momentum-section .momentum-legend--compact,
  .momentum-overview .momentum-legend--compact,
  .momentum-inline .momentum-legend--compact {
    margin-top: -30px;
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 5px;
  }

  /* 3 · Convergence — per-team scope caption above each panel's stack. */
  .ms-conv-scope {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text-muted));
    margin-top: 2px;
  }

  /* A 0% category is always shown (never filtered) but dimmed so it reads as
     "this team has none of this" without looking missing. */
  .ms-conv-chip.is-zero {
    opacity: 0.45;
  }

  /* Quiet is a match-level figure — set it apart from the team chips with a
     hairline divider and an explanatory note. */
  .ms-conv-quiet {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgb(255 255 255 / 6%);
  }

  .ms-conv-quiet-note {
    font-size: 10px;
    color: var(--color-text-muted);
  }
}