/* ============================================================
   HAJLAJTY — assets/styles/match-single.css
   ------------------------------------------------------------
   KOMPONENT RDZENIA WIDOKU MECZU (single). JEDEN plik dla całego
   rdzenia — NIE fragmentowany per zakładka. Wyekstrahowany 1:1 z
   monolitu „Hajlajty - Skrót Meczu.html" (wariant ZAKOŃCZONY):
   pasmo watch + powrót, player16 z nakładką „telebim" (P-i: drużyny+wynik
   na środku, metadane w rogach), zakładki, oś czasu,
   statystyki, składy (half-pitch + ławka). Powłoka (topbar/sidebar/
   stopka) jest w layout.css; tokeny/reset w tokens.css/base.css.

   STUB-y 3b (realne dane po 3bi): kolory koszulek/strony — home=akcent,
   away=neutral (NIE z danych). Karty „Inne skróty" (aside) reużywają wspólny
   partial card-skrot (.vcard) — chrome w match-lists.css (MVP-h: ładowany też
   na single); tu zostaje tylko rytm pionowego stosu w sidebarze.
============================================================ */

:root {
  /* Ograniczenie pasma „watch" (jak YouTube) — anti-rozlewanie na ultra-wide. */
  --max-player-width: 1280px;
  --match-sidebar-width: 480px;
  --page-horizontal-margin: var(--space-md);
  --watch-max: calc(var(--max-player-width) + var(--match-sidebar-width) + (var(--page-horizontal-margin) * 3));

  /* Barwy sygnalizacyjne kartek/indykatorów (z monolitu). */
  --card-yellow: oklch(0.83 0.17 95);
  --card-red:    oklch(0.57 0.22 27);
}

/* ---- Pasek powrotu (na wysokości chipsów → licuje z 1. poz. menu) ---- */
.watch-top {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  display: flex; align-items: center; gap: var(--space-sm);
  padding-block: var(--chips-pad-y);
}
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.back-link:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.back-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Układ „watch": główna kolumna + prawy sidebar ---- */
.watch { padding-block: 0 var(--space-2xl); }
.watch__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
.watch__grid > * { min-width: 0; }
/* Dwie kolumny TYLKO gdy aside obecny (E6). Bez aside (E3) — pełna szerokość,
   bez rezerwowania pustej kolumny. */
@media (min-width: 1220px) {
  .watch__grid:has(.watch__aside) { grid-template-columns: minmax(0, 1fr) var(--match-sidebar-width); gap: var(--page-horizontal-margin); }
}

/* Centrowanie pasma watch do tej samej szerokości co stopka/topbar (desktop). */
@media (min-width: 1100px) {
  .content .watch-top.container,
  .content .watch.container {
    max-width: var(--watch-max);
    margin-inline: auto;
    padding-inline: var(--page-horizontal-margin);
  }
}

/* ============================================================
   PLAYER 16:9 (facade → osadzony iframe YouTube)
============================================================ */
.player16 {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  background:
    radial-gradient(120% 130% at 50% -20%, var(--accent-soft), transparent 58%),
    repeating-linear-gradient(135deg, var(--thumb-a) 0 16px, var(--thumb-b) 16px 32px);
}
/* P-i: fasada / stan pusty niosą NAKŁADKĘ „telebim" — środek (drużyny+wynik+play)
   wyśrodkowany gridem, metadane w rogach ABSOLUTNIE. Oba stany dzielą ten sam
   szkielet; różnią się tylko 3 elementami (badge, glif środka, prawy dolny róg). */
.player16__facade,
.player16__empty {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; padding: clamp(14px, 3.4vw, 22px);
}
/* Fasada jest przyciskiem — resetujemy natywne style. */
.player16__facade { text-align: inherit; color: inherit; cursor: pointer; }

/* ---- Środek: home (flaga+nazwa+gole) | play | away ---- */
/* Sloty drużyn reużywają `.team-slot` z zapowiedzi 1:1 (te same rozmiary flag/nazw
   — bez zawężania). Liczba goli POD nazwą: większa od nazwy, ale proporcjonalna. */
.player16__center {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 4vw, 56px); width: 100%; max-width: 760px;
}
.player16__mid { display: flex; align-items: center; justify-content: center; }
.player16__goals {
  font-size: clamp(26px, 4.2vw, 46px); font-weight: 800; line-height: 1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text);
}

.player16__play {
  width: clamp(56px, 9vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: oklch(0 0 0 / 0.46); backdrop-filter: blur(2px); border: 1.5px solid oklch(1 0 0 / 0.5);
  transition: transform var(--t-med), background var(--t-med);
}
.player16__play svg { width: clamp(24px, 3.4vw, 30px); height: clamp(24px, 3.4vw, 30px); fill: #fff; transform: translateX(2px); }
.player16__facade:hover .player16__play { transform: scale(1.08); background: var(--accent); }
.player16__facade:hover .player16__play svg { fill: var(--accent-ink); }
/* Stan bez skrótu: wyszarzony glif „wideo w drodze" w miejscu play — BRAK CTA. */
.player16__glyph {
  width: clamp(56px, 9vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: oklch(0 0 0 / 0.32); border: 1.5px solid oklch(1 0 0 / 0.24);
}
.player16__glyph svg { width: clamp(24px, 3.4vw, 30px); height: clamp(24px, 3.4vw, 30px); stroke: oklch(1 0 0 / 0.6); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="light"] .player16__glyph { background: oklch(0 0 0 / 0.14); border-color: oklch(0 0 0 / 0.18); }
[data-theme="light"] .player16__glyph svg { stroke: oklch(0 0 0 / 0.5); }

/* ---- Rogi nakładki (ciemna gradientowa podkładka pod tekstem — a11y w obu motywach) ---- */
.player16__badge {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px); border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
}
/* Kropki STATYCZNE (bez pulsu — spokojniej niż live): zielona/akcent = skrót gotowy,
   bursztyn = oczekuje na skrót. */
.player16__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.player16__badge.is-ready .player16__dot { background: var(--accent); }
.player16__badge.is-wait .player16__dot { background: var(--card-yellow); }
.player16__date {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px); border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* Czas trwania: PRAWY DOLNY róg (parytet z „…wkrótce"). */
.player16__dur {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; padding: 5px 11px; border-radius: 7px;
  background: oklch(0 0 0 / 0.74); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
/* Źródło (kanał YT): LEWY DOLNY róg, tylko gdy skrót jest. */
.player16__src {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100% - 28px); padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px); border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 700;
}
.player16__src svg { width: 15px; height: 15px; fill: #fff; flex: 0 0 auto; }
.player16__src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bez skrótu: komunikat „…wkrótce" w PRAWYM DOLNYM rogu (miejsce czasu trwania). */
.player16__soon {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; max-width: calc(100% - 28px);
  padding: 6px 12px; border-radius: var(--r-pill); text-align: right;
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px); border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 700;
}
.player16.is-playing { background: #000; border-color: #000; }
.player16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player16.is-playing .player16__facade { display: none; }

/* ============================================================
   P-o: TRZECI STAN TELEBIMU — skrót NIEOSADZALNY (tylko YouTube)
   Parytet szkieletu player16: badge/data/kanał w rogach bez zmian.
   Środek: statyczny glif „gra na YouTube" (NIE play — osadzenie i tak nie
   zadziała), pod nim widoczny CTA „Obejrzyj na YouTube" + „?" z powodem.
   Kontener to .player16__empty (div, nie button) → JS nie wstrzyknie iframe.
============================================================ */
/* Kółko środka = LINK „otwórz na YouTube". Wizualny parytet z .player16__play
   (ta sama bryła/rozmiar/hover), ale ikona „otwórz w nowej karcie" (nie play). */
.player16__launch {
  width: clamp(56px, 9vw, 76px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: oklch(0 0 0 / 0.46); backdrop-filter: blur(2px); border: 1.5px solid oklch(1 0 0 / 0.5);
  color: #fff; transition: transform var(--t-med), background var(--t-med), color var(--t-med);
}
.player16__launch svg { width: clamp(24px, 3.4vw, 30px); height: clamp(24px, 3.4vw, 30px); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player16__launch:hover { transform: scale(1.08); background: var(--accent); color: var(--accent-ink); }
.player16__launch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Rząd „napis + ?": ABSOLUTNIE pod kółkiem środka, żeby NIE zmieniać pionowego
   wyśrodkowania flag/nazw/wyniku (mają siedzieć jak w zwykłym skrócie). Kółko jest
   w środku telebimu (50%/50%), więc napis kotwiczymy do środka i spuszczamy w dół. */
.player16__empty--external .player16__cta-row {
  position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0;
  transform: translate(-50%, clamp(46px, 7.5vw, 62px));
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px);
}
/* „Obejrzyj na YouTube" — zwykły tekst-link (bez chipsu, bez ikony YT). Kolor
   var(--text) czyta się na telebimie w OBU motywach (jasny tekst na ciemnym /
   ciemny na jasnym). Podkreślenie sygnalizuje link. */
.yt-cta-link {
  color: var(--text); font-size: clamp(14px, 1.9vw, 17px); font-weight: 800;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 6px oklch(0 0 0 / 0.35);
}
.yt-cta-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.yt-cta-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[data-theme="light"] .yt-cta-link { text-shadow: none; }

/* „?” — trigger tooltipa. Odkrywalny: hover, focus (klawiatura), tap (JS .is-open). */
.yt-note { position: relative; display: inline-flex; }
.yt-note__trigger {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1;
  background: oklch(0 0 0 / 0.5); color: #fff; border: 1px solid oklch(1 0 0 / 0.3); backdrop-filter: blur(3px);
}
[data-theme="light"] .yt-note__trigger { background: oklch(0 0 0 / 0.55); }
.yt-note__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Popover otwiera się W GÓRĘ i W LEWO od „?” (prawa krawędź kotwiczona do
   triggera). Powód: .player16 ma overflow:hidden, a na wąskim mobilnym telebimie
   „?” siedzi na prawo od środka — wyśrodkowany popover wychodziłby poza prawą
   krawędź i zostałby ucięty. Kotwiczenie w prawo → rośnie w lewo, w głąb telebimu. */
.yt-note__pop {
  position: absolute; bottom: calc(100% + 10px); right: -4px; left: auto; transform: translateY(4px);
  width: max-content; max-width: min(280px, 78vw); z-index: 6; text-align: left;
  padding: 10px 12px; border-radius: 10px; background: oklch(0.18 0 0); color: #fff;
  border: 1px solid oklch(1 0 0 / 0.14); box-shadow: 0 8px 28px oklch(0 0 0 / 0.5);
  font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.yt-note__pop b { display: block; font-weight: 800; margin-bottom: 2px; }
.yt-note:hover .yt-note__pop,
.yt-note:focus-within .yt-note__pop,
.yt-note.is-open .yt-note__pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .player16__launch, .yt-cta-link, .yt-note__pop { transition: none; }
}

/* ---- SYSTEM ZAKŁADEK ---- */
.tabs {
  display: flex; align-items: stretch; gap: var(--space-2xs);
  margin-top: var(--space-md);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted); font-size: 15px; font-weight: 700;
  white-space: nowrap; transition: color var(--t-fast);
}
.tab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab::after {
  content: ""; position: absolute; left: var(--space-md); right: var(--space-md); bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--accent);
  transform: scaleX(0); transform-origin: center; transition: transform var(--t-med);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { transform: scaleX(1); }

/* P-d (pkt 6): kompaktowy pasek na telefonie — WSPÓLNY dla skrótu i live (ten sam
   `.tabs`), bo na mobile live ma 3 zakładki i ciaśniej musi się zmieścić. */
@media (max-width: 768px) {
  .tabs { gap: 0; }
  .tab { padding: var(--space-xs) var(--space-sm); font-size: 13px; gap: 5px; }
  .tab svg { width: 16px; height: 16px; }
  .tab::after { left: var(--space-sm); right: var(--space-sm); }
}

.tabpanels { margin-top: var(--space-lg); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: tabIn 320ms var(--ease) both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabpanel.is-active { animation: none; } }

/* ---- OŚ CZASU (render E4) ---- */
.timeline { position: relative; }
.tl-item { display: grid; grid-template-columns: 40px 32px 1fr; gap: var(--space-sm); }
.tl-min { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-muted); padding-top: 4px; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--border); }
.tl-item:first-child .tl-rail::before { top: 16px; }
.tl-item:last-child .tl-rail::before { bottom: calc(100% - 16px); }
.tl-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.tl-node.is-goal { background: var(--accent); border-color: var(--accent); }
.tl-content { padding-bottom: var(--space-lg); }
.tl-item:last-child .tl-content { padding-bottom: 0; }
.tl-row { display: flex; align-items: center; gap: var(--space-sm); }
.tl-title { font-weight: 700; font-size: 14px; }
.tl-score { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface-2); padding: 2px 9px; border-radius: var(--r-sm); font-size: 13px; }
.tl-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.tl-sub .country-flag { height: 13px; border-radius: 2px; }

/* ---- STATYSTYKI (progress bars) ---- */
.stats-wrap { max-width: 720px; }
.stats-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.stats-head .side { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; }
.stats-head .side.away { flex-direction: row-reverse; }
.stats-head .country-flag { height: 16px; border-radius: 2px; }
.stats-head .swatch { width: 10px; height: 10px; border-radius: 3px; }
.stats-head .swatch.home { background: var(--accent); }
.stats-head .swatch.away { background: var(--text-faint); }
.stat { margin-bottom: var(--space-lg); }
.stat:last-child { margin-bottom: 0; }
.stat__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 13px; }
.stat__top .vh, .stat__top .va { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat__top .lab { color: var(--text-muted); font-weight: 600; }
.stat__bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); }
.stat__fill { height: 100%; width: 0; transition: width 1100ms var(--ease); }
.stat__fill.home { background: var(--accent); }
.stat__fill.away { background: var(--text-faint); margin-left: auto; }

/* ---- SKŁADY (render E5) ---- */
.lineup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
/* P-e: przełącznik składów (home/away) jako zwarty SEGMENTOWANY control —
   subtelniejszy niż pełne pill-e z akcentem. Jeden track (.lineup-tabs) z dwoma
   segmentami; aktywny = lekkie wypełnienie (--surface-hover) zamiast krzykliwego
   zielonego fillu. Wspólny dla single-ft/live/ns (#lineupTabs, ten sam markup). */
.lineup-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--space-md);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.lineup-head .lineup-tabs { margin-bottom: 0; }
.lineup-tab { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border: 0; background: transparent; border-radius: calc(var(--r-sm) - 3px);
  color: var(--text-muted); font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast); }
.lineup-tab .country-flag { height: 14px; border-radius: 2px; }
.lineup-tab:hover { color: var(--text); }
.lineup-tab.is-active { color: var(--text); box-shadow: 0 1px 2px oklch(0 0 0 / 0.15); }
/* Aktywny segment WYRAŹNIE jaśniejszy od tracku (--surface-2 0.27). Brak tokenu
   ~0.39 w palecie, więc wartość wprost; w jasnym motywie biały „thumb" na szarym
   tracku (czytelny bez magic-value). */
[data-theme="dark"]  .lineup-tab.is-active { background: oklch(0.39 0.02 250); }
[data-theme="light"] .lineup-tab.is-active { background: var(--surface); }
.lineup-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.lineup-meta b { color: var(--text); font-weight: 800; }
.lineup-pane { display: none; }
.lineup-pane.is-active { display: block; }
.lineup-split { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 700px) { .lineup-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; } }

/* Połowa boiska — bramka + pole karne u góry, formacja schodzi w dół.
   Kolor koszulek (--team-home/--team-away) wstrzykuje render z lineups.colors
   (3bi). Gdy brak (NS / brak składów) — fallback przez var(): home=akcent,
   away=neutral (świadomy STUB 3b). */
.half-pitch { position: relative; aspect-ratio: 64 / 78; width: 100%;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border);
  background: repeating-linear-gradient(0deg, oklch(0.46 0.10 150 / 0.22) 0 9%, oklch(0.46 0.10 150 / 0.13) 9% 18%);
  padding: 15% 6% 6%; display: grid; grid-template-rows: repeat(4, 1fr); }
.half-pitch::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20%; height: 3.4%; border: 1.5px solid oklch(1 0 0 / 0.5); border-top: none; border-radius: 0 0 3px 3px; }
.half-pitch::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56%; height: 19%; border: 1px solid oklch(1 0 0 / 0.2); border-top: none; border-radius: 0 0 10px 10px; }
.half-pitch[data-team="home"] { --shirt: var(--team-home, var(--accent)); --shirt-num: var(--team-home-num, #fff); --shirt-border: var(--team-home-border, transparent); }
.half-pitch[data-team="away"] { --shirt: var(--team-away, var(--text-faint)); --shirt-num: var(--team-away-num, #fff); --shirt-border: var(--team-away-border, transparent); }
.hp-row { display: flex; align-items: center; justify-content: space-evenly; gap: 2px; position: relative; z-index: 1; }

.pl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.pl__badge { position: relative; width: clamp(30px, 11%, 42px); }
/* Obrys koszulki z colors.player.border (3bi) — wiernie z danych; gdy brak
   danych → transparent (koszulka bez obrysu, jak w 3b). stroke dziedziczy do
   <use> tak samo jak fill. */
.pl__badge .jersey { width: 100%; height: auto; display: block; fill: var(--shirt, var(--accent)); stroke: var(--shirt-border, transparent); stroke-width: 1.5; filter: drop-shadow(0 2px 5px oklch(0 0 0 / 0.42)); }
/* Numer w kolorze koszulki z colors.player.number (3bi) — czytelny też na jasnej
   koszulce; fallback #fff (ciemne stuby) gdy brak danych. Cień zostaje dla kontrastu. */
.pl__num { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); text-align: center; font-weight: 800; font-size: 12px; color: var(--shirt-num, #fff); text-shadow: 0 1px 2px oklch(0 0 0 / 0.55); }
.pl__name { font-size: 10.5px; font-weight: 700; color: #fff; text-align: center; line-height: 1.05; text-shadow: 0 1px 4px oklch(0 0 0 / 0.75); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__inds { position: absolute; top: -7px; right: -9px; display: flex; flex-direction: column; gap: 3px; z-index: 2; }
.ind { min-width: 17px; height: 17px; padding: 0 2px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-size: 10px; line-height: 1; background: var(--bg-elev); border: 1px solid var(--border); box-shadow: 0 1px 3px oklch(0 0 0 / 0.4); }
.ind--card { width: 11px; min-width: 0; height: 15px; padding: 0; border: none; border-radius: 2.5px; }
.ind--card.yellow { background: var(--card-yellow); }
.ind--card.red { background: var(--card-red); }
.ind--sub { background: var(--card-red); border-color: transparent; color: #fff; }
.ind--sub svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.squad-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.squad-block__title { display: flex; align-items: center; gap: var(--space-2xs); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2xs); }
.squad-block__title svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.squad-rows { display: flex; flex-direction: column; }
.squad-row { display: flex; align-items: center; gap: var(--space-sm); padding: 9px 0; border-top: 1px solid var(--border); }
.squad-row:first-child { border-top: none; }
.squad-row__num { flex: 0 0 26px; text-align: center; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.squad-row__name { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Grupa po prawej: opcjonalne markery (gol/kartka) + pozycja lub „↑ minuta".
   Zbiera wszystko prawostronnie jednym margin-left:auto; wewnątrz shrink-wrap,
   więc własne margin-left:auto z __pos/__in jest tu neutralne. (3bi) */
.squad-row__end { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.squad-row__pos { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-faint); background: var(--surface-2); padding: 3px 9px; border-radius: var(--r-pill); }
.squad-row__in { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 9px 3px 7px; border-radius: var(--r-pill); }
[data-theme="dark"] .squad-row__in { color: var(--accent); }
.squad-row__in svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- PRAWY ASIDE: „Inne skróty" ----
   Sekcja aside; karty to wspólny partial card-skrot (.vcard) — patrz niżej. */
.aside-sec { margin-bottom: var(--space-xl); }
.aside-sec__title { display: flex; align-items: center; gap: var(--space-2xs); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--space-md); }
.aside-sec__title .kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* Karty „Inne skróty" w aside = wspólny partial card-skrot (.vcard). Chrome
   karty (miniatura .thumb*, .card-video, .vcard*) żyje w match-lists.css, który
   MVP-h ładuje też na single (patrz hajlajty_match_lists_enqueue). Tu tylko rytm
   pionowego stosu kart w wąskim sidebarze. */
.watch__aside .vcard { margin-bottom: var(--space-lg); }
.watch__aside .vcard:last-child { margin-bottom: 0; }

/* ---- MOBILNY PLAYER PEŁNA SZEROKOŚĆ ---- */
@media (max-width: 768px) {
  body { overflow-x: hidden; overflow-x: clip; }
  .player16 { width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: none; }
  /* P-i: na wąskim 16:9 dociskamy odstępy klastra i zmniejszamy rogi (flagi/nazwy
     zostają w rozmiarze zapowiedzi — clamp i tak skaluje je z vw). */
  .player16__center { gap: clamp(6px, 3.4vw, 18px); }
  .player16__badge, .player16__date, .player16__src, .player16__soon { font-size: 11px; padding: 5px 10px; }
  .player16__dur { font-size: 12px; }
  /* P-o: na wąskim 16:9 kółko mniejsze → napis bliżej pod nim. */
  .player16__empty--external .player16__cta-row { gap: 8px; transform: translate(-50%, clamp(40px, 11vw, 52px)); }
  /* P-o mobile (decyzja właściciela): bez „?" i mniejszy tekst CTA. */
  .yt-note { display: none; }
  .yt-cta-link { font-size: 13px; }
}

/* Delikatne wejście (jak monolit) */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal { animation: revealIn 560ms var(--ease) backwards; }
  html.js-anim .reveal:nth-of-type(2) { animation-delay: 70ms; }
  html.js-anim .reveal:nth-of-type(3) { animation-delay: 140ms; }
}
@keyframes revealIn { from { transform: translateY(16px); } to { transform: none; } }

/* ============================================================
   ░░ 3c — WARIANTY ZAPOWIEDŹ / LIVE / ODWOŁANY ░░
   Reguły przeniesione 1:1 z designów „Zapowiedź meczu" i „Mecz na żywo",
   WYŁĄCZNIE na istniejących tokenach (zero nowych zmiennych kolorów).
   POMINIĘTE: overlaye zdarzeń (.ev--*), pasek demo (.board-demo),
   bump wyniku (scoreBump) — to teatr LIVE, nieużywany w 3c.
============================================================ */

/* ---- KOTWICE AUTO-REFRESHU LIVE (3e-iii) ----
   Wrappery podmieniane przez poller (telebim/oś/statystyki). `display: contents`
   znika z layoutu — dziecko (.board/.panel/.aside-sec) uczestniczy w siatce
   `.panels`/kolumnach jak przed owinięciem, a PUSTY wrapper nie zostawia pudełka
   ani marginesu. Dzięki temu owinięcie nie zmienia układu single. */
.hajlajty-live { display: contents; }

/* ---- WSPÓLNE METADANE MECZU (pod playerem/telebimem) ---- */
.match-head { margin-top: var(--space-md); }
.match-phase {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap;
}
[data-theme="dark"] .match-phase { color: var(--accent); }
.match-title {
  margin-top: var(--space-sm);
  font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
.match-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-md);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.match-facts .fact { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.match-facts svg { width: 18px; height: 18px; stroke: var(--text-faint); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.match-facts b { color: var(--text); font-weight: 700; }

/* P-a: zakresowany redesign metadanych (ns/live/canc). single-ft świadomie POZA. */
.watch-top--compact { justify-content: flex-start; }
@media (max-width: 620px) { .watch-top--compact { justify-content: space-between; } }

.match-head--compact { display: flex; align-items: center; justify-content: space-around; }
.match-head--compact .match-facts { margin-top: 0; }
/* h1 zostaje dla SEO/a11y, ukryty wizualnie (motyw nie ma utility sr-only). */
.match-head--compact .match-title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- AKCJE KIBICA (fav / „Przypomnij mi") ----
   Skopiowane 1:1 z designowego hajlajty-fav.js (tylko istniejące tokeny).
   STOPGAP 3c: warstwa zachowania (hajlajty-fav.js) należy do hajlajty-user
   (Faza 4) i jeszcze NIE istnieje — w 3c renderujemy sam markup data-*, więc
   te reguły dają przyciskom poprawny wygląd (są bezczynne do Fazy 4). Gdy plugin
   wstrzyknie własny CSS, zdublowane reguły są nieszkodliwe (identyczne). Stany
   .is-on (zapisany/włączony) przełączy dopiero JS Fazy 4. */
.hf-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.hf-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-weight: 700; font-size: 14.5px; font-family: inherit; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hf-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hf-btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.hf-btn:active { transform: scale(0.98); }
.hf-btn--fav.is-on { background: var(--accent-soft); border-color: transparent; color: var(--live); }
.hf-btn--fav.is-on svg { fill: currentColor; }
.hf-btn--remind.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
[data-theme="dark"] .hf-btn--remind.is-on { color: var(--accent); }
.hf-btn--remind.is-on svg { fill: currentColor; }

/* ---- PANELE (stos kart w kolumnie głównej dla NS/LIVE) ---- */
.panels { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-md); }
.panel__title { display: flex; align-items: center; gap: var(--space-xs); font-size: clamp(17px, 2vw, 20px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.panel__title .kicker-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ============================================================
   ░░ P-b/P-d — LIVE: telebim + zakładki + przewijalna oś czasu ░░
   single-live: kolumna GŁÓWNA (.watch__col--main: telebim, wspólny pasek
   zakładek, Składy/Statystyki w zakładkach) + kolumna ASIDE
   (.watch__col--aside: oś czasu jako osobny panel, „Inne mecze").
   • Desktop (≥1220px): dwie NIEZALEŻNE kolumny (flex-column = własny kontekst
     wysokości). Oś czasu to samodzielny, PRZEWIJALNY panel (max-height = telebim,
     liczone w match-display.js) — długa oś NIE rozpycha lewej kolumny. Pasek
     zakładek pokazuje Składy | Statystyki (przycisk „Oś czasu" ukryty); pod
     telebimem aktywna zakładka.
   • Mobile: obie kolumny display:contents → jeden stos gridu; `order` daje
     kolejność telebim → pasek zakładek → (oś/składy/statystyki jako 3 zakładki)
     → inne mecze. Oś czasu wpada do zestawu zakładek (nie osobny panel).
   Kotwice pollera (#hajlajty-live-*) zostają display:contents wewnątrz zakładek/
   panelu → replaceWith podmienia sekcję W MIEJSCU; stan zakładki (is-active) i
   pozycja scrolla osi żyją na STABILNYCH wrapperach POZA kotwicą. */
.watch__grid--live { gap: var(--space-md); }
.watch__col--main,
.watch__col--aside { display: contents; }

/* Kolejność: stos na mobile ORAZ sekcje w kolumnie na desktopie (jedna mapa). */
.watch__grid--live .board              { order: 1; }
.watch__grid--live .hf-actions         { order: 2; }
.watch__grid--live .match-head         { order: 3; }
.watch__grid--live .tabs               { order: 4; }
.watch__grid--live .live-sec--timeline { order: 5; }
.watch__grid--live .live-sec--lineups  { order: 6; }
.watch__grid--live .live-sec--stats    { order: 7; }
.watch__grid--live .live-sec--others   { order: 8; }
/* Własne marginesy sekcji znosimy — rytm pionowy daje `gap`. */
.watch__grid--live .hf-actions,
.watch__grid--live .tabs,
.watch__grid--live .live-sec--timeline,
.watch__grid--live .live-sec--lineups,
.watch__grid--live .live-sec--stats,
.watch__grid--live .live-sec--others { margin: 0; }

/* P-f: na live match-head to już TYLKO ukryty h1 (blok faktów wycięty — duplikat
   telebimu: minuta + połowa są na telebimie, a data nie jest istotna w live).
   `display:contents` usuwa PUSTY box nagłówka (h1 sr-only zostaje w DOM i dla AT),
   więc nie dokłada zdublowanego `gap` (md+md) w stosie; `margin-top` na zakładkach
   domyka odstęp przycisk fav → zakładki do xs (zamiast md) — działa tak samo we
   flexie (desktop) i gridzie (mobile). */
.watch__grid--live .match-head { display: contents; }
.watch__grid--live .tabs { margin-top: calc(var(--space-xs) - var(--space-md)); }

/* Oś czasu: nagłówek .panel__title pokazujemy tylko na desktopie (na mobile rolę
   tytułu pełni przycisk zakładki „Oś czasu"). */
.watch__grid--live .live-sec--timeline .panel__title { display: none; }

@media (min-width: 1220px) {
  .watch__grid--live { grid-template-columns: minmax(0, 1fr) var(--match-sidebar-width); column-gap: var(--page-horizontal-margin); }
  .watch__col--main  { display: flex; flex-direction: column; gap: var(--space-md); grid-column: 1; min-width: 0; }
  .watch__col--aside { display: flex; flex-direction: column; gap: var(--space-md); grid-column: 2; min-width: 0; }

  /* Przycisk „Oś czasu" znika z paska — oś jest osobnym panelem w prawej kolumnie. */
  .watch__grid--live .tabs .tab[data-tab="timeline"] { display: none; }

  /* Oś czasu = samodzielny, ZAWSZE widoczny panel (poza systemem zakładek). Wygrywa
     z .tabpanel{display:none} specyficznością (0,2,0 > 0,1,0). */
  .watch__grid--live .live-sec--timeline {
    display: block;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--space-md);
  }
  .watch__grid--live .live-sec--timeline .panel__title { display: flex; }
  /* Przewijalny obszar listy: max-height = wysokość telebimu (ustawia match-display.js).
     Kontener STABILNY (poza kotwicą) → scroll i max-height przeżywają podmianę pollera. */
  .watch__grid--live .live-timeline-scroll { overflow-y: auto; overscroll-behavior: contain; }
}

/* Placeholder pustej żywej sekcji (oś/statystyki przed pojawieniem się danych). */
.live-empty { color: var(--text-muted); font-size: 14px; }

/* ============================================================
   ZAPOWIEDŹ — PLAYER OCZEKIWANIA (ekran odliczania zamiast wideo)
============================================================ */
.preview {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 130% at 50% -25%, var(--accent-soft), transparent 58%),
    radial-gradient(90% 90% at 50% 130%, oklch(0 0 0 / 0.28), transparent 60%),
    repeating-linear-gradient(135deg, var(--thumb-a) 0 16px, var(--thumb-b) 16px 32px);
  display: grid; place-items: center;
}
.preview::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(50% - 0.5px), var(--border) 50%, transparent calc(50% + 0.5px));
  opacity: 0.7; pointer-events: none; }
.preview::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: clamp(120px, 26%, 220px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid var(--border); border-radius: 50%; opacity: 0.7; pointer-events: none; }

.preview__badge {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px);
  border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.preview__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-live 1.6s ease-in-out infinite; }
/* ODWOŁANY: ten sam badge, wygaszony — kropka neutralna, bez pulsu. */
.preview__badge--off .dot { background: var(--text-faint); animation: none; }
.preview__live-soon {
  position: absolute; right: 16px; top: 16px; z-index: 3;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.5); backdrop-filter: blur(3px);
  border: 1px solid oklch(1 0 0 / 0.18);
  color: #fff; font-size: 12px; font-weight: 800;
}
@keyframes pulse-live { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.preview__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3.5vh, 28px); padding: clamp(16px, 4vw, 40px); width: 100%; }
.preview__match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 4vw, 56px); width: 100%; max-width: 760px; }
.preview__vs { font-size: clamp(15px, 2.4vw, 26px); font-weight: 800; letter-spacing: 0.14em; color: var(--text-faint); }
/* ODWOŁANY: etykieta stanu w miejscu licznika. */
.preview__status { font-size: clamp(13px, 1.6vw, 16px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }

.team-slot { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 14px); text-align: center; min-width: 0; }
.team-slot__flag { height: clamp(40px, 7.4vw, 76px); border-radius: 4px; }
.team-slot__name { font-weight: 800; font-size: clamp(15px, 2.1vw, 24px); letter-spacing: -0.02em; line-height: 1.15; }

/* Wielki licznik w playerze (bazowy .countdown + modyfikator --hero) */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xs); text-align: center; }
.countdown .unit { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 6px 9px; }
.countdown .val { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: 0.01em; }
.countdown .lab { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.countdown.is-soon .val { color: var(--live); }
.preview__count-label { font-size: clamp(10px, 1.4vw, 13px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.countdown--hero { gap: clamp(8px, 1.6vw, 16px); width: 100%; max-width: 560px; }
.countdown--hero .unit { background: oklch(0 0 0 / 0.34); backdrop-filter: blur(3px); border: 1px solid oklch(1 0 0 / 0.12); padding: clamp(8px, 1.6vh, 16px) 4px clamp(6px, 1.2vh, 12px); }
[data-theme="light"] .countdown--hero .unit { background: oklch(1 0 0 / 0.6); border-color: var(--border); }
.countdown--hero .val { font-size: clamp(26px, 6vw, 56px); color: #fff; }
[data-theme="light"] .countdown--hero .val { color: var(--text); }
.countdown--hero .lab { color: oklch(1 0 0 / 0.7); font-size: clamp(9px, 1vw, 11px); }
[data-theme="light"] .countdown--hero .lab { color: var(--text-faint); }
.countdown--hero.is-soon .val { color: var(--accent); }

/* ============================================================
   LIVE — TELEBIM / SCOREBOARD (statyczny; bez overlayów/demo)
============================================================ */
.board {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 130% at 50% -20%, oklch(0.32 0.05 160 / 0.55), transparent 60%),
    radial-gradient(90% 80% at 50% 125%, oklch(0 0 0 / 0.55), transparent 65%),
    oklch(0.135 0.012 250);
  display: grid; place-items: center; color: #fff; isolation: isolate;
}
.board::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 0.5px), oklch(1 0 0 / 0.08) 50%, transparent calc(50% + 0.5px)); }
.board::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: clamp(120px, 24%, 200px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid oklch(1 0 0 / 0.08); border-radius: 50%; pointer-events: none; }
.board__top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.board__live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--live); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.board__live .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse-live 1.4s ease-in-out infinite; }
.board__min { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: oklch(0 0 0 / 0.5); border: 1px solid oklch(1 0 0 / 0.18); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.board__min .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse-live 1.4s ease-in-out infinite; }
.board__score { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 48px); width: 100%; max-width: 720px; padding: clamp(16px, 4vw, 40px); }
.board__team { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 14px); text-align: center; }
.board__team .country-flag { height: clamp(34px, 5.6vw, 60px); border-radius: 4px; }
.board__team .nm { font-weight: 800; font-size: clamp(13px, 1.7vw, 20px); letter-spacing: -0.02em; }
.board__nums { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 16px); }
.board__nums .n { font-size: clamp(40px, 9vw, 82px); font-weight: 800; line-height: 1; min-width: clamp(36px, 8vw, 74px); text-align: center; font-variant-numeric: tabular-nums; }
.board__nums .sep { font-size: clamp(26px, 5vw, 48px); opacity: 0.45; font-weight: 700; }
.board__half { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(1 0 0 / 0.55); }

/* ============================================================
   PRAWY ASIDE — „Inne mecze" (mini-karty z mini-licznikiem)
============================================================ */
.mini-match {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--space-sm); margin-bottom: var(--space-sm);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mini-match:last-child { margin-bottom: 0; }
.mini-match:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.mini-match__phase { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; color: var(--text-faint); margin-bottom: var(--space-2xs); }
.mini-match__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2xs); }
.mini-team { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: 13px; }
.mini-team.away { flex-direction: row-reverse; }
.mini-team .country-flag { height: 15px; border-radius: 2px; }
.mini-team__code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-clock { justify-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-clock svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-clock.is-soon { background: var(--live-soft); color: var(--live); }

/* ---- Mobilny telebim/ekran oczekiwania pełną szerokością (jak player16) ---- */
@media (max-width: 768px) {
  .preview { width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: none; aspect-ratio: auto; }
  .preview__inner { padding-top: 64px; padding-bottom: 28px; }
  .board { width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: none; }
}