/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — Match detail page styles
   Faza 4 P3, redesign v2.

   Hero z fanart background + gradient overlay.
   Tabs segmented control (reuse z components.css .tabs ergonomics).
   Tab panels — overview / lineups / stats / h2h / odds.
   ───────────────────────────────────────────────────────────────────────── */


/* === Page wrapper ========================================================= */

.match-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  /* F5.18 (Karol QA: "lewo dociągnięte, prawo nie — chcę idealnie wyśrodkowane"):
     the old full-bleed used negative side margins to reach the app-main edges,
     but that can't account for the vertical scrollbar on the right, so the hero
     looked flush-left / gapped-right. Drop the side bleed (keep only the top
     pull under the header) so the whole page — hero included — sits centered
     within app-main's symmetric padding, like the Analysis hero card. */
  margin: calc(-1 * var(--space-4)) 0 0;
  /* P1.16 audit fix: overflow-x:hidden was breaking position:fixed on
     descendants in some Chromium builds; clip behaves the same visually
     without establishing a new containing block. */
  overflow-x: clip;
}
@media (max-width: 767px) {
  .match-detail {
    margin: calc(-1 * var(--space-3)) 0 0;
  }
}


/* === Hero ================================================================= */

.md-hero {
  position: relative;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--space-4) var(--space-3);
  min-height: 360px;
  display: flex;
  align-items: center;
  /* F5.18: now a centered, contained banner (no longer full-bleed) — round it
     into a card and clip the bg to the radius so it reads as intentional. */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (max-width: 767px) {
  .md-hero {
    min-height: 240px;
    /* P4.4.2 Fix 3: bottom padding bumped do 24px + extra margin-bottom dla
       breathing room przed Overview start (Karol QA — hero kończył się
       gwałtownie i Form (last 5) zaczynał się natychmiast bez separation). */
    padding: var(--space-3) var(--space-2) 24px;
    margin-bottom: 16px;
  }
}

/* P3.5 hero bg swap — mobile uses /medium variant (~83KB), desktop uses
   original (~430KB). CSS custom props set inline on element via JS. */
.md-hero--has-bg {
  background-image:
    linear-gradient(to top, rgba(6, 10, 15, 0.96) 0%, rgba(6, 10, 15, 0.65) 60%, rgba(6, 10, 15, 0.4) 100%),
    var(--md-hero-bg-mobile);
}
@media (min-width: 768px) {
  .md-hero--has-bg {
    background-image:
      linear-gradient(to top, rgba(6, 10, 15, 0.96) 0%, rgba(6, 10, 15, 0.6) 55%, rgba(6, 10, 15, 0.35) 100%),
      var(--md-hero-bg-desktop);
  }
}

.md-hero__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.md-hero__league {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* C4: clickable league chip — pill button z hover state, większy o ~1.2x
   niż poprzednia wersja (font 0.7→0.85rem, padding bumped). Click → placeholder
   #leagues/<code> (Faza 5 dorzuca real route). */
.md-hero__league-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.md-hero__league-chip:hover,
.md-hero__league-chip:focus-visible {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.md-hero__league-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* P4.4.2 Fix 2: mobile chip squashed do 60vw max + ellipsis żeby nie
   zachodziła na badges z lewej/prawej (Karol QA — "UEFA EUROPA LEAGUE -
   SEMI-FINALS" zajmowała 80% width hero). JS dorzuca shortening heuristic
   (drop "- Round of N" suffix) ale CSS jest safety net dla rare-case
   non-shortened nazw. */
@media (max-width: 767px) {
  .md-hero__league-chip {
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* keep child span ellipsizable */
  }
  .md-hero__league-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

.md-hero__league-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 2px;
}

.md-hero__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .md-hero__teams { gap: var(--space-1); }
}

.md-hero__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

/* Faza 5.1: clickable hero team — badge + name link do #team/<tsdb_id>.
   Subtle hover (translate + brightness) bez nadmiernego affordance bo badge
   nie wygląda jak typowy button — ale cursor + hover state sygnalizują clickability. */
a.md-hero__team {
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast), filter var(--duration-fast);
}
a.md-hero__team:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
a.md-hero__team:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.md-hero__team-name {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  max-width: 14ch;
  text-align: center;
}
@media (min-width: 768px) {
  .md-hero__team-name { font-size: 1.25rem; }
}

/* Hero badges — P3.5 sizing: 96px desktop / 72px mobile (was 64px placeholder).
   Source: tsdb_data.badge_small (250px CDN) — sharp przy każdym z tych rozmiarów. */
.md-team-badge {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
@media (min-width: 768px) {
  .md-team-badge {
    width: 96px;
    height: 96px;
  }
}
.md-team-badge--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: var(--weight-extrabold);
  color: var(--white);
  letter-spacing: 0.04em;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.md-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0 var(--space-1);
}

.md-hero__score {
  font-size: 2.5rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.md-hero__score-sep {
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
  font-size: 0.7em;
}
@media (min-width: 768px) {
  .md-hero__score { font-size: 3rem; }
}

.md-hero__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--system-red);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}
.md-hero__live-dot {
  width: 6px;
  height: 6px;
  background: var(--white);
  border-radius: 50%;
  animation: live-pulse 1.4s ease-in-out infinite;
}

.md-hero__ft {
  display: inline-block;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.md-hero__kickoff {
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
  .md-hero__kickoff { font-size: 2.25rem; }
}
.md-hero__date {
  color: var(--text-secondary);
}


/* P3.5 — kickoff countdown (only when match within 24h, auto-refresh 60s) */

.md-hero__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.md-hero__countdown-big {
  font-size: 2rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
  /* P3.5.1: was var(--accent) — switched to text-primary white per Karol decision
     (avoid accent color overload — already used in nav active, predictions tier
     chip, "View full odds" link). Countdown size alone provides emphasis. */
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  /* tnum prevents digit shift gdy seconds tick up — no layout reflow per second. */
}
@media (min-width: 768px) {
  .md-hero__countdown-big { font-size: 2.5rem; }
}

.md-hero__countdown-sub {
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.md-hero__venue {
  color: var(--text-tertiary);
  margin-top: 4px;
}

.md-hero--skeleton .md-hero__inner > * { opacity: 0.6; }


/* === Tabs nav ============================================================ */

.md-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  align-self: flex-start;
  margin: 0 var(--space-3);
  scrollbar-width: none;
}
@media (max-width: 767px) {
  .md-tabs { margin: 0 var(--space-2); }
}
.md-tabs::-webkit-scrollbar { display: none; }

.md-tabs__btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.md-tabs__btn:hover:not(.md-tabs__btn--active) { color: var(--text-primary); }
.md-tabs__btn--active {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.md-tabs__skel {
  display: flex;
  gap: 8px;
  padding: 0 var(--space-3);
}


/* === Tab panel host + placeholders ====================================== */

.md-tabpanel-host {
  padding: 0 var(--space-3) var(--space-4);
}
@media (max-width: 767px) {
  .md-tabpanel-host { padding: 0 var(--space-2) var(--space-3); }
}

.md-tabpanel--placeholder {
  text-align: center;
  padding: var(--space-4);
}
.md-tabpanel--placeholder p:first-child { margin-bottom: 0.4rem; }


/* === P4.3.6: tab sections — desktop tabs / mobile single-scroll =======
 * Frontend renderuje wszystkie 5 sekcji jednocześnie, każda z data-section.
 * Desktop: ukrywamy non-active (CSS wyłącznie via host[data-active]).
 * Mobile: pokazujemy wszystkie stacked z section headers (no tabs nav).
 * Karol UX: na małym ekranie tab switching jest annoying — preferuje single
 * vertical scroll (jak OneFootball). */

.md-tabpanel-section {
  width: 100%;
}
.md-tabpanel-section__title {
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

/* Desktop: tylko aktywna sekcja widoczna; section header ukryty
   (tab nav już mówi gdzie jesteś) */
@media (min-width: 768px) {
  .md-tabpanel-host[data-active="overview"] .md-tabpanel-section:not([data-section="overview"]),
  .md-tabpanel-host[data-active="lineups"]  .md-tabpanel-section:not([data-section="lineups"]),
  .md-tabpanel-host[data-active="stats"]    .md-tabpanel-section:not([data-section="stats"]),
  .md-tabpanel-host[data-active="h2h"]      .md-tabpanel-section:not([data-section="h2h"]),
  .md-tabpanel-host[data-active="odds"]     .md-tabpanel-section:not([data-section="odds"]) {
    display: none;
  }
  .md-tabpanel-section__title { display: none; }
}

/* Mobile: ukryj tabs nav, pokaż wszystkie sekcje stacked w single scroll.
   P4.4.2 Fix 3: explicit padding per sekcja + drobny margin separator (8px)
   na top of border. Section title z lewym wcięciem 12px. */
@media (max-width: 767px) {
  .md-tabs { display: none; }
  .md-tabpanel-section { padding: 8px 0; }
  .md-tabpanel-section + .md-tabpanel-section {
    margin-top: 8px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }
  .md-tabpanel-section__title {
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
  }
}


/* === Error state ========================================================= */

.md-error {
  text-align: center;
  padding: var(--space-4);
  margin: var(--space-4) auto;
  max-width: 480px;
}
.md-error p:first-child { margin-bottom: 0.4rem; }


/* === Overview tab — form guide + match info + predictions preview ======= */

.md-overview {
  display: grid;
  gap: var(--space-2);
}

.md-section-title {
  margin: 0 0 var(--space-2);
}


/* ── F5.6.3.3: Live events block (above Overview info bar) ── */

.md-live-events {
  /* Inherits .card padding/border from components.css */
}
.md-live-events__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.md-live-events__head h2 { margin: 0; }
.md-live-events__pulse {
  width: 8px; height: 8px;
  background: var(--system-red);
  border-radius: 50%;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.md-live-events__live {
  letter-spacing: 0.08em;
  font-weight: var(--weight-bold);
  color: var(--system-red);
}


/* ── F5.6.3.3.1: Events timeline 2-column (OneFootball-style) ──────────────
   Karol QA 5.6.3.3: "single-column z team name labels po prawej = tandetne".
   Rewrite: home events po lewej, away po prawej, central vertical axis ze
   stamp'em minut na osi. Side identification PRZEZ POZYCJĘ, nie tekstem.
   Mobile <600px: single-column fallback z border-left accent per side.

   Klasy używają nowych nazw (.events-timeline__row etc.) — stara
   single-column markup (.ev-row) z 5.6.3.3 NIE używana, rules removed. */

.events-timeline {
  position: relative;
  padding: 16px 0;
  max-width: 760px;
  margin: 0 auto;
  list-style: none;
}
.events-timeline--empty {
  padding: var(--space-2) 0;
}

/* Central vertical axis — 1px line z subtle white tint. ::before zamiast
   real element żeby zostawić children grid clean. */
.events-timeline:not(.events-timeline--empty)::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.events-timeline__row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.events-timeline__row:last-child { margin-bottom: 0; }

.events-timeline__minute {
  text-align: center;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Event card — subtle bg + soft border, rounded 8px. */
.events-timeline__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  min-width: 0;
}

/* Home: left column, content right-aligned (closer to central axis).
   Icon position po stronie wewnętrznej via flex-direction: row-reverse. */
.events-timeline__card--home {
  grid-column: 1 / 2;
  justify-content: flex-end;
  flex-direction: row-reverse;
  text-align: right;
}

/* Away: right column, content left-aligned (closer to axis). */
.events-timeline__card--away {
  grid-column: 3 / 4;
  justify-content: flex-start;
}

.events-timeline__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}
.events-timeline__icon--lg {
  /* Substitution icon trochę większy żeby 2 chevrons były czytelne */
  width: 20px;
  height: 20px;
}

.events-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.events-timeline__player {
  font-weight: var(--weight-medium);
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-timeline__assist {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
}

/* Substitution: IN player (top, accent) + OUT player (bottom, dim) */
.events-timeline__sub-player {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
  white-space: nowrap;
}
.events-timeline__sub-player--in {
  color: #fff;
  font-weight: var(--weight-medium);
}
.events-timeline__sub-player--out {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.events-timeline__sub-arrow {
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.events-timeline__sub-arrow--in  { color: #00e5a0; }
.events-timeline__sub-arrow--out { color: #e63946; }

/* Mobile <600px: single-column fallback. Axis shifted do lewej krawędzi,
   wszystkie events left-aligned z border-left accent per side (home =
   accent green, away = neutral gray). */
@media (max-width: 600px) {
  .events-timeline:not(.events-timeline--empty)::before {
    left: 12px;
    transform: none;
  }
  .events-timeline__row {
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }
  .events-timeline__minute {
    text-align: left;
    grid-column: 1 / 2;
    padding-left: 18px;  /* push past axis */
  }
  .events-timeline__card {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .events-timeline__card--home {
    grid-column: 2 / 3;
    border-left: 3px solid var(--accent);
  }
  .events-timeline__card--away {
    grid-column: 2 / 3;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
  }
}


/* ── F5.6.3.3: Model vs Actual block ── */

.mva {
  /* .card base from components.css */
}
.mva__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.mva__title { margin: 0; }
.mva__version {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mva__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .mva__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

.mva-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mva-col__head { margin-bottom: var(--space-1); }
.mva-col__title { margin: 0 0 2px; font-size: 1rem; }
.mva-col__sub   { margin: 0; }

/* Lambdas row — 2 stacked stats (λ home / λ away) */
.mva-lambdas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.mva-lambda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mva-lambda__val {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mva-lambda__lbl {
  font-size: 0.7rem;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Prob bars 1/X/2 */
.mva-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mva-bar {
  display: grid;
  grid-template-columns: 80px 1fr 44px;
  gap: 10px;
  align-items: center;
}
.mva-bar__label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.mva-bar__track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.mva-bar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width var(--duration-fast) var(--easing-out);
}
.mva-bar__pct {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  text-align: right;
  font-size: 0.85rem;
}

/* Meta rows (fair odds, most likely score, over/btts) */
.mva-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mva-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--divider);
}
.mva-meta__row:last-child { border-bottom: none; }
.mva-meta__val {
  font-weight: var(--weight-medium);
}

/* Actual side — big score */
.mva-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) 0;
}
.mva-final__score {
  font-size: 2.5rem;
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mva-final__sep {
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
  font-size: 0.7em;
  margin: 0 6px;
}
.mva-final__ht {
  letter-spacing: 0.04em;
}

/* Accuracy badges row */
.mva-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 var(--space-3);
  list-style: none;
}
.mva-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.8rem;
}
.mva-badge--hit {
  color: var(--system-green, #34d399);
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
}
.mva-badge--miss {
  color: var(--system-red, #ef4444);
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}
.mva-badge__icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.mva-badge__label {
  font-weight: var(--weight-medium);
}

/* Section header inside MVA (Key events / Full timeline labels) */
.mva-section-h {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-1);
}
.mva-key-events { margin-bottom: var(--space-2); }

/* Collapsible full timeline (native <details>) */
.mva-timeline {
  border-top: 1px solid var(--divider);
  padding-top: var(--space-2);
}
.mva-timeline__summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  list-style: none;
  padding: 4px 0;
}
.mva-timeline__summary::-webkit-details-marker { display: none; }
.mva-timeline__summary:hover { color: var(--text-primary); }
.mva-timeline__summary::after {
  content: '▾';
  margin-left: 6px;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast);
}
.mva-timeline[open] .mva-timeline__summary::after {
  transform: rotate(180deg);
  display: inline-block;
}


/* ── Form guide ── */

.md-form-guide { /* card variant */ }

.md-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .md-form-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

.md-form-team {
  margin-bottom: 0.5rem;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

/* C4 + P4.4.1: Form match cards — replaced simple W/L/D pills. Each card
   pokazuje opponent badge (36px), score (large), opponent name, comp logo
   + date. Color border-top encodes result (W/L/D). Click (gdy match_id)
   navigates do historycznego match-detail.

   Desktop: 5 cards in grid row per team.
   Mobile: horizontal scroll per team (cards 88px fixed width). */
.md-form-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.md-form-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: center;
  min-width: 0;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
a.md-form-card { cursor: pointer; }
a.md-form-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
a.md-form-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.md-form-card--won { border-top-color: var(--system-green); }
.md-form-card--lost { border-top-color: var(--system-red); }
.md-form-card--drawn { border-top-color: var(--system-amber, #f59e0b); }

.md-form-card__opp-badge {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.md-form-card__opp-badge--placeholder {
  display: inline-block;
  background: var(--surface-3);
  border-radius: 50%;
}
.md-form-card__score {
  font-size: 1.05rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: 1.1;
}
.md-form-card__opp {
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.md-form-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
}
.md-form-card__comp-logo {
  width: 12px;
  height: 12px;
  object-fit: contain;
  opacity: 0.8;
}

/* 5.6.2.1 (Karol QA): mobile horizontal scroll → wrap. Karol explicit:
   "Form (last 5) cards: max wrap zamiast horizontal scroll. 4 z 5 widoczne
   pierwszy rzut oka, 5-ty wymaga scroll DOWN nie horizontal."
   Implementation: 4-col grid na mobile <768px, 5th card flows do row 2.
   Bez horizontal scroll → bez fade mask, bez snap-x, bez overflow-x.
   Cards smaller (avatar 24px, 6px padding) żeby fit 4 w 343px content width:
   4×72 + 3×8 = 312px (room dla padding inside .card parent). */
@media (max-width: 767px) {
  .md-form-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0;
    overflow: visible;
    /* Reset properties z poprzedniego horizontal-scroll wariantu */
    -webkit-overflow-scrolling: auto;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .md-form-card {
    flex: initial;
    padding: 8px 4px;
    min-width: 0;
  }
  .md-form-card__opp-badge {
    width: 28px;
    height: 28px;
  }
  .md-form-card__score {
    font-size: 0.95rem;
  }
  .md-form-card__opp {
    font-size: 0.65rem;
  }
}


/* ── C4: Match info bar — 3 horizontal cards (Competition / Kick-off / Stadium) ── */
.md-info-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
}
@media (max-width: 480px) {
  .md-info-bar { grid-template-columns: 1fr; }
}

.md-info-bar__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast), transform var(--duration-fast);
}
.md-info-bar__cell--link {
  cursor: pointer;
}
.md-info-bar__cell--link:hover {
  background: var(--surface-3);
  transform: translateY(-1px);
}
.md-info-bar__cell--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.md-info-bar__icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-info-bar__cell--link:hover .md-info-bar__icon {
  color: var(--accent);
}
.md-info-bar__body {
  flex: 1;
  min-width: 0;
}
.md-info-bar__label {
  margin-bottom: 2px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}
.md-info-bar__value {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-info-bar__comp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.md-info-bar__comp-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}


/* ── C4: Players to Watch — 2 columns (home/away) × 3 cards each ── */
.md-watch-card-section { /* card variant container */ }

.md-watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 480px) {
  .md-watch-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

.md-watch-col__team {
  margin-bottom: 0.5rem;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.md-watch-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* P4.4.1 Fix 2: card layout — explicit min-width:0 i overflow:hidden żeby
   ellipsis działał, drop pitch-slot class pollution, padding bumped, avatar
   80px desktop / 56px mobile per Karol UX spec. */
.md-watch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.md-watch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 255, 255, 0.18);
}
.md-watch-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.md-watch-card__avatar {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.md-watch-card__avatar--render {
  object-position: center top;
}
.md-watch-card__avatar--silhouette {
  filter: none;
}

.md-watch-card__info {
  width: 100%;
  min-width: 0;
}
.md-watch-card__name {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-width: 100%;
}
.md-watch-card__pos {
  font-size: 0.65rem;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .md-watch-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .md-watch-card {
    padding: 8px 4px;
    gap: 6px;
  }
  .md-watch-card__avatar {
    width: 56px;
    height: 56px;
  }
  .md-watch-card__name {
    font-size: 0.7rem;
  }
}


/* ── Predictions preview card ── */

.md-pred-card { }

.md-pred-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.md-pred-card__header .md-section-title {
  margin: 0;
}

.md-pred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
@media (max-width: 640px) {
  .md-pred-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

.md-pred-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.md-pred-label {
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
}

.md-pred-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}

.md-pred-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.md-pred-cell > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-pred-value {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.md-pred-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--divider);
  padding-top: var(--space-2);
}

.md-pred-link {
  align-self: flex-start;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.md-pred-link:hover { color: var(--accent-strong); }

.md-disclaimer {
  margin: 0;
  line-height: var(--leading-relaxed);
}
.md-disclaimer a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--text-tertiary);
}
.md-disclaimer a:hover { color: var(--accent); }


/* F5.8.3.2c PATCH 3: AI Prediction section (Overview tab) ================ */

.md-prediction {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.md-prediction__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.md-prediction__lambdas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.md-prediction__lambda-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-prediction__lambda-val {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md-prediction__lambda-lbl {
  letter-spacing: 0.02em;
}
.md-prediction__probs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-prediction__prob-row {
  display: grid;
  grid-template-columns: 80px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.md-prediction__prob-label {
  color: var(--text-secondary);
}
.md-prediction__prob-bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.md-prediction__prob-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width var(--duration-base) var(--easing-out);
}
@media (prefers-reduced-motion: reduce) {
  .md-prediction__prob-fill { transition: none; }
}
.md-prediction__prob-val {
  text-align: right;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.md-prediction__top-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.md-prediction__top-pick-market {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.md-prediction__value {
  color: var(--accent);
  font-weight: var(--weight-bold);
}
.md-prediction__stake {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.md-prediction__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-prediction__back-link {
  align-self: flex-start;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  text-decoration: none;
}
.md-prediction__back-link:hover { color: var(--accent-strong); text-decoration: underline; }


/* === chip risk tier variants (used by predictions card) ================== */
/* (chip base classes już w components.css; tutaj tylko upewnij się że tier
    aliases na chip--low/medium/high mapują do existing classes) */

.chip--medium { /* alias dla --medium już w components.css */ }
.chip--high   { /* alias dla --high już w components.css */ }
.chip--low    { /* alias dla --low już w components.css */ }


/* === Lineups tab — pitch + player slots (P4.2 overhaul) ================= */

/* Side switcher tabs (Home / Away above pitch) */
.lineup-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-2);
}
.lineup-tabs__btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--text-tertiary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.lineup-tabs__btn:hover:not(.lineup-tabs__btn--active) { color: var(--text-primary); }
.lineup-tabs__btn--active {
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Predicted lineup banner (when status === 'predicted') */
.lineup-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: rgba(217, 178, 122, 0.12);
  border: 1px solid rgba(217, 178, 122, 0.35);
  border-radius: var(--radius-sm);
  color: var(--risk-medium-fg);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.lineup-banner__icon {
  font-size: 0.9rem;
}

/* Pitch container — 2:3 aspect, max-width 600px desktop / 360px mobile */
.lineup-pitch {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 100 / 150;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.04), transparent 60%),
    linear-gradient(135deg, #0d2818 0%, #0a1f12 40%, #0d2818 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
}
@media (max-width: 767px) {
  /* 5.6.2.1: max-width 360px > 343px content na 375px viewport = potential
     overflow. Switch do 100% (= parent content width) z hard cap 360px tylko
     gdy parent jest szerszy. min(100%, 360px) keeps boisko centered i fitting. */
  .lineup-pitch { max-width: min(100%, 360px); }
}

.pitch-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pitch-bg rect,
.pitch-bg line,
.pitch-bg circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.30);
  stroke-width: 0.3;
  vector-effect: non-scaling-stroke;
}

/* Slots layer absolute over SVG */
.lineup-pitch__slots {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* slots themselves enable */
}

/* Single player slot — positioned via inline style left/top %.
   P4.3.6 Bug 2: bumped 56→72 desktop, 44→56 mobile dla rozpoznawalności twarzy
   na cutout PNG (Karol QA — 56px za mały dla face details). */
.pitch-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 72px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  font: inherit;
  color: var(--white);
  transition: transform var(--duration-fast) var(--easing-pop);
}
.pitch-slot:hover {
  transform: translate(-50%, -52%) scale(1.06);
  z-index: 2;
}
.pitch-slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .pitch-slot { width: 56px; }
  /* P4.3.7 Fix 2: formation-aware shrink. Pitch container ma data-tight="true"
     gdy max linia ma 5+ graczy (5-3-2, 3-5-2, 5-4-1). 5×56px = 280px + paddings
     przekroczyłoby 360px mobile container. 44px daje 5×44 = 220px, zostaje
     space dla pos% spacingu. */
  .lineup-pitch[data-tight="true"] .pitch-slot { width: 44px; }
  .lineup-pitch[data-tight="true"] .pitch-slot__name { font-size: 0.5rem; max-width: 50px; }
}

/* Avatar wrapper — initials variant: colored circle z border.
   Cutout variant: NO background, NO border, NO border-radius — cutout PNG
   sits bezpośrednio na zielonej murawie (P4.3.6 Bug 1 fix). */
.pitch-slot__avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pitch-slot--has-cutout .pitch-slot__avatar,
.pitch-slot--has-render .pitch-slot__avatar {
  background: transparent !important;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  /* drop-shadow legibility na zielonej murawie — bez tła avatar'a */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.pitch-slot__cutout {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* P4.3.7 Fix 1: render variant (full body strRender). Top-aligned object-position
   żeby głowa i twarz pozostały widoczne w 72px slot — full body ma proporcje 1:3,
   contain skompresowałby twarz do 24px gdyby byla bottom-aligned. */
.pitch-slot--has-render .pitch-slot__cutout {
  object-position: center top;
}

/* P4.3.7 Fix 3: silhouette SVG fallback gdy brak cutout/render PNG.
   Czystsze niż random colored disc + 3-letter inicjały (poprzednia
   implementacja). Consistent look across players bez data. */
.pitch-slot__silhouette {
  width: 100%;
  height: 100%;
  display: block;
}
.pitch-slot--silhouette .pitch-slot__avatar {
  background: transparent !important;
  border: none;
  overflow: visible;
  box-shadow: none;
}

.pitch-slot__number {
  display: inline-block;
  background: rgba(0, 0, 0, 0.75);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.2;
  margin-top: -3px;
  position: relative;
  z-index: 1;
}

.pitch-slot__name {
  font-size: 0.6rem;
  font-weight: var(--weight-semibold);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  line-height: 1.1;
}
@media (max-width: 767px) {
  .pitch-slot__name { font-size: 0.55rem; max-width: 64px; }
}


/* Substitutes list — compact horizontal scroll */
.lineup-subs {
  margin-top: var(--space-3);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.lineup-subs__title {
  margin: 0 0 0.5rem;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
}
.lineup-subs__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
}
.lineup-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}
.lineup-sub__number {
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.lineup-sub__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-sub__pos {
  flex-shrink: 0;
}


/* Lineup tab wrapper */
.md-tabpanel--lineups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.md-tabpanel--lineups > * { width: 100%; }
.md-tabpanel--lineups .lineup-tabs { align-self: center; }


/* Reduced-motion override (nadbudowa nad design-system global) */
@media (prefers-reduced-motion: reduce) {
  .pitch-slot { transition: none; }
  .pitch-slot:hover { transform: translate(-50%, -50%); }
}


/* === P4.3 — pitch tooltip ============================================== */

.pitch-tooltip {
  position: fixed;
  z-index: var(--z-overlay);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  min-width: 180px;
  max-width: 240px;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  font-size: var(--text-small);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--easing-out),
              transform var(--duration-fast) var(--easing-out);
}
.pitch-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

.pitch-tooltip__name {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.pitch-tooltip__row {
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.pitch-tooltip__row:last-child { margin-bottom: 0; }

.pitch-tooltip__label {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pitch-tooltip { transition: none; transform: none; }
  .pitch-tooltip--visible { transform: none; }
}


/* === P4.3 — player profile w side panel =============================== */

.player-profile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.player-profile__hero {
  width: 100%;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-1);
}
.player-profile__hero img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

.player-profile__name {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.player-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.player-profile__team {
  margin: 0;
}

.player-profile__phys {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-small);
}

.player-profile__description {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
  /* Truncate very long descriptions w side panel — show first ~6 lines, scroll for rest */
  white-space: pre-line;
}

.player-profile--minimal {
  padding: var(--space-3) 0;
  text-align: center;
}


/* === Odds tab — empty / disabled state ================================== */

.md-tabpanel--odds {
  display: grid;
  gap: var(--space-2);
}

.md-odds-empty {
  text-align: center;
  padding: var(--space-3);
}
.md-odds-empty .md-section-title {
  margin-bottom: 0.5rem;
}
.md-odds-empty button {
  margin-top: var(--space-2);
}


/* === Reduced motion override (defense-in-depth — design-system has global too) === */

@media (prefers-reduced-motion: reduce) {
  .md-hero__live-dot { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix — Live position stage
   Karol QA: pitch + events side-by-side (desktop), stacked mobile. Drops
   the duplicate events list that used to render under the pitch — the
   in-pitch rail is hidden when the stage hosts an events panel.
   ───────────────────────────────────────────────────────────────────────── */

.md-live-stage {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .md-live-stage.has-events {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
  }
}
.md-live-stage > .card { margin: 0; }

/* Side events panel inside the stage */
.md-live-events-side {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.md-live-events__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* F5.17.c-fix Karol QA: scrollable but no visible scrollbar */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
}
.md-live-events__body::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (min-width: 1024px) {
  .md-live-events-side {
    /* match the pitch card height so events list scrolls inside its panel */
    align-self: stretch;
  }
  .md-live-events__body { max-height: 480px; }
}

/* Hide the pitch widget's internal recent-events rail when it's inside the
   stage — the side panel is the single source of truth for events. */
.md-live-stage .live-pitch__rail { display: none; }


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix v2 — Match events side panel compact layout
   Karol QA "napisy się rozjeżdżają". The default events-timeline uses a
   3-column [home | minute | away] grid built for full width. In the 320px
   side panel each 1fr column is too narrow → player names overlap the
   minute. Override to a single-column list: [minute][card], home events get
   a green left accent, away a muted one ("lewo/prawo której drużyny").
   ───────────────────────────────────────────────────────────────────────── */

/* F5.17.c-fix v2 Karol QA "kreska nie zniknęła" — the stray line was the
   timeline's central vertical axis (.events-timeline::before at left:50%),
   not the card border. It belongs to the full-width 2-col layout; hide it
   in the single-column side panel. */
.md-live-events-side .events-timeline::before { display: none !important; }

.md-live-events-side .events-timeline__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.md-live-events-side .events-timeline__row > span:empty { display: none; }
.md-live-events-side .events-timeline__minute {
  order: -1;
  flex: 0 0 30px;
  text-align: right;
  align-self: center;
  font-size: 12px;
}
.md-live-events-side .events-timeline__card {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 8px 10px;
}
/* F5.17.c-fix Karol QA "dziwna kreska — usuń ją". The left-border team-side
   accent read as a stray line; removed. The event icon conveys the type;
   side stays implicit. */
/* Player name wraps instead of overlapping */
.md-live-events-side .events-timeline__body { min-width: 0; }
.md-live-events-side .events-timeline__player {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix — Side-panel match events (dedicated, crest = team signal)
   Karol QA "nie widzę prawo lewo do jakiej drużyny". Each row carries the
   team crest; home rows lean left, away rows lean right.
   ───────────────────────────────────────────────────────────────────────── */
.md-se { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.md-se__empty { padding: 12px 4px; }
.md-se__row {
  display: grid;
  grid-template-columns: 30px 20px 18px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
}
.md-se__row--away {
  /* away leans right: crest+content mirrored so side reads at a glance */
  direction: rtl;
}
.md-se__row--away > * { direction: ltr; }
.md-se__row--away .md-se__player { text-align: right; }
.md-se__min {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.md-se__crest { width: 20px; height: 20px; object-fit: contain; }
.md-se__crest--ph {
  display: inline-block; border-radius: 50%;
  background: var(--surface-3);
}
.md-se__icon { font-size: 14px; line-height: 1; text-align: center; }
.md-se__player {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Stats tab (apifootball match statistics — Wave A 2026-06-06) ────────── */
.md-stats-card { padding: 16px 18px; }
.md-stats-list { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.md-stat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.md-stat-row__val {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  color: var(--text-primary);
}
.md-stat-row__val--away { text-align: right; }
.md-stat-row__type {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
.md-stat-row__bar {
  grid-column: 1 / -1;
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-3);
}
.md-stat-row__bar-h { background: var(--accent); }
.md-stat-row__bar-a { background: var(--border-strong); }

/* ── H2H tab (apifootball get_H2H recent meetings — Wave A) ──────────────── */
.md-h2h-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.md-h2h-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  color: inherit;
}
.md-h2h-row:last-child { border-bottom: 0; }
a.md-h2h-row:hover { background: var(--surface-2); }
.md-h2h-row__date { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.md-h2h-row__teams { font-size: 13px; color: var(--text-secondary); }
.md-h2h-row__teams strong { color: var(--text-primary); font-variant-numeric: tabular-nums; margin: 0 4px; }
.md-h2h-row__league { color: var(--text-tertiary); font-size: 11px; text-align: right; }
@media (max-width: 560px) {
  .md-h2h-row { grid-template-columns: 64px 1fr; }
  .md-h2h-row__league { display: none; }
}
.md-h2h-row__crest {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 5px;
}

/* Freemium: locked Top-pick teaser in the match-detail AI Prediction section */
.md-prediction__top-pick--locked {
  text-decoration: none;
  cursor: pointer;
}
.md-prediction__top-pick--locked:hover .md-prediction__value {
  text-decoration: underline;
}

/* Wave C: live commentary feed */
.md-commentary__body {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.md-comment-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 7px 4px;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}
.md-comment-row:last-child { border-bottom: 0; }
.md-comment-row__time {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.md-comment-row__text { color: var(--text-secondary); line-height: 1.4; }