/* w2_glowa.css */
/* warsztat2: warstwa glowa (19.10, recenzja dyrektora UX) */

/* P3-5: „Przejdź do treści” - pierwszy element dla klawiatury, widoczny dopiero z fokusem */
.w2-skok {
  position: absolute; left: 12px; top: 8px; z-index: 1000;
  padding: 10px 16px; border-radius: 12px;
  background: var(--k-tlo-1e4b95, #1e4b95); color: var(--k-tx-ffffff, #fff); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.w2-skok:focus, .w2-skok:focus-visible { transform: none; outline: 2px solid var(--k-ln-ffffff, #fff); outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) { .w2-skok { transition: transform .15s; } }
main#tresc:focus { outline: none; }

/* P1-9: strona 404 - karta K2 z trzema kaflami (Dziś, Mecze, Tabela) */
.w2-404 { max-width: 992px; margin: 24px auto 40px; }
.w2-404 .zw-wkl { background: var(--k-tlo-ffffff, #fff); border-radius: 16px; padding: 20px 20px 16px; }
.w2-404-tytul { font-size: 1.6rem; line-height: 1.2; margin: 0 0 8px; }
.w2-404-zdanie { color: var(--ink-muted); margin: 0 0 18px; }
.w2-404-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.w2-404-kafle a {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 14px; border-radius: 14px; background: var(--k-tlo-f5f5f7, #f5f5f7);
  color: inherit; text-decoration: none; font-weight: 600;
}
.w2-404-kafle a:hover { background: var(--k-tlo-ebebef, #ebebef); }
.w2-404-kafle a:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }
.w2-404-kafle .pl { width: 40px; height: 40px; flex: none; }
@media (max-width: 640px) {
  .w2-404 { margin-top: 12px; }
  .w2-404 .zw-wkl { padding: 16px 12px 12px; }
  .w2-404-kafle { grid-template-columns: 1fr; }
}

/* Michał 19.10: słowo „Whistar” obok ikony w pasku herbów także na telefonie
   (ekstraklasa.css chowa je przy ≤ 640 px); reszta paska bez zmian */
@media (max-width: 640px) {
  .ekl-pasek-marka-slowo { display: inline; font-size: 1rem; margin-left: 6px; }
}
/* logo ligi w pasku herbów rezerwuje szerokość przed wczytaniem (loading=lazy): bez tego ekl_gora.js
   przewijał wybrany herb o szerokość logo (~105 px) za mało i herb Wisły wystawał za prawą krawędź */
.ekl-pasek-link-liga .ekl-pasek-logo[src*="/logos/ekstraklasa.svg"] { aspect-ratio: auto 1584.81 / 451.56; }
/* w2_mecz.css */
/* warsztat2: warstwa mecz (19.10, recenzja dyrektora UX) - strona meczu `/ekstraklasa/mecz/<slug>/`.
   Render: templates/partials/_w2_mecz.html.j2 (kontekst src/w2_mecz.py). Kolory z tokenów
   (--para-gosp/-remis/-gosc z tokens.css, --ink, --muted, --bg-soft, --bg-card), herby miarą --herb-gesty (§8.36). */

/* ── Karty K2 (_zw_karta) na stronie meczu: biała wkładka jak .mz-wkl ── */
.mz-k2 .zw-karta .zw-wkl { background: var(--bg-card, #fff); border-radius: 16px; padding: 12px 16px; }
.mz-k2 .zw-karta .zw-wkl > :first-child { margin-top: 0; }
.mz-k2 .zw-karta .zw-wkl > :last-child { margin-bottom: 0; }
.mz-k2 .w2-przed .zp-podpis { margin: 6px 0 0; }

/* ── P0-1 „przed zapowiedzią”: Forma ── */
.w2-forma-k { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.w2-forma-w { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.w2-forma-kl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.w2-forma-kl > span { overflow-wrap: normal; }   /* całe słowa; przy dużym tekście znaczki schodzą pod nazwę (P1-4) */
.w2-forma .ekl-st-forma { white-space: nowrap; flex: none; }
.w2-forma .ekl-st-forma span { width: 1.6em; line-height: 1.6em; font-size: .82rem; margin-right: 3px; }
.w2-forma .ekl-st-forma span:last-child { margin-right: 0; }

/* ── P0-1: Zapowiedź (zdanie + kafle do klubów) ── */
.w2-zap-zdanie { margin: 0 0 10px; color: var(--ink); font-size: .95rem; }
/* kafle: tyle kolumn, ile się mieści (4 na komputerze, 2 na telefonie, 1 przy tekście 200% - P1-4 trzeciej recenzji) */
.w2-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 8px; }
.w2-kafel { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 12px;
  background: var(--bg-soft, #f5f5f7); color: var(--ink); text-decoration: none; }
.w2-kafel:hover, .w2-kafel:focus-visible { background: var(--k-tlo-e9e9ee, #e9e9ee); }
.w2-kafel > span { display: flex; flex-direction: column; min-width: 0; }
.w2-kafel b { font-weight: 600; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.w2-kafel small { color: var(--muted, #6e6e73); font-size: .78rem; line-height: 1.3; }
.w2-kafel .club-logo-sm { flex: none; }

/* ── P1-6 „Przebieg szans”: legenda i podpisy w HTML (stały rozmiar 12-13 px), oś 0/50/100%, liczby końcowe ── */
.w2-prz-leg { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-size: 13px; color: var(--ink); line-height: 1.4; }
.w2-prz-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.w2-prz-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.w2-prz-leg i.d { background: var(--para-gosp); } .w2-prz-leg i.x { background: var(--para-remis); } .w2-prz-leg i.g { background: var(--para-gosc); }
/* gość = kreskowane pole (wariant F, Michał 19.10) - legenda kwadratem w tym samym kreskowaniu co pole wykresu */
.w2-prz-leg i.g { border-radius: 2px; background: repeating-linear-gradient(45deg, var(--para-gosc) 0 2px, color-mix(in srgb, var(--para-gosc) 55%, transparent) 2px 4px); }
.w2-prz-siatka { display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px; column-gap: 8px;
  grid-template-areas: ". pd ." "os plot kon" ". pg ." ". min ."; }
.w2-prz-pas { position: relative; z-index: 2; height: calc(var(--rzedy, 1) * 32px); }   /* rząd = obszar dotyku 32 px (P2-7) */   /* dymek nad osią minut */
.w2-prz-pas.is-d { grid-area: pd; }
.w2-prz-pas.is-g { grid-area: pg; }
.w2-prz-os { grid-area: os; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  font-size: 12px; line-height: 1; color: var(--muted, #6e6e73); font-variant-numeric: tabular-nums; }
.w2-prz-os span:first-child { margin-top: -1px; } .w2-prz-os span:last-child { margin-bottom: -1px; }
.w2-prz-plot { grid-area: plot; position: relative; height: 180px; }
.w2-prz-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.w2-prz-svg path { stroke: none; }
.w2-prz-svg path.d { fill: var(--para-gosp); fill-opacity: .82; }
.w2-prz-svg path.x { fill: var(--para-remis); fill-opacity: .45; }
.w2-prz-svg path.g { fill: var(--para-gosc); fill: url(#w2-prz-kr) var(--para-gosc); fill-opacity: .82; }
/* wzór kreskowania pola gościa (<pattern id="w2-prz-kr"> w SVG szablonu i live_wynik.js): pasy pełne na 55% tle */
.w2-prz-svg .kr-tlo { fill: var(--para-gosc); fill-opacity: .55; } .w2-prz-svg .kr-pas { fill: var(--para-gosc); }
.w2-prz-svg line { vector-effect: non-scaling-stroke; }
.w2-prz-svg line.pol { stroke: var(--k-ln-ffffff, #fff); stroke-opacity: .75; stroke-width: 1; stroke-dasharray: 3 4; }
.w2-prz-svg line.zd { stroke: var(--k-ln-ffffff, #fff); stroke-opacity: .9; stroke-width: 1; stroke-dasharray: 2 3; }
.w2-prz-kon { grid-area: kon; display: flex; flex-direction: column; justify-content: space-between;
  font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.w2-prz-kon b { font-weight: 700; }
.w2-prz-kon b.d { color: var(--para-gosp-tx); } .w2-prz-kon b.x { color: var(--para-remis-tx); } .w2-prz-kon b.g { color: var(--para-gosc-tx); }
.w2-prz-min { grid-area: min; position: relative; height: 18px; font-size: 12px; color: var(--muted, #6e6e73); }
.w2-prz-min span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.w2-prz-min span:first-child { transform: none; }
.w2-prz-podpis { margin: 12px 0 0; }

/* Znaczniki goli (⚽) i czerwonych: gospodarz nad wykresem, gość pod nim; dymek = hover, fokus albo stuknięcie */
.w2-prz-zn { position: absolute; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  transform: translateX(-50%); display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--bg-card, #fff); font: inherit; font-size: 12px; line-height: 1; color: var(--ink); }
.w2-prz-pas.is-d .w2-prz-zn { bottom: calc(var(--rz, 0) * 32px + 5px); box-shadow: inset 0 0 0 2px var(--para-gosp); }
.w2-prz-pas.is-g .w2-prz-zn { top: calc(var(--rz, 0) * 32px + 5px); box-shadow: none; border: 2px dashed var(--para-gosc); }
/* P2-7: przezroczysty obszar dotyku 32 px wokół znacznika 22 px (WCAG 2.5.8); schodki liczy live_wynik.js `schodki` */
.w2-prz-zn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; }
.w2-prz-zn.is-czerwona .w2-prz-ik { display: block; width: 8px; height: 11px; border-radius: 2px; background: var(--k-tlo-d62d20, #d62d20); }
.w2-prz-zn:hover, .w2-prz-zn:focus-visible, .w2-prz-zn.is-open { z-index: 3; }
.w2-prz-zn:focus-visible { outline: 2px solid var(--para-gosc-tx); outline-offset: 2px; }
.w2-prz-dym { display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 30; padding: 6px 10px;
  border-radius: 8px; background: var(--bg-card, #fff); color: var(--ink); box-shadow: 0 4px 16px var(--k-cn-00000029, rgba(0, 0, 0, .16));
  font-size: 13px; line-height: 1.35; white-space: nowrap; text-align: left; pointer-events: none; }
.w2-prz-dym small { display: block; color: var(--muted, #6e6e73); font-size: 12px; }
.w2-prz-pas.is-d .w2-prz-dym { bottom: calc(100% + 6px); }
.w2-prz-pas.is-g .w2-prz-dym { top: calc(100% + 6px); }
.w2-prz-zn.is-lewo .w2-prz-dym { left: -4px; transform: none; }
.w2-prz-zn.is-prawo .w2-prz-dym { left: auto; right: -4px; transform: none; }
.w2-prz-zn:hover .w2-prz-dym, .w2-prz-zn:focus-visible .w2-prz-dym, .w2-prz-zn.is-open .w2-prz-dym { display: block; }

/* ── Karta „Kolejka N” po meczu: wiersze jak na Mecze (mk-karta), tu bez akordeonu ── */
.mz-k2 .w2-kolejka { margin-top: 12px; }

/* ── P1-1 hero w trakcie meczu (live_wynik.js `applyEklHero`): wynik w rozmiarze hero po meczu, minuta z kropką,
   „do przerwy”, strzelcy pod nazwami, kolejka · data · stadion jedną linią meta. Kolory z tokenów. ── */
.match-hero.w2-hero-live .vr-center.vr-live-on { gap: 2px; }
.match-hero.w2-hero-live .vr-live-on .vr-l1 { font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.05; font-weight: 700; letter-spacing: 0; }
.match-hero.w2-hero-live .vr-live-on .ekl-live-min { font-size: clamp(.9rem, 2.2vw, 1rem); }
.match-hero.w2-hero-live.is-po .vr-l1 { color: var(--ink); }
.w2-hero-stan { color: var(--muted, #6e6e73); font-size: clamp(.85rem, 2.2vw, .95rem); font-weight: 600; }
.w2-hero-ht { color: var(--muted, #6e6e73); font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zp-hero-big.w2-hero-live .zp-hb-mid { justify-content: center; padding-top: 14px; }
.zp-hero-big.w2-hero-live .zp-hb-mid > .match-eyebrow,
.zp-hero-big.w2-hero-live .zp-hb-mid > .match-tile-meta { display: none; }
.match-hero .w2-hb-meta { margin: 6px 0 0; text-align: center; }
.w2-hb-sc { display: block; max-width: 100%; margin-top: 2px; font-size: .85rem; line-height: 1.35; color: var(--ink-muted, var(--muted)); }
/* wpis zdarzenia: minuty niełamliwe, przecinek przy poprzednim wpisie (P1-5); w wierszach list cały wpis nowrap */
.w2-zd-m { white-space: nowrap; }
.ekl-row .w2-zd { white-space: nowrap; }
.match-hero .w2-hero-zd .w2-zd, .w2-hb-sc .w2-zd { white-space: normal; }
/* P1-7: co gol zmienił w szansach - pod wynikiem (strona meczu, do następnego gola) i w wierszu Dziś (4 s) */
.mz-hero .w2-gol-zmiana { margin: 10px auto 0; max-width: 560px; padding: 8px 12px; border-radius: 12px; background: var(--bg-soft, #f5f5f7);
  color: var(--ink); font-size: .9rem; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.mecze-row-main .w2-gol-zmiana { display: block; margin-top: 3px; font-size: .72rem; line-height: 1.3; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
/* Dziś: podpis paska szans nazwami - części niełamliwe */
.ekl-lsz-num .w2-lsz-p { white-space: nowrap; }

/* ── P0-1 składy: dorobek sezonu szarą plakietką tekstem, zdarzenia meczu (live) ciemną plakietką ── */
.zp-s3-g .bd.w2-sezon span { background: var(--bg-soft, #f5f5f7); color: var(--muted, #6e6e73); box-shadow: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w2-sezon-nota { margin: 8px 0 0; }
.w2-sk-live { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.w2-sk-zd { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 4px; background: var(--ink); color: var(--bg-card, #fff);
  font-size: .62rem; font-weight: 700; line-height: 1.45; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── P2-2 „Co może zaważyć”: zdanie w pustej kolumnie ── */
.w2-cz-brak { margin: 4px 0 0; }

/* ── P2-3 legenda tabeli w czasie meczu ── */
.w2-leg-live b { color: var(--accent); font-weight: 400; }
.w2-leg-wlasna { margin: 8px 4px 0; }

/* ── Trzecia recenzja UX (19.10): atrybut hidden wygrywa z display kart (karty chowa warstwa live) ── */
.match-page [hidden] { display: none !important; }

/* ── P1-6 „Co to zmienia”: dwie kolumny (gospodarz | gość), kolor pary tokenami, telefon i duży tekst = jedna ── */
.w2-cz .zw-wkl { container-type: inline-size; }
.w2-cz-pod { margin: 0 0 10px; color: var(--muted, #6e6e73); font-size: .85rem; }
.w2-cz-kol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; }
.w2-cz-k { min-width: 0; padding-left: 12px; border-left: 3px solid var(--para-gosp); }
.w2-cz-k.is-g { border-left: 3px dashed var(--para-gosc); }
.w2-cz-klub { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.w2-cz-k.is-d .w2-cz-klub { color: var(--para-gosp-tx); } .w2-cz-k.is-g .w2-cz-klub { color: var(--para-gosc-tx); }
.w2-cz-klub > span { min-width: 0; overflow-wrap: break-word; }
.w2-cz-klub .club-logo-sm { flex: none; }
.w2-cz-l { margin: 0; }
.w2-cz-w { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; padding: 5px 0;
  border-top: 1px solid var(--k-ln-e3e3e8, #e3e3e8); }
.w2-cz-w:first-child { border-top: 0; }
.w2-cz-w dt { color: var(--muted, #6e6e73); font-size: .9rem; }
.w2-cz-w dd { margin: 0; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w2-cz-w dd b { font-weight: 700; }
.w2-cz-str { color: var(--muted, #6e6e73); }
.w2-cz .w2-zm { margin-left: 6px; font-size: .78em; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.w2-cz-bez { margin: 4px 0 0; }
.w2-cz-nast { margin: 8px 0 0; font-size: .88rem; line-height: 1.4; color: var(--ink); }
.w2-cz-nast-e, .w2-cz-nast-gdzie { color: var(--muted, #6e6e73); }
.w2-cz-nast-k { white-space: nowrap; font-variant-numeric: tabular-nums; }
.w2-cz-podpis { margin: 12px 0 0; }
@container (max-width: 34em) {
  .w2-cz-kol { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ── P1-2: linia „przed meczem” pod paskiem na żywo / w karcie „Szanse przed meczem” ── */
.w2-przed-linia { margin: 8px 0 0; line-height: 1.5; }
.w2-przed-linia .w2-lsz-p { white-space: nowrap; }
.mz-live .w2-przed-linia { margin: 6px 0 4px; }

/* ── P3-1 „Ostatnio między nimi”: wiersze mecz_krotki jak karta kolejki ── */
.mz-k2 .w2-h2h { margin-top: 12px; }

/* ── Telefon ── */
@media (max-width: 640px) {
  .mz-k2 .zw-karta .zw-wkl { padding: 10px 12px; }
  .w2-forma-k { grid-template-columns: 1fr; gap: 10px; }
  .w2-kafel { padding: 9px 10px; gap: 8px; }
  .w2-prz-siatka { grid-template-columns: 34px minmax(0, 1fr) 40px; column-gap: 6px; }
  .w2-prz-plot { height: 160px; }
  .w2-hb-sc { font-size: .78rem; }
  .mz-hero .w2-gol-zmiana { font-size: .85rem; }
  /* Hero z dużymi herbami w trakcie meczu: strzelcy schodzą pod oba kluby, każda strona na połowę szerokości
     karty (kolumna boku ma ~90 px, wpis „90+2' (k.),” przy tekście 200% ~120 px - strona miała 423-462 px
     przy 390). Bok rozkłada się w siatkę hero (display: contents): herb, nazwa, miejsce jak dotąd nad sobą,
     środek obok; ostatni rząd = strzelcy gospodarza | strzelcy gościa. Środek 1.5fr dzielony na pół. */
  .zp-hero-big .zp-hb:has(.w2-hb-sc) { grid-template-columns: 1fr .75fr .75fr 1fr; row-gap: 0;
    grid-template-areas: "la m m lb" "na m m nb" "pa m m pb" "sa sa sb sb"; }
  .zp-hb:has(.w2-hb-sc) > .zp-hb-side { display: contents; }
  .zp-hb:has(.w2-hb-sc) > .zp-hb-mid { grid-area: m; }
  .zp-hb:has(.w2-hb-sc) > .zp-hb-side > * { justify-self: center; text-align: center; margin-top: 6px; min-width: 0; max-width: 100%; }
  .zp-hb:has(.w2-hb-sc) > .zp-hb-side > .zp-hb-logo { margin-top: 0; }
  .zp-hb:has(.w2-hb-sc) > .vr-a > .zp-hb-logo { grid-area: la; } .zp-hb:has(.w2-hb-sc) > .vr-b > .zp-hb-logo { grid-area: lb; }
  .zp-hb:has(.w2-hb-sc) > .vr-a > .vr-link { grid-area: na; } .zp-hb:has(.w2-hb-sc) > .vr-b > .vr-link { grid-area: nb; }
  .zp-hb:has(.w2-hb-sc) > .vr-a > .zp-hb-poz { grid-area: pa; } .zp-hb:has(.w2-hb-sc) > .vr-b > .zp-hb-poz { grid-area: pb; }
  .zp-hb:has(.w2-hb-sc) > .vr-a > .w2-hb-sc { grid-area: sa; } .zp-hb:has(.w2-hb-sc) > .vr-b > .w2-hb-sc { grid-area: sb; }
  .zp-hb:has(.w2-hb-sc) > .zp-hb-side > .w2-hb-sc { margin-top: 8px; padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .w2-kafel { transition: none; }
  .w2-hero-live .ekl-live-min::before, .w2-hero-live .ekl-live-colon { animation: none; }
}
/* po gwizdku wynik stoi: bez migania i pulsu niezależnie od ustawień */
.w2-hero-live.is-po .ekl-live-colon, .w2-hero-live.is-po .ekl-live-min::before { animation: none; }

/* ── P1-4 trzeciej recenzji UX: nagłówek meczu przy dużym tekście (200% na 390 px) ──
   Nazwy łamią się wyłącznie między słowami (bez overflow-wrap: anywhere), wynik i godzina skalują się od szerokości
   karty (cqi), nazwy w trzech kolumnach maleją z kartą jak dotychczasowe progi 380/340 px. Gdy karta ma mniej niż
   17em (tekst powiększony ~125% i więcej na telefonie), nagłówek układa się w słup: gospodarz, środek, gość -
   najdłuższe słowo nazwy ma całą szerokość karty. Pomiar: zero przepełnień, scrollWidth strony 390 (przed, w trakcie, po). */
.mz-k2 .mz-hero .mz-wkl { container-type: inline-size; container-name: w2hero; }
.mz-k2 .match-hero .vr-name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 640px) {
  .mz-k2 .mz-hero .match-hero .vr-name { font-size: min(1rem, 4.9cqi); }
}
.mz-k2 .mz-hero .match-hero .vr-score { font-size: clamp(1.25rem, 10cqi, 2.8rem); }
.mz-k2 .mz-hero .zp-hero-big .vr-center.vr-time { font-size: clamp(1.25rem, 8cqi, 2.1rem); }
.mz-k2 .mz-hero .match-hero.w2-hero-live .vr-live-on .vr-l1 { font-size: clamp(1.5rem, 11cqi, 2.8rem); }
@container w2hero (max-width: 17em) {
  .mz-k2 .mz-hero .match-hero .vr-name { font-size: 1.15rem; }
  .mz-k2 .mz-hero .match-eyebrow, .mz-k2 .mz-hero .match-tile-meta { white-space: normal; }
  /* zapowiedź / przed zapowiedzią / w trakcie: jedna kolumna, boki z powrotem kolumną (także z listą strzelców) */
  .mz-k2 .mz-hero .zp-hero-big .zp-hb, .mz-k2 .mz-hero .zp-hero-big .zp-hb:has(.w2-hb-sc) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 10px; }
  .mz-k2 .mz-hero .zp-hb > .zp-hb-side, .mz-k2 .mz-hero .zp-hb:has(.w2-hb-sc) > .zp-hb-side { display: flex; }
  .mz-k2 .mz-hero .zp-hb > .zp-hb-mid { grid-area: auto; padding-top: 0; }
  .mz-k2 .mz-hero .zp-hero-big.w2-hero-live .zp-hb-mid { padding-top: 0; }
  /* rozegrany: gospodarz ze strzelcami, wynik, gość ze strzelcami - jeden pod drugim (jak hero w trakcie) */
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "a a" "sa sa" "c c" "r r" "b b" "sb sb"; row-gap: 8px; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-a { grid-area: a; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-center { grid-area: c; justify-self: center; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .ekl-rozstrz { grid-area: r; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-b { grid-area: b; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-sc-a { grid-area: sa; text-align: center; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-sc-b { grid-area: sb; text-align: center; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .versus-row > .vr-sc-mid { display: none; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .vr-team { flex-direction: column; align-items: center; text-align: center; }
  .mz-k2 .mz-hero .match-hero:not(.zp-hero-big) .vr-a { flex-direction: column-reverse; }
}


/* ── P1-4: boisko składu przy dużym tekście - podpisy zawodników łamią się między słowami („R. / Leszczyński”),
   kolumny zawodnika kurczą się zamiast wypychać rząd, rozmiar podpisu z szerokości boiska (grafika ma stałą skalę). ── */
.mz-k2 .zp-s3-boisko { container-type: inline-size; }
.mz-k2 .zp-s3-g { width: auto; flex: 0 1 86px; min-width: 0; font-size: min(.7rem, 3.2cqi); }
.mz-k2 .zp-s3-g .nz { max-width: 100%; overflow-wrap: normal; hyphens: manual; }
.mz-k2 .zp-s3-g .bd { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.mz-k2 .zp-s3-g .bd span { font-size: min(.6rem, 2.8cqi); }
@media (max-width: 640px) {
  .mz-k2 .zp-s3-g { flex-basis: 66px; font-size: min(.64rem, 3.2cqi); }
}
/* ── P1-4: statystyki po meczu przy dużym tekście - nazwa statystyki zawija się między słowami, kolumna liczb rośnie z tekstem ── */
.mz-k2 .mz-st { container-type: inline-size; }
@container (max-width: 15em) { .mz-k2 .mz-st-w { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; } }
.mz-k2 .mz-st-w .nm { min-width: 0; overflow-wrap: normal; white-space: normal; line-height: 1.25; }
.mz-k2 .zp-s3-g .mz-ev { font-size: min(.62rem, 3cqi); }
.mz-k2 .zp-s3-g .mz-ev .ev { font-size: min(.78rem, 3.6cqi); }
/* w2_klub.css */
/* warsztat2: warstwa klub (19.10, recenzja dyrektora UX): strona klubu i Przegląd w kartach K2
   (P1-1, P1-8), karta „Od Twojej ostatniej wizyty” (P3-2), radary stuknięciem (P2-1),
   podpisy płytek przy dużym tekście (P1-5). Ładowany globalnie z base.html.j2. */

/* --- P1-5: podpisy płytek znikają, gdy przy dużym tekście nie mieszczą się w płytce (ekl_gora.js) --- */
.ekl-plytki.bez-podpisow .ekl-plytka-nz { display: none; }

/* --- Karta-hero klubu (strona klubu, przegląd klubu) jak na Prognozach klubu --- */
.w2-klub-head { margin-bottom: 0; }
.w2-klub-head h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.01em; }
.w2-klub-head .ekl-muted, .w2-klub-head .ekl-hero-meta { margin: 2px 0 0; font-size: 0.84rem; color: var(--ink-muted); }
.w2-klub-head .ai-podpis { margin: 4px 0 0; }
.w2-klub-link { color: inherit; text-decoration: none; }
.w2-klub-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- Strona klubu: sekcje w kartach --- */
.w2-klub .zw-wkl > p:only-child { margin: 0; }
.w2-klub .ekl-arch-link { margin: 10px 0 0; }
.w2-klub .ekl-mlodz-link { margin: 0 0 8px; }
.w2-klub .ekl-dost-powod { white-space: normal; text-align: left; }
.w2-klub .dz-nagl .squad-count { color: var(--ink-muted); font-size: 0.9rem; font-weight: 600; }
/* znacznik radaru = przycisk (stuknięcie otwiera dymek, ekl_radar_mini.js) */
.w2-zn-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px;
  margin: -6px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--accent); cursor: pointer; }
.w2-zn-btn:hover { background: var(--bg-soft); }
.w2-zn-btn:focus-visible { outline: 2px solid var(--k-ln-004c9a, #004c9a); outline-offset: 1px; }
.w2-zn-btn .zw-zn-ikona { vertical-align: 0; }

/* --- Przegląd ligi i klubu: historie w białych wkładkach --- */
.w2-przeglad .w2-hist + .w2-hist, .w2-przeglad .w2-prz-dodatek + .w2-hist,
.w2-przeglad .w2-prz-dodatek + .w2-prz-dodatek { margin-top: 6px; }
.w2-przeglad .w2-hist .ekl-zr-blok > :first-child { margin-top: 0; }
.w2-przeglad .w2-hist .ekl-zr-blok:last-child > :last-child,
.w2-przeglad .w2-hist .ekl-zr-blok:last-child > p:last-of-type { margin-bottom: 0; }
.w2-przeglad .w2-hist .ekl-zr-blok + .ekl-zr-blok { margin-top: 0.9em; }
.w2-przeglad .w2-hist.brief-full { margin-bottom: 0; }
.w2-przeglad .dz-nagl .ai-podpis { margin: 0 0 0 auto; }
.w2-przeglad .ekl-przeglad-top { margin-bottom: 8px; }
.w2-przeglad .w2-prz-dodatek > :first-child { margin-top: 0; }
.w2-przeglad .w2-prz-dodatek > :last-child { margin-bottom: 0; }
.w2-przeglad .w2-prz-hero .brief-head { margin: 0; }
.w2-przeglad .w2-prz-hero .brief-head h1 { margin: 2px 0 4px; font-size: 1.4rem; }
.w2-przeglad .w2-prz-hero .brief-back { margin: 0; }
.w2-przeglad .ekl-brief-wariant .dz-nagl .eyebrow { margin: 0; }
.w2-przeglad > .ai-stopka { margin-top: 4px; }
/* herb przy nazwie klubu w tytule historii („Reszta dnia w klubach”) */
.w2-hist-klub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w2-hist-klub .w2-hist-herb { flex: none; object-fit: contain; }

/* --- Najbliższy mecz i ostatnia wizyta: wiersze jak w Meczach klubu (.mk-karta) --- */
.w2-przeglad .w2-najblizszy .zw-wkl p { margin: 0; }
/* recenzja UX 2 (P2-4): `.ekl-briefy-mecz` szarzy całą kartę - nazwy klubów w kolorze tekstu jak w Meczach */
.w2-przeglad .w2-najblizszy { color: var(--ink); font-size: inherit; }
.w2-wizyta .dz-nagl { flex-wrap: wrap; }
.w2-wizyta-kiedy { font-size: 0.86rem; }
.w2-wizyta .ekl-mk-lista[hidden] { display: none; }
.w2-wizyta .ekl-mk-lista + .w2-wizyta-reszta { margin-top: 6px; }
.w2-wizyta-reszta > p { margin: 0; }
.w2-wizyta-zmiany { margin: 0; padding-left: 1.1em; }
.w2-wizyta-cisza:not([hidden]) + .w2-wizyta-zmiany { margin-top: 6px; }
.w2-wizyta-zmiany li { margin: 2px 0; font-variant-numeric: tabular-nums; }

/* Recenzja UX 2 (P2-8): skróty pozycji jako <abbr title> (dymek przy najechaniu i stuknięciu - ekl_dymki.js)
   i jedna linia objaśnień pod tabelą, widoczna też na telefonie. Komórki bez podkreślenia (30 wierszy szumu). */
abbr.ekl-st-poz { text-decoration: none; cursor: help; }
.w2-legenda { margin: 8px 2px 0; font-size: .74rem; line-height: 1.45; color: var(--ink-muted); }
.w2-legenda abbr { text-decoration: none; font-weight: 600; color: var(--ink); }

/* Z przepływu 5 (recenzja UX 2): kadra na telefonie bez kolumny „Data ur.” - wiek zostaje, data jest na profilu. */
@media (max-width: 640px) { .ekl-squad .w2-kol-ur, .ekl-wypozyczeni .w2-kol-ur { display: none; } }
@media (max-width: 640px) {   /* ta sama treść bez przewijania w bok: nazwisko i nagłówki zawijają się */
  .ekl-squad td.ekl-club-cell, .ekl-wypozyczeni td.ekl-club-cell { white-space: normal; overflow-wrap: break-word; max-width: none; }
  .ekl-squad thead th, .ekl-wypozyczeni thead th { white-space: normal; }
  .ekl-squad .ekl-wyp { white-space: normal; }
  .ekl-squad td, .ekl-squad th, .ekl-wypozyczeni td, .ekl-wypozyczeni th { padding-left: 4px; padding-right: 4px; }
}

/* Recenzja UX 3 (P1-7): linia „N. miejsce, X pkt · najbliższy mecz: …” pod adresem stadionu - krój metryczki,
   tekst w kolorze treści (to odpowiedź, nie przypis), link bez podkreślenia do najechania. */
.w2-klub-head .w2-klub-teraz { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.w2-klub-head .w2-klub-teraz .w2-klub-link { color: inherit; }
.w2-klub-head .w2-dw { text-decoration: none; cursor: help; }

/* Recenzja UX 3 (P2-9): Przegląd ligi - rząd herbów pod kartą otwierającą prowadzi do historii klubów („Reszta dnia
   w klubach”, kotwice #klub-<slug>); herb w polu dotyku 40 px, miara --herb-wiersz (§8.36). Klub wybrany herbem
   (localStorage) = cienka ramka akcentu na jego historii i na herbie w rzędzie. */
.w2-przeglad .w2-prz-herby .zw-wkl { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; }
.w2-prz-herb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; }
.w2-prz-herb:hover { background: var(--bg-soft); }
.w2-prz-herb:focus-visible { outline: 2px solid var(--k-ln-004c9a, #004c9a); outline-offset: 1px; }
.w2-prz-herb .club-logo-sm { width: var(--herb-wiersz); height: var(--herb-wiersz); max-width: none; object-fit: contain; }
.w2-prz-herb.is-moj { box-shadow: inset 0 0 0 1px var(--accent); }
.w2-przeglad .w2-hist[id] { scroll-margin-top: calc(var(--ekl-top-h, 52px) + var(--ekl-nav-h, 56px) + 56px); }
.w2-przeglad .w2-hist.is-moj { box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 640px), (max-height: 520px) {
  .w2-przeglad .w2-hist[id] { scroll-margin-top: 64px; }   /* skok w dół chowa górę - zostaje belka dat */
}
/* w2_szanse.css */
/* warsztat2: warstwa szanse (19.10, recenzja dyrektora UX). Reguły zakresowane do stron Prognoz
   (.ekl-szanse-pub = /szanse/ i /szanse/<slug>/), ładowane po ekstraklasa.css - wygrywają kaskadą. */

/* P1-4: tabela szans na telefonie - nazwa klubu zawija się do dwóch linii zamiast wielokropka
   (§8.0b „długie nazwy się zawijają, nie okrajamy”), „#” wąska, procenty w stałych kolumnach.
   Pomiar: zero komórek ze scrollWidth > clientWidth przy 375 i 390 px. */
@media (max-width: 640px) {
  .ekl-szanse-pub .ekl-szanse-tab { table-layout: fixed; width: 100%; }
  .ekl-szanse-pub .ekl-szanse-tab th:nth-child(1),
  .ekl-szanse-pub .ekl-szanse-tab td:nth-child(1) { width: 1.4em; padding-left: 0; padding-right: 0; text-align: center; }
  .ekl-szanse-pub .ekl-szanse-tab th:nth-child(n+3):nth-child(-n+6),
  .ekl-szanse-pub .ekl-szanse-tab td:nth-child(n+3):nth-child(-n+6) { width: 3.2em; padding-left: 0; padding-right: 0; text-align: center; }
  /* nagłówek drobniej, ale kolumna dalej 3.2em kroju tabeli (.8rem) - „Spadek” mieści się bez cięcia */
  .ekl-szanse-pub .ekl-szanse-tab thead th:nth-child(n+3):nth-child(-n+6) { width: 2.56rem; font-size: .68rem; letter-spacing: -.01em; }
  .ekl-szanse-pub .ekl-szanse-tab td.ekl-club-cell {
    max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
    overflow-wrap: break-word; line-height: 1.15; text-align: left;
    /* wcięcie wiszące: druga linia nazwy zaczyna się pod pierwszą literą, nie pod herbem */
    padding-left: calc(var(--herb-wiersz) + .5em); text-indent: calc(-1 * var(--herb-wiersz) - .3em);
  }
}
@media (max-width: 389px) {   /* herb chowa się (ekstraklasa.css) - bez wcięcia */
  .ekl-szanse-pub .ekl-szanse-tab td.ekl-club-cell { padding-left: .2rem; text-indent: 0; }
}

/* P2-1: powód niedostępności w całości, zawinięty w komórce (zdjęte cięcie do 70 znaków). */
.ekl-szanse-klub .ekl-dost .ekl-dost-powod { white-space: normal; overflow-wrap: break-word; text-align: left; }
.ekl-szanse-klub .ekl-dost-do { white-space: nowrap; }
@media (max-width: 640px) {   /* warsztat: tabela dostępności mieści się w karcie telefonu */
  .ekl-szanse-klub .ekl-dost td:first-child, .ekl-szanse-klub .ekl-dost-do { white-space: normal; }
}

/* „Bez kogo szanse spadają” na telefonie: etykieta scenariusza zawija się, „(było N%)” schodzi pod liczbę -
   ta sama treść, bez przewijania tabeli w bok. */
@media (max-width: 640px) {
  .ekl-szanse-klub .ekl-bezkogo td:first-child { white-space: normal; min-width: 6.5em; }
  .ekl-szanse-klub .ekl-bezkogo td .ekl-muted { display: block; font-size: .68rem; white-space: nowrap; }
}

/* Oś X wykresów Prognoz klubu („Jak zmieniały się szanse”, „Siła w czasie”): podpisy przerzedzone w szablonie
   (makro `os_podpisy` w _ekl_szanse_wykres) - na telefonie „start1” i „10teraz” wchodziły na siebie.
   Pomiar 375/390/1280: zero nachodzących podpisów; na komputerze przy 11 kolejkach widać wszystkie. */
@media (max-width: 640px) { .ekl-hk-xax .os-bez-t { display: none; } }
@media (min-width: 641px) { .ekl-hk-xax .os-bez-k { display: none; } }

/* Recenzja UX 2 (P3-2): zmiana od ostatnich meczów przy procencie tabeli szans - mała, neutralna, w linii z liczbą. */
.ekl-szanse-pub .w2-zm { margin-left: 3px; font-size: .68em; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 641px) {   /* komputer: strzałka obok liczby, poza jej szerokością - procenty w kolumnie dalej wyrównane */
  .ekl-szanse-pub .ekl-szanse-tab .prob-trig { position: relative; }
  .ekl-szanse-pub .ekl-szanse-tab .w2-zm { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 640px) {   /* telefon: kolumny procentów mają 3.2em - strzałka schodzi pod liczbę */
  .ekl-szanse-pub .ekl-szanse-tab .w2-zm { display: block; margin: 1px 0 0; line-height: 1; }
}

/* Recenzja UX 2 (P2-4): oś „xG mecz po meczu” = herb rywala (pełna nazwa w dymku), herb mieści się w kolumnie. */
.ekl-xgm-ax .w2-xgm-herb { display: flex; justify-content: center; align-items: center; }
.ekl-xgm-ax .w2-xgm-herb .club-logo-sm { max-width: 100%; height: auto; max-height: var(--herb-gesty); }

/* „Komu kibicować” (Prognozy klubu, zgłoszenie Michała 19.10): na telefonie herby nachodziły na nazwy. Para meczu
   w dwóch liniach (szablon: .w2-kib-para > .w2-kib-k = herb + nazwa), herb w stałym pudełku --herb-gesty obok
   nazwy - bez ujemnego marginesu i bez chowania herba z reguł tabel szerokich (.ekl-standings-wide). */
.liga-ekstraklasa .ekl-kibic .w2-kib-para { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.liga-ekstraklasa .ekl-kibic .w2-kib-k { display: flex; align-items: center; gap: 6px; min-width: 0; }
.liga-ekstraklasa .ekl-kibic .w2-kib-k > span { overflow-wrap: normal; min-width: 0; }
.liga-ekstraklasa .ekl-kibic .w2-kib-k > .club-logo-sm,
.liga-ekstraklasa .ekl-kibic .w2-kib-k > img { display: block; flex: 0 0 auto; position: static; margin: 0;
  width: var(--herb-gesty); height: var(--herb-gesty); max-width: none; vertical-align: middle; }
.liga-ekstraklasa .ekl-kibic .w2-kib-k > span.club-logo-sm { display: inline-block; }

/* Recenzja UX 3 (P1-5): pigułki-kotwice Prognoz klubu (szablon: nav.w2-kotwice, znaczniki .w2-kotwica, JS w2_kotwice.js).
   Rząd przyklejony pod paskiem działów; na telefonie przesuwany w bok i chowany razem z górą (html.gora-schowana,
   to samo przesunięcie co .ekl-pasek-sticky). Aktywna pigułka = aria-current (scrollspy), wygląd wybranej zakładki. */
.pg-k2 .w2-kotwice { position: sticky; top: calc(var(--ekl-top-h) + var(--ekl-nav-h)); z-index: 39;
  margin: 0 0 12px; padding: 6px 0; background: var(--k-tlo-ffffffeb, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
.pg-k2 .w2-kotwice .ekl-st-zpill { text-decoration: none; }
/* komputer: 11 pigułek w jednym rzędzie kolumny 992 px (zwykłe zakładki zawijały się w dwa rzędy = 82 px lepkiego paska) */
@media (min-width: 641px) and (min-height: 521px) {
  .pg-k2 .w2-kotwice { flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .pg-k2 .w2-kotwice .ekl-st-zpill { flex: 0 0 auto; font-size: .8rem; padding: 4px 9px; }
}
.pg-k2 .w2-kotwice .ekl-st-zpill[aria-current="true"] { background: var(--k-tlo-accent, var(--accent)); color: var(--accent-ink); }
.pg-k2 .w2-kotwice .ekl-st-zpill:focus-visible { outline: 2px solid var(--k-ln-004c9a, #004c9a); outline-offset: 1px; }
/* warsztat: pod menu stoi jeszcze pasek linków Prognoz (.ekl-pasek-sticky) - tam rząd nie przykleja się */
body:has(.ekl-pasek-sticky *) .pg-k2 .w2-kotwice { position: static; }
/* bez JS: kotwica przewija tak, żeby tytuł sekcji nie wpadł pod przyklejoną górę i rząd pigułek */
.w2-kotwica { display: block; height: 0; scroll-margin-top: calc(var(--ekl-top-h) + var(--ekl-nav-h) + 60px); }
@media (max-width: 640px), (max-height: 520px) {
  .pg-k2 .w2-kotwice { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); transition: transform .25s ease; }
  .pg-k2 .w2-kotwice::-webkit-scrollbar { display: none; }
  html.gora-schowana .liga-ekstraklasa .pg-k2 .w2-kotwice { transform: translateY(calc(-1 * (var(--ekl-top-h) + var(--ekl-nav-h)))); }
  .w2-kotwica { scroll-margin-top: 60px; }   /* skok w dół chowa górę - zostaje sam rząd pigułek */
}
@media (prefers-reduced-motion: reduce) { .pg-k2 .w2-kotwice { transition: none; } }

/* Recenzja UX 3 (P2-2): pierwsza kolumna tabeli szans = miejsce w Tabeli dziś („Teraz”), strzałka sortowania
   przy „Mistrz”; nagłówki z dymkiem (title → ekl_dymki.js) bez podkreślenia, kursor pomocy. */
.ekl-szanse-pub .ekl-szanse-tab thead th[title] { cursor: help; }
.ekl-szanse-pub .ekl-szanse-tab .w2-sort { margin-left: 2px; font-weight: 500; color: var(--ink-muted); }
.ekl-szanse-pub .ekl-szanse-tab td.w2-teraz { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ekl-szanse-pub .ekl-szanse-tab th:nth-child(1),
  .ekl-szanse-pub .ekl-szanse-tab td:nth-child(1) { width: 2.7em; }
  .ekl-szanse-pub .ekl-szanse-tab thead th:nth-child(1) { font-size: .68rem; letter-spacing: -.01em; text-align: left; }
  /* „Mistrz↓” nie mieścił się w kolumnie 3.2em (44 > 41 px) - kolumna sortowania odrobinę szersza, strzałka ciaśniej */
  .ekl-szanse-pub .ekl-szanse-tab th:nth-child(3), .ekl-szanse-pub .ekl-szanse-tab td:nth-child(3) { width: 3.6em; }
  .ekl-szanse-pub .ekl-szanse-tab thead th:nth-child(3):nth-child(n+3) { width: 2.9rem; }
  .ekl-szanse-pub .ekl-szanse-tab .w2-sort { margin-left: 1px; }
}

/* „Pozostałe mecze” (Prognozy klubu): nazwa rywala w całości, zawinięta - bez wielokropka („Raków Częstoc…”, §8.0b). */
.ekl-szanse-klub .ekl-fix-pelna .ekl-kp-fix-opp { white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: break-word; line-height: 1.2; }
.ekl-szanse-klub .ekl-fix-pelna .ekl-kp-fix-row { align-items: center; }

/* Pieniądze z ligi (Michał 26.10): tabela miejsc wąska, liczby wyrównane */
.ekl-kasa-t { width: auto; min-width: 280px; }
.ekl-kasa-t td, .ekl-kasa-t th { padding-left: 14px; padding-right: 14px; }
.ekl-kasa-kafle { margin-bottom: var(--s3); }
.ekl-kasa-h { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.ekl-kasa-liga .ekl-club-cell { white-space: nowrap; }
.liga-ekstraklasa .ekl-kasa-liga th.col-team, .liga-ekstraklasa .ekl-kasa-liga td.ekl-club-cell { text-align: left; }
/* w2_dzial.css */
/* warsztat2: warstwa dzial (19.10, recenzja dyrektora UX) - Dziś, Mecze (liga i klub), Tabela, warstwa live.
   Ładowany PO ekstraklasa.css (base.html.j2), więc przy równej specyficzności wygrywa kaskadą.

   P1-5 (duży tekst 200%, WCAG 1.4.4 / 1.4.10): układ telefonu włącza się nie tylko od szerokości OKNA
   (media), ale też od szerokości KARTY liczonej w rem (zapytania kontenera). Przy „rozmiarze tekstu”
   200% karta 992 px ma tyle miejsca co 496 px przy 100%, więc dostaje ten sam układ co telefon
   (godzina nad meczem, nazwy zawijane, herby schowane, Br+/Br− schowane). Progi dobrane z pomiaru
   tak, że przy 100% tekstu na komputerze (okno ≥ 901 px) żadne zapytanie się nie włącza:
   .ekl-dz 853-1132 px, .ekl-dz-mecze 581-860 px (wyjątek: pasmo 901-976 px niżej), .tb-karta i .mk-karta 853-992 px. */

/* ── P1-5: siatka pary jawnie minmax(0,1fr) · środek w rem · minmax(0,1fr) (wszystkie wiersze `.ekl-row`:
   makra mecz, mecz_os, mecz_dz) - nazwy nie rozpychają środka, środek rośnie z tekstem; kolumna dnia
   w rem (60 px przy 100%). Te reguły stoją PRZED zapytaniami kontenera, które je nadpisują. ── */
@media (min-width: 640px) {
  .ekl-row .versus-row { grid-template-columns: minmax(0, 1fr) 5.4rem minmax(0, 1fr); }
}
@media (min-width: 901px) {   /* ≤ 900 px Dziś ma własny środek 2.2rem (ekstraklasa.css) */
  .ekl-dz-mecze .mecze-row .versus-row { grid-template-columns: minmax(0, 1fr) 6.6rem minmax(0, 1fr); }
}
@media (min-width: 641px) {
  .dz-karta .ekl-os-day { grid-template-columns: 3.75rem minmax(0, 1fr); }
}

/* ── P1-5: Dziś - kontenery ── */
main:has(> .ekl-dz) { container: w2dz / inline-size; }   /* kontenerem jest <main>: zapytanie nie stylizuje samego kontenera */
.ekl-dz-mecze { container: w2dzm / inline-size; }

/* tabela schodzi pod mecze, gdy kolumna treści (<main>) ma mniej niż 50rem (przy 100% to < 800 px, czyli
   i tak pasmo ≤ 900 z regułą media) - lustro `@media (max-width: 900px)` z ekstraklasa.css */
@container w2dz (max-width: 50rem) {
  .ekl-dz { grid-template-columns: minmax(0, 1fr); }
  .ekl-dz-tabela { position: static; }
  .ekl-dz-tabela .ekl-standings-wide { width: 100%; }
}

/* mecze węższe niż 41rem - lustro pasma ≤ 900 px: nazwy się zawijają, środek pary 2.2rem,
   połówka pod wynikiem, rynna stała 7.3em. Przy 100% tekstu włącza się też w oknie 901-976 px
   (kolumna meczów 581-656 px): tam nazwy bez zawijania wychodziły poza kartę o 40-54 px
   („Raków Częstochowa”, „Jagiellonia Białystok” wchodziła na wynik) - pomiar 19.10. */
@container w2dzm (max-width: 41rem) {
  .ekl-dz-mecze .vr-name { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
  .ekl-dz-mecze .mecze-row .mc-time { flex: 0 0 7.3em; min-width: 0; }
  .ekl-dz-mecze .mecze-row-main { flex: 1 1 auto; min-width: 0; }
  .ekl-dz-mecze .mecze-row .versus-row { grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr); column-gap: var(--s1); }
  .ekl-dz-mecze .mecze-row .vr-center { min-width: 0; padding: 0 var(--s1); }
  .ekl-dz-mecze .ekl-dz-wynik { flex-direction: column; align-items: center; gap: 0; }
}

/* mecze węższe niż 30rem - lustro telefonu ≤ 640 px: godzina-etykieta ── 18:00 ── nad meczem,
   dzień nad kartą bez osi, herby ustępują nazwom */
@container w2dzm (max-width: 30rem) {
  .ekl-dz-mecze .ekl-row .club-logo { display: none; }
  .ekl-dz-mecze .ekl-os-day,
  .ekl-dz-mecze .dz-karta .ekl-os-day { grid-template-columns: minmax(0, 1fr); }
  .ekl-dz-mecze .ekl-os-label { text-align: left; padding-left: var(--s2); }
  .ekl-dz-mecze .dz-karta .ekl-os-label { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding-top: 4px; padding-bottom: 4px; }
  .ekl-dz-mecze .dz-karta .ekl-os-label > * { display: inline; }
  .ekl-dz-mecze .dz-karta .ekl-os-wd .wd-pelny { display: inline; }
  .ekl-dz-mecze .dz-karta .ekl-os-wd .wd-kr { display: none; }
  .ekl-dz-mecze .ekl-os-rows { border-left: none; padding-left: 0; }
  .ekl-dz-mecze .ekl-os-rows::before { display: none; }
  .ekl-dz-mecze .mecze-row { flex-wrap: wrap; row-gap: 2px; }
  .ekl-dz-mecze .mecze-row .mc-time { flex: 1 1 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; gap: 0 0.6em;
    font-size: 0.78rem; justify-content: center; border-bottom: none; padding-bottom: 0; }
  .ekl-dz-mecze .mecze-row .mc-time::before,
  .ekl-dz-mecze .mecze-row .mc-time::after { content: ""; flex: 1 1 0; height: 1px; align-self: center; background: var(--hairline, #e8e8ed); }
  .ekl-dz-mecze .mecze-row .mc-time:empty { display: none; }
  .ekl-dz-mecze .ekl-os-card .mecze-row + .mecze-row { margin-top: 10px; }
  .ekl-dz-mecze .mecze-row .mecze-row-main { flex: 1 1 100%; }
  .ekl-dz-mecze .ekl-os-card { padding-left: 4px; padding-right: 4px; }
  .ekl-dz-mecze .mecze-row { padding-left: 2px; padding-right: 2px; }
}

/* ── P1-5 (runda 2): wpis zdarzenia = pudełko `.zd` (makro zdarzenia_wiersz, filtr `zdarzenie`). Inline-block:
   wpis, który nie mieści się w reszcie linii, schodzi w całości do następnej (łamanie między wpisami);
   wpis szerszy niż cała kolumna (tekst 200%) łamie się w środku tylko między nazwiskiem a minutą - minuta
   z notą („90+2' (k.)”) jest niełamliwa. Zastępuje `overflow-wrap: anywhere` z rundy 1 („Banaszak 1 / 1'”). ── */
.vr-sc { min-width: 0; overflow-wrap: normal; }
.vr-sc .zd { display: inline-block; max-width: 100%; vertical-align: top; }
.vr-sc .zd-m { white-space: nowrap; }
.vr-sc .zd-n { overflow-wrap: anywhere; }   /* ostatnia deska: samo nazwisko szersze niż kolumna */
/* nazwisko z dywizem („Diaby-Fadiga”) nie łamie się na dywizie, gdy mieści się w kolumnie: inline-block schodzi
   w całości do nowej linii, a łamie się w środku (dywiz, potem dowolnie) dopiero szersze niż cała kolumna */
.vr-sc .zd-n { display: inline-block; max-width: 100%; vertical-align: top; }

/* ── P1-3: skok na DZIŚ (ekl_teraz.js) stawia znacznik tuż pod przyklejoną górą (herby + działy) ── */
.ekl-dz-mecze .ekl-os-day.is-dzis { scroll-margin-top: calc(var(--ekl-top-h, 52px) + var(--ekl-nav-h, 56px) + 8px); }
/* runda 3 (P1-3): celem jest nagłówek karty z dzisiejszym meczem - tytuł karty tuż pod przyklejoną górą */
.ekl-dz-mecze .dz-karta > .dz-nagl { scroll-margin-top: calc(var(--ekl-top-h, 52px) + var(--ekl-nav-h, 56px) + 8px); }

/* krótka tabela pod meczami: kolumny M W R P RB jak w telefonie, ale przy wąskiej karcie (duży tekst
   na telefonie) najpierw schodzą W R P, potem M i RB - zostaje # Klub Pkt jak na komputerze */
@media (max-width: 900px) { .ekl-dz-tabela { container: w2tk / inline-size; } }
@container w2dz (max-width: 50rem) { .ekl-dz-tabela { container: w2tk / inline-size; } }
@container w2tk (max-width: 20rem) {
  .ekl-dz-tabela .ekl-dz-tab-ext:is([data-col="w"], [data-col="d"], [data-col="l"]),
  .ekl-dz-tabela thead th.ekl-dz-tab-ext:nth-child(n+4):nth-child(-n+6) { display: none; }
}
@container w2tk (max-width: 14rem) {
  .ekl-dz-tabela .ekl-dz-tab-ext { display: none; }
}

/* ── P1-5: Tabela - przy karcie węższej niż 38rem Br+/Br− i puste mecze bezpośrednie schodzą jak na
   telefonie (lustro `.ekl-tabela-liga` ≤ 640 px), przy 22rem także W R P, a nazwa zawija się obok herbu ── */
.tb-karta { container: w2tb / inline-size; }
@container w2tb (max-width: 38rem) {
  .ekl-tabela-liga tr > *:nth-child(n+11),
  .ekl-tabela-liga .ekl-thead-grupy,
  .ekl-tabela-liga tr > *:nth-child(7),
  .ekl-tabela-liga tr > *:nth-child(8) { display: none; }
  .ekl-standings-wide th, .ekl-standings-wide td { padding: 0.28rem 0.18rem; }
  .ekl-standings-wide td.ekl-club-cell { white-space: normal; line-height: 1.12; }
}
@container w2tb (max-width: 22rem) {
  .ekl-tabela-liga tr > *:nth-child(4),
  .ekl-tabela-liga tr > *:nth-child(5),
  .ekl-tabela-liga tr > *:nth-child(6) { display: none; }
}
@container w2tb (max-width: 15rem) {
  .ekl-tabela-liga td.ekl-club-cell .club-logo-sm { display: none; }
}
/* duży tekst na telefonie (karta ~11rem): zostaje # Klub RB Pkt */
@container w2tb (max-width: 12rem) {
  .ekl-tabela-liga tr > *:nth-child(3) { display: none; }
}

/* herb i nazwa w jednym pudełku: nazwa zawija się OBOK herbu, nie pod nim (przy 200% herb nachodził
   na drugą linię nazwy); nazwa = prawdziwy link bez podkreślenia, najechanie jak w wierszu meczu (P2-8) */
.w2-tb-klub { display: inline-flex; align-items: center; gap: 0.28em; max-width: 100%; vertical-align: top; min-width: 0; }   /* top = wiersz 31 px jak przed zmianą, nazwa na linii bazowej liczb (pomiar) */
.w2-tb-klub .club-logo-sm { flex: none; margin: -0.3rem 0; }
.w2-tb-nazwa { min-width: 0; overflow-wrap: break-word; }
a.w2-tb-klub, a.w2-tb-klub:hover { color: inherit; text-decoration: none; }
a.w2-tb-klub:hover .w2-tb-nazwa, a.w2-tb-klub:focus-visible .w2-tb-nazwa,
tr[data-href]:hover a.w2-tb-klub .w2-tb-nazwa { color: var(--accent); }
a.w2-tb-klub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── P1-5: wiersz meczu Meczów (`mecz_krotki` w `.mk-karta`) - karta węższa niż 38rem dostaje układ
   telefonu (lustro reguł ≤ 640 px z ekstraklasa.css): data nad godziną, herby schowane, skrót rozgrywek ── */
.mk-karta { container: w2mk / inline-size; }
@container w2mk (max-width: 38rem) {
  .mk-karta .ekl-mk { grid-template-columns: 2.9em minmax(0, 1fr) 3.4em minmax(0, 1fr) 2.4em;
    grid-template-rows: auto auto; row-gap: 0; align-items: center; font-size: .8rem; padding: 8px; column-gap: 5px; }
  .mk-karta .ekl-kol-wiersze .ekl-mk,
  .ekl-sparingi .mk-karta .ekl-mk { grid-template-columns: 2.9em minmax(0, 1fr) 3.4em minmax(0, 1fr); }
  .mk-karta .ekl-mk .club-logo { display: none; }
  .mk-karta .ekl-mk-dt { grid-column: 1; grid-row: 1; align-self: end; }
  .mk-karta .ekl-mk-t { grid-column: 1; grid-row: 2; align-self: start; }
  .mk-karta .ekl-mk-dt, .mk-karta .ekl-mk-t { font-size: .74rem; }
  .mk-karta .ekl-mk-a { grid-column: 2; grid-row: 1 / 3; }
  .mk-karta .ekl-mk-s { grid-column: 3; grid-row: 1 / 3; }
  .mk-karta .ekl-mk-b { grid-column: 4; grid-row: 1 / 3; }
  .mk-karta .ekl-mk-c { grid-column: 5; grid-row: 1 / 3; }
  .mk-karta .ekl-mk-a, .mk-karta .ekl-mk-b { white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: break-word; line-height: 1.15; }
  .mk-karta .ekl-mk-c-pelny { display: none; }
  .mk-karta .ekl-mk-c-krotki { display: inline; font-size: .64rem; }
  .mk-karta .ekl-mk-dl { display: none; }
  .mk-karta .ekl-mk-kr { display: inline; }
  .mk-karta .dz-nagl { flex-wrap: wrap; }
}

/* ── P2-3: Mecze klubu - pastylka W/R/P przy wyniku (kolory `.ekl-st-forma` ze Statystyk) ── */
.w2-wrp { display: inline-block; margin-left: 0.35em; vertical-align: 0.08em; line-height: 1; }
.w2-wrp span { width: 1.45em; line-height: 1.45em; font-size: .68rem; margin: 0; }
/* telefon (i karta węższa niż 38rem): kolumna wyniku mieści wynik z pastylką */
@media (max-width: 640px) {
  .ekl-mecze-klub .mk-karta .ekl-mk { grid-template-columns: 2.9em minmax(0, 1fr) 4.4em minmax(0, 1fr) 2.4em; }
}
@container w2mk (max-width: 38rem) {
  .ekl-mecze-klub .mk-karta .ekl-mk { grid-template-columns: 2.9em minmax(0, 1fr) 4.4em minmax(0, 1fr) 2.4em; }
}
.ekl-mk-s:has(.w2-wrp) { white-space: nowrap; }
/* znacznik „awans” pod nazwą, nie obok (na telefonie „awans Odra / Opole” zawijało się pod pastylką) */
@media (max-width: 640px) {
  .ekl-mk-a:has(.ekl-mk-aw) { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
  .ekl-mk-b:has(.ekl-mk-aw) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
}
@container w2mk (max-width: 38rem) {
  .ekl-mk-a:has(.ekl-mk-aw) { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
  .ekl-mk-b:has(.ekl-mk-aw) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* karta węższa niż 18rem (duży tekst na telefonie, 200% przy 390 px = ~11rem): na nazwy zostawało po ~40 px,
   więc para staje jedna pod drugą - data i godzina z lewej, gospodarz nad gościem, wynik z prawej,
   rozgrywki pod parą. Przy 100% tekstu próg nie włącza się od 320 px okna. */
@container w2mk (max-width: 18rem) {
  .mk-karta .ekl-mk, .mk-karta .ekl-kol-wiersze .ekl-mk, .ekl-sparingi .mk-karta .ekl-mk,
  .ekl-mecze-klub .mk-karta .ekl-mk { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 2px; }
  .mk-karta .ekl-mk-dt { grid-column: 1; grid-row: 1; align-self: center; }
  .mk-karta .ekl-mk-t { grid-column: 1; grid-row: 2; align-self: center; }
  .mk-karta .ekl-mk-a { grid-column: 2; grid-row: 1; text-align: left; }
  .mk-karta .ekl-mk-b { grid-column: 2; grid-row: 2; }
  .mk-karta .ekl-mk-s { grid-column: 3; grid-row: 1 / 3; }
  .mk-karta .ekl-mk-c { grid-column: 2; grid-row: 3; text-align: left; }
  .mk-karta .ekl-mk-a:has(.ekl-mk-aw) { align-items: flex-start; }
}

/* ── P3-1: gol na żywo - przez 4 s strona, która strzeliła, w kolorze marki z minutą („⚽ 23'”);
   live_wynik.js `akcentGola` dokłada `.w2-gol` i `data-gol` na nazwie klubu ── */
.w2-gol { position: relative; color: var(--k-tx-ffffff, #fff) !important; background: var(--k-tlo-accent, var(--accent)); border-radius: 6px;
  box-shadow: 0 0 0 3px var(--accent); animation: w2-gol-wej 0.9s ease-out 2; }
/* dymek z minutą NAD nazwą, od jej wewnętrznej krawędzi (przy wyniku) - na telefonie nie wychodzi poza ekran */
.w2-gol::after { content: attr(data-gol); position: absolute; bottom: calc(100% + 7px); z-index: 4;
  white-space: nowrap; font-size: 0.78rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: var(--k-tlo-ffffff, #fff); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 2px 8px var(--k-cn-0000001f, rgba(0, 0, 0, .12)); }
.vr-a .w2-gol::after, .ekl-mk-a .w2-gol::after { right: -3px; }
.vr-b .w2-gol::after, .ekl-mk-b .w2-gol::after { left: -3px; }
/* lista i komórka nazwy przycinają; na 4 s akcentu dymek ma wyjść nad wiersz */
.ekl-mk-lista:has(.w2-gol), .ekl-mk-a:has(.w2-gol), .ekl-mk-b:has(.w2-gol) { overflow: visible; }
@keyframes w2-gol-wej {
  0% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px transparent; }
}

/* region dla czytnika ekranu (P2-9): „Gol, Wisła Płock. Wisła Płock 1:0 Radomiak Radom, 23. minuta” */
.w2-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── P2-9: „ogranicz ruch” gasi migający dwukropek, pulsujące kropki minuty i tabeli, akcent gola ── */
@media (prefers-reduced-motion: reduce) {
  .ekl-live-colon, .ekl-live-min::before, .ekl-live-dot, .vr-live-min::before { animation: none; }
  .w2-gol { animation: none; }
  .ekl-lsz-bar > span { transition: none; }
}

/* ── P3-1: karta „Od Twojej ostatniej wizyty” na Dziś i Mecze klubu - linia wydań przeglądu z linkami ── */
.w2-wizyta-przeglady { margin: 6px 0 0; }
.w2-wizyta-przeglady a { font-variant-numeric: tabular-nums; }

/* ── P1-5 (runda 2): przełącznik motywu w stopce przy tekście 200% na 390 px wychodził o 16 px poza ekran
   (jedyne przepełnienie Dziś po poprawce strzelców) - pigułki zawijają się w granicach stopki ── */
.motyw-sw { max-width: 100%; flex-wrap: wrap; }

/* ── recenzja UX 3, P2-5: wybrany klub (kontekst z pamięci, ekl_gora.js `mojKlub`) na Dziś - jego wiersz w krótkiej
   tabeli i jego mecze w kartach w tincie --accent-soft (ten sam co hover mecz↔tabela), nazwa klubu pogrubiona;
   „cała liga” bez podświetlenia ── */
.ekl-dz .ekl-row.w2-moj { background: var(--accent-soft); border-radius: 10px; }
.ekl-dz .ekl-row.w2-moj[data-moj="a"] .vr-a .vr-name,
.ekl-dz .ekl-row.w2-moj[data-moj="b"] .vr-b .vr-name { font-weight: 700; }
.ekl-dz-tabela tr.w2-moj { background: var(--accent-soft); }
.ekl-dz-tabela tr.w2-moj td.ekl-club-cell, .ekl-dz-tabela tr.w2-moj td.ekl-club-cell a { font-weight: 700; }

/* ── recenzja UX 3, P2-6: „Od Twojej ostatniej wizyty” na Dziś w kanonie karty jak w przeglądzie klubu - zmiany
   i linia przeglądów w białej wkładce (`.zw-wkl` w przeglądzie styluje `.zw-k2`, którego na Dziś nie ma) ── */
.ekl-dz .w2-wizyta .zw-wkl { background: var(--k-tlo-ffffff, #fff); border-radius: 16px; padding: 12px 16px; }
.ekl-dz .w2-wizyta .zw-wkl > :first-child { margin-top: 0; }
.ekl-dz .w2-wizyta .zw-wkl > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .ekl-dz .w2-wizyta .zw-wkl { padding: 10px 12px; } }
.ekl-dz .w2-wizyta .zw-wkl:not(:has(> :not([hidden]):not(:empty))) { display: none; }   /* sama lista meczów = bez pustej wkładki */

/* ── recenzja UX 3, P3-4: linia ligi dla wracającego bez wybranego klubu („Od 11.10: kolejki 10-11, nowy lider: …”),
   jedna linia w tle karty nad kartami Dziś ── */
.w2-liga-wizyta { margin: 0 0 12px; padding: 10px 16px; border-radius: 14px; background: var(--k-tlo-f5f5f7, #f5f5f7);
  font-size: 0.92rem; line-height: 1.35; color: var(--ink); font-variant-numeric: tabular-nums; }
.w2-liga-wizyta[hidden] { display: none; }
.w2-liga-wizyta b { font-weight: 650; }
@media (max-width: 640px) { .w2-liga-wizyta { margin-inline: -8px; } }   /* krawędzie jak karty Dziś na telefonie */

/* ── recenzja UX 3, góra działu na telefonie (w2_herby.css zostaje wyłącznie warstwą wariantu E; ten arkusz
   stoi przed nim w kaskadzie, więc reguły nadpisujące jego wartości mają wyższą specyficzność) ── */

/* P1-4 (tekst 200%, WCAG 1.4.10): belka liczona w rem - gdy na telefonie ma mniej niż 19rem (390 px przy 200% =
   ~12rem; przy 100% dopiero poniżej ~304 px), podpis „Serwis dla” znika; zostaje ikona Whistar i pole klubu
   (nazwa skraca się wielokropkiem). Pomiar 390 px przy 200%: belka 443/390 → 390/390. */
@media (max-width: 640px), (max-height: 520px) {
  html.ekl-herby-js .ekl-pasek-wybor { container: w2belka / inline-size; }
}
@container w2belka (max-width: 19rem) {
  .ekl-pasek-wybor .ekl-pasek-pod { display: none; }
}

/* P2-7: telefon w poziomie (wysokość ≤ 520 px) - góra zajmowała 131 z 390 px (belka 52 + płytki z podpisami 79).
   Płytki bez podpisów i niższe (ikona 38 px w rzędzie 44 px), belka 44 px: razem 89 px. Chowanie góry przy
   przewijaniu bez zmian (offsety z tych samych tokenów); nazwę działu niesie aria-label i lista „więcej”. */
@media (max-height: 520px) {
  .liga-ekstraklasa:has(.ekl-plytki) { --ekl-nav-h: 45px; }
  .site-header:has(.ekl-plytki) .site-header-inner { height: 44px; }
  .ekl-plytka { height: 44px; width: 48px; gap: 0; }
  .ekl-plytka .pl { width: 38px; height: 38px; }
  .ekl-plytka-nz { display: none; }
  .ekl-plytka-kropka { top: 2px; right: 2px; }
  html.ekl-herby-js body.liga-ekstraklasa:has(.ekl-pasek-wybor) { --ekl-top-h: 44px; }
  html.ekl-herby-js nav.ekl-pasek-wybor .ekl-pasek-marka-ikona { width: 26px; height: 26px; }
  .ekl-pasek-wybor .ekl-herby-btn { height: 36px; }
  .ekl-herby-btn .ekl-herby-herb { width: 26px; height: 26px; }
}

/* P2-8: lista „więcej” ze słownikiem ikon - pięć głównych działów nad resztą, oddzielone kreską
   (pierwszą widoczną pozycję reszty oznacza ekl_gora.js klasą .w2-po-slowniku) */
.ekl-wiecej a.w2-po-slowniku { margin-top: 7px; position: relative; }
.ekl-wiecej a.w2-po-slowniku::before { content: ""; position: absolute; left: 10px; right: 10px; top: -4px; height: 1px;
  background: var(--hairline); }
/* w2_staty.css */
/* warsztat2: warstwa staty (19.10, recenzja dyrektora UX) */

/* P2-6: nagłówki tabel Statystyk na telefonie bez łamania w słupki. Pełna nazwa (.st-pl) na komputerze;
   przy ≤640 px skrót (.st-kr) w jednej linii, pełna nazwa zostaje dla czytnika ekranu (schowana wizualnie),
   a w dymku nagłówka jest objaśnienie (`title`) i wykres z pełną nazwą (stuknięcie). Kolumny liczbowe
   (`th.n`) w jednej linii także tam, gdzie etykieta jest krótka („W-R-P”, „0-15'”). */
.st-k2 .st-kr { display: none; }
@media (max-width: 640px) {
  /* position: relative - schowana pełna nazwa nie wychodzi poza przewijaną tabelę (szerokość strony) */
  .st-k2 thead th.n { white-space: nowrap; position: relative; }
  .st-k2 .st-kr { display: inline; }
  .st-k2 .st-pl {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* P2-7: karty liderów Zawodników bez osieroconej karty. Siatka 4 kolumn zostawiała piątą kartę („Zagrożeni
   pauzą”) samą w drugim rzędzie, trzy czwarte szerokości puste. Teraz karty płyną w rzędzie i ostatnia
   rośnie na resztę szerokości; szeroka karta (≥ 560 px) układa listę w dwóch kolumnach. Pomiar 1280/992:
   5 kart = 4 + jedna szeroka (wysokość bloku 611 px zamiast 766), 3 karty = trzy po 1/3, bez uciętych nazwisk
   (wariant „5 kolumn” ucinał i łamał nazwiska przy 191 px). Telefon bez zmian (dwie kolumny kart). */
@media (min-width: 641px) {
  .zw-k2 .zw-liderzy .ekl-st-liderzy { display: flex; flex-wrap: wrap; }
  .zw-k2 .zw-liderzy .ekl-st-lider { flex: 1 1 205px; container-type: inline-size; }
}
@container (min-width: 560px) {
  .zw-k2 .ekl-st-lider:not(.is-pelna) ol { columns: 2; column-gap: 28px; }
  .zw-k2 .ekl-st-lider:not(.is-pelna) li { break-inside: avoid; }
}

/* Karty liderów: miejsce „10.” mieściło się w kolumnie 1.3em tylko do 9. (pomiar: 21 px w 17 px). */
.zw-k2 .ekl-st-lider li { grid-template-columns: 1.6em 1fr auto; }
@media (max-width: 640px) { .zw-k2 .ekl-st-lider li { grid-template-columns: 1.6em 1fr auto; } }

/* Recenzja UX 2 (P3-3): kafel „Minuty” - linia „N zawodników z kompletem minut” nad „Pełna lista”. */
.ekl-st-lider li.w2-komplet .who { font-weight: 600; white-space: normal; }

/* Recenzja UX 3 (P2-4): kariera zawodnika - zero to „0” szarym, „–” tylko przy braku danych (dymek „brak danych
   w protokołach”, ekl_dymki.js); suma z części sezonów ma dymek i kropkowane podkreślenie. */
.ekl-zaw-kariera .is-zero { color: var(--ink-muted); }
.ekl-zaw-kariera .w2-brak, .ekl-zaw-kariera .w2-czesc { cursor: help; }
.ekl-zaw-kariera .w2-czesc { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--ink-muted); }

/* Cztery sekcje klubu (Michał 26.10): bilans z rywalami, z nim i bez niego - nazwy i daty bez łamania */
.ekl-stn-bilans .ekl-stn-ost, .ekl-stn-bilans .ekl-club-cell, .ekl-stn-znim .ekl-club-cell { white-space: nowrap; }
.ekl-stn-wyk { margin: 0; }
/* w2_herby.css */
/* warsztat2: warstwa herby (19.10, wariant E z /podglad/herby-telefon/)
   Michał 19.10: „inny jednak musi być design na komputer (tu dwa kliknięcia niepotrzebne) a inny na telefon”.
   Komputer (> 640 px szerokości i > 520 px wysokości): pasek herbów bez zmian, piksel w piksel.
   Telefon (te same progi co chowanie góry w ekstraklasa.css, pion i poziom) z JS: w pasku marka, podpis
   „Serwis dla” i pole klubu `.ekl-herby-btn` (herb + nazwa albo logo ligi); stuknięcie rozwija pod paskiem
   siatkę 6 × 3 `#ekl-herby-siatka` (liga na całą szerokość + 18 herbów), wybór ją zwija (ekl_gora.js).
   Klasę html.ekl-herby-js stawia skrypt w _ekl_przeglad_pasek.html.j2 przed pierwszym malowaniem;
   bez JS zostaje przewijany pasek herbów jak dotąd. Kolory wyłącznie z istniejących tokenów (ciemny motyw
   z w2_ciemny.css), bez nowych literałów. */

/* poza telefonem pole klubu i siatka nie istnieją (atrybut hidden + zapas, gdyby JS je odsłonił) */
.ekl-herby-pole, .ekl-herby-siatka { display: none; }

@media (max-width: 640px), (max-height: 520px) {
  /* cienki pasek herbu nad marką (19.10, 390 px): marka ma 32 px wysokości w pasku 61 px, więc herb
     przewinięty pod nią wystawał nad i pod nią. Cienie w kolorze paska zakrywają pas nad i pod marką
     (także nad lewym marginesem); rysunek marki i kreska bez zmian. */
  .ekl-pasek-wybor .ekl-pasek-marka {
    box-shadow: -24px 0 0 var(--k-tlo-pasek-herbow, #ebebef), 0 -16px 0 var(--k-tlo-pasek-herbow, #ebebef),
      0 16px 0 var(--k-tlo-pasek-herbow, #ebebef), -24px -16px 0 var(--k-tlo-pasek-herbow, #ebebef),
      -24px 16px 0 var(--k-tlo-pasek-herbow, #ebebef); }

  /* pasek 52 px jak w makiecie (góra = 52 + 65 px płytek); offsety sticky i chowanie góry liczą się z tokenu */
  html.ekl-herby-js .liga-ekstraklasa:has(.ekl-pasek-wybor) { --ekl-top-h: 52px; }
  html.ekl-herby-js .ekl-pasek-wybor ul.container { gap: 10px; }
  html.ekl-herby-js .ekl-pasek-wybor ul.container > li:has(> a.ekl-pasek-link) { display: none; }
  html.ekl-herby-js .ekl-pasek-wybor .ekl-pasek-marka { padding-right: 10px; margin-right: 0; }
  html.ekl-herby-js .ekl-pasek-wybor .ekl-pasek-marka-ikona { width: 28px; height: 28px; }
  html.ekl-herby-js .ekl-pasek-wybor .ekl-pasek-pod { border-right: 0; padding-right: 0; margin-right: 0; }
  /* pole klubu w drugim rzędzie dublowałoby pole w pasku (makieta E: bez niego) */
  html.ekl-herby-js .site-header .ekl-kto { display: none; }

  /* pole klubu: biała płytka jak wybrany herb, 44 px wysokości (obszar dotyku) */
  html.ekl-herby-js .ekl-herby-pole { display: flex; flex: 0 1 auto; min-width: 0; }
  .ekl-herby-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 0; max-width: 100%;
    padding: 0 12px 0 6px; border: 0; border-radius: 12px; background: var(--k-tlo-plytka-wyboru, #fff);
    box-shadow: 0 2px 8px var(--k-cn-00000024, rgba(0, 0, 0, .14)); font: inherit; color: var(--ink); cursor: pointer; }
  .ekl-herby-btn:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }
  .ekl-herby-herb { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; display: block; }
  .ekl-herby-liga .ekl-herby-herb { width: auto; height: 22px; aspect-ratio: 1584.81 / 451.56; transform: none !important; }
  .ekl-herby-nz { font-size: 0.9rem; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ekl-herby-liga .ekl-herby-nz { display: none; }   /* logo ligi niesie nazwę; czytnik ma aria-label */
  .ekl-herby-chev { width: 12px; height: 12px; flex: 0 0 auto; color: var(--k-tx-1e4b95, #1e4b95); }
  .ekl-herby-btn[aria-expanded="true"] .ekl-herby-chev { transform: rotate(180deg); }

  /* siatka: nakładka pod paskiem w kolorze paska (płytki i treść pod nią), na niskim ekranie z własnym przewijaniem */
  html.ekl-herby-js .ekl-herby-siatka:not([hidden]) { display: block; position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px 16px 12px; background: var(--k-tlo-pasek-herbow, #ebebef);
    box-shadow: 0 8px 30px var(--k-cn-00000026, rgba(0, 0, 0, .15)); clip-path: inset(0 0 -60px 0);   /* cień tylko w dół, nie na pasek */
    max-height: calc(100dvh - var(--ekl-top-h)); overflow-y: auto; overscroll-behavior: contain; }
  .ekl-herby-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
    max-width: 414px; margin: 0 auto; padding: 0; list-style: none; }
  .ekl-herby-lista > li { margin: 0; padding: 0; min-width: 0; }
  .ekl-herby-lista > li:first-child { grid-column: 1 / -1; }   /* liga na całą szerokość */
  .ekl-herby-h { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 44px;
    border-radius: 10px; }
  .ekl-herby-h-liga { aspect-ratio: auto; height: 44px; border-radius: 12px; }
  .ekl-herby-logo { width: 78%; height: 78%; object-fit: contain; display: block; }
  .ekl-herby-h-liga .ekl-herby-logo { width: auto; height: 26px; aspect-ratio: 1584.81 / 451.56; }
  .ekl-herby-h.is-empty { opacity: 0.3; }
  .ekl-herby-h.is-active { background: var(--k-tlo-plytka-wyboru, #fff); box-shadow: 0 2px 8px var(--k-cn-0000002e, rgba(0, 0, 0, .18)); opacity: 1; }
  .ekl-herby-h:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }
}
@media (max-width: 640px) and (hover: hover), (max-height: 520px) and (hover: hover) {
  a.ekl-herby-h:not(.is-active):hover { background: var(--k-tlo-pasek-herbow-hover, #dedee3); }
}
/* rozwinięcie: odsłonięcie z góry; „ogranicz ruch” = bez animacji (siatka i strzałka od razu) */
@media (prefers-reduced-motion: no-preference) {
  html.ekl-herby-js .ekl-herby-siatka:not([hidden]) { animation: ekl-herby-rozwin 0.2s ease-out; }
  .ekl-herby-chev { transition: transform 0.2s; }
}
@keyframes ekl-herby-rozwin {
  from { clip-path: inset(0 0 100% 0); opacity: 0.6; }
  to { clip-path: inset(0 0 -60px 0); opacity: 1; }
}
/* w2_herby_kom.css */
/* Herby na komputerze (Michał 21.10, wariant 10 z /podglad/gora-ab2/; uwaga czytelnika: rząd herbów na samej górze
   brano za logo). Komputer = powyżej 640 px szerokości, także telefon w poziomie (Michał 21.10: „na komórce
   horyzontalnie to już chyba wersja z komputera”) - tam jeden rząd 44 px zamiast paska herbów i płytek (89 px).
   Rząd herbów nad działami (.ekl-top) znika; herby żyją w polu klubu przy działach jako lista .ekl-herby-kom:
   - rozwijane (domyślnie): panel 6 × 3 pod polem klubu, otwiera go najechanie albo fokus (bez JS też działa);
     w nagłówku panelu pinezka „Przypnij herby pod menu”;
   - przypięte (html.ekl-herby-pasek, pamięć ekl_gora.js): pole klubu znika, ta sama lista staje się paskiem pod
     działami w lepkim nagłówku (wygląd dawnego paska herbów, bez „Serwis dla”), pinezka na końcu odpina.
   Pierwsza wizyta (html.ekl-herby-podp-on): podpowiedź pod polem klubu, znika po wyborze. Ekran dotykowy: panel
   otwiera stuknięcie (.otwarte, ekl_gora.js), na niskim ekranie przewija się sam. Telefon w pionie bez zmian - tam
   opakowanie pola nie istnieje w układzie, a panel i podpowiedź są schowane. Reguły nadpisujące wartości telefonu
   w poziomie (w2_herby.css, w2_dzial.css) mają tę samą specyficzność i wygrywają miejscem w kaskadzie.
   Kolory wyłącznie z istniejących tokenów (ciemny motyw z w2_ciemny.css). */

.ekl-herby-kom, .ekl-herby-podp, .ekl-kto-chev, .ekl-marka-kom { display: none; }
.ekl-kto-wrap { display: contents; }

@media (min-width: 641px) {
  .liga-ekstraklasa:has(.ekl-herby-kom), html.ekl-herby-js body.liga-ekstraklasa:has(.ekl-herby-kom) { --ekl-top-h: 0px; }
  .liga-ekstraklasa:has(.ekl-herby-kom) .ekl-top { display: none; }
  .liga-ekstraklasa:has(.ekl-herby-kom) .ekl-top ~ .site-header { top: 0; }   /* nagłówek na samej górze; --ekl-top-h niesie tylko pasek herbów pod nim */

  /* marka Whistar na początku rzędu działów (jak dotąd w rogu paska herbów) */
  .ekl-marka-kom { display: flex; align-items: center; flex: 0 0 auto; height: 36px; padding-right: 16px; margin-right: 16px;
    border-right: 1px solid var(--hairline); }
  .ekl-marka-kom img { width: 32px; height: 32px; display: block; }
  .ekl-marka-kom span { margin-left: 8px; font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap;
    color: var(--k-tx-1e4b95, #1e4b95); }

  /* pole klubu = przycisk na białej płytce (jak wybrany herb), strzałka w kolorze marki */
  .ekl-kto-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: 100%; margin-right: 16px; }
  html .site-header .ekl-kto-wrap .ekl-kto { display: flex; flex: 0 0 auto; width: auto; min-width: 200px; height: 52px; margin: 0; padding: 0 14px;
    border-right: 0; border-radius: 12px; background: var(--k-tlo-plytka-wyboru, #fff); cursor: pointer;
    box-shadow: 0 1px 4px var(--k-cn-00000024, rgba(0, 0, 0, .14)); }
  .ekl-kto-wrap .ekl-kto:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }
  .ekl-kto-chev { display: block; width: 12px; height: 12px; flex: 0 0 auto; margin-left: auto; color: var(--k-tx-1e4b95, #1e4b95); }

  /* panel: siatka liga + 6 × 3 herby; most nad panelem trzyma najechanie przy przejściu myszą z pola */
  .ekl-herby-kom { position: absolute; top: calc(50% + 30px); left: 0; z-index: 70; width: 470px; padding: 10px;
    border-radius: 14px; background: var(--k-tlo-pasek-herbow, #ebebef);
    box-shadow: 0 10px 30px var(--k-cn-00000026, rgba(0, 0, 0, .15));
    max-height: calc(100dvh - var(--ekl-nav-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .ekl-herby-kom::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  /* mysz: najechanie; dotyk: stuknięcie (.otwarte) - przy dotyku stan najechania zostaje po wyborze i trzymałby panel */
  .ekl-kto:focus-visible + .ekl-herby-kom, .ekl-herby-kom:focus-within, .ekl-kto-wrap.otwarte .ekl-herby-kom { display: block; }
  .ekl-herby-kom-glowka { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px 6px;
    font-size: 0.85rem; color: var(--ink-muted); }
  .ekl-herby-kom-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
  .ekl-herby-kom-lista > li { margin: 0; padding: 0; min-width: 0; }
  .ekl-herby-kom-lista > li:first-child { grid-column: 1 / -1; }
  .ekl-herby-k { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; }
  .ekl-herby-k-liga { aspect-ratio: auto; height: 48px; }
  .ekl-herby-k-logo { width: 78%; height: 78%; object-fit: contain; display: block; }
  .ekl-herby-k-liga .ekl-herby-k-logo { width: auto; height: 28px; transform: none !important; }
  a.ekl-herby-k:hover { background: var(--k-tlo-pasek-herbow-hover, #dedee3); }
  .ekl-herby-k.is-empty { opacity: 0.3; }
  .ekl-herby-k.is-active { background: var(--k-tlo-plytka-wyboru, #fff); box-shadow: 0 2px 8px var(--k-cn-0000002e, rgba(0, 0, 0, .18)); opacity: 1; }
  .ekl-herby-k:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }

  /* pinezka: w nagłówku panelu przypina, na końcu paska (wciśnięta) odpina; bez JS jej nie ma */
  .ekl-herby-pin { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 9px; background: transparent; color: var(--ink-muted); cursor: pointer; flex: 0 0 auto; }
  html.ekl-herby-js .ekl-herby-pin:not(.ekl-herby-odepnij) { display: inline-flex; }
  .ekl-herby-pin svg { width: 16px; height: 16px; }
  .ekl-herby-pin:hover { background: var(--k-tlo-pasek-herbow-hover, #dedee3); color: var(--k-tx-1e4b95, #1e4b95); }
  .ekl-herby-pin:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 2px; }

  /* podpowiedź pierwszej wizyty: karta pod polem klubu; chowa się, gdy herby są rozwinięte */
  html.ekl-herby-js.ekl-herby-podp-on:not(.ekl-herby-pasek) .ekl-herby-podp { display: flex; position: absolute;
    top: calc(50% + 36px); left: 0; z-index: 60; align-items: center; gap: 4px; padding: 8px 8px 8px 16px;
    border-radius: 12px; background: var(--k-tlo-plytka-wyboru, #fff); white-space: nowrap; font-size: 0.88rem;
    box-shadow: 0 8px 26px var(--k-cn-0000002e, rgba(0, 0, 0, .18)); }
  .ekl-herby-podp::before { content: ""; position: absolute; top: -6px; left: 40px; width: 12px; height: 12px;
    background: var(--k-tlo-plytka-wyboru, #fff); transform: rotate(45deg); }
  .ekl-herby-podp b { font-weight: 650; margin-right: 8px; }
  .ekl-herby-podp button { padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit;
    font-weight: 600; color: var(--k-tx-1e4b95, #1e4b95); cursor: pointer; }
  .ekl-herby-podp button.ekl-herby-podp-nie { color: var(--ink-muted); }
  .ekl-herby-podp button:hover { background: var(--k-tlo-pasek-herbow-hover, #dedee3); }
  html.ekl-herby-podp-on .ekl-kto-wrap:has(.ekl-herby-kom:focus-within) .ekl-herby-podp,
  html.ekl-herby-podp-on .ekl-kto-wrap.otwarte .ekl-herby-podp { display: none; }

  /* przypięte: pole klubu znika, lista = pasek na pełną szerokość pod działami (wygląd dawnego paska herbów) */
  html.ekl-herby-pasek body.liga-ekstraklasa:has(.ekl-herby-kom) { --ekl-top-h: 62px; }
  html.ekl-herby-pasek .site-header:has(.ekl-herby-kom) { margin-bottom: var(--ekl-top-h); }
  html.ekl-herby-pasek .ekl-kto-wrap { position: static; margin-right: 0; }
  html.ekl-herby-pasek .ekl-kto-wrap .ekl-kto, html.ekl-herby-pasek .ekl-herby-kom-glowka { display: none; }
  /* top: pod dolną kreską nagłówka (100% = jego wnętrze) - rząd kończy się równo z miejscem drugiego paska strony */
  html.ekl-herby-pasek .ekl-herby-kom { display: flex; align-items: center; top: calc(100% + 1px); left: 0; right: 0; width: auto;
    height: var(--ekl-top-h); box-sizing: border-box; padding: 0 var(--s5, 24px); z-index: 1; border-radius: 0;
    border-bottom: 1px solid var(--hairline); box-shadow: none; max-height: none; overflow: visible; }
  html.ekl-herby-pasek .ekl-herby-kom::before { display: none; }
  html.ekl-herby-pasek .ekl-herby-kom-lista { display: flex; align-items: center; flex: 1 1 auto; gap: 2px; min-width: 0; }
  html.ekl-herby-pasek .ekl-herby-kom-lista > li { flex: 1 1 0; display: flex; justify-content: center; }
  html.ekl-herby-pasek .ekl-herby-kom-lista > li:first-child { flex: 0 0 auto; margin-right: 8px; }
  html.ekl-herby-pasek .ekl-herby-k { width: min(100%, 50px); }
  html.ekl-herby-pasek .ekl-herby-k-liga { width: auto; height: 44px; padding: 0 12px; }
  html.ekl-herby-pasek .ekl-herby-k-liga .ekl-herby-k-logo { height: 30px; }
  html.ekl-herby-pasek .ekl-herby-k.is-active { transform: scale(1.1); }
  html.ekl-herby-pasek .ekl-herby-pin.ekl-herby-odepnij { display: inline-flex; margin-left: 8px; color: var(--k-tx-1e4b95, #1e4b95);
    background: var(--k-tlo-plytka-wyboru, #fff); box-shadow: 0 1px 4px var(--k-cn-00000024, rgba(0, 0, 0, .14)); }
}

/* telefon w poziomie (≤ 520 px wysokości): rząd 44 px jak płytki bez podpisów (w2_dzial.css P2-7), pasek przypięty 44 px */
@media (min-width: 641px) and (max-height: 520px) {
  .ekl-marka-kom { height: 30px; padding-right: 12px; margin-right: 12px; }
  .ekl-marka-kom img { width: 26px; height: 26px; }
  .ekl-marka-kom span { display: none; }   /* sama ikona: miejsce w niskim rzędzie zostaje dla płytek działów */
  .ekl-kto-wrap { margin-right: 10px; }
  html .site-header .ekl-kto-wrap .ekl-kto { height: 36px; min-width: 0; padding: 0 10px; }
  .ekl-kto-wrap .ekl-kto-herb { height: 26px; }
  .ekl-kto-wrap .ekl-kto-liga .ekl-kto-herb { height: 20px; }
  .ekl-kto-wrap .ekl-kto-nazwa { font-size: 0.9rem; }
  .ekl-herby-kom { top: calc(50% + 22px); width: 440px; padding: 8px; }
  .ekl-herby-k-liga { height: 40px; }
  html.ekl-herby-js.ekl-herby-podp-on:not(.ekl-herby-pasek) .ekl-herby-podp { top: calc(50% + 26px); }
  html.ekl-herby-pasek body.liga-ekstraklasa:has(.ekl-herby-kom) { --ekl-top-h: 44px; }
  html.ekl-herby-pasek .ekl-herby-kom { padding: 0 var(--s4, 16px); }
  html.ekl-herby-pasek .ekl-herby-k:not(.ekl-herby-k-liga) { width: min(100%, 38px); }
  html.ekl-herby-pasek .ekl-herby-k-liga { height: 36px; padding: 0 10px; }
  html.ekl-herby-pasek .ekl-herby-k-liga .ekl-herby-k-logo { height: 22px; }
  html.ekl-herby-pasek .ekl-herby-pin.ekl-herby-odepnij { width: 30px; height: 30px; }
}
@media (min-width: 641px) and (hover: hover) {
  .ekl-kto:hover + .ekl-herby-kom, .ekl-herby-kom:hover { display: block; }
  html.ekl-herby-podp-on .ekl-kto-wrap:has(.ekl-kto:hover, .ekl-herby-kom:hover) .ekl-herby-podp { display: none; }
}
/* w2_jak.css */
/* „Jak działa Whistar” (Michał 25.10, wariant 2 z /podglad/ikona-o-serwisie/): znak „?” na końcu rzędu działów
   i karta z opisem serwisu. Tylko komputer - poza progiem element znika (telefon bez zmian). Kolory z tokenów:
   ciemny motyw daje w2_ciemny.css. Otwieranie: najechanie myszą, fokus, stuknięcie (ekl_gora.js §7). */
.ekl-jak { display: none; }

@media (min-width: 641px) {
  .ekl-jak { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: 100%; margin-left: auto; padding-left: 12px; }
  .ekl-jak-q { font: inherit; font-size: 17px; font-weight: 750; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent;
    border: 1.6px solid var(--k-ln-1e4b95, #1e4b95); color: var(--k-tx-1e4b95, #1e4b95); transition: background .15s, color .15s; }
  .ekl-jak.otwarte .ekl-jak-q { background: var(--k-tlo-1e4b95, #1e4b95); color: var(--k-tx-ffffff, #ffffff); }
  .ekl-jak-q:focus-visible { outline: 2px solid var(--k-ln-1e4b95, #1e4b95); outline-offset: 3px; }

  .ekl-jak-karta { position: absolute; top: calc(100% - 4px); right: 0; z-index: 80; display: block; width: 580px;
    max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 16px; border-radius: 18px;
    background: var(--bg-card); color: var(--ink); text-align: left; font-size: 0.84rem; line-height: 1.4; white-space: normal;
    box-shadow: 0 12px 40px var(--k-cn-00000029, rgba(0, 0, 0, .16)), 0 0 0 1px var(--hairline);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
  .ekl-jak:focus-within .ekl-jak-karta, .ekl-jak.otwarte .ekl-jak-karta {
    opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
  .ekl-jak-karta::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }   /* most dla myszy */
  .ekl-jak-karta > span { display: block; }

  .ekl-jak-tytul { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
  .ekl-jak-tytul b { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.01em; color: var(--k-tx-1e4b95, #1e4b95); }
  .ekl-jak-tytul a { flex: 0 0 auto; font-size: var(--fs-small); font-weight: 600; color: var(--k-tx-1e4b95, #1e4b95); text-decoration: none; }
  .ekl-jak-tytul a::after { content: " ›"; }
  .ekl-jak-tytul a:hover { text-decoration: underline; }
  .ekl-jak-brew { margin-bottom: 6px; font-size: 0.72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

  .ekl-jak-liczby { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
  .ekl-jak-liczby > span { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--bg-soft);
    font-size: 0.74rem; line-height: 1.25; color: var(--ink-muted); }
  .ekl-jak-liczby b { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap;
    color: var(--k-tx-1e4b95, #1e4b95); font-feature-settings: "tnum"; }
  .ekl-jak-czas { margin-bottom: 14px; padding: 8px 12px; border-radius: 12px; background: var(--k-tlo-eef3fa, #eef3fa); font-size: 0.86rem; line-height: 1.45; }
  .ekl-jak-czas b { color: var(--k-tx-1e4b95, #1e4b95); }

  .ekl-jak-siatka { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .ekl-jak-siatka > span { display: flex; flex-direction: column; gap: 1px; }
  .ekl-jak-siatka b { font-size: 0.86rem; font-weight: 650; color: var(--k-tx-1e4b95, #1e4b95); }
  .ekl-jak-siatka .ekl-jak-szer { grid-column: 1 / -1; }

  @media (prefers-reduced-motion: reduce) { .ekl-jak-q, .ekl-jak-karta { transition: none; } }
}
/* najechanie tylko myszą; dotyk otwiera stuknięciem (klasa .otwarte) */
@media (min-width: 641px) and (hover: hover) {
  .ekl-jak-q:hover { background: var(--k-tlo-1e4b95, #1e4b95); color: var(--k-tx-ffffff, #ffffff); }
  .ekl-jak:hover .ekl-jak-karta { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
}
/* telefon w poziomie (≤ 520 px wysokości) ma układ komputera, ale karta się nie mieści - bez znaku (Michał: „tylko na komputerze”) */
@media (min-width: 641px) and (max-height: 520px) {
  .ekl-jak { display: none; }
}
/* w2_stadiony.css */
/* Stadiony (Michał 31.10): mapa 3.2 (łuna z pojemności + szklane pigułki) i strona stadionu wg opcji 7
   (tytuł na zdjęciu + szklana karta najbliższego meczu, galeria jak na mundialu, pierścienie frekwencji).
   Kolory obu motywów stoją tu jako własne zmienne (--m-* mapa, --sl-* wykres) - jasny domyślnie, ciemny
   tymi samymi selektorami co w2_ciemny.css (Auto przy systemie ciemnym + wybór „Ciemny”). Plik jest poza
   listą tokenizacji `scripts/w2_ciemny_paleta.py`: ciemna mapa to osobna paleta (noc z wariantu 3.2),
   nie przeliczenie jasnej. */

.liga-ekstraklasa {
  --m-tlo: #e7edf5; --m-sas: #f2f3f6; --m-sas-k: #dfe3e9; --m-pl: #ffffff; --m-pl-k: #c3cedd;
  --m-rz: #d3e1f2; --m-rzg: #a9c5e9; --m-jez: #d3e1f2; --m-luna: url(#ekl-mapa-luna-j); --m-rdzen: #1e4b95;
  --m-rdzen-k: #ffffff; --m-linia: #9aa7ba; --m-pg-bg: rgba(255, 255, 255, 0.8); --m-pg-tx: #1d1d1f;
  --m-pg-sub: #6e6e73; --m-pg-ring: rgba(0, 0, 0, 0.06); --m-pg-cien: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(30, 75, 149, 0.14);
  --sl: #1e4b95; --sl-tor: #ececf1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa {
    --m-tlo: #0b1426; --m-sas: #111c31; --m-sas-k: #1b2944; --m-pl: #1a2742; --m-pl-k: #2f4269;
    --m-rz: #22395f; --m-rzg: #294a7a; --m-jez: #22395f; --m-luna: url(#ekl-mapa-luna-c); --m-rdzen: #ffffff;
    --m-rdzen-k: rgba(255, 255, 255, 0); --m-linia: #3b5788; --m-pg-bg: rgba(255, 255, 255, 0.14); --m-pg-tx: #ffffff;
    --m-pg-sub: rgba(255, 255, 255, 0.72); --m-pg-ring: rgba(255, 255, 255, 0.22); --m-pg-cien: 0 4px 14px rgba(0, 0, 0, 0.35);
    --sl: #5b9bff; --sl-tor: #2a2a2d;
  }
}
:root[data-motyw="ciemny"] .liga-ekstraklasa {
  --m-tlo: #0b1426; --m-sas: #111c31; --m-sas-k: #1b2944; --m-pl: #1a2742; --m-pl-k: #2f4269;
  --m-rz: #22395f; --m-rzg: #294a7a; --m-jez: #22395f; --m-luna: url(#ekl-mapa-luna-c); --m-rdzen: #ffffff;
  --m-rdzen-k: rgba(255, 255, 255, 0); --m-linia: #3b5788; --m-pg-bg: rgba(255, 255, 255, 0.14); --m-pg-tx: #ffffff;
  --m-pg-sub: rgba(255, 255, 255, 0.72); --m-pg-ring: rgba(255, 255, 255, 0.22); --m-pg-cien: 0 4px 14px rgba(0, 0, 0, 0.35);
  --sl: #5b9bff; --sl-tor: #2a2a2d;
}

/* --- Mapa 3.2 --- */
.ekl-mapa { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--m-tlo); }
.ekl-mapa-pole { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
.ekl-mapa-pole > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ekl-mapa .m-tlo { fill: var(--m-tlo); }
.ekl-mapa .m-sas { fill: var(--m-sas); stroke: var(--m-sas-k); stroke-width: 0.8; }
.ekl-mapa .m-pl { fill: var(--m-pl); stroke: var(--m-pl-k); stroke-width: 1.2; }
.ekl-mapa .m-rz { fill: none; stroke: var(--m-rz); stroke-width: 0.8; }
.ekl-mapa .m-rzg { fill: none; stroke: var(--m-rzg); stroke-width: 1.6; }
.ekl-mapa .m-jez { fill: var(--m-jez); }
.ekl-mapa .m-luna { fill: var(--m-luna); }
.ekl-mapa .m-rdzen { fill: var(--m-rdzen); stroke: var(--m-rdzen-k); stroke-width: 1.5; }
.ekl-mapa .m-linia { stroke: var(--m-linia); stroke-width: 1; }
.ekl-mapa .dim { opacity: 0.45; }
.ekl-mapa .m-pkt { cursor: pointer; }
.ekl-mapa-lab { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.ekl-mapa-lab.ok { visibility: visible; }
.ekl-mapa-pg { display: flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border-radius: var(--r-pill);
  background: var(--m-pg-bg); color: var(--m-pg-tx); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 0 0 1px var(--m-pg-ring), var(--m-pg-cien); }
.ekl-mapa-pg:hover { box-shadow: 0 0 0 2px #5b9bff, var(--m-pg-cien); }
.ekl-mapa-pg .hb { display: flex; gap: 2px; }
.ekl-mapa-pg img { width: 18px; height: 18px; object-fit: contain; }
.ekl-mapa-pg b { display: block; font-size: 12px; font-weight: 600; }
.ekl-mapa-pg .s { display: block; font-size: 10.5px; color: var(--m-pg-sub); }
.ekl-mapa-zapas { margin-top: var(--s5, 24px); }
@media (max-width: 640px) {
  .ekl-mapa-pg { padding: 2px 7px 2px 3px; gap: 3px; }
  .ekl-mapa-pg img { width: 13px; height: 13px; }
  .ekl-mapa-pg b { font-size: 10px; }
  .ekl-mapa-pg .s { display: none; }
}

/* --- Strona stadionu: galeria (wariant D, ekl_galeria.js) - zdjęcia przewijane w miejscu, tytuł i karta na nich --- */
.sts-hero { display: flex; gap: 8px; height: 470px; }
.sts-glowne { position: relative; flex: 5 1 0; min-width: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); background: #15161a; }
.sts-tor { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sts-tor::-webkit-scrollbar { display: none; }
.sts-slajd { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.sts-slajd img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.sts-glowne::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72)); }
.sts-strz, .sts-pelny { position: absolute; z-index: 3; display: grid; place-items: center; border: 0; color: #fff; cursor: pointer;
  background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sts-strz { top: 22%; width: 40px; height: 40px; border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.sts-strz.l { left: 12px; } .sts-strz.p { right: 12px; }
.sts-strz:disabled { opacity: 0; pointer-events: none; }
.sts-pelny { top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; }
.sts-pelny svg { width: 18px; height: 18px; }
.sts-strz:hover, .sts-pelny:hover { background: rgba(0, 0, 0, 0.6); }
.sts-miniatury { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; }
.sts-min { flex: 0 0 calc((100% - 24px) / 4); min-height: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #15161a; opacity: 0.55; transition: opacity 0.15s; }
.sts-min img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sts-min:hover { opacity: 0.85; }
.sts-min.on { opacity: 1; box-shadow: 0 0 0 2px var(--k-tlo-1e4b95, #1e4b95) inset; outline: 2px solid var(--k-tlo-1e4b95, #1e4b95); outline-offset: -2px; }
.sts-podpis { margin: 8px 0 0; font-size: 0.75rem; color: var(--ink-muted); }
.sts-podpis a { color: inherit; }
.sts-licz { margin-left: 6px; font-variant-numeric: tabular-nums; }
html.sts-fs-otwarty { overflow: hidden; }

/* --- Pełny ekran (jak aplikacja Zdjęcia): czarne tło, palec, pasek miniatur, licznik --- */
.sts-fs { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #000; color: #fff; }
.sts-fs[hidden] { display: none; }
.sts-fs-gora { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.sts-fs-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.1rem; cursor: pointer; }
.sts-fs-tor { display: flex; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.sts-fs-tor::-webkit-scrollbar { display: none; }
.sts-fs-slajd { flex: 0 0 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.sts-fs-slajd img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sts-fs-strz { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, 0.14); font-size: 1.8rem; cursor: pointer; }
.sts-fs-strz.l { left: 16px; } .sts-fs-strz.p { right: 16px; }
.sts-fs-strz:hover, .sts-fs-x:hover { background: rgba(255, 255, 255, 0.28); }
.sts-fs-dol { padding: 10px 16px 16px; display: grid; gap: 10px; justify-items: center; }
.sts-fs-podpis { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); text-align: center; }
.sts-fs-podpis a { color: #fff; }
.sts-fs-min { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sts-fs-min button { flex: 0 0 auto; width: 64px; height: 44px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; opacity: 0.45; cursor: pointer; background: #222; }
.sts-fs-min button.on { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.sts-fs-min img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .sts-fs-strz { display: none; } }   /* dotyk = palec, strzałki tylko z myszą */

.sts-na { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 18px; padding: 22px; color: #fff; pointer-events: none; }
.sts-na a { pointer-events: auto; }
.sts-na .eyebrow { color: rgba(255, 255, 255, 0.8); margin: 0 0 4px; }
.sts-h1 { color: #fff; margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.05; }
.sts-h1-bez { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); margin: 0 0 14px; }
.sts-mecz { display: grid; gap: 6px; min-width: 290px; padding: 14px 16px; border-radius: 18px; text-decoration: none;
  color: #fff; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.sts-mecz:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.sts-mecz-e { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.sts-mecz-d { font-size: 1.12rem; font-weight: 700; }
.sts-mecz-p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sts-mecz-k { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sts-mecz-k b { overflow-wrap: anywhere; }
.sts-bez-zdjec .sts-mecz { min-width: 0; max-width: 440px; }
.sts-mecz img.sts-mecz-h { width: 24px; height: 24px; display: inline-block; object-fit: contain; }
.sts-na img.sts-mecz-h { width: 24px; height: 24px; display: inline-block; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.sts-mecz-s, .sts-mecz-v { font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
.sts-bez-zdjec .sts-mecz { color: var(--ink); background: var(--bg-soft); box-shadow: none; margin: 0 0 8px; }
.sts-bez-zdjec .sts-mecz-e { color: var(--k-tx-1e4b95, #1e4b95); }
.sts-bez-zdjec .sts-mecz-s, .sts-bez-zdjec .sts-mecz-v { color: var(--ink-muted); }

/* --- Strona stadionu: fakty, mapa, frekwencja --- */
.sts-gosp { margin: 16px 0 0; }
.sts-klub { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; margin-right: 14px; }
.sts-klub:hover { color: var(--k-tx-1e4b95, #1e4b95); }
.sts-herb { width: var(--herb-wiersz); height: var(--herb-wiersz); object-fit: contain; }
.sts-sekcja { margin: 36px 0 0; }
.sts-h2 { font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 12px; }
.sts-dwie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sts-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sts-l { background: var(--bg-soft); border-radius: 14px; padding: 14px 16px; }
.sts-lw { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sts-lp { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 2px; }
.sts-dl { margin: 14px 0 0; }
.sts-dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.sts-dl > div:first-child { border-top: 0; }
.sts-dl dt { color: var(--ink-muted); font-size: 0.88rem; }
.sts-dl dd { margin: 0; font-size: 0.95rem; }
.sts-fq-gl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.sts-fq-gl .sts-h2 { margin: 0; }
.sts-fq-lead { margin: 0; color: var(--ink-muted); font-size: 0.92rem; }
.sts-fq-lead b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sts-fp { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 12px; }
.sts-fp-w { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px;
  background: var(--bg-soft); text-decoration: none; color: var(--ink); }
.sts-fp-w:hover { box-shadow: 0 0 0 2px var(--sl) inset; }
.sts-fp-w.rek { box-shadow: 0 0 0 1.5px var(--sl) inset; }
.sts-fp-w svg { width: 76px; height: 76px; }
.sts-fp-t { fill: none; stroke: var(--sl-tor); stroke-width: 3.6; }
.sts-fp-s { fill: none; stroke: var(--sl); stroke-width: 3.6; stroke-linecap: round; }
.sts-fp-w text { font: 700 8px var(--font-sans); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.sts-fp-w text.dl { font-size: 6.6px; letter-spacing: -0.02em; }   /* „~100%” (5 znaków) dotykało łuku (31.10) */
.sts-fp-r { display: flex; gap: 5px; align-items: center; font-size: 0.75rem; color: var(--ink-muted); }
.sts-fp-r img { width: 16px; height: 16px; object-fit: contain; }
.sts-fp-n { font-weight: 600; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sts-filtr { justify-content: flex-start; margin: 36px 0 -16px; }
.sts-fp-w[hidden], .sts-fq-lead[hidden], .venue-page .ekl-mk[hidden] { display: none; }
.sts-sas { display: flex; justify-content: space-between; gap: 10px; margin: 44px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 0.92rem; }
.sts-sas a { color: var(--ink-muted); text-decoration: none; }
.sts-sas a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .sts-hero { height: auto; flex-direction: column; }
  .sts-glowne { flex: none; height: 440px; }
  .sts-miniatury { flex: none; flex-direction: row; overflow-x: auto; }
  .sts-min { flex: 0 0 calc((100% - 24px) / 4); height: 56px; }
  .sts-strz { display: none; }
  .sts-na { flex-direction: column; align-items: stretch; padding: 14px; }
  .sts-mecz { min-width: 0; }
  .sts-dwie { grid-template-columns: 1fr; }
  .sts-dl > div { grid-template-columns: 96px 1fr; }
}
/* w2_sedziowie.css */
/* Sędziowie (whistar 31.10, A/B `/podglad/sedzia2/`, warianty 1B 2A 3A 4A 5C): wykresy profilu sędziego
   w kartach K2. Sędzia = akcent (--sz), liga i pozostali sędziowie = szary (--sz-liga) - forma „emfaza”;
   walidator dataviz: rozróżnienie dla daltonistów ΔE 23 (jasny) / 19 (ciemny), kontrast szarego ≥ 3:1.
   Kolory obu motywów tutaj (poza tokenizacją w2_ciemny_paleta.py, jak w2_stadiony.css). */
.liga-ekstraklasa { --sz: #1e4b95; --sz-liga: #878e99; --sz-tor: #ececf1; --sz-zk: #f2c200; --sz-pow: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa { --sz: #5b9bff; --sz-liga: #6b7280; --sz-tor: #2a2a2d; --sz-pow: #1c1c1e; }
}
:root[data-motyw="ciemny"] .liga-ekstraklasa { --sz: #5b9bff; --sz-liga: #6b7280; --sz-tor: #2a2a2d; --sz-pow: #1c1c1e; }

.ekl-sedz .sz-nast { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.ekl-sedz .sz-nast-e { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 4px; }
.ekl-sedz .sz-h3 { font-size: .9rem; font-weight: 600; color: var(--ink-muted); margin: 22px 0 10px; }
.ekl-sedz .sz-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: var(--ink-muted); margin: 10px 0 0; }
.ekl-sedz .sz-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ekl-sedz .sz-sw { display: inline-block; width: 14px; height: 8px; border-radius: 3px; background: var(--sz); }
.ekl-sedz .sz-sw-l { background: var(--sz-liga); }
.ekl-sedz .sz-sw-g { background: var(--para-gosp); } .ekl-sedz .sz-sw-r { background: var(--para-remis); } .ekl-sedz .sz-sw-a { background: var(--para-gosc); }
.ekl-sedz .sz-przyp { font-size: .78rem; color: var(--ink-muted); margin: 8px 0 0; }
.ekl-sedz .sz-det { margin-top: 12px; } .ekl-sedz .sz-det summary { cursor: pointer; color: var(--accent); font-size: .9rem; padding: 4px 0; }
.ekl-sedz .sz-det .table-scroll { margin-top: 6px; }

/* 1B: kafle z paskiem sędziego i kreską ligi */
.ekl-sedz .sz-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ekl-sedz .sz-l { background: var(--bg-soft); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ekl-sedz .sz-lw { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ekl-sedz .sz-lp { font-size: .82rem; color: var(--ink-muted); }
.ekl-sedz .sz-bul { position: relative; height: 8px; border-radius: 4px; background: var(--sz-tor); margin: 8px 0 2px; }
.ekl-sedz .sz-bul-v { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sz); border-radius: 4px; }
.ekl-sedz .sz-bul-l { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.ekl-sedz .sz-bul-lab { font-size: .72rem; color: var(--ink-muted); }

/* 2A + oś kariery: kolumny na osi z siatką */
.ekl-sedz .sz-wyk { position: relative; height: 230px; padding: 14px 0 26px 34px; }
.ekl-sedz .sz-wyk-n { height: 190px; }
.ekl-sedz .sz-osy { position: absolute; left: 0; top: 14px; bottom: 26px; width: 28px; }
.ekl-sedz .sz-osy span { position: absolute; right: 0; transform: translateY(50%); font-size: .7rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ekl-sedz .sz-siatka { position: absolute; left: 34px; right: 0; top: 14px; bottom: 26px; pointer-events: none; }
.ekl-sedz .sz-siatka i { position: absolute; left: 0; right: 0; height: 1px; background: var(--hairline); }
.ekl-sedz .sz-pole { position: relative; height: 100%; }
.ekl-sedz .sz-kol { position: absolute; bottom: 0; top: 0; width: 4.6%; transform: translateX(-50%); display: flex; justify-content: center; }
.ekl-sedz .sz-kol-s { position: absolute; bottom: 0; width: min(24px, 70%); background: var(--sz); border-radius: 4px 4px 0 0; }
.ekl-sedz .sz-kol-l { position: absolute; width: 100%; height: 2px; background: var(--sz-liga); border-radius: 1px; box-shadow: 0 0 0 1px var(--sz-pow); }
.ekl-sedz .sz-kol:hover .sz-kol-s { opacity: .8; }
.ekl-sedz .sz-etk { position: absolute; transform: translate(-50%, -6px) translateY(-100%); font-size: .75rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ekl-sedz .sz-osx { position: absolute; left: 34px; right: 0; bottom: 0; height: 20px; }
.ekl-sedz .sz-osx span { position: absolute; transform: translateX(-50%); font-size: .68rem; color: var(--ink-muted); white-space: nowrap; }

/* 3: wyniki (kolory pary) + 3A motylek żółtych kartek */
.ekl-sedz .sz-wps { display: flex; flex-direction: column; gap: 10px; }
.ekl-sedz .sz-wp { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: .88rem; }
.ekl-sedz .sz-wp-n { color: var(--ink-muted); } .ekl-sedz .sz-wp-ja .sz-wp-n { color: var(--ink); font-weight: 600; }
.ekl-sedz .sz-wp-p { display: flex; gap: 2px; height: 22px; } .ekl-sedz .sz-wp-p i { display: block; height: 100%; }
.ekl-sedz .sz-wp-p i:first-child { border-radius: 4px 0 0 4px; } .ekl-sedz .sz-wp-p i:last-child { border-radius: 0 4px 4px 0; }
.ekl-sedz .sz-wp:not(.sz-wp-ja) .sz-wp-p { height: 14px; opacity: .75; }
.ekl-sedz .sz-wp-g { background: var(--para-gosp); } .ekl-sedz .sz-wp-r { background: var(--para-remis); } .ekl-sedz .sz-wp-a { background: var(--para-gosc); }
.ekl-sedz .sz-wp-l { font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .ekl-sedz .sz-wp-l b { color: var(--ink); }
.ekl-sedz .sz-mot { display: flex; flex-direction: column; gap: 10px; }
.ekl-sedz .sz-mot-g { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.ekl-sedz .sz-mot-w { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px minmax(0, 1fr) 36px; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.ekl-sedz .sz-mot-n { text-align: center; font-size: .85rem; font-weight: 600; } .ekl-sedz .sz-mot-lg .sz-mot-n { color: var(--ink-muted); font-weight: 400; }
.ekl-sedz .sz-mot-v { font-size: .9rem; font-weight: 600; } .ekl-sedz .sz-mot-w .sz-mot-v:first-child { text-align: right; }
.ekl-sedz .sz-mot-b { height: 14px; display: flex; }
.ekl-sedz .sz-mot-b i { display: block; height: 100%; background: var(--sz); border-radius: 0 4px 4px 0; }
.ekl-sedz .sz-mot-bl { justify-content: flex-end; } .ekl-sedz .sz-mot-bl i { border-radius: 4px 0 0 4px; }
.ekl-sedz .sz-mot-lg .sz-mot-b i { background: var(--sz-liga); }

/* 4A: pasy kropek - sędziowie sezonu */
.ekl-sedz .sz-pasy { display: flex; flex-direction: column; gap: 16px; }
.ekl-sedz .sz-pas-t { margin: 0 0 6px; font-size: .88rem; } .ekl-sedz .sz-pas-t b { font-weight: 600; }
.ekl-sedz .sz-pas-tor { position: relative; height: 26px; border-radius: 13px; background: var(--bg-soft); margin: 0 6px; }
.ekl-sedz .sz-kr { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--sz-liga); opacity: .55; transform: translate(-50%, -50%); }
.ekl-sedz .sz-kr-ja { width: 14px; height: 14px; background: var(--sz); opacity: 1; box-shadow: 0 0 0 2px var(--sz-pow); z-index: 2; }
.ekl-sedz .sz-kr:hover { opacity: 1; z-index: 3; }
.ekl-sedz .sz-pas-sr { position: absolute; top: 3px; bottom: 3px; width: 2px; background: var(--ink-muted); transform: translateX(-50%); }
.ekl-sedz .sz-pas-sk { display: flex; justify-content: space-between; margin: 3px 6px 0; font-size: .7rem; color: var(--ink-muted); }
.ekl-sedz .sz-kr-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sz-liga); opacity: .6; }
.ekl-sedz .sz-kr-sw.sz-kr-ja { width: 12px; height: 12px; background: var(--sz); opacity: 1; }
.ekl-sedz .sz-sr-sw { display: inline-block; width: 2px; height: 12px; background: var(--ink-muted); }

/* 5C: kluby - różnica od średniej klubu */
.ekl-sedz .sz-klub { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ekl-sedz .sz-klub span { white-space: normal; line-height: 1.25; }   /* §8.0b: nazwy klubów się zawijają, nie okrajamy */
.ekl-sedz .sz-h { width: var(--herb-gesty); height: var(--herb-gesty); object-fit: contain; flex: none; }
.ekl-sedz .sz-kl-w { display: grid; grid-template-columns: minmax(0, 1.2fr) 44px minmax(0, 2fr) 52px; gap: 12px; align-items: center; padding: 6px 0; font-size: .9rem; }
.ekl-sedz .sz-kl-w + .sz-kl-w { border-top: 1px solid var(--hairline); }
.ekl-sedz .sz-kl-m { color: var(--ink-muted); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.ekl-sedz .sz-kl-v { text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; }
.ekl-sedz .sz-dvh { position: relative; height: 22px; }
.ekl-sedz .sz-dvh-0 { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-muted); }
.ekl-sedz .sz-dvh-b { position: absolute; top: 5px; height: 12px; }
.ekl-sedz .sz-dvh-b.p { background: var(--sz); border-radius: 0 4px 4px 0; } .ekl-sedz .sz-dvh-b.m { background: var(--sz-liga); border-radius: 4px 0 0 4px; }

/* ostatnie mecze */
.ekl-sedz .sz-ow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 46px minmax(0, 1fr) 70px; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 10px; color: inherit; text-decoration: none; font-size: .92rem; }
.ekl-sedz .sz-ow + .sz-ow { border-top: 1px solid var(--hairline); } .ekl-sedz a.sz-ow:hover { background: var(--bg-soft); }
.ekl-sedz .sz-ow-d { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.ekl-sedz .sz-ow-k { display: inline-flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.25; }
.ekl-sedz .sz-ow-dom { justify-content: flex-end; }
.ekl-sedz .sz-ow-gh, .ekl-sedz .sz-ow-ga { display: none; }
.ekl-sedz .sz-ow-w { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ekl-sedz .sz-ow-z { color: var(--ink-muted); font-size: .82rem; text-align: right; }
.ekl-sedz .sz-zk { display: inline-block; width: 8px; height: 11px; border-radius: 2px; background: var(--sz-zk); margin-right: 5px; vertical-align: -1px; }

/* lista sędziów */
.ekl-sedz .sz-lista-n { font-size: .8rem; color: var(--ink-muted); margin: 8px 0 0; }

@media (max-width: 640px) {
  .ekl-sedz .sz-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ekl-sedz .sz-lw { font-size: 1.35rem; }
  .ekl-sedz .sz-wyk { padding-left: 26px; } .ekl-sedz .sz-osy { width: 22px; } .ekl-sedz .sz-siatka, .ekl-sedz .sz-osx { left: 26px; }
  .ekl-sedz .sz-osx span:not(:nth-child(3n+1)):not(:last-child) { display: none; } .ekl-sedz .sz-etk { display: none; }
  .ekl-sedz .sz-wp { grid-template-columns: minmax(0, 1fr) auto; } .ekl-sedz .sz-wp-p { grid-column: 1 / 3; grid-row: 2; }
  .ekl-sedz .sz-mot-w { grid-template-columns: 30px minmax(0, 1fr) 70px minmax(0, 1fr) 30px; gap: 5px; } .ekl-sedz .sz-mot-n { font-size: .72rem; }
  .ekl-sedz .sz-kl-w { grid-template-columns: minmax(0, 1fr) 36px 48px; row-gap: 4px; }
  .ekl-sedz .sz-kl-w > .sz-dvh { grid-column: 1 / 4; grid-row: 2; } .ekl-sedz .sz-kl-w .sz-kl-v { grid-column: 3; grid-row: 1; }
  .ekl-sedz .sz-ow { grid-template-columns: 54px minmax(0, 1fr) 22px; grid-template-areas: "d dom gh" "d gos ga" "d z z"; row-gap: 3px; font-size: .9rem; }
  .ekl-sedz .sz-ow-d { grid-area: d; align-self: start; padding-top: 2px; }
  .ekl-sedz .sz-ow-dom { grid-area: dom; flex-direction: row-reverse; justify-content: flex-end; }
  .ekl-sedz .sz-ow-gos { grid-area: gos; } .ekl-sedz .sz-ow-w { display: none; }
  .ekl-sedz .sz-ow-gh, .ekl-sedz .sz-ow-ga { display: block; text-align: right; font-weight: 700; }
  .ekl-sedz .sz-ow-gh { grid-area: gh; } .ekl-sedz .sz-ow-ga { grid-area: ga; } .ekl-sedz .sz-ow-z { grid-area: z; text-align: left; }
  .ekl-sedz .sz-par, .ekl-sedz .ekl-sedz-t .sec { display: none; }
}
/* w2_ciemny.css */
/* warsztat2: warstwa ciemny (19.10, recenzja dyrektora UX, P3-3)
   Strona szanuje ciemny motyw systemu (prefers-color-scheme: dark); w stopce przełącznik
   Auto · Jasny · Ciemny (base.html.j2, wybór w localStorage -> <html data-motyw="jasny|ciemny">,
   brak atrybutu = Auto). Blok media niżej = Auto bez wyboru „Jasny”; blok na końcu pliku = wybór
   „Ciemny” - generowana kopia tego samego źródła (jedno miejsce edycji).
   Zasięg: strony działu (body.liga-ekstraklasa) poza wewnętrznymi stronami A/B (*-page); admin
   i reszta serwisu zostają jasne (tokeny niezdefiniowane = literały jasnego).
   Mechanizm: twarde kolory w CSS działu stoją jako var(--k-<rola>-<hex>, <literal>) - w jasnym
   token jest niezdefiniowany i działa literal (jasny piksel w piksel jak był), tu dostaje barwę
   ciemną. Nowy twardy kolor w CSS: python scripts/w2_ciemny_paleta.py --tokenizuj --zapisz
   (straż: tests/test_w2_ciemny.py). Tu też ciemne wartości tokenów semantycznych z tokens.css
   (--bg, --ink, ...): jeden plik = cały motyw. Lustro zakresu: meta theme-color w base.html.j2. */

/* Przełącznik motywu w stopce: kompaktowe pigułki jak .widok-sw / .ekl-st-zpill (na tokenach). */
.motyw-sw { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--bg); }
.motyw-sw[hidden] { display: none; }
.motyw-sw button { font: inherit; font-size: var(--fs-small); line-height: 1.2; border: 0; background: none;
  padding: 0.4rem 0.8rem; border-radius: var(--r-pill); color: var(--ink-muted); cursor: pointer; }
.motyw-sw button:hover { color: var(--ink); }
.motyw-sw button[aria-pressed="true"] { background: var(--k-tlo-accent, var(--accent)); color: var(--accent-ink); }   /* bez pogrubienia: szerokość pigułki stała przy zmianie wyboru */
.motyw-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]):has(body.liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page)) {
    color-scheme: dark;
    /* tokeny semantyczne (tokens.css): powierzchnie jak Apple - strona czarna, sekcje #161618,
       karty #242426; tekst #f5f5f7 / #a1a1a6 */
    --bg: #000000;
    --bg-soft: #161618;
    --bg-card: #242426;
    --ink: #f5f5f7;
    --ink-muted: #a1a1a6;
    --hairline: #38383a;
    --accent: #4cc985;   /* tekst/linki; tło akcentu pod białym tekstem w działach = --k-tlo-accent */
    --accent-hover: #6fd89e;
    --accent-ink: #ffffff;
    --accent-soft: rgba(76, 201, 133, 0.14);
    --accent-soft-2: rgba(76, 201, 133, 0.24);
    --ok: #4cc985;
    --warn: #e0b341;
    --bad: #ff6b5e;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 24px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.6);
    /* >>> paleta ról (generowana: scripts/w2_ciemny_paleta.py --zapisz; nie edytuj ręcznie) */
    --para-gosp: #2dd4bf;
    --para-remis: #6d7580;
    --para-gosc: #8b5cf6;
    --para-gosp-tx: #2dd4bf;
    --para-remis-tx: #a1a1a6;
    --para-gosc-tx: #a78bfa;
    --para-gosp-na: #1d1d1f;
    --para-remis-na: #ffffff;
    --para-gosc-na: #000000;
    --k-cn-00000014: rgba(0, 0, 0, 0.176);
    --k-cn-00000017: rgba(0, 0, 0, 0.198);
    --k-cn-0000001f: rgba(0, 0, 0, 0.264);
    --k-cn-00000024: rgba(0, 0, 0, 0.308);
    --k-cn-00000026: rgba(0, 0, 0, 0.33);
    --k-cn-00000029: rgba(0, 0, 0, 0.352);
    --k-cn-0000002e: rgba(0, 0, 0, 0.396);
    --k-cn-00000033: rgba(0, 0, 0, 0.44);
    --k-cn-00000040: rgba(0, 0, 0, 0.55);
    --k-cn-00000047: rgba(0, 0, 0, 0.6);
    --k-cn-00000059: rgba(0, 0, 0, 0.6);
    --k-cn-00000066: rgba(0, 0, 0, 0.6);
    --k-cn-00000073: rgba(0, 0, 0, 0.6);
    --k-cn-00000080: rgba(0, 0, 0, 0.6);
    --k-cn-004c9a40: rgba(94, 160, 245, 0.25);
    --k-cn-00683638: rgba(96, 179, 124, 0.22);
    --k-cn-1a7f37: #1a7f37;
    --k-cn-1d1d1f: #1d1d1f;
    --k-cn-c2281e: #c2281e;
    --k-cn-d5dbe2: #3f3f3f;
    --k-cn-d8dbe0: #3f3f3f;
    --k-cn-e3e7ec: #242c35;
    --k-cn-eceef0: #373737;
    --k-cn-ffffff: #242426;
    --k-ln-0000001f: rgba(255, 255, 255, 0.138);
    --k-ln-00000040: rgba(255, 255, 255, 0.287);
    --k-ln-00000047: rgba(255, 255, 255, 0.322);
    --k-ln-004c9a: #3071c3;
    --k-ln-0b2a4a: #547499;
    --k-ln-111111: #ffffff;
    --k-ln-1a7f37: #25873e;
    --k-ln-1a9850: #1a9850;
    --k-ln-1d1d1f: #f1f1f1;
    --k-ln-1e4b95: #4170bd;
    --k-ln-235f36: #468156;
    --k-ln-2a7f9e: #2a7f9e;
    --k-ln-3a3a3c: #d0d0d0;
    --k-ln-8a929c: #616161;
    --k-ln-b8860b: #b8860b;
    --k-ln-c2281e: #cd3428;
    --k-ln-c3c9d0: #404040;
    --k-ln-c9d0d8: #3e3e3e;
    --k-ln-cccccc: #3f3f3f;
    --k-ln-cfe2d3: #3b5441;
    --k-ln-d0d3d8: #3d3d3d;
    --k-ln-d1002a: #d91631;
    --k-ln-dddddd: #3a3a3a;
    --k-ln-dfe3e8: #383838;
    --k-ln-e3e3e6: #383838;
    --k-ln-e3e3e8: #383838;
    --k-ln-e3e5e9: #383838;
    --k-ln-e5e5ea: #383838;
    --k-ln-eeeeee: #353535;
    --k-ln-eef0f3: #353535;
    --k-ln-f0f0f3: #353535;
    --k-ln-ffffff: #242426;
    --k-ln-ffffff40: rgba(36, 36, 38, 0.25);
    --k-ln-ffffff59: rgba(36, 36, 38, 0.35);
    --k-ln-ffffff99: rgba(36, 36, 38, 0.6);
    --k-ln-ffffffb2: rgba(36, 36, 38, 0.7);
    --k-tlo-0000000a: rgba(255, 255, 255, 0.046);
    --k-tlo-0000000f: rgba(255, 255, 255, 0.069);
    --k-tlo-00000012: rgba(255, 255, 255, 0.081);
    --k-tlo-00000073: rgba(255, 255, 255, 0.517);
    --k-tlo-00000080: rgba(255, 255, 255, 0.575);
    --k-tlo-000000b2: rgba(255, 255, 255, 0.805);
    --k-tlo-000000eb: #ffffff;
    --k-tlo-004c9a: #2d6fc0;
    --k-tlo-004c9a0f: rgba(94, 160, 245, 0.102);
    --k-tlo-004c9a14: rgba(94, 160, 245, 0.136);
    --k-tlo-004c9a17: rgba(94, 160, 245, 0.153);
    --k-tlo-004c9a1a: rgba(94, 160, 245, 0.17);
    --k-tlo-004c9a2e: rgba(94, 160, 245, 0.306);
    --k-tlo-004c9a66: rgba(94, 160, 245, 0.68);
    --k-tlo-005aa01a: rgba(89, 163, 239, 0.17);
    --k-tlo-00683612: rgba(96, 179, 124, 0.119);
    --k-tlo-0068361f: rgba(96, 179, 124, 0.204);
    --k-tlo-007ab41a: rgba(72, 168, 229, 0.17);
    --k-tlo-0b2a4a: #517297;
    --k-tlo-1095c1: #1095c1;
    --k-tlo-15161a: #3c3d41;
    --k-tlo-1a7f37: #1a7f37;
    --k-tlo-1a7f371a: rgba(89, 182, 107, 0.17);
    --k-tlo-1a7f3740: rgba(89, 182, 107, 0.425);
    --k-tlo-1a9850: #1a9850;
    --k-tlo-1a98501a: rgba(70, 184, 110, 0.17);
    --k-tlo-1d1d1f: #3d3d3f;
    --k-tlo-1e4b95: #3f6dbb;
    --k-tlo-1f8a3e: #1f8a3e;
    --k-tlo-276b3c: #397c4b;
    --k-tlo-2f7d46: #2f7d46;
    --k-tlo-3a3a3c: #3d3d3f;
    --k-tlo-5a3ca01a: rgba(163, 137, 245, 0.17);
    --k-tlo-5cb87a: #5cb87a;
    --k-tlo-688aba: #688aba;
    --k-tlo-7d7d7d: #5b5b5b;
    --k-tlo-8e8e93: #68686d;
    --k-tlo-9aa0a6: #585858;
    --k-tlo-9aa1ab: #585858;
    --k-tlo-9aa2ac: #575757;
    --k-tlo-9aa9bd: #2c3949;
    --k-tlo-9db4d4: #2c405a;
    --k-tlo-accent: #2f6ccc;
    --k-tlo-accent-hover: #3b7ad8;
    --k-tlo-b01a10: #cb392b;
    --k-tlo-b8860b1a: rgba(199, 149, 40, 0.17);
    --k-tlo-b8860b1f: rgba(199, 149, 40, 0.204);
    --k-tlo-b9c8de: #414e60;
    --k-tlo-c2281e: #cd3529;
    --k-tlo-c2281e17: rgba(255, 101, 84, 0.153);
    --k-tlo-c2281e1a: rgba(255, 101, 84, 0.17);
    --k-tlo-c2281e38: rgba(255, 101, 84, 0.374);
    --k-tlo-c2281e8c: rgba(255, 101, 84, 0.935);
    --k-tlo-c2281eeb: #ff6554;
    --k-tlo-c3c7ce: #474747;
    --k-tlo-c3c9d0: #464646;
    --k-tlo-c3c9d1: #464646;
    --k-tlo-c8202033: rgba(253, 102, 90, 0.34);
    --k-tlo-c8281e1a: rgba(251, 105, 88, 0.17);
    --k-tlo-c9a227: #c9a227;
    --k-tlo-c9cdd3: #454545;
    --k-tlo-d0645a: #d0645a;
    --k-tlo-d282001f: rgba(218, 138, 23, 0.204);
    --k-tlo-d4d8dd: #404040;
    --k-tlo-d62828: #d62828;
    --k-tlo-d62d20: #d62d20;
    --k-tlo-d8e3f3: #162b4a;
    --k-tlo-d9a441: #d9a441;
    --k-tlo-dee2e7: #242c35;
    --k-tlo-dfe3e8: #242c35;
    --k-tlo-e0245e: #e0245e;
    --k-tlo-e0785a: #e0785a;
    --k-tlo-e0a000: #e0a000;
    --k-tlo-e2ebf7: #1b2c43;
    --k-tlo-e2eee4: #19321f;
    --k-tlo-e3e5e9: #3b3b3b;
    --k-tlo-e5e5ea: #3b3b3b;
    --k-tlo-e8590c: #e8590c;
    --k-tlo-e8d27a: #342b03;
    --k-tlo-e8f4ec: #193223;
    --k-tlo-e9c46a: #e9c46a;
    --k-tlo-e9e9ee: #393939;
    --k-tlo-e9f3eb: #1d3122;
    --k-tlo-ebebef: #383838;
    --k-tlo-eceef0: #373737;
    --k-tlo-eceef1: #373737;
    --k-tlo-eef2f5: #161618;
    --k-tlo-eef3fa: #232c39;
    --k-tlo-f0f0f2: #161618;
    --k-tlo-f4c20d: #f4c20d;
    --k-tlo-f5f5f7: #161618;
    --k-tlo-fbe3e1: #471c1b;
    --k-tlo-fbeae8: #40221f;
    --k-tlo-fbf3da: #352a03;
    --k-tlo-fbfbfc: #161618;
    --k-tlo-fdeceb: #402221;
    --k-tlo-fff3cd: #352a03;
    --k-tlo-ffffff: #242426;
    --k-tlo-ffffff1f: rgba(36, 36, 38, 0.12);
    --k-tlo-ffffff47: rgba(36, 36, 38, 0.28);
    --k-tlo-ffffffd9: rgba(36, 36, 38, 0.85);
    --k-tlo-ffffffe6: rgba(36, 36, 38, 0.9);
    --k-tlo-ffffffeb: rgba(36, 36, 38, 0.92);
    --k-tlo-fffffff0: rgba(36, 36, 38, 0.94);
    --k-tlo-lepka-komorka: #242426;
    --k-tlo-odwrocone: #48484a;
    --k-tlo-pasek-herbow: #0e0e10;
    --k-tlo-pasek-herbow-hover: #2c2c2e;
    --k-tlo-plytka-wyboru: #3a3a3c;
    --k-tx-003366: #75a6e2;
    --k-tx-003a75: #70a6ea;
    --k-tx-004c9a: #63a5fb;
    --k-tx-0a5da0: #60a8f1;
    --k-tx-0b2a4a: #84a6ce;
    --k-tx-111111: #f7f7f7;
    --k-tx-1a7f37: #59b66b;
    --k-tx-1a8a3c: #52b767;
    --k-tx-1a9850: #46b86e;
    --k-tx-1d1d1f: #f1f1f1;
    --k-tx-1e4b95: #73a5f6;
    --k-tx-1f8a4c: #53b675;
    --k-tx-3a3a3c: #d0d0d0;
    --k-tx-3b4148: #c9c9c9;
    --k-tx-5a3ca0: #ac95f9;
    --k-tx-5a5a5f: #afafaf;
    --k-tx-5a5f66: #ababab;
    --k-tx-6e6e73: #a1a1a6;
    --k-tx-6ee7a0: #6ee7a0;
    --k-tx-7a5b00: #c1a057;
    --k-tx-7bd88f: #7bd88f;
    --k-tx-8a5a00: #cd9a53;
    --k-tx-a07d1e: #c4a047;
    --k-tx-a1231a: #fa8070;
    --k-tx-b06e00: #db9640;
    --k-tx-b42318: #fd7e6d;
    --k-tx-b54708: #f78351;
    --k-tx-c2281e: #fb806f;
    --k-tx-d6493b: #fc7f6e;
    --k-tx-f7a6a6: #f7a6a6;
    --k-tx-ffffff: #ffffff;
    --k-tx-ffffffcc: rgba(255, 255, 255, 0.8);
    --k-tx-ffffffd9: rgba(255, 255, 255, 0.85);
    --k-txs-000000: #000000;
    --k-wp-9aa1ab: #585858;
    --k-zm-003c7c: #8dbbff;
    --k-zm-004c9a: #7cb1ff;
    --k-zm-004c9a14: rgba(110, 168, 255, 0.16);
    --k-zm-004c9a24: rgba(110, 168, 255, 0.2);
    --k-zm-ffffff: #ffffff;
    /* <<< paleta ról */
  }

  /* ---- Herby (pomiar 19.10 na tle karty #242426: udział pikseli o kontraście < 1,5 z tłem).
     Logo ligi 96% (czarny napis) -> jasna płytka; Cracovia 66% (granatowe koło znika) -> jasna
     obwódka sylwetki. Reszta klubów <= 40% i czytelna bez zmian (Jagiellonia, Pogoń: kolorowe pola). */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) img[src*="/static/logos/ekstraklasa."] {
    background: #fff; border-radius: 6px; padding: 2px 4px;
  }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) img[src*="/static/logos/cracovia."] {
    filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .9)) drop-shadow(0 0 .6px rgba(255, 255, 255, .9));
  }

  /* ---- Kolory wpisane w HTML (szablony, buildery Pythona, JS) - atrybut SVG przegrywa z CSS,
     styl inline z !important. Tylko barwy, które na ciemnym tle znikają albo tracą kontrast. */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#1d1d1f"] { stroke: var(--ink); }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [fill="#1d1d1f"] { fill: var(--ink); }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="background:#1d1d1f"] { background: var(--ink) !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#004c9a"] { stroke: #7cb1ff; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [fill="#004c9a"] { fill: #7cb1ff; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="background:#004c9a"] { background: #7cb1ff !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#004c9a"] { color: #7cb1ff !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#eceef1"], :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#e3e5e9"] { stroke: #3a3a3c; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#c9ccd2"], :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#c9cdd3"],
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#adb5bd"] { stroke: #636366; }
  /* barwy stref w podpisach (Liga Mistrzów / Europa / spadek / środek) jako tekst */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#b08a12"] { color: #e0b341 !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#23915a"] { color: #4cc985 !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#d9534a"] { color: #ff7b6e !important; }
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#8a99ad"] { color: #a7b3c3 !important; }
  /* paski rozkładu miejsc (jasnoniebieska skala z białą cyfrą): przyciemnienie tła pod treścią */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .ekl-pseg { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .5); }
  /* widełki punktów: pasek przedziału to akcent z kryciem .28 - na ciemnym jaśniejszy odcień */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .ekl-wbar { background: #7cb1ff; opacity: .4; }
  /* przełącznik „Warsztat | Publiczny” doklejany przez serve.py (src/widok.py) ma białe tło na sztywno */
  :root:not([data-motyw="jasny"]) .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .widok-sw { background: #2c2c2e; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
}

/* >>> wybór „Ciemny” ze stopki (generowana kopia bloku media wyżej: --zapisz; nie edytuj ręcznie) */
:root[data-motyw="ciemny"]:has(body.liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page)) {
  color-scheme: dark;
  /* tokeny semantyczne (tokens.css): powierzchnie jak Apple - strona czarna, sekcje #161618,
     karty #242426; tekst #f5f5f7 / #a1a1a6 */
  --bg: #000000;
  --bg-soft: #161618;
  --bg-card: #242426;
  --ink: #f5f5f7;
  --ink-muted: #a1a1a6;
  --hairline: #38383a;
  --accent: #4cc985;   /* tekst/linki; tło akcentu pod białym tekstem w działach = --k-tlo-accent */
  --accent-hover: #6fd89e;
  --accent-ink: #ffffff;
  --accent-soft: rgba(76, 201, 133, 0.14);
  --accent-soft-2: rgba(76, 201, 133, 0.24);
  --ok: #4cc985;
  --warn: #e0b341;
  --bad: #ff6b5e;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.55), 0 18px 44px rgba(0, 0, 0, 0.6);
  /* paleta ról */
  --para-gosp: #2dd4bf;
  --para-remis: #6d7580;
  --para-gosc: #8b5cf6;
  --para-gosp-tx: #2dd4bf;
  --para-remis-tx: #a1a1a6;
  --para-gosc-tx: #a78bfa;
  --para-gosp-na: #1d1d1f;
  --para-remis-na: #ffffff;
  --para-gosc-na: #000000;
  --k-cn-00000014: rgba(0, 0, 0, 0.176);
  --k-cn-00000017: rgba(0, 0, 0, 0.198);
  --k-cn-0000001f: rgba(0, 0, 0, 0.264);
  --k-cn-00000024: rgba(0, 0, 0, 0.308);
  --k-cn-00000026: rgba(0, 0, 0, 0.33);
  --k-cn-00000029: rgba(0, 0, 0, 0.352);
  --k-cn-0000002e: rgba(0, 0, 0, 0.396);
  --k-cn-00000033: rgba(0, 0, 0, 0.44);
  --k-cn-00000040: rgba(0, 0, 0, 0.55);
  --k-cn-00000047: rgba(0, 0, 0, 0.6);
  --k-cn-00000059: rgba(0, 0, 0, 0.6);
  --k-cn-00000066: rgba(0, 0, 0, 0.6);
  --k-cn-00000073: rgba(0, 0, 0, 0.6);
  --k-cn-00000080: rgba(0, 0, 0, 0.6);
  --k-cn-004c9a40: rgba(94, 160, 245, 0.25);
  --k-cn-00683638: rgba(96, 179, 124, 0.22);
  --k-cn-1a7f37: #1a7f37;
  --k-cn-1d1d1f: #1d1d1f;
  --k-cn-c2281e: #c2281e;
  --k-cn-d5dbe2: #3f3f3f;
  --k-cn-d8dbe0: #3f3f3f;
  --k-cn-e3e7ec: #242c35;
  --k-cn-eceef0: #373737;
  --k-cn-ffffff: #242426;
  --k-ln-0000001f: rgba(255, 255, 255, 0.138);
  --k-ln-00000040: rgba(255, 255, 255, 0.287);
  --k-ln-00000047: rgba(255, 255, 255, 0.322);
  --k-ln-004c9a: #3071c3;
  --k-ln-0b2a4a: #547499;
  --k-ln-111111: #ffffff;
  --k-ln-1a7f37: #25873e;
  --k-ln-1a9850: #1a9850;
  --k-ln-1d1d1f: #f1f1f1;
  --k-ln-1e4b95: #4170bd;
  --k-ln-235f36: #468156;
  --k-ln-2a7f9e: #2a7f9e;
  --k-ln-3a3a3c: #d0d0d0;
  --k-ln-8a929c: #616161;
  --k-ln-b8860b: #b8860b;
  --k-ln-c2281e: #cd3428;
  --k-ln-c3c9d0: #404040;
  --k-ln-c9d0d8: #3e3e3e;
  --k-ln-cccccc: #3f3f3f;
  --k-ln-cfe2d3: #3b5441;
  --k-ln-d0d3d8: #3d3d3d;
  --k-ln-d1002a: #d91631;
  --k-ln-dddddd: #3a3a3a;
  --k-ln-dfe3e8: #383838;
  --k-ln-e3e3e6: #383838;
  --k-ln-e3e3e8: #383838;
  --k-ln-e3e5e9: #383838;
  --k-ln-e5e5ea: #383838;
  --k-ln-eeeeee: #353535;
  --k-ln-eef0f3: #353535;
  --k-ln-f0f0f3: #353535;
  --k-ln-ffffff: #242426;
  --k-ln-ffffff40: rgba(36, 36, 38, 0.25);
  --k-ln-ffffff59: rgba(36, 36, 38, 0.35);
  --k-ln-ffffff99: rgba(36, 36, 38, 0.6);
  --k-ln-ffffffb2: rgba(36, 36, 38, 0.7);
  --k-tlo-0000000a: rgba(255, 255, 255, 0.046);
  --k-tlo-0000000f: rgba(255, 255, 255, 0.069);
  --k-tlo-00000012: rgba(255, 255, 255, 0.081);
  --k-tlo-00000073: rgba(255, 255, 255, 0.517);
  --k-tlo-00000080: rgba(255, 255, 255, 0.575);
  --k-tlo-000000b2: rgba(255, 255, 255, 0.805);
  --k-tlo-000000eb: #ffffff;
  --k-tlo-004c9a: #2d6fc0;
  --k-tlo-004c9a0f: rgba(94, 160, 245, 0.102);
  --k-tlo-004c9a14: rgba(94, 160, 245, 0.136);
  --k-tlo-004c9a17: rgba(94, 160, 245, 0.153);
  --k-tlo-004c9a1a: rgba(94, 160, 245, 0.17);
  --k-tlo-004c9a2e: rgba(94, 160, 245, 0.306);
  --k-tlo-004c9a66: rgba(94, 160, 245, 0.68);
  --k-tlo-005aa01a: rgba(89, 163, 239, 0.17);
  --k-tlo-00683612: rgba(96, 179, 124, 0.119);
  --k-tlo-0068361f: rgba(96, 179, 124, 0.204);
  --k-tlo-007ab41a: rgba(72, 168, 229, 0.17);
  --k-tlo-0b2a4a: #517297;
  --k-tlo-1095c1: #1095c1;
  --k-tlo-15161a: #3c3d41;
  --k-tlo-1a7f37: #1a7f37;
  --k-tlo-1a7f371a: rgba(89, 182, 107, 0.17);
  --k-tlo-1a7f3740: rgba(89, 182, 107, 0.425);
  --k-tlo-1a9850: #1a9850;
  --k-tlo-1a98501a: rgba(70, 184, 110, 0.17);
  --k-tlo-1d1d1f: #3d3d3f;
  --k-tlo-1e4b95: #3f6dbb;
  --k-tlo-1f8a3e: #1f8a3e;
  --k-tlo-276b3c: #397c4b;
  --k-tlo-2f7d46: #2f7d46;
  --k-tlo-3a3a3c: #3d3d3f;
  --k-tlo-5a3ca01a: rgba(163, 137, 245, 0.17);
  --k-tlo-5cb87a: #5cb87a;
  --k-tlo-688aba: #688aba;
  --k-tlo-7d7d7d: #5b5b5b;
  --k-tlo-8e8e93: #68686d;
  --k-tlo-9aa0a6: #585858;
  --k-tlo-9aa1ab: #585858;
  --k-tlo-9aa2ac: #575757;
  --k-tlo-9aa9bd: #2c3949;
  --k-tlo-9db4d4: #2c405a;
  --k-tlo-accent: #2f6ccc;
  --k-tlo-accent-hover: #3b7ad8;
  --k-tlo-b01a10: #cb392b;
  --k-tlo-b8860b1a: rgba(199, 149, 40, 0.17);
  --k-tlo-b8860b1f: rgba(199, 149, 40, 0.204);
  --k-tlo-b9c8de: #414e60;
  --k-tlo-c2281e: #cd3529;
  --k-tlo-c2281e17: rgba(255, 101, 84, 0.153);
  --k-tlo-c2281e1a: rgba(255, 101, 84, 0.17);
  --k-tlo-c2281e38: rgba(255, 101, 84, 0.374);
  --k-tlo-c2281e8c: rgba(255, 101, 84, 0.935);
  --k-tlo-c2281eeb: #ff6554;
  --k-tlo-c3c7ce: #474747;
  --k-tlo-c3c9d0: #464646;
  --k-tlo-c3c9d1: #464646;
  --k-tlo-c8202033: rgba(253, 102, 90, 0.34);
  --k-tlo-c8281e1a: rgba(251, 105, 88, 0.17);
  --k-tlo-c9a227: #c9a227;
  --k-tlo-c9cdd3: #454545;
  --k-tlo-d0645a: #d0645a;
  --k-tlo-d282001f: rgba(218, 138, 23, 0.204);
  --k-tlo-d4d8dd: #404040;
  --k-tlo-d62828: #d62828;
  --k-tlo-d62d20: #d62d20;
  --k-tlo-d8e3f3: #162b4a;
  --k-tlo-d9a441: #d9a441;
  --k-tlo-dee2e7: #242c35;
  --k-tlo-dfe3e8: #242c35;
  --k-tlo-e0245e: #e0245e;
  --k-tlo-e0785a: #e0785a;
  --k-tlo-e0a000: #e0a000;
  --k-tlo-e2ebf7: #1b2c43;
  --k-tlo-e2eee4: #19321f;
  --k-tlo-e3e5e9: #3b3b3b;
  --k-tlo-e5e5ea: #3b3b3b;
  --k-tlo-e8590c: #e8590c;
  --k-tlo-e8d27a: #342b03;
  --k-tlo-e8f4ec: #193223;
  --k-tlo-e9c46a: #e9c46a;
  --k-tlo-e9e9ee: #393939;
  --k-tlo-e9f3eb: #1d3122;
  --k-tlo-ebebef: #383838;
  --k-tlo-eceef0: #373737;
  --k-tlo-eceef1: #373737;
  --k-tlo-eef2f5: #161618;
  --k-tlo-eef3fa: #232c39;
  --k-tlo-f0f0f2: #161618;
  --k-tlo-f4c20d: #f4c20d;
  --k-tlo-f5f5f7: #161618;
  --k-tlo-fbe3e1: #471c1b;
  --k-tlo-fbeae8: #40221f;
  --k-tlo-fbf3da: #352a03;
  --k-tlo-fbfbfc: #161618;
  --k-tlo-fdeceb: #402221;
  --k-tlo-fff3cd: #352a03;
  --k-tlo-ffffff: #242426;
  --k-tlo-ffffff1f: rgba(36, 36, 38, 0.12);
  --k-tlo-ffffff47: rgba(36, 36, 38, 0.28);
  --k-tlo-ffffffd9: rgba(36, 36, 38, 0.85);
  --k-tlo-ffffffe6: rgba(36, 36, 38, 0.9);
  --k-tlo-ffffffeb: rgba(36, 36, 38, 0.92);
  --k-tlo-fffffff0: rgba(36, 36, 38, 0.94);
  --k-tlo-lepka-komorka: #242426;
  --k-tlo-odwrocone: #48484a;
  --k-tlo-pasek-herbow: #0e0e10;
  --k-tlo-pasek-herbow-hover: #2c2c2e;
  --k-tlo-plytka-wyboru: #3a3a3c;
  --k-tx-003366: #75a6e2;
  --k-tx-003a75: #70a6ea;
  --k-tx-004c9a: #63a5fb;
  --k-tx-0a5da0: #60a8f1;
  --k-tx-0b2a4a: #84a6ce;
  --k-tx-111111: #f7f7f7;
  --k-tx-1a7f37: #59b66b;
  --k-tx-1a8a3c: #52b767;
  --k-tx-1a9850: #46b86e;
  --k-tx-1d1d1f: #f1f1f1;
  --k-tx-1e4b95: #73a5f6;
  --k-tx-1f8a4c: #53b675;
  --k-tx-3a3a3c: #d0d0d0;
  --k-tx-3b4148: #c9c9c9;
  --k-tx-5a3ca0: #ac95f9;
  --k-tx-5a5a5f: #afafaf;
  --k-tx-5a5f66: #ababab;
  --k-tx-6e6e73: #a1a1a6;
  --k-tx-6ee7a0: #6ee7a0;
  --k-tx-7a5b00: #c1a057;
  --k-tx-7bd88f: #7bd88f;
  --k-tx-8a5a00: #cd9a53;
  --k-tx-a07d1e: #c4a047;
  --k-tx-a1231a: #fa8070;
  --k-tx-b06e00: #db9640;
  --k-tx-b42318: #fd7e6d;
  --k-tx-b54708: #f78351;
  --k-tx-c2281e: #fb806f;
  --k-tx-d6493b: #fc7f6e;
  --k-tx-f7a6a6: #f7a6a6;
  --k-tx-ffffff: #ffffff;
  --k-tx-ffffffcc: rgba(255, 255, 255, 0.8);
  --k-tx-ffffffd9: rgba(255, 255, 255, 0.85);
  --k-txs-000000: #000000;
  --k-wp-9aa1ab: #585858;
  --k-zm-003c7c: #8dbbff;
  --k-zm-004c9a: #7cb1ff;
  --k-zm-004c9a14: rgba(110, 168, 255, 0.16);
  --k-zm-004c9a24: rgba(110, 168, 255, 0.2);
  --k-zm-ffffff: #ffffff;
  
}

/* ---- Herby (pomiar 19.10 na tle karty #242426: udział pikseli o kontraście < 1,5 z tłem).
   Logo ligi 96% (czarny napis) -> jasna płytka; Cracovia 66% (granatowe koło znika) -> jasna
   obwódka sylwetki. Reszta klubów <= 40% i czytelna bez zmian (Jagiellonia, Pogoń: kolorowe pola). */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) img[src*="/static/logos/ekstraklasa."] {
  background: #fff; border-radius: 6px; padding: 2px 4px;
}
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) img[src*="/static/logos/cracovia."] {
  filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .9)) drop-shadow(0 0 .6px rgba(255, 255, 255, .9));
}

/* ---- Kolory wpisane w HTML (szablony, buildery Pythona, JS) - atrybut SVG przegrywa z CSS,
   styl inline z !important. Tylko barwy, które na ciemnym tle znikają albo tracą kontrast. */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#1d1d1f"] { stroke: var(--ink); }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [fill="#1d1d1f"] { fill: var(--ink); }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="background:#1d1d1f"] { background: var(--ink) !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#004c9a"] { stroke: #7cb1ff; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [fill="#004c9a"] { fill: #7cb1ff; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="background:#004c9a"] { background: #7cb1ff !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#004c9a"] { color: #7cb1ff !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#eceef1"], :root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#e3e5e9"] { stroke: #3a3a3c; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#c9ccd2"], :root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#c9cdd3"],
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [stroke="#adb5bd"] { stroke: #636366; }
/* barwy stref w podpisach (Liga Mistrzów / Europa / spadek / środek) jako tekst */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#b08a12"] { color: #e0b341 !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#23915a"] { color: #4cc985 !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#d9534a"] { color: #ff7b6e !important; }
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) [style*="color:#8a99ad"] { color: #a7b3c3 !important; }
/* paski rozkładu miejsc (jasnoniebieska skala z białą cyfrą): przyciemnienie tła pod treścią */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .ekl-pseg { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .5); }
/* widełki punktów: pasek przedziału to akcent z kryciem .28 - na ciemnym jaśniejszy odcień */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .ekl-wbar { background: #7cb1ff; opacity: .4; }
/* przełącznik „Warsztat | Publiczny” doklejany przez serve.py (src/widok.py) ma białe tło na sztywno */
:root[data-motyw="ciemny"] .liga-ekstraklasa:not(.bz-page, .wp-page, .wz-page) .widok-sw { background: #2c2c2e; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
/* <<< wybór „Ciemny” */