/**
 * match-modals.css - modale szczegółów meczu i statystyk drużyny.
 *
 * Dołączane tylko gdy rozszerzenie jest włączone w panelu admina.
 * Wszystkie klasy mają przedrostek .lns-, żeby nie kolidowały z istniejącymi stylami
 * strony. Tryb ciemny obsłużony tak jak w reszcie serwisu: :root[data-theme="dark"].
 *
 * Układ okna:
 *   .lns-zaslona  - tło z rozmyciem, centruje modal (na telefonie dosuwa go do dołu)
 *   .lns-modal    - kolumna flex: nagłówek, zakładki, przewijana treść
 *
 * Kontener modalu CELOWO nie ma własnego tła. Gdy je miał, na zaokrąglonych rogach
 * prześwitywało spod ciemnego nagłówka: antyaliasing mieszał oba kolory i w trybie
 * jasnym dawało to białe piksele na łuku. Tło niosą sekcje, każda z własnym
 * zaokrągleniem, więc pod krawędzią nie ma drugiej warstwy.
 */

.lns-zaslona {
    --lns-navy: #1a2332;
    --lns-navy-2: #223047;
    --lns-gold: #d4af37;
    --lns-gold-ciemne: #AE802F;
    --lns-gold-jasne: #FFEFA7;
    --lns-blue: #1a4c8b;
    --lns-tlo: #f4f6f9;
    --lns-tlo-2: #eef1f6;
    --lns-karta: #ffffff;
    --lns-tekst: #1a2332;
    --lns-slaby: #64748b;
    --lns-linia: #e2e8f0;
    --lns-zwyciestwo: #16a34a;
    --lns-remis: #94a3b8;
    --lns-porazka: #dc2626;
    --lns-promien: 18px;

    position: fixed;
    inset: 0;
    background: rgba(11, 17, 26, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10000;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: lns-pojaw .18s ease;
}

:root[data-theme="dark"] .lns-zaslona {
    --lns-navy: #131c28;
    --lns-navy-2: #1d283a;
    --lns-tlo: #131c28;
    --lns-tlo-2: #18222f;
    --lns-karta: #1a2332;
    --lns-tekst: #e8edf4;
    --lns-slaby: #94a3b8;
    --lns-linia: #2a3547;
    background: rgba(4, 8, 14, .74);
}

.lns-zaslona[hidden] { display: none; }

@keyframes lns-pojaw { from { opacity: 0 } to { opacity: 1 } }
@keyframes lns-wjazd { from { transform: translateY(18px) scale(.985); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes lns-wsuw  { from { transform: translateY(100%) } to { transform: none } }
@keyframes lns-obrot { to { transform: rotate(360deg) } }

body.lns-blokada { overflow: hidden; }

.lns-modal {
    background: transparent;
    color: var(--lns-tekst);
    /* Punkt odniesienia dla przycisku zamknięcia - trzyma go przy krawędzi okna,
       niezależnie od tego, jak wysoki jest nagłówek. */
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--lns-promien);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    animation: lns-wjazd .24s cubic-bezier(.2, .8, .3, 1);
    font-family: inherit;
    line-height: 1.5;
}
.lns-modal:focus { outline: none; }

/* Uchwyt bottom sheetu - tylko na telefonie, tam gdzie okno dosuwa się do dołu. */
.lns-uchwyt { display: none; }

/* ---------------------------------------------------------------- nagłówek */

.lns-gora {
    flex-shrink: 0;
    background: linear-gradient(160deg, var(--lns-navy-2) 0%, var(--lns-navy) 62%);
    color: #fff;
    padding: 22px 22px 18px;
    position: relative;
    border-radius: var(--lns-promien) var(--lns-promien) 0 0;
    overflow: hidden;
}

/* Cienka złota nitka pod nagłówkiem - ten sam akcent, co paski sekcji na stronie. */
.lns-gora::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--lns-gold-ciemne) 18%, var(--lns-gold-jasne) 50%,
        var(--lns-gold-ciemne) 82%, transparent 100%);
    opacity: .85;
}

/* Neutralizacja globalnego stylu <button> ze style.css (padding 12px 20px,
   margin 5px, font Arial). Bez tego znak X nie był wyśrodkowany w swojej ramce,
   ramka rozjeżdżała się z zadanego kwadratu (42x32 zamiast 34x34), a przycisk
   siedział 5 px niżej i bardziej w prawo, niż wskazywały wartości top/right.
   Każdy przycisk modalu ustawia sobie własny padding poniżej. */
.lns-zamknij,
.lns-wstecz,
.lns-zakladka,
.lns-pastylka,
.lns-link-mecz,
.lns-przebieg-zwin {
    margin: 0;
    font-family: inherit;
}

/* --- powrót do poprzedniego okna ścieżki --- */
/*
   Pastylka w lewym górnym rogu, symetrycznie do krzyżyka. Leży NAD nagłówkiem
   (position: absolute), a nie w nim: nagłówki trzech modali mają trzy różne układy
   (siatka meczu, herb drużyny, znak sędziego) i wstawienie przycisku w każdy z nich
   znaczyłoby trzy różne poprawki przy każdej zmianie.

   Zamiast tego nagłówek dostaje wyższy margines od góry, gdy przycisk istnieje
   (.lns-ma-wstecz niżej) - dzięki temu długi podpis nigdy nie wchodzi w treść,
   niezależnie od tego, jak nazywa się drużyna albo sędzia.
*/
.lns-wstecz {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 260px;
    padding: 0 11px 0 7px;
    height: 34px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.lns-wstecz:hover { background: rgba(255, 255, 255, .22); }
.lns-wstecz:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }
.lns-wstecz svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Podpis przycinany - nazwy par drużyn ("Polonia II Trzebnica - Barycz II Sułów")
   nie mieszczą się w żadnej rozsądnej szerokości. Pełny tekst jest w title. */
.lns-wstecz span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pasek nawigacji zajmuje górę okna, więc nagłówek schodzi niżej. Bez tego
   przycisk kładł się na herbach drużyn w modalu meczu. */
.lns-ma-wstecz .lns-gora { padding-top: 58px; }

.lns-zamknij {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    z-index: 4;
    transition: background .15s, transform .15s;
}
.lns-zamknij svg { width: 17px; height: 17px; }
.lns-zamknij:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg); }
.lns-zamknij:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }

.lns-herb {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 7px;
    flex-shrink: 0;
}
.lns-herb--maly { width: 20px; height: 20px; border-radius: 5px; }
.lns-herb--zastepczy {
    background: linear-gradient(135deg, var(--lns-blue), var(--lns-navy));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
}

/* --- nagłówek meczu --- */

.lns-mecz-gora {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-right: 34px;
}
.lns-ekipa-duza {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}
.lns-ekipa-duza .lns-herb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    padding: 4px;
}
.lns-ekipa-duza .lns-nazwa { font-weight: 700; font-size: .92rem; letter-spacing: .1px; }

.lns-rezultat { text-align: center; }
.lns-rezultat b {
    display: block;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.1;
}
.lns-rezultat span {
    display: block;
    margin-top: 4px;
    font-size: .7rem;
    color: #9fb0c7;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --- nagłówek drużyny --- */

.lns-druzyna-gora { display: flex; align-items: center; gap: 18px; padding-right: 34px; }
.lns-druzyna-gora .lns-herb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    padding: 5px;
}
.lns-druzyna-opis { min-width: 0; }

/* Kolor MUSI być wymuszony - bez tego h3 dziedziczy granat z globalnych stylów
   strony i w trybie jasnym robi się ciemnoniebieski napis na ciemnym tle. */
.lns-druzyna-gora h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0;
    color: #fff;
    font-weight: 800;
}

/* Złoto z przesuwającym się refleksem - ten sam gradient i animacja, co .gold-sweep
   w style.css i profilach zawodników, żeby modale nie odstawały od reszty strony. */
.lns-pozycja,
.lns-bohater-nazwa,
.lns-rezultat b {
    background: linear-gradient(
        110deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lnsGoldSweep 10s ease-in-out infinite;
}
.lns-pozycja { font-size: .84rem; font-weight: 700; margin-top: 5px; }

/* Przebieg skopiowany 1:1 z @keyframes goldSweep w style.css, ale pod własną nazwą.
   Gdyby zachować oryginalną, ten arkusz (ładowany po style.css) nadpisałby animację
   w całym serwisie - a modale mają się dopasować do strony, nie zmieniać jej. */
@keyframes lnsGoldSweep {
    0%, 15%   { background-position: 100% center; }
    40%       { background-position: 0% center; }
    60%       { background-position: 0% center; }
    85%, 100% { background-position: 100% center; }
}

/* Dane meczu chowają się, gdy kibic zjedzie w treść zakładki (JS ustawia
   data-meta na nagłówku). Ta sama technika co przy wykresie: grid-template-rows
   1fr -> 0fr, więc wysokość dojeżdża do naturalnej bez wpisywania jej w piksele. */
.lns-meta-schowek {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .34s cubic-bezier(.2, .8, .3, 1);
}
.lns-meta-klatka { overflow: hidden; min-height: 0; }
.lns-meta { transition: opacity .24s ease, transform .34s cubic-bezier(.2, .8, .3, 1); }

.lns-gora--mecz[data-meta="schowana"] .lns-meta-schowek {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .34s cubic-bezier(.2, .8, .3, 1), visibility 0s .34s;
}
.lns-gora--mecz[data-meta="schowana"] .lns-meta { opacity: 0; transform: translateY(-8px); }

/* Dane meczu: trzy pozycje w jednym wierszu, każda z podpisem nad wartością.
   Wcześniej był to ciąg "ikona + tekst" łamany co pozycję, przez co na węższym
   oknie termin, adres i kolejka stały jedna pod drugą i zjadały pół nagłówka.
   Adres dostaje resztę wiersza, bo tylko on bywa naprawdę długi. */
.lns-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #b8c5d8;
}
.lns-meta-poz {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.lns-meta-poz--stadion { flex: 1 1 210px; }
/* Kreska rozdzielająca zamiast samej przerwy - trzy bloki tekstu obok siebie
   zlewały się w jedno zdanie. */
.lns-meta-poz + .lns-meta-poz {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}
.lns-meta .lns-ico {
    width: 15px;
    height: 15px;
    color: var(--lns-gold);
    opacity: .78;
    flex-shrink: 0;
}
.lns-meta-tresc { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lns-meta-etykieta {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #8fa0b8;
}
.lns-meta-wartosc { font-size: .79rem; font-weight: 600; color: #dbe3ee; line-height: 1.35; }

/* --- pasek stanu meczu (połączenie z wynikami z 90minut) --- */

.lns-stan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: .76rem;
    line-height: 1.4;
}
.lns-stan .lns-ico { width: 15px; height: 15px; flex-shrink: 0; }
.lns-stan--czeka {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #c3cede;
}
.lns-stan--czeka .lns-ico { color: var(--lns-gold); }
.lns-stan--live {
    background: rgba(220, 38, 38, .16);
    border: 1px solid rgba(248, 113, 113, .4);
    color: #fecaca;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lns-kropka {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f87171;
    flex-shrink: 0;
    animation: lns-puls 1.4s ease-in-out infinite;
}
@keyframes lns-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

/* ------------------------------------------------------- przebieg meczu (SVG) */

/* Cały blok jest jedną powierzchnią do klikania: wykres w karcie, a pod nim
   pastylka z uchwytem. Kliknięcie w puste miejsce wykresu zwija tak samo jak
   pastylka (obsługa w JS), więc karta ma wyglądać jak jeden duży przycisk,
   a nie jak wykres z doklejonym paskiem. */
.lns-przebieg {
    margin-top: 14px;
    padding: 10px 10px 0;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    transition: background .3s ease, border-color .3s ease, padding .4s cubic-bezier(.2, .8, .3, 1);
}
.lns-przebieg:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }

/* Zwinięty blok przestaje być kartą - zostaje sama pastylka pośrodku. Ramka wokół
   niej wyglądałaby jak pusty, niedokończony pasek. */
.lns-przebieg[data-zwiniete="1"],
.lns-przebieg[data-zwiniete="1"]:hover {
    padding: 0;
    background: transparent;
    border-color: transparent;
}

/* --- uchwyt zwijania --- */

.lns-przebieg-stopka { display: flex; }

.lns-przebieg-zwin {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s, opacity .18s;
}
.lns-przebieg-zwin:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; animation: none; }

/* --- układ przy rozwiniętym wykresie: płaski uchwyt na dolnej krawędzi --- */

.lns-przebieg[data-zwiniete="0"] .lns-przebieg-zwin {
    justify-content: center;
    gap: 9px;
    padding: 8px 4px 4px;
    background: none;
    border: 0;
    color: #8fa0b8;
    /* Delikatny oddech zamiast ramki i tła - uchwyt ma być widoczny, ale nie ma
       udawać osobnego przycisku w środku wykresu. */
    animation: lns-oddech-uchwytu 3.6s ease-in-out infinite;
}
.lns-przebieg[data-zwiniete="0"] .lns-przebieg-zwin:hover { color: #fff; animation: none; opacity: 1; }
.lns-przebieg[data-zwiniete="0"] .lns-zwin-zegar,
.lns-przebieg[data-zwiniete="0"] .lns-przebieg-mini { display: none; }

@keyframes lns-oddech-uchwytu {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}

/* --- układ po zwinięciu: pasek na całą szerokość --- */

.lns-przebieg[data-zwiniete="1"] .lns-przebieg-zwin {
    gap: 11px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #b8c5d8;
}
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-zwin:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(212, 175, 55, .38);
    color: #fff;
}
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-strzalka--lewa { display: none; }

.lns-zwin-zegar { display: inline-flex; flex-shrink: 0; }
.lns-zwin-zegar .lns-ico { width: 14px; height: 14px; color: var(--lns-gold); opacity: .9; }

/* Podpis zależy od stanu: rozwinięty mówi, co zrobi kliknięcie, zwinięty nazywa
   to, co jest schowane. Dwa osobne elementy, nie podmiana tekstu w JS - dzięki
   temu tłumaczenie obu wariantów jedzie razem z resztą treści. */
.lns-przebieg[data-zwiniete="1"] .lns-podpis-zwin--rozw,
.lns-przebieg[data-zwiniete="0"] .lns-podpis-zwin--zwin { display: none; }
.lns-podpis-zwin { flex-shrink: 0; }

.lns-przebieg-strzalka {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transform: rotate(180deg);
    transition: transform .34s cubic-bezier(.2, .8, .3, 1);
}
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-strzalka { transform: rotate(0deg); }

/* Miniatura zajmuje cały wolny środek paska - im dłuższa linijka, tym łatwiej
   odczytać, w której minucie padły bramki. Przy rozwiniętym wykresie jest ukryta
   (display: none wyżej), bo wszystko widać wprost nad nią. */
.lns-przebieg-mini {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-mini { opacity: 1; transition-delay: .12s; }

.lns-mini-os {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .2) 14%,
        rgba(255, 255, 255, .2) 86%, transparent 100%);
}
.lns-mini-pkt {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    transition: transform .34s cubic-bezier(.2, 1.4, .4, 1), opacity .18s ease;
}
/* Kropki wskakują po kolei, od pierwszej bramki do ostatniej - zwinięcie czyta się
   wtedy jak streszczenie meczu, a nie jak zniknięcie wykresu. */
.lns-przebieg[data-zwiniete="1"] .lns-mini-pkt {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-delay: calc(var(--i, 0) * 45ms + 140ms);
}
.lns-mini-pkt--gosp {
    background: radial-gradient(circle at 32% 28%, #FFEFA7, #D4AF37 60%, #AE802F);
    box-shadow: 0 0 0 1px rgba(26, 35, 50, .85), 0 0 6px rgba(212, 175, 55, .5);
}
.lns-mini-pkt--gosc {
    background: radial-gradient(circle at 32% 28%, #ffffff, #cbd5e1 60%, #94a3b8);
    box-shadow: 0 0 0 1px rgba(26, 35, 50, .85), 0 0 6px rgba(148, 163, 184, .35);
}

/* Zwijanie: grid-template-rows 1fr -> 0fr. Jedyny sposób na płynne dojście do
   naturalnej wysokości treści bez wpisywania jej w piksele, a ta zmienia się
   z szerokością okna. max-height wymagałby zgadywania i szarpałby na końcu. */
.lns-przebieg-schowek {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .4s cubic-bezier(.2, .8, .3, 1);
}
.lns-przebieg-klatka { overflow: hidden; min-height: 0; }
/* Odstęp od góry niesie padding karty, nie treść - inaczej po zwinięciu zostawałby
   pusty pasek nad pastylką. */
.lns-przebieg-wnetrze {
    transform-origin: top center;
    transition: opacity .26s ease, transform .4s cubic-bezier(.2, .8, .3, 1);
}
/* visibility z opóźnieniem równym animacji: zwinięty wykres znika też dla
   klawiatury i czytnika ekranu, ale dopiero gdy skończy się zjeżdżać. Bez tego
   tabulator wpadał w znaczniki bramek, których nie widać. */
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-schowek {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .4s cubic-bezier(.2, .8, .3, 1), visibility 0s .4s;
}
.lns-przebieg[data-zwiniete="1"] .lns-przebieg-wnetrze {
    opacity: 0;
    transform: translateY(-10px) scaleY(.94);
}

/* Płótno łączy warstwę SVG (linia, wypełnienie, siatka) z warstwami HTML
   (linijka czasu, znaczniki zdarzeń, prowadnica, dymek). Znaczniki muszą być
   HTML-em, bo SVG jest tu rozciągane nierównomiernie i kółka wyszłyby elipsami. */
/* Kursor "rączki" na całym płótnie: kliknięcie w puste miejsce zwija wykres,
   więc powierzchnia ma to zapowiadać, a nie zaskakiwać. */
.lns-plotno { position: relative; height: 152px; cursor: pointer; }
.lns-plotno > svg { display: block; width: 100%; height: 100%; }
.lns-obszar-przebiegu { stroke: none; }

/* Linijka czasu - ma pozwolić oszacować minutę, nie rywalizować z linią. */
.lns-linijka { position: absolute; inset: 0 0 auto; height: 16px; pointer-events: none; }
.lns-linijka span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: .6rem;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .34);
}
/* Koniec regulaminowego czasu - jedyny tik, który ma prawo się wyróżniać,
   bo to on nadaje sens bramkom stojącym na prawo od niego. */
.lns-linijka .lns-tik--koniec { color: rgba(212, 175, 55, .75); font-weight: 700; }

.lns-prowadnica {
    position: absolute;
    top: 18px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, .35);
    pointer-events: none;
}
.lns-prowadnica[hidden] { display: none; }

/* --- znaczniki zdarzeń --- */

.lns-znaczniki { position: absolute; inset: 0; }
.lns-mrk {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .15s;
}
.lns-mrk:hover, .lns-mrk:focus-visible { transform: translate(-50%, -50%) scale(1.22); z-index: 2; }
.lns-mrk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Bramka: kółko w barwie drużyny (gospodarz złoto, gość srebro) z piłką w środku.
   Rozmiar celowo niewielki. Większe znaczniki zasłaniały uskok linii i przy serii
   bramek w krótkim odstępie z wykresu robiła się sama grupa ikon, bez widocznego
   przebiegu. Szczegóły i tak pokazuje dymek, więc znacznik ma tylko wskazywać
   miejsce i drużynę.
   Kółko jest niewiele większe od samej piłki - przy szerszej obwódce znacznik
   wyglądał jak duża plama z drobnym rysunkiem w środku i gubił czytelność. */
.lns-mrk--gol { width: 13px; height: 13px; border-radius: 50%; }
.lns-mrk--gol .lns-ico { width: 9.5px; height: 9.5px; stroke-width: 2; }
.lns-mrk--zloto {
    background: radial-gradient(circle at 32% 28%, #FFEFA7, #D4AF37 55%, #AE802F);
    color: #4a3a12;
    box-shadow: 0 0 0 1.2px rgba(26, 35, 50, .9), 0 1px 6px rgba(212, 175, 55, .45);
}
.lns-mrk--srebro {
    background: radial-gradient(circle at 32% 28%, #ffffff, #cbd5e1 55%, #94a3b8);
    color: #33415a;
    box-shadow: 0 0 0 1.2px rgba(26, 35, 50, .9), 0 1px 6px rgba(148, 163, 184, .4);
}
/* Pod kursorem znacznik wychodzi na wierzch i rośnie - wtedy dopiero ma być duży. */
.lns-mrk--gol:hover, .lns-mrk--gol:focus-visible { transform: translate(-50%, -50%) scale(1.6); }

/* Kartka: mały prostokąt na pasie przy krawędzi wykresu. Celowo drobna - to
   zdarzenie drugiego planu, które nie ma zasłaniać bramek przy linii przebiegu. */
.lns-mrk--kartka {
    width: 8px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 0 0 1.5px rgba(26, 35, 50, .85), 0 1px 4px rgba(0, 0, 0, .4);
}
.lns-mrk--kartka:hover, .lns-mrk--kartka:focus-visible { transform: translate(-50%, -50%) scale(1.5); }
.lns-mrk--zolta { background: linear-gradient(150deg, #fde047, #eab308); }
.lns-mrk--czerwona { background: linear-gradient(150deg, #f87171, #dc2626); }

/* --- dymek ze szczegółami --- */

.lns-dymek {
    position: absolute;
    bottom: 6px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 8px;
    max-width: min(280px, 92%);
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(9, 14, 22, .93);
    border: 1px solid rgba(212, 175, 55, .4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    font-size: .76rem;
    line-height: 1.35;
    color: #e8edf4;
    pointer-events: none;
}
.lns-dymek--gora { bottom: auto; top: 20px; }
.lns-dymek[hidden] { display: none; }
.lns-dymek b { font-weight: 700; }
.lns-dymek-min {
    font-weight: 800;
    font-size: .72rem;
    color: var(--lns-gold);
    background: rgba(212, 175, 55, .14);
    border-radius: 5px;
    padding: 1px 6px;
}
.lns-dymek-dol {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .1);
    border-radius: 5px;
    padding: 1px 6px;
}
.lns-dymek-kto { width: 100%; color: #cbd5e1; }
.lns-dymek-dop { width: 100%; font-size: .7rem; color: #94a3b8; }
.lns-dymek-wynik { margin-left: auto; font-weight: 800; letter-spacing: .5px; }
.lns-przebieg-pusto { margin-top: 16px; }
.lns-przebieg-pusto .lns-pusto {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #b8c5d8;
}

.lns-os-zero { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; }
.lns-siatka-v { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.lns-siatka-v--koniec { stroke: rgba(212, 175, 55, .3); stroke-dasharray: 3 4; }
.lns-linia-przebiegu {
    fill: none;
    stroke-width: 2.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, .45));
}
.lns-pk { stroke: var(--lns-navy); stroke-width: 1.6; }

.lns-przebieg-opis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8fa0b8;
}
.lns-przebieg-opis span:first-child::before { content: '▲ '; color: var(--lns-gold); }
.lns-przebieg-opis span:last-child::after { content: ' ▼'; color: #8fa4c0; }

/* ---------------------------------------------------------------- zakładki */

.lns-zakladki {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    padding: 0 8px;
    background: var(--lns-karta);
    border-bottom: 1px solid var(--lns-linia);
    overflow-x: auto;
    scrollbar-width: none;
}
.lns-zakladki::-webkit-scrollbar { display: none; }

.lns-zakladka {
    flex: 1 1 auto;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 13px 12px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--lns-slaby);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.lns-zakladka .lns-ico { width: 17px; height: 17px; flex-shrink: 0; }
.lns-zakladka:hover { color: var(--lns-tekst); background: var(--lns-tlo); }
.lns-zakladka.lns-akt {
    color: var(--lns-blue);
    border-bottom-color: var(--lns-gold);
    background: var(--lns-tlo);
}
.lns-zakladka.lns-akt .lns-ico { color: var(--lns-gold); }
:root[data-theme="dark"] .lns-zakladka.lns-akt { color: var(--lns-gold); }
.lns-zakladka:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: -3px; }

/* ------------------------------------------------------------------- treść */

.lns-tresc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Bez zakotwiczania: przy zmianie wysokości treści (np. przełącznik serii na mapie,
       który do pomiaru chwilowo pokazuje ukryte panele) przeglądarka nie przesuwa nam
       sama pozycji przewinięcia. Scroll trzymamy w kodzie tam, gdzie ma to sens. */
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    padding: 20px 22px 24px;
    background: var(--lns-karta);
    border-radius: 0 0 var(--lns-promien) var(--lns-promien);
}
/* Ładowanie bywa jedyną zawartością modalu - wtedy ono domyka kształt. */
.lns-modal > .lns-ladowanie {
    background: linear-gradient(160deg, var(--lns-navy-2), var(--lns-navy));
    border-radius: var(--lns-promien);
}
.lns-panel { display: none; }
.lns-panel.lns-akt { display: block; animation: lns-pojaw .2s ease; }
.lns-brak { color: var(--lns-slaby); font-size: .88rem; margin: 0; }

.lns-ladowanie {
    padding: 52px 20px;
    text-align: center;
    color: #cdd8e6;
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lns-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid rgba(255, 255, 255, .18);
    border-top-color: var(--lns-gold);
    border-radius: 50%;
    animation: lns-obrot .8s linear infinite;
}

/* Komunikat w miejscu wykresu, dla którego nie ma jeszcze danych. */
.lns-pusto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--lns-tlo);
    border: 1px dashed var(--lns-linia);
    border-radius: 12px;
    color: var(--lns-slaby);
    font-size: .84rem;
    line-height: 1.45;
}
.lns-pusto .lns-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--lns-gold); }

.lns-podpis {
    margin: 10px 0 0;
    font-size: .73rem;
    line-height: 1.5;
    color: var(--lns-slaby);
}

.lns-sekcja { margin-bottom: 26px; }
.lns-sekcja:last-child { margin-bottom: 0; }
.lns-sekcja > h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--lns-slaby);
    margin: 0 0 12px;
    font-weight: 700;
}
/* Krótka złota kreska zamykająca nagłówek sekcji. */
.lns-sekcja > h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--lns-linia), transparent);
}

/* ---------------------------------------------------------------- oś czasu */

.lns-os { position: relative; padding: 4px 0; }
.lns-os::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--lns-linia);
    transform: translateX(-50%);
}
.lns-polowa { text-align: center; margin: 14px 0 10px; }
.lns-polowa span {
    background: var(--lns-tlo);
    color: var(--lns-slaby);
    font-size: .7rem;
    font-weight: 700;
    padding: 4px 13px;
    border-radius: 20px;
    border: 1px solid var(--lns-linia);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .6px;
}
/* Domknięcie osi czasu. Mocniejsze od nagłówków połów, bo to jedyny element, który
   mówi "protokół jest kompletny" - nagłówek połowy zapowiada zdarzenia, ten je zamyka.
   Odstęp u góry większy niż między zdarzeniami, żeby nie czytał się jak kolejne z nich. */
.lns-polowa--koniec { margin-top: 18px; }
.lns-polowa--koniec span {
    color: var(--lns-tekst);
    border-color: var(--lns-gold);
    letter-spacing: .4px;
}
.lns-zdarzenie {
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: center;
    gap: 6px;
    margin: 7px 0;
}
/* grid-row: 1 jest konieczne - bez tego minuta przy zdarzeniu gościa (kolumna 3)
   trafia przez automatyczne rozmieszczanie do następnego wiersza */
.lns-tresc-zd { display: flex; align-items: center; gap: 7px; font-size: .85rem; grid-row: 1; }
.lns-gosp .lns-tresc-zd { grid-column: 1; justify-content: flex-end; text-align: right; }
.lns-gosc .lns-tresc-zd { grid-column: 3; justify-content: flex-start; }
.lns-minuta {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--lns-slaby);
    background: var(--lns-karta);
    position: relative;
    z-index: 1;
}
.lns-ikona { font-size: .95rem; line-height: 1; flex-shrink: 0; }
.lns-kto { font-weight: 600; }
.lns-dopisek { font-size: .72rem; color: var(--lns-slaby); }
.lns-gol .lns-kto { color: var(--lns-zwyciestwo); }

/* ------------------------------------------------------------------ składy */

.lns-sklady { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lns-sklady h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    letter-spacing: .2px;
    color: var(--lns-tekst);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lns-linia);
}
.lns-sklady h5 {
    font-size: .68rem;
    color: var(--lns-slaby);
    margin: 14px 0 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lns-zawodnik { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .84rem; }
.lns-numer {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0;
}
.lns-znaczki { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .75rem; }
/* Ikona zdarzenia razem z minutą - para nie może się rozdzielić przy zawijaniu,
   bo "46'" przy cudzej strzałce to gorsza informacja niż jej brak. */
.lns-znaczek {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.lns-znaczek-min {
    font-size: .66rem;
    font-weight: 700;
    color: var(--lns-slaby);
    font-variant-numeric: tabular-nums;
}

/* Strzałki zmian. Zwykłe znaki geometryczne zamiast emoji 🔺/🔻 - tamte mają kolor
   wpisany w standard Unicode (oba czerwone) i wejście na boisko wyglądało tak samo
   jak zejście. Te przyjmują kolor z arkusza. */
.lns-zm { font-size: .68rem; line-height: 1; font-family: inherit; }
.lns-zm--we { color: var(--lns-zwyciestwo); }
.lns-zm--wy { color: var(--lns-porazka); }
.lns-ikona .lns-zm { font-size: .8rem; }

.lns-sedzia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--lns-tlo);
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 600;
}
.lns-funkcja {
    color: var(--lns-slaby);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: right;
}

/* ------------------------------------------------------------- kafelki bilansu */

.lns-kafelki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.lns-kafelki--male { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.lns-kafelek {
    position: relative;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 12px;
    padding: 13px 10px;
    text-align: center;
    overflow: hidden;
}
/* Kolorowy pasek u góry kafelka - czytelny sygnał, czy to wygrane, czy porażki. */
.lns-kafelek--Z::before,
.lns-kafelek--R::before,
.lns-kafelek--P::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
}
.lns-kafelek--Z::before { background: var(--lns-zwyciestwo); }
.lns-kafelek--R::before { background: var(--lns-remis); }
.lns-kafelek--P::before { background: var(--lns-porazka); }

.lns-kafelek b { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.lns-kafelek span {
    display: block;
    margin-top: 3px;
    font-size: .66rem;
    color: var(--lns-slaby);
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.3;
}
.lns-kafelki--male .lns-kafelek { padding: 11px 8px; }
.lns-kafelki--male .lns-kafelek b { font-size: 1.15rem; }

/* ------------------------------------------- ostatni i następny mecz (skrót) */

.lns-mecze-skrot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
/* Gdy jest tylko jeden mecz (przed sezonem albo po ostatniej kolejce), box zajmuje
   całą szerokość zamiast zostawiać pustą połowę. */
.lns-mecze-skrot > :only-child { grid-column: 1 / -1; }

.lns-karta-meczu {
    position: relative;
    padding: 12px 14px;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-left-width: 3px;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.lns-karta-meczu:hover { transform: translateY(-2px); }
.lns-karta-meczu:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }
.lns-karta-meczu--Z { border-left-color: var(--lns-zwyciestwo); }
.lns-karta-meczu--R { border-left-color: var(--lns-remis); }
.lns-karta-meczu--P { border-left-color: var(--lns-porazka); }
.lns-karta-meczu--next { border-left-color: var(--lns-gold); }

.lns-karta-etykieta {
    display: block;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--lns-slaby);
}
.lns-karta-rywal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    font-size: .88rem;
    font-weight: 600;
}
.lns-karta-rywal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lns-karta-stopka { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.lns-karta-wynik { margin-left: auto; font-size: 1.15rem; font-weight: 800; letter-spacing: .5px; }
.lns-karta-kiedy { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--lns-slaby); }

/* -------------------------------------------------------------------- forma */

.lns-forma { display: flex; gap: 7px; }
.lns-pastylka {
    width: 36px;
    height: 36px;
    padding: 0;   /* jak przy .lns-zamknij: neutralizuje globalny padding <button> */
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: inherit;
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: transform .15s, box-shadow .15s;
}
.lns-pastylka:hover { transform: translateY(-2px); }
.lns-pastylka[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--lns-karta), 0 0 0 4px var(--lns-gold);
}
/* Strzałka wskazująca rozwinięty szczegół. */
.lns-pastylka[aria-expanded="true"]::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--lns-tlo);
}
.lns-pastylka:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }

.lns-Z { background: linear-gradient(140deg, #22c55e, var(--lns-zwyciestwo)); }
.lns-R { background: linear-gradient(140deg, #a8b4c4, var(--lns-remis)); }
.lns-P { background: linear-gradient(140deg, #ef4444, var(--lns-porazka)); }

.lns-forma-szczegol {
    margin-top: 12px;
    padding: 14px;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 12px;
    animation: lns-pojaw .18s ease;
}
.lns-forma-szczegol[hidden] { display: none; }
.lns-forma-naglowek { display: flex; align-items: center; gap: 11px; }
.lns-forma-naglowek b { font-size: .92rem; display: block; }
.lns-forma-meta {
    display: block;
    font-size: .72rem;
    color: var(--lns-slaby);
    margin-top: 2px;
}
.lns-forma-wynik {
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.lns-forma-wynik--Z { color: var(--lns-zwyciestwo); }
.lns-forma-wynik--R { color: var(--lns-slaby); }
.lns-forma-wynik--P { color: var(--lns-porazka); }

/* Przycisk otwierający modal meczu z wnętrza modalu drużyny. */
.lns-link-mecz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background: var(--lns-karta);
    border: 1px solid var(--lns-linia);
    border-radius: 9px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lns-blue);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.lns-link-mecz .lns-ico { width: 15px; height: 15px; }
.lns-link-mecz:hover { border-color: var(--lns-gold); color: var(--lns-gold-ciemne); }
:root[data-theme="dark"] .lns-link-mecz { color: var(--lns-gold); }
:root[data-theme="dark"] .lns-link-mecz:hover { color: var(--lns-gold-jasne); }

/* --------------------------------------------------------- bohater drużyny */

.lns-bohater {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--lns-navy-2), var(--lns-navy));
    border: 1px solid rgba(212, 175, 55, .35);
    position: relative;
    overflow: hidden;
}
.lns-bohater::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--lns-gold), transparent);
}
.lns-bohater-odznaka {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #FFEFA7, #D4AF37 45%, #AE802F);
    color: var(--lns-navy);
    box-shadow: 0 4px 14px rgba(212, 175, 55, .35);
}
.lns-bohater-odznaka .lns-ico { width: 24px; height: 24px; stroke-width: 1.6; }
.lns-bohater-tresc { min-width: 0; }
.lns-bohater-nazwa { display: block; font-size: 1.08rem; font-weight: 800; }

.lns-bohater-liczby {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
}
.lns-bohater-liczby span {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #a9b8cc;
}
.lns-bohater-liczby b { font-size: 1.05rem; color: #fff; letter-spacing: 0; }

/* ------------------------------------------------------------------ wykresy */

.lns-wykres {
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 14px;
    padding: 14px 12px 10px;
}
.lns-wykres svg { display: block; width: 100%; height: auto; }

.lns-os-x { stroke: var(--lns-linia); stroke-width: 1; }
.lns-slupek { transition: opacity .15s; }
.lns-slupek:hover { opacity: .8; }
.lns-slupek--za { fill: var(--lns-gold); }
.lns-slupek--prz { fill: #7f8ea6; }
:root[data-theme="dark"] .lns-slupek--prz { fill: #4d5d78; }

.lns-etykieta-x, .lns-etykieta-y, .lns-wartosc {
    fill: var(--lns-slaby);
    font-size: 11px;
    font-family: inherit;
    text-anchor: middle;
}
.lns-wartosc { font-weight: 700; fill: var(--lns-tekst); font-size: 10.5px; }
.lns-etykieta-y { text-anchor: end; font-weight: 700; }

.lns-linia-tlo {
    fill: none;
    stroke: var(--lns-linia);
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: .85;
}
.lns-linia-pozycji {
    fill: none;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 4px rgba(212, 175, 55, .5));
}
.lns-pk--zloto { fill: var(--lns-gold-jasne); stroke: var(--lns-gold-ciemne); stroke-width: 1.2; }

/* ------------------------------------------ wykres pozycji z odtwarzaniem */

.lns-race {
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 14px;
    padding: 14px 12px 12px;
}
/* Wysokość dobrana pod liczbę drużyn: przy szesnastu miejscach na 230 px herby
   na końcu sezonu nachodziły na siebie. */
.lns-race-plotno { position: relative; height: 264px; }
.lns-race-plotno > svg { display: block; width: 100%; height: 100%; }

/* Linie rysowane są przez JS; stała grubość mimo nierównomiernego rozciągania SVG. */
.lns-race .lns-linia-tlo,
.lns-race .lns-linia-pozycji { vector-effect: non-scaling-stroke; }

.lns-race-herby { position: absolute; inset: 0; pointer-events: none; }
.lns-race-herb {
    position: absolute;
    width: 14px;
    height: 14px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    opacity: .55;
    pointer-events: auto;
}
/* Herb drużyny, w której modalu jesteśmy - większy, w pełnej sile i zawsze na wierzchu. */
.lns-race-herb--moj {
    width: 26px;
    height: 26px;
    opacity: 1;
    z-index: 3;
    border-radius: 6px;
    background: var(--lns-karta);
    padding: 2px;
    box-shadow: 0 0 0 2px var(--lns-gold), 0 2px 8px rgba(0, 0, 0, .35);
}

.lns-race-dymek {
    position: absolute;
    top: 2px;
    z-index: 4;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(9, 14, 22, .95);
    color: #e8edf4;
    font-size: .72rem;
    white-space: nowrap;
    pointer-events: none;
}
.lns-race-dymek[hidden] { display: none; }

.lns-race-sterowanie { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lns-race-play {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--lns-gold), var(--lns-gold-ciemne));
    color: var(--lns-navy);
    cursor: pointer;
}
.lns-race-play svg { width: 15px; height: 15px; margin-left: 2px; }
.lns-race-play:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }
/* W trakcie odtwarzania przycisk zmienia się w pauzę - dwie kreski zamiast trójkąta. */
.lns-race--gra .lns-race-play svg { display: none; }
.lns-race--gra .lns-race-play::after {
    content: '';
    width: 11px;
    height: 13px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

.lns-race-suwak { flex: 1; min-width: 0; accent-color: var(--lns-gold); cursor: pointer; }
.lns-race-kolejka {
    font-size: .7rem;
    color: var(--lns-slaby);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.lns-race-kolejka b { color: var(--lns-tekst); font-size: .82rem; }

/* ------------------------------------------------- mapa cieplna bramek */

.lns-mapa {
    position: relative;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 14px;
    padding: 14px;
}

.lns-mapa-chipy { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.lns-chip {
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--lns-linia);
    border-radius: 20px;
    background: var(--lns-karta);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    color: var(--lns-slaby);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.lns-chip:hover { color: var(--lns-tekst); }
.lns-chip.lns-akt {
    border-color: var(--lns-gold);
    color: var(--lns-gold-ciemne);
    background: rgba(212, 175, 55, .12);
}
:root[data-theme="dark"] .lns-chip.lns-akt { color: var(--lns-gold-jasne); }
.lns-chip:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }

.lns-mapa-siatka { display: grid; gap: 6px; }
.lns-mapa-rzad { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.lns-mapa-etykieta {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--lns-slaby);
    text-align: right;
}

/* Pas termalny: płynny gradient w tle, nad nim przezroczyste pola do podpowiedzi. */
.lns-mapa-pasek {
    position: relative;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    transition: height .18s ease;
}
.lns-pole {
    position: relative;
    cursor: default;
    transition: box-shadow .12s;
}
.lns-pole:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
/* Kreska po doliczonym czasie pierwszej połowy - wizualna przerwa w meczu. */
.lns-pole--przerwa { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .55); }
.lns-pole--przerwa:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }

.lns-mapa-os {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
}
.lns-mapa-os span {
    font-size: .6rem;
    color: var(--lns-slaby);
    text-align: right;
    white-space: nowrap;
}

/* Przełącznik serii chowa niepotrzebny rząd. */
.lns-mapa[data-widok="strzelone"] .lns-mapa-rzad[data-rzad="stracone"],
.lns-mapa[data-widok="stracone"] .lns-mapa-rzad[data-rzad="strzelone"] { display: none; }

/* Pojedyncza seria wykorzystuje miejsce zwolnione przez ukryty rząd - wyższy pas
   czyta się jak lekki zoom i łatwiej trafić kursorem w konkretne pole. Wysokość
   dobrana tak, by zająć dokładnie tyle, co wcześniej dwa rzędy z odstępem (40 + 6 + 40),
   dzięki czemu wysokość zakładki się nie zmienia i modal nie skacze przy przełączaniu. */
.lns-mapa[data-widok="strzelone"] .lns-mapa-rzad[data-rzad="strzelone"] .lns-mapa-pasek,
.lns-mapa[data-widok="stracone"]  .lns-mapa-rzad[data-rzad="stracone"]  .lns-mapa-pasek {
    height: 86px;
}

.lns-mapa-dymek {
    position: absolute;
    z-index: 5;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(9, 14, 22, .95);
    color: #e8edf4;
    font-size: .72rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.lns-mapa-dymek[hidden] { display: none; }

.lns-mapa-skala {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .68rem;
    color: var(--lns-slaby);
}
.lns-skala-pasek {
    flex: 1;
    max-width: 140px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgb(40, 78, 170), rgb(34, 170, 180), rgb(120, 200, 80),
        rgb(245, 200, 60), rgb(240, 130, 40), rgb(200, 32, 32));
}
.lns-mapa-skala b { margin-left: auto; color: var(--lns-tekst); }

.lns-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    font-size: .72rem;
    color: var(--lns-slaby);
}
.lns-leg { display: inline-flex; align-items: center; gap: 6px; }
.lns-leg::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}
.lns-leg--za::before { background: var(--lns-gold); }
.lns-leg--prz::before { background: #7f8ea6; }
.lns-leg--zloto::before { background: linear-gradient(90deg, var(--lns-gold-ciemne), var(--lns-gold-jasne)); }
.lns-leg--szary::before { background: var(--lns-linia); }

/* ------------------------------------------------------- porównania drużyn */

.lns-porownania {
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 14px;
    padding: 16px 16px 8px;
}
.lns-por-glowy {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--lns-linia);
    font-size: .78rem;
    font-weight: 700;
}
.lns-por-glowy span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.lns-por-glowy .lns-ico { width: 15px; height: 15px; color: var(--lns-slaby); }

.lns-por { margin-bottom: 14px; }
.lns-por-etykieta {
    display: block;
    text-align: center;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--lns-slaby);
    margin-bottom: 5px;
    font-weight: 600;
}
.lns-por-rzad { display: flex; align-items: center; gap: 10px; }
.lns-por-liczba {
    width: 30px;
    flex-shrink: 0;
    text-align: center;
    font-size: .92rem;
    font-weight: 700;
    color: var(--lns-slaby);
}
.lns-por-liczba.lns-por--lider { color: var(--lns-tekst); font-size: 1.02rem; }

.lns-por-tor { flex: 1; display: flex; gap: 3px; min-width: 0; }
.lns-por-polowa { flex: 1; height: 9px; background: var(--lns-linia); border-radius: 5px; overflow: hidden; display: flex; }
.lns-por-polowa--l { justify-content: flex-end; }
.lns-por-polowa--p { justify-content: flex-start; }
.lns-por-wypelnienie {
    display: block;
    height: 100%;
    border-radius: 5px;
    transition: width .4s cubic-bezier(.2, .8, .3, 1);
}
.lns-por-polowa--l .lns-por-wypelnienie { background: linear-gradient(90deg, #2f6fbd, var(--lns-blue)); }
.lns-por-polowa--p .lns-por-wypelnienie { background: linear-gradient(90deg, var(--lns-gold), var(--lns-gold-ciemne)); }
.lns-por-wypelnienie:not(.lns-por--lider) { opacity: .5; }

/* --------------------------------------------------------------- strzelcy */

.lns-strzelcy { display: grid; gap: 10px; }
.lns-strzelec {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-radius: 12px;
}
.lns-strzelec--pierwszy { border-color: rgba(212, 175, 55, .45); }
.lns-strzelec .lns-miejsce {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--lns-karta);
    border: 1px solid var(--lns-linia);
    font-size: .74rem;
    font-weight: 800;
    color: var(--lns-slaby);
}
.lns-strzelec--pierwszy .lns-miejsce {
    background: radial-gradient(circle at 32% 28%, #FFEFA7, #D4AF37 55%, #AE802F);
    border-color: transparent;
    color: var(--lns-navy);
}
.lns-strzelec-tresc { flex: 1; min-width: 0; }
.lns-strzelec-gora { display: flex; align-items: baseline; gap: 10px; }
.lns-strzelec-gora b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lns-strzelec-gora .lns-licznik { margin-left: auto; font-size: 1.05rem; font-weight: 800; color: var(--lns-blue); }
:root[data-theme="dark"] .lns-strzelec-gora .lns-licznik { color: var(--lns-gold); }

.lns-strzelec-tor {
    height: 6px;
    margin-top: 6px;
    background: var(--lns-linia);
    border-radius: 4px;
    overflow: hidden;
}
.lns-strzelec-tor i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lns-gold-ciemne), var(--lns-gold), var(--lns-gold-jasne));
}
.lns-strzelec-dopisek {
    display: block;
    margin-top: 5px;
    font-size: .7rem;
    color: var(--lns-slaby);
}

/* ---------------------------------------------------------- skrajne wyniki */

.lns-skrajne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lns-skrajny {
    padding: 12px 14px;
    background: var(--lns-tlo);
    border: 1px solid var(--lns-linia);
    border-left-width: 3px;
    border-radius: 10px;
}
.lns-skrajny--Z { border-left-color: var(--lns-zwyciestwo); }
.lns-skrajny--P { border-left-color: var(--lns-porazka); }
.lns-skrajny > span {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--lns-slaby);
    font-weight: 700;
}
.lns-skrajny .lns-link-mecz {
    width: 100%;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 11px;
}
.lns-skrajny .lns-link-mecz > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.lns-skrajny .lns-link-mecz b { flex-shrink: 0; }

/* ------------------------------------------------------------------- listy */

.lns-lista { display: grid; gap: 7px; }
.lns-poz {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--lns-tlo);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .86rem;
}
.lns-poz--mecz { cursor: pointer; transition: border-color .15s, transform .15s; }
.lns-poz--mecz:hover { border-color: var(--lns-gold); transform: translateX(2px); }
/* Nazwa zabiera resztę wiersza, dzięki czemu ikony dom/wyjazd i daty układają się
   w równe kolumny zamiast dryfować za każdą nazwą o innej długości. */
.lns-poz .lns-rywal { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lns-poz .lns-licznik { margin-left: auto; font-weight: 700; color: var(--lns-slaby); font-size: .78rem; }
/* Data ma stałą szerokość i jest dosunięta do prawej. Dzięki temu jednocyfrowy
   i dwucyfrowy dzień ("5 wrz" vs "12 wrz") nie zmienia położenia ikony dom/wyjazd,
   która stoi tuż przed datą - ikony układają się w równą kolumnę pod sobą. */
.lns-poz--mecz .lns-licznik { min-width: 3.6em; text-align: right; flex-shrink: 0; }
/* Gospodarz / gość jako ikona (domek albo autobus). Napis "DOM" stał tuż obok
   nazwy rywala i konkurował z nią o uwagę; ikona czyta się od razu i zajmuje
   stałą szerokość, więc kolumna wyniku nie skacze. */
.lns-gdzie {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    background: var(--lns-karta);
    border: 1px solid var(--lns-linia);
    border-radius: 7px;
    color: var(--lns-slaby);
    flex-shrink: 0;
}
.lns-gdzie .lns-ico { width: 15px; height: 15px; stroke-width: 1.7; }
.lns-gdzie--dom { color: var(--lns-gold-ciemne); border-color: rgba(212, 175, 55, .45); }
:root[data-theme="dark"] .lns-gdzie--dom { color: var(--lns-gold); }

/* ------------------------------------------- oznaczenie elementów klikalnych */

.lns-klik { cursor: pointer; transition: filter .15s, opacity .15s; }
.lns-klik:hover { filter: brightness(1.08); }
.lns-klik:focus-visible {
    outline: 2px solid var(--lns-gold, #d4af37);
    outline-offset: 2px;
    border-radius: 4px;
}
/* delikatna podkreślona kropka przy nazwach drużyn, żeby dało się poznać klikalność */
span.lns-klik[data-lns-team]:hover,
a.lns-klik[data-lns-team]:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ------------------------------- drużyna klikalna wewnątrz modalu meczu */
/* Herb i nazwa prowadzą do modalu tej drużyny. Sygnał klikalności musi działać
   i na ciemnym nagłówku, i na jasnej treści, więc podświetlenie jest osobne. */
.lns-team-klik {
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s, color .15s;
}
.lns-team-klik:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }

/* Bez ujemnych marginesów - w siatce nagłówka (1fr auto 1fr) wychodziłyby poza
   swoją kolumnę i podchodziły pod wynik. */
.lns-gora .lns-team-klik { padding: 6px 4px; }
.lns-gora .lns-team-klik:hover { background: rgba(255, 255, 255, .1); }

.lns-tresc .lns-team-klik { display: inline-flex; align-items: center; gap: 7px; }
.lns-tresc .lns-team-klik:hover { color: var(--lns-blue); text-decoration: underline dotted; text-underline-offset: 3px; }
:root[data-theme="dark"] .lns-tresc .lns-team-klik:hover { color: var(--lns-gold); }

/* =========================================================== TECZKA SĘDZIEGO */
/*
   Modal otwierany kliknięciem w nazwisko - na podstronie statystyk ligi i w zakładce
   "Sędziowie" modalu meczu. Korzysta z tych samych klocków co modal drużyny
   (.lns-sekcja, .lns-kafelki, .lns-lista, .lns-por), więc niżej są wyłącznie rzeczy,
   których tam nie ma.
*/

/* --- nagłówek --- */

.lns-sedzia-gora { display: flex; align-items: center; gap: 18px; padding-right: 34px; }

/* Znak zamiast herbu: pole tej samej wielkości co herb drużyny, żeby oba modale
   miały nagłówek tej samej wysokości i nie "skakały" przy przechodzeniu między nimi. */
.lns-sedzia-znak {
    width: 64px;
    height: 64px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--lns-gold-jasne);
}
.lns-sedzia-znak .lns-ico { width: 30px; height: 30px; }

.lns-sedzia-gora h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0;
    /* Wymuszone z tego samego powodu co przy drużynie: bez tego h3 dziedziczy
       granat z globalnych stylów i znika na ciemnym nagłówku. */
    color: #fff;
    font-weight: 800;
}

/* --- obsada w modalu meczu: nazwisko jako wejście do teczki --- */

.lns-sedzia--klik {
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color .15s, transform .15s;
}
.lns-sedzia--klik:hover { border-color: var(--lns-gold); transform: translateX(2px); }
.lns-sedzia--klik:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }
.lns-sedzia--klik .lns-funkcja { margin-left: auto; }

/* Strzałka obrócona w prawo - ikona `strzalka` w JS to chevron w dół, wspólny
   z rozwijaniem sekcji. Osobnego glifu nie dokładamy dla jednego zastosowania. */
.lns-sedzia-strzalka {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--lns-slaby);
    transform: rotate(-90deg);
}

/* --- wiersz spotkania w teczce --- */
/*
   Trzy kolumny: para herbów z wynikiem, nazwy z datą, rola z kartkami. Herby stoją
   pierwsze, bo po nich kibic rozpoznaje mecz szybciej niż po nazwach.
*/
.lns-sm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: var(--lns-tlo);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.lns-sm:hover { border-color: var(--lns-gold); transform: translateX(2px); }
.lns-sm:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; }

.lns-sm-pary { display: flex; align-items: center; gap: 7px; }
.lns-sm-wynik {
    font-weight: 800;
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lns-sm-opis { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lns-sm-nazwy {
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lns-sm-meta { font-size: .68rem; color: var(--lns-slaby); }

.lns-sm-prawa { display: flex; align-items: center; gap: 8px; flex: none; }

/* --- plakietka roli --- */

.lns-rola {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--lns-linia);
    color: var(--lns-slaby);
    white-space: nowrap;
}
/* Arbiter główny wyróżniony złotem - to jego mecz, kartki i statystyki.
   Asystent zostaje szary, bo z jego obsady nie liczymy niczego poza obecnością. */
.lns-rola--g {
    border-color: var(--lns-gold);
    color: var(--lns-gold-ciemne);
    background: rgba(212, 175, 55, .1);
}
:root[data-theme="dark"] .lns-rola--g { color: var(--lns-gold); }

/* --- znaczki kartek --- */

.lns-kk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lns-kk--brak { color: var(--lns-slaby); font-weight: 600; font-size: .64rem; text-transform: uppercase; letter-spacing: .3px; }
/* Prostokąty w proporcjach kartki, lekko przechylone - płaskie kwadraty czytały się
   jak kropki listy. Obwódka jest konieczna: sama żółć na jasnym tle znika. */
.lns-kk-z,
.lns-kk-c {
    width: 8px;
    height: 11px;
    border-radius: 1.5px;
    transform: rotate(12deg);
    display: inline-block;
}
.lns-kk-z { background: #eab308; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset; }
.lns-kk-c { background: #dc2626; margin-left: 3px; }

/* --- porównanie z ligą --- */
/*
   Tor pokazuje wartość sędziego jako wypełnienie, a średnią całej obsady jako pionową
   kreskę. Dwa paski obok siebie (jego / liga) zajmowały dwa razy tyle miejsca i gorzej
   odpowiadały na jedyne pytanie, które ta sekcja zadaje: powyżej czy poniżej średniej.
*/
.lns-tlo { margin-bottom: 14px; }
.lns-tlo:last-of-type { margin-bottom: 0; }

.lns-tlo-gora,
.lns-tlo-dol { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lns-tlo-gora { margin-bottom: 6px; font-size: .8rem; font-weight: 600; }
.lns-tlo-gora b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.lns-tlo-tor {
    position: relative;
    height: 9px;
    border-radius: 5px;
    background: var(--lns-tlo-2);
    overflow: hidden;
}
.lns-tlo-jego {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--lns-blue), #3b82f6);
}
:root[data-theme="dark"] .lns-tlo-jego { background: linear-gradient(90deg, #3b6fb5, #7aa2e8); }

/* Kreska średniej. overflow:hidden na torze przycina ją do jego zaokrągleń,
   więc przy wartości równej maksimum nie wystaje poza pasek. */
.lns-tlo-liga {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: var(--lns-tekst);
    opacity: .55;
}

.lns-tlo-dol { margin-top: 5px; font-size: .7rem; color: var(--lns-slaby); }
.lns-tlo-srednia { flex: none; font-variant-numeric: tabular-nums; }

/* Strzałka kierunku - patrz komentarz przy wierszNaTleLigi() w JS: świadomie
   bez zieleni i czerwieni, bo żadna z tych liczb nie jest zaletą ani wadą. */
.lns-tlo-strzalka {
    font-style: normal;
    font-weight: 800;
    margin-right: 5px;
    color: var(--lns-blue);
}
:root[data-theme="dark"] .lns-tlo-strzalka { color: #7aa2e8; }

/* --- rozkład kartek w czasie --- */

.lns-slupki {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
}
.lns-slupek { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.lns-slupek > b { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Stała wysokość toru, a nie rozciąganie do treści: bez niej słupek zerowy
   spłaszczałby cały wiersz i przedziały przestawały być porównywalne. */
.lns-slupek-tor {
    width: 100%;
    height: 92px;
    display: flex;
    align-items: flex-end;
    /* Tor musi być widoczny także wtedy, gdy słupek jest niski - inaczej nie widać,
       do jakiej wysokości się go porównuje. --lns-tlo-2 różni się od tła panelu
       o dwa odcienie i w trybie ciemnym po prostu znikał, stąd własne przyciemnienie. */
    background: rgba(100, 116, 139, .14);
    border-radius: 6px;
    overflow: hidden;
}
.lns-slupek-tor > i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f59e0b, #eab308);
}
.lns-slupek > span {
    font-size: .58rem;
    color: var(--lns-slaby);
    font-weight: 700;
    letter-spacing: -.2px;
}

/* --- ciekawostki --- */

.lns-ciekawostki { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lns-cieka {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--lns-tlo);
    border-radius: 10px;
    font-size: .82rem;
    line-height: 1.45;
}
.lns-cieka .lns-ico { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--lns-gold-ciemne); }
:root[data-theme="dark"] .lns-cieka .lns-ico { color: var(--lns-gold); }
.lns-cieka b { font-weight: 800; }

/* --- lista meczów pogrupowana kolejkami --- */

.lns-sekcja--kolejka { margin-bottom: 18px; }
.lns-kolejka-ile {
    flex: none;
    order: 1;
    font-size: .62rem;
    font-weight: 800;
    color: var(--lns-gold-ciemne);
    letter-spacing: .3px;
}
:root[data-theme="dark"] .lns-kolejka-ile { color: var(--lns-gold); }
/* Kreska nagłówka sekcji ma zostać MIĘDZY tytułem a licznikiem, nie za nim -
   dlatego licznik dostaje order, a nie zwykłe miejsce w kolejności znaczników. */
.lns-sekcja--kolejka > h4::after { order: 0; }

/* --- pasek liczby spotkań przy drużynie --- */

.lns-sd-tor {
    flex: none;
    width: 64px;
    height: 6px;
    border-radius: 4px;
    background: rgba(100, 116, 139, .18);
    overflow: hidden;
}
.lns-sd-tor > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lns-gold-ciemne), var(--lns-gold-jasne));
}

/* Nasz klub w liście drużyn sędziego. Sama pogrubiona nazwa ginęła wśród
   szesnastu wierszy, stąd dodatkowo złota krawędź z lewej. */
.lns-poz--nasz {
    border-left: 3px solid var(--lns-gold);
    padding-left: 9px;
    font-weight: 700;
}

/* ========================================================== KARTA ZAWODNIKA */
/*
   Modal otwierany kliknięciem w nazwisko - w składach i na osi przebiegu meczu,
   na listach strzelców w modalu drużyny oraz w rankingach na podstronie statystyk
   ligi. Korzysta z tych samych klocków co modal drużyny i teczka sędziego
   (.lns-sekcja, .lns-kafelki, .lns-lista, .lns-sm, .lns-slupki, .lns-tlo), więc
   niżej są wyłącznie rzeczy, których tam nie ma.

   Tryb ciemny: nadpisujemy WYŁĄCZNIE to, co ma zahardkodowany kolor. Reszta jedzie
   na zmiennych --lns-*, przestawianych raz na .lns-zaslona.
*/

/* --- nazwisko jako wejście do karty --- */
/*
   Podkreślenie kropkowane, nie ciągłe: nazwiska stoją gęsto w składzie i na osi
   przebiegu, a ciągła linia pod każdym z nich zamieniała listę w gąszcz kresek.
*/
.lns-gracz-klik {
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
    transition: color .15s;
}
.lns-gracz-klik:hover { color: var(--lns-gold-ciemne); }
:root[data-theme="dark"] .lns-gracz-klik:hover { color: var(--lns-gold); }
.lns-gracz-klik:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; border-radius: 3px; }

/* Na osi przebiegu i w składzie nazwisko dziedziczy grubość z rodzica, więc
   podkreślenie musi być jedynym sygnałem klikalności - koloru tam nie zmieniamy,
   bo pogrubione nazwisko strzelca ma zostać czarne. */
.lns-kto .lns-gracz-klik { border-bottom-color: rgba(100, 116, 139, .55); }

/* --- nagłówek karty --- */

.lns-gracz-gora { display: flex; align-items: center; gap: 18px; padding-right: 34px; }

/* Numer na koszulce w polu tej samej wielkości co herb drużyny i znak sędziego -
   dzięki temu wszystkie trzy modale mają nagłówek tej samej wysokości i nie
   "skaczą" przy przechodzeniu między nimi. */
.lns-numer-duzy {
    width: 64px;
    height: 64px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--lns-gold-jasne);
    font-size: 1.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}
.lns-numer-duzy--brak { color: rgba(255, 255, 255, .5); }
.lns-numer-duzy .lns-ico { width: 30px; height: 30px; }

.lns-gracz-gora h3 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0;
    /* Wymuszone z tego samego powodu co przy drużynie i sędzim: bez tego h3
       dziedziczy granat z globalnych stylów i znika na ciemnym nagłówku. */
    color: #fff;
    font-weight: 800;
}
.lns-opaska { color: var(--lns-gold-jasne); font-size: .85em; }

/* Klub pod nazwiskiem - wejście do modalu drużyny. */
.lns-gracz-klub {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 2px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
}
.lns-gracz-klub:hover { color: var(--lns-gold-jasne); }
.lns-gracz-klub .lns-herb--maly { width: 20px; height: 20px; }

/* --- odnośnik do naszej karty zawodnika --- */
/*
   Pełna szerokość nagłówka, nie plakietka obok nazwiska: to jedyne wyjście z modalu
   prowadzące POZA modal, więc musi być widoczne od razu, a nie ukryte w zakładce.
   Pokazuje się wyłącznie naszym zawodnikom (mapa `nasi` w zawodnicy.json).
*/
.lns-do-karty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(212, 175, 55, .14);
    border: 1px solid rgba(212, 175, 55, .38);
    color: var(--lns-gold-jasne);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lns-do-karty:hover { background: rgba(212, 175, 55, .24); border-color: var(--lns-gold); }
.lns-do-karty-ikona { width: 16px; height: 16px; flex: none; transform: rotate(-90deg); }

/* --- rola w zespole --- */

.lns-rola-glowna {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--lns-tlo);
    border-radius: 12px;
}
.lns-rola-glowna b {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
}
/* Selektor celuje w opis pod nazwą roli, a NIE w każdy span wewnątrz bloku:
   krążek z ikoną też jest spanem i przy zapisie `.lns-rola-glowna span` przejmował
   szary kolor tekstu (0,2,0 bije 0,1,0), przez co ikona znikała na złotym tle. */
.lns-rola-glowna > div > span {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    color: var(--lns-slaby);
    line-height: 1.4;
}

/* Krążek z ikoną. Wszystkie role mają ten sam wygląd, różni je wyłącznie napis -
   ta sama decyzja, co przy plakietkach statusu zawodnika w kadrze: kolor u nas
   znaczy "dobrze" albo "źle", a rezerwowy nie jest gorszym człowiekiem od filaru. */
.lns-rola-znak {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lns-gold-ciemne), var(--lns-gold-jasne));
    color: #1a2332;
}
.lns-rola-znak .lns-ico { width: 23px; height: 23px; }

.lns-znaczki-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
/* PUŁAPKA NAZW: nazwa `.lns-znaczek` należy do ikony zdarzenia z minutą w zakładce
   "Składy" (wyżej w pliku). Ta plakietka nosiła ją wcześniej i - ładowana później -
   dokładała tamtym znaczkom tło, obwódkę i padding, a reguła `.lns-znaczek span`
   (0,1,1) przebijała `.lns-zm--we/--wy` (0,1,0) i gasiła kolor strzałek zmian. */
.lns-znaczek-plakietka {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    background: var(--lns-tlo-2);
    border: 1px solid var(--lns-linia);
    border-radius: 10px;
}
.lns-znaczek-plakietka b { display: block; font-size: .8rem; font-weight: 800; line-height: 1.3; }
.lns-znaczek-plakietka span { display: block; margin-top: 2px; font-size: .7rem; color: var(--lns-slaby); line-height: 1.4; }
.lns-znaczek-ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--lns-gold-ciemne); }
:root[data-theme="dark"] .lns-znaczek-ico { color: var(--lns-gold); }

/* --- rozwijane objaśnienie algorytmu --- */
/*
   <details>/<summary> bez JavaScriptu - działa z klawiatury bez ról ARIA i przeżywa
   przerysowanie panelu. Domyślny trójkącik znika, bo mamy własną strzałkę.
*/
.lns-jak {
    margin-top: 12px;
    border: 1px dashed var(--lns-linia);
    border-radius: 10px;
    background: var(--lns-tlo);
}
.lns-jak > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
    color: var(--lns-slaby);
    list-style: none;
}
.lns-jak > summary::-webkit-details-marker { display: none; }
.lns-jak > summary:hover { color: var(--lns-tekst); }
.lns-jak > summary:focus-visible { outline: 2px solid var(--lns-gold); outline-offset: 2px; border-radius: 10px; }
.lns-jak > summary .lns-ico { flex: none; width: 15px; height: 15px; }
.lns-jak-strzalka { margin-left: auto; transition: transform .18s; }
.lns-jak[open] .lns-jak-strzalka { transform: rotate(180deg); }

.lns-jak-tresc {
    padding: 0 14px 13px;
    font-size: .76rem;
    line-height: 1.55;
    color: var(--lns-tekst);
}
.lns-jak-tresc p { margin: 0 0 9px; }
.lns-jak-lista { margin: 0 0 9px; padding-left: 18px; display: grid; gap: 7px; }
.lns-jak-lista li { line-height: 1.5; }
.lns-jak-lista b { font-weight: 800; }

/* Rachunek pokazany liczbami tego zawodnika. Cyfry monospace, żeby wzór dało się
   przeczytać jako wzór, a nie jako zdanie. */
.lns-jak-wzor {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--lns-tlo-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.lns-jak-progi { color: var(--lns-slaby); font-size: .73rem; }
.lns-jak-tresc p:last-child { margin-bottom: 0; }

/* --- szansa na gola --- */

.lns-szansa {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px;
    background: var(--lns-tlo);
    border-radius: 12px;
}
.lns-szansa-opis { min-width: 0; }
.lns-szansa-naglowek { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.35; }
.lns-szansa-naglowek b { font-weight: 800; }
.lns-szansa-zdanie { margin: 5px 0 8px; font-size: .78rem; color: var(--lns-slaby); line-height: 1.45; }

/* Pierścień - jedyny wykres kołowy w modalach. Tutaj jest na miejscu, bo pokazuje
   jedną wartość w skali 0-100%, a nie podział całości na kawałki. */
.lns-pierscien { flex: none; width: 118px; }
.lns-pierscien svg { display: block; width: 100%; height: auto; overflow: visible; }
.lns-pierscien-tlo {
    fill: none;
    stroke: rgba(100, 116, 139, .2);
    stroke-width: 11;
}
.lns-pierscien-luk {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}
.lns-pierscien-liczba {
    fill: var(--lns-tekst);
    font-size: 2.1rem;
    font-weight: 900;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}
.lns-pierscien-proc { font-size: 1.1rem; font-weight: 800; }

/* Plakietka wielkości próby. Trzy stopnie, bo to jest ostrzeżenie, a nie ocena -
   stąd szarość i bursztyn zamiast zieleni i czerwieni. */
.lns-proba {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: 1px solid var(--lns-linia);
    color: var(--lns-slaby);
}
.lns-proba--mala { border-color: #d97706; color: #b45309; background: rgba(217, 119, 6, .1); }
.lns-proba--srednia { border-color: var(--lns-slaby); }
.lns-proba--duza { border-color: var(--lns-gold); color: var(--lns-gold-ciemne); background: rgba(212, 175, 55, .12); }
:root[data-theme="dark"] .lns-proba--mala { color: #fbbf24; }
:root[data-theme="dark"] .lns-proba--duza { color: var(--lns-gold); }

/* --- rozpiska składników modelu --- */

.lns-skladniki { display: grid; gap: 7px; margin-top: 12px; }
.lns-skladnik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
    padding: 9px 12px;
    background: var(--lns-tlo-2);
    border-radius: 10px;
}
.lns-skladnik-nazwa { font-size: .8rem; font-weight: 700; }
.lns-skladnik-wartosc {
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lns-skladnik-wartosc small { font-size: .62rem; font-weight: 700; color: var(--lns-slaby); }
.lns-skladnik-opis {
    grid-column: 1 / -1;
    font-size: .72rem;
    color: var(--lns-slaby);
    line-height: 1.45;
}

/* --- wiersz meczu w karcie zawodnika --- */
/*
   Ten sam szkielet co w teczce sędziego (.lns-sm), ale bez drugiego herbu: kibic
   patrzy tu na JEDNEGO zawodnika i interesuje go rywal, nie obie strony pary.
   Kreska z lewej niesie rezultat - to jedyne miejsce w tym module, gdzie zieleń
   i czerwień naprawdę znaczą "dobrze" i "źle".
*/
.lns-sm--gracz { border-left: 3px solid var(--lns-remis); }
.lns-sm--gracz.lns-sm--Z { border-left-color: var(--lns-zwyciestwo); }
.lns-sm--gracz.lns-sm--P { border-left-color: var(--lns-porazka); }

/*
   Udział w meczu: osobna plakietka na każdą liczbę, każda z własną ikoną.
   Jedna plakietka z "64' · 26'" zmuszała kibica do zgadywania, która liczba
   jest minutą wejścia, a która czasem gry. Ikona rozstrzyga to bez czytania:
   trójkąt zmiany (jak w zakładce "Składy") i zegar.

   Grupa ma własny kontener, bo .lns-sm-prawa rozstawia dzieci co 8 px i przy
   zawijaniu na telefonie plakietki oderwałyby się od siebie i od znacznika
   dom/wyjazd.
*/
.lns-udzialy { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.lns-udzial {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--lns-linia);
    color: var(--lns-slaby);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Liczba niesie treść plakietki, więc dostaje kolor tekstu głównego i jest
   odrobinę większa od podpisów - obwódka i ikona mają zostać tłem dla niej. */
.lns-udzial i {
    font-style: normal;
    font-size: .68rem;
    color: var(--lns-tekst);
}
.lns-udzial .lns-ico { width: 12px; height: 12px; stroke-width: 2; flex: none; opacity: .8; }
.lns-udzial .lns-zm { font-size: .58rem; }

.lns-udzial--start { border-color: var(--lns-gold); color: var(--lns-gold-ciemne); background: rgba(212, 175, 55, .1); }
:root[data-theme="dark"] .lns-udzial--start { color: var(--lns-gold); }
/* Wejście i zejście: kolor niesie sam trójkąt, obwódka zostaje neutralna.
   Trzy kolorowe plakietki obok siebie ścigałyby się z kreską rezultatu przy
   lewej krawędzi wiersza, a to ona ma tu mówić "wygrana" albo "porażka". */
.lns-udzial--we, .lns-udzial--wy { background: var(--lns-tlo-2); }
.lns-udzial--brak { opacity: .7; }

.lns-znaczki-m { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lns-znaczek-m {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    line-height: 1;
}
.lns-znaczek-m i {
    font-style: normal;
    font-size: .58rem;
    font-weight: 800;
    color: var(--lns-slaby);
    font-variant-numeric: tabular-nums;
}

/* --- lista rywali: mecze i bramki w jednej kolumnie --- */

.lns-licznik--para { display: inline-flex; align-items: center; gap: 7px; }
.lns-licznik--para > i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--lns-slaby);
    font-weight: 700;
}
.lns-gole-chip {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(212, 175, 55, .16);
    border: 1px solid rgba(212, 175, 55, .4);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- krzywa minut --- */
/*
   Jeden słupek na mecz drużyny. Mecz bez zawodnika zostaje pustym torem - przerwa
   w grze jest tu informacją, a nie brakiem danych, więc nie wolno jej pominąć.
*/
.lns-krzywa {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    /* Na telefonie dwadzieścia słupków nie mieści się w szerokości okna, a ściśnięte
       do dwóch pikseli przestają cokolwiek znaczyć. Przewijanie w poziomie zostaje
       zamknięte w tym pojemniku - strona pod spodem nigdy nie jedzie na boki. */
    overflow-x: auto;
    padding-bottom: 4px;
}
.lns-kr {
    flex: 1 0 18px;
    min-width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
/* Tor o stałej wysokości. Wypełnienie dostaje procent z JS, więc gdyby procent
   siedział wprost na słupku, mecz bez minut nie miałby żadnej wysokości i zniknąłby
   z wykresu zamiast pokazać lukę. Ta sama konstrukcja co .lns-slupek-tor. */
.lns-kr-tor {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 74px;
    border-radius: 5px;
    background: rgba(100, 116, 139, .16);
    overflow: hidden;
}
.lns-kr-tor > i { display: block; width: 100%; border-radius: 5px; }
.lns-kr-nr {
    font-size: .55rem;
    font-weight: 700;
    color: var(--lns-slaby);
    font-variant-numeric: tabular-nums;
}
.lns-kr--start .lns-kr-tor > i { background: linear-gradient(180deg, var(--lns-gold-jasne), var(--lns-gold-ciemne)); }
.lns-kr--zmiana .lns-kr-tor > i { background: linear-gradient(180deg, #7aa2e8, var(--lns-blue)); }
/* Ławka bez wejścia dostaje niski, wyraźny znacznik przy dnie toru - inaczej mecz
   przesiedziany na ławce wyglądałby dokładnie tak samo jak mecz poza kadrą. */
.lns-kr--lawka .lns-kr-tor { background: rgba(100, 116, 139, .38); }
.lns-kr--poza .lns-kr-tor { background: rgba(100, 116, 139, .12); border: 1px dashed var(--lns-linia); }

.lns-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lns-leg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    color: var(--lns-slaby);
}
.lns-leg::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}
.lns-leg--start::before { background: linear-gradient(180deg, var(--lns-gold-jasne), var(--lns-gold-ciemne)); }
.lns-leg--zmiana::before { background: linear-gradient(180deg, #7aa2e8, var(--lns-blue)); }
.lns-leg--lawka::before { background: rgba(100, 116, 139, .38); }
.lns-leg--poza::before { background: rgba(100, 116, 139, .12); border: 1px dashed var(--lns-linia); }

/* --- blok "czego tu nie ma" (asysty) --- */

.lns-info-blok {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    background: var(--lns-tlo);
    border: 1px dashed var(--lns-linia);
    border-radius: 12px;
}
.lns-info-blok .lns-ico { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--lns-slaby); }
.lns-info-blok p { margin: 0; font-size: .8rem; line-height: 1.55; }

/* --- kary za kartki: okno drużyny i rejestr w karcie zawodnika --- */
/*
   Trzy stany, trzy kreski z lewej - ta sama konwencja, co przy wierszach meczów
   (.lns-sm--gracz). Czerwień znaczy karę już odbywaną, bursztyn czerwoną kartkę
   o nieznanym wymiarze, złoto samo zagrożenie po następnej żółtej. To jedno z
   niewielu miejsc w tym module, gdzie kolor naprawdę niesie znaczenie, a nie
   dekorację - stąd wyjątek od zasady jednego wyglądu dla wszystkich plakietek.
*/

.lns-kary { display: grid; gap: 7px; }

.lns-kara {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--lns-tlo);
    border-radius: 10px;
    border-left: 3px solid var(--lns-remis);
    font-size: .86rem;
}
.lns-kara--pauza { border-left-color: var(--lns-porazka); }
.lns-kara--otwarta { border-left-color: #d97706; }
.lns-kara--zagrozenie { border-left-color: var(--lns-gold); }

.lns-kara-ico { flex: none; display: inline-flex; color: var(--lns-slaby); }
.lns-kara-ico .lns-ico { width: 19px; height: 19px; }
.lns-kara--pauza .lns-kara-ico { color: var(--lns-porazka); }
.lns-kara--otwarta .lns-kara-ico { color: #b45309; }
.lns-kara--zagrozenie .lns-kara-ico { color: var(--lns-gold-ciemne); }
:root[data-theme="dark"] .lns-kara--otwarta .lns-kara-ico { color: #fbbf24; }
:root[data-theme="dark"] .lns-kara--zagrozenie .lns-kara-ico { color: var(--lns-gold); }

.lns-kara-tresc { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lns-kara-tresc b { font-weight: 800; }
.lns-kara-opis { font-size: .76rem; color: var(--lns-slaby); line-height: 1.45; }
/* Nawias "(co najmniej)" przy niepewnym wymiarze kary - kursywa byłaby tu czwartym
   krojem w jednym wierszu, więc odróżniamy go samą jasnością. */
.lns-kara-opis i { font-style: normal; opacity: .85; }
.lns-kara-licznik {
    flex: none;
    min-width: 2.2em;
    text-align: center;
    font-weight: 800;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    color: var(--lns-slaby);
}

/* Odznaka w miejscu pierścienia z procentem. Ten sam rozmiar co pierścień
   (szerokość dziedziczy z .lns-pierscien), więc sekcja nie skacze na wysokość
   przy przechodzeniu między zawodnikiem grającym a pauzującym. */
.lns-pierscien--pauza {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px dashed rgba(220, 38, 38, .42);
    background: rgba(220, 38, 38, .07);
    color: var(--lns-porazka);
}
.lns-pauza-znak { display: grid; justify-items: center; gap: 2px; text-align: center; line-height: 1; }
.lns-pauza-znak b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Plus przy karze o nieznanym wymiarze (czerwona kartka). Mniejszy i wyniesiony do
   góry, żeby czytało się "co najmniej tyle", a nie jako część liczby. */
.lns-pauza-znak b i {
    font-style: normal;
    font-size: .62em;
    vertical-align: .35em;
    margin-left: 1px;
}
.lns-pauza-znak span {
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--lns-slaby);
}
/* PUŁAPKA: .lns-pierscien svg (0,1,1) ustawia szerokość na 100% - to reguła pod
   wykres kołowy z procentem. Ikona w środku odznaki musi mieć selektor o wyższej
   specyficzności, inaczej rozpycha się na całą odznakę i rozciąga ją w owal. */
.lns-pierscien--pauza .lns-pauza-ico { width: 21px; height: 21px; }
:root[data-theme="dark"] .lns-pierscien--pauza {
    border-color: rgba(248, 113, 113, .5);
    background: rgba(248, 113, 113, .1);
    color: #f87171;
}

/* Kropki do progu pauzy. Rysowane jako cztery małe kartki, a nie kółka: temat
   jest kartkowy, a przechylony prostokąt czyta się od razu, bez podpisu. */
.lns-prog {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    padding: 11px 13px;
    margin-bottom: 9px;
    background: var(--lns-tlo);
    border-radius: 12px;
}
.lns-prog-kropki { display: inline-flex; gap: 7px; flex: none; align-items: center; }
/* Wersja do wiersza w oknie drużyny: mniejsza i bez przechyłu, bo w rzędzie
   z tekstem przechylone prostokąty zaczynały wyglądać na przekrzywiony układ. */
.lns-prog-kropki--mini { gap: 4px; }
.lns-prog-kropki--mini .lns-prog-kartka { width: 9px; height: 13px; border-width: 1.2px; transform: none; }
/* NAZWA: nie ".lns-kropka" - ta klasa jest zajęta przez pulsującą kropkę znacznika
   LIVE u góry okna meczu. Reguła o tej samej nazwie przejęłaby jej rozmiar i obrys. */
.lns-prog-kartka {
    width: 13px;
    height: 18px;
    border-radius: 3px;
    border: 1.5px solid var(--lns-linia);
    transform: rotate(9deg);
}
.lns-prog-kartka--pelna { background: var(--lns-gold); border-color: var(--lns-gold-ciemne); }
/* W ciemnym motywie linia --lns-linia jest prawie tego samego koloru co tło sekcji,
   więc puste kartki znikały i cztery kratki wyglądały jak trzy. */
:root[data-theme="dark"] .lns-prog-kartka { border-color: rgba(148, 163, 184, .55); }
:root[data-theme="dark"] .lns-prog-kartka--pelna { border-color: var(--lns-gold-ciemne); }
/* Czwarta kartka to ta, która wywołuje pauzę - przerywany obrys mówi o tym bez
   dodatkowego napisu obok. */
.lns-prog-kartka--ostatnia { border-style: dashed; }
.lns-prog-opis { flex: 1; min-width: 0; font-size: .8rem; color: var(--lns-slaby); line-height: 1.45; }

.lns-sekcja--kary .lns-info-blok { margin-top: 9px; }

/* -------------------------------------------------------------- responsywność */

@media (max-width: 860px) {
    .lns-skrajne { grid-template-columns: 1fr; }
}

/* Karta zawodnika: pierścień z procentem zjeżdża nad opis, bo obok niego zostawała
   kolumna szerokości jednego słowa. To samo, co przy dużym portrecie w bloku cytatu. */
@media (max-width: 560px) {
    .lns-szansa { flex-direction: column; align-items: stretch; text-align: center; }
    .lns-pierscien { width: 104px; margin: 0 auto; }
    .lns-szansa-opis { text-align: center; }
    .lns-gracz-gora { gap: 13px; }
    .lns-numer-duzy { width: 54px; height: 54px; font-size: 1.4rem; }
    .lns-gracz-gora h3 { font-size: 1.15rem; }
    .lns-znaczki-lista { grid-template-columns: 1fr; }
    /* Trzecia kolumna wiersza meczu (znacznik dom/wyjazd, udział, znaczki bramek)
       nie mieści się obok nazwy rywala - schodzi pod spód, na całą szerokość. */
    .lns-sm--gracz { grid-template-columns: auto minmax(0, 1fr); }
    .lns-sm--gracz .lns-sm-prawa { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* Telefon: modal przestaje udawać osobną stronę.
   Dosuwa się do dołu ekranu jako panel z zaokrąglonym górnym brzegiem, nad nim
   zostaje widoczny pasek przyciemnionej strony, a u góry jest uchwyt - komplet
   sygnałów, że to nakładka, a nie nowy widok. Do tego wpis w historii (JS),
   dzięki któremu systemowy gest "wstecz" zamyka okno zamiast opuszczać stronę. */
@media (max-width: 640px) {
    .lns-zaslona {
        padding: 0;
        align-items: flex-end;
    }
    .lns-modal {
        max-width: none;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        animation: lns-wsuw .28s cubic-bezier(.2, .85, .3, 1);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .45);
    }

    /* Uchwyt to pełnoprawny pasek górny: kreska do chwytania pośrodku, zamknięcie
       przy prawej krawędzi. Wcześniej przycisk siedział niżej, na wysokości herbów
       drużyn, przez co wyglądał na wrzucony w treść zamiast na obramowanie okna. */
    .lns-uchwyt {
        display: block;
        flex-shrink: 0;
        height: 42px;
        background: var(--lns-navy-2);
        border-radius: 22px 22px 0 0;
        position: relative;
    }
    .lns-uchwyt::before {
        content: '';
        position: absolute;
        top: 19px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .3);
    }
    /* Górne rogi niesie już uchwyt, nagłówek zostaje prosty. */
    .lns-gora { border-radius: 0; padding: 2px 16px 16px; }
    .lns-modal > .lns-ladowanie { border-radius: 22px 22px 0 0; }
    .lns-tresc { border-radius: 0; padding: 16px 14px 26px; }

    /* Środek przycisku (6 + 30/2 = 21) pokrywa się ze środkiem paska (42/2). */
    .lns-zamknij { top: 6px; right: 12px; width: 30px; height: 30px; }

    /* Powrót mieści się w tym samym pasku co uchwyt i krzyżyk, więc nagłówek
       nie musi tu schodzić niżej (inaczej niż na komputerze). */
    .lns-ma-wstecz .lns-gora { padding-top: 2px; }
    .lns-wstecz {
        top: 6px;
        left: 12px;
        height: 30px;
        max-width: calc(100% - 130px);
        font-size: .74rem;
    }
    /* Kreska do chwytania ustępuje miejsca podpisowi. Przy dwóch przyciskach
       w pasku i tak czyta się on jak pasek nawigacji, a nie jak uchwyt. */
    .lns-ma-wstecz .lns-uchwyt::before { display: none; }
    /* Zamknięcie przeniosło się do paska górnego, więc nagłówek odzyskuje miejsce,
       które trzymał wolne pod przycisk - na wąskim ekranie to cała nazwa drużyny. */
    .lns-druzyna-gora { gap: 13px; padding-right: 0; }
    .lns-druzyna-gora .lns-herb { width: 52px; height: 52px; }
    .lns-druzyna-gora h3 { font-size: 1.14rem; }
    .lns-sedzia-gora { gap: 13px; padding-right: 0; }
    .lns-sedzia-znak { width: 52px; height: 52px; }
    .lns-sedzia-znak .lns-ico { width: 25px; height: 25px; }
    .lns-sedzia-gora h3 { font-size: 1.14rem; }
    .lns-mecz-gora { gap: 8px; padding-right: 0; }
    .lns-ekipa-duza .lns-herb { width: 44px; height: 44px; }
    .lns-ekipa-duza .lns-nazwa { font-size: .78rem; }
    .lns-rezultat b { font-size: 1.65rem; }
    /* Uchwyt jest tu celem palca, więc oba warianty dostają wysokość zamiast
       samego podpisu. Kropki miniatury drobnieją, bo na wąskim ekranie bramki
       z sąsiednich minut zlewały się w jedną plamę. */
    .lns-przebieg { padding: 8px 8px 0; }
    .lns-przebieg-zwin { font-size: .58rem; }
    .lns-przebieg[data-zwiniete="0"] .lns-przebieg-zwin { padding: 13px 4px 9px; gap: 8px; }
    .lns-przebieg[data-zwiniete="1"] .lns-przebieg-zwin { gap: 9px; padding: 9px 11px; min-height: 40px; }
    .lns-mini-pkt { width: 6px; height: 6px; }

    /* Dane meczu: termin i kolejka dzielą wiersz, adres bierze cały następny.
       Kreski pionowe zastępuje jedna pozioma - przy dwóch kolumnach ramka z lewej
       wypadała krzywo względem ikon. */
    .lns-meta { display: grid; grid-template-columns: 1fr auto; gap: 11px 14px; }
    .lns-meta-poz + .lns-meta-poz { margin-left: 0; padding-left: 0; border-left: 0; }
    .lns-meta-poz--stadion {
        grid-column: 1 / -1;
        padding-top: 11px;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .lns-meta-wartosc { font-size: .75rem; }

    /* Niższe płótno, ale znaczniki zostają w pełnym rozmiarze - na dotyku to one
       są celem palca, więc nie mogą się kurczyć razem z wykresem. */
    .lns-plotno { height: 130px; }
    .lns-linijka span { font-size: .55rem; }
    .lns-dymek { font-size: .72rem; max-width: 88%; }
    .lns-meta { gap: 6px 12px; font-size: .72rem; margin-top: 12px; padding-top: 11px; }

    /* Zakładki muszą zmieścić się bez przewijania w poziomie - przy trzech
       długich podpisach ("Statystyki i wykresy") standardowe odstępy nie starczały
       i ostatnia zakładka wychodziła poza ekran. Podpisy łamiemy więc na dwie
       linie zamiast przycinać - działa niezależnie od długości tłumaczenia. */
    .lns-zakladki { padding: 0 2px; gap: 0; overflow-x: visible; }
    .lns-zakladka {
        padding: 10px 5px;
        font-size: .7rem;
        gap: 5px;
        min-width: 0;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }
    .lns-zakladka .lns-ico { width: 14px; height: 14px; }

    .lns-sklady { grid-template-columns: 1fr; gap: 20px; }
    .lns-kafelki, .lns-kafelki--male { grid-template-columns: repeat(2, 1fr); }
    .lns-bohater { gap: 13px; padding: 14px; }
    .lns-bohater-odznaka { width: 42px; height: 42px; }
    .lns-bohater-liczby { gap: 5px 14px; }
    .lns-wykres { padding: 12px 8px 8px; }

    .lns-mapa-pasek { height: 34px; }
    .lns-mapa[data-widok="strzelone"] .lns-mapa-rzad[data-rzad="strzelone"] .lns-mapa-pasek,
    .lns-mapa[data-widok="stracone"]  .lns-mapa-rzad[data-rzad="stracone"]  .lns-mapa-pasek { height: 74px; }
    .lns-mapa-rzad { grid-template-columns: 52px 1fr; gap: 7px; }
    .lns-mapa-etykieta { font-size: .58rem; }
    .lns-mapa { padding: 12px 10px; }
    .lns-race { padding: 12px 8px 10px; }
    .lns-race-plotno { height: 230px; }

    /* Na wąskim ekranie opis zdarzenia ("z karnego", "za Kowalskiego") łamał się
       w środku i rozbijał wiersz na trzy linie. Idzie więc pod nazwisko, a kolumna
       minut zwęża się, żeby zostało więcej miejsca na treść. */
    .lns-zdarzenie { grid-template-columns: 1fr 34px 1fr; gap: 4px; margin: 9px 0; }
    .lns-tresc-zd { font-size: .78rem; gap: 5px; align-items: flex-start; }
    .lns-dopisek { display: block; font-size: .66rem; line-height: 1.3; }
    .lns-minuta { font-size: .68rem; align-self: start; padding-top: 1px; }
    .lns-ikona { font-size: .85rem; padding-top: 1px; }

    /* Teczka sędziego: wiersz spotkania schodzi na dwa poziomy. Trzy kolumny obok
       siebie zostawiały nazwom drużyn szerokość jednego słowa, a to one mówią,
       o który mecz chodzi. Rola i kartki idą pod spód, na całą szerokość. */
    .lns-sm {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 10px;
        padding: 10px 12px;
    }
    .lns-sm-prawa {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 7px;
        border-top: 1px solid var(--lns-linia);
    }
    .lns-sm:hover { transform: none; }

    /* Siedem podpisów przedziałów w jednym rzędzie nie mieści się na telefonie.
       Zostają co drugi - słupki i tak są opisane liczbą u góry. */
    .lns-slupki { gap: 4px; }
    .lns-slupek-tor { height: 76px; }
    .lns-slupek > span { font-size: .5rem; }
    .lns-slupek:nth-child(even) > span { visibility: hidden; }

    .lns-sd-tor { width: 40px; }
}

@media (max-width: 380px) {
    .lns-kafelki { gap: 8px; }
    .lns-kafelek b { font-size: 1.15rem; }
    .lns-zdarzenie { grid-template-columns: 1fr 28px 1fr; }
    .lns-tresc-zd { font-size: .74rem; }
    .lns-zakladka span { font-size: .7rem; }
    .lns-pastylka { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .lns-zaslona, .lns-modal, .lns-panel.lns-akt, .lns-forma-szczegol, .lns-kropka { animation: none; }
    .lns-klik, .lns-pastylka, .lns-poz--mecz, .lns-zamknij, .lns-wstecz,
    .lns-sm, .lns-sedzia--klik, .lns-gracz-klik, .lns-do-karty, .lns-jak-strzalka { transition: none; }
    .lns-sm:hover, .lns-sedzia--klik:hover { transform: none; }
    .lns-pozycja, .lns-bohater-nazwa, .lns-rezultat b { animation: none; }
    .lns-spinner { animation-duration: 2s; }
    .lns-por-wypelnienie, .lns-mapa-pasek { transition: none; }
    /* Zwijanie zostaje, ale dzieje się od razu: wykres znika i wraca bez przelotu,
       kropek wskakujących po kolei i obrotu strzałki. Uchwyt przestaje oddychać. */
    .lns-przebieg,
    .lns-przebieg-stopka,
    .lns-przebieg-schowek,
    .lns-przebieg-wnetrze,
    .lns-przebieg-strzalka,
    .lns-przebieg-mini,
    .lns-mini-pkt,
    .lns-przebieg-zwin,
    .lns-meta-schowek,
    .lns-meta { transition: none; }
    .lns-przebieg[data-zwiniete="0"] .lns-przebieg-zwin { animation: none; opacity: 1; }
    .lns-przebieg[data-zwiniete="1"] .lns-mini-pkt,
    .lns-przebieg[data-zwiniete="1"] .lns-przebieg-mini { transition-delay: 0s; }
}