/* ==========================================================================
   S11.cz - MATCH.CSS
   Detail zápasu: hlavička se skóre, časová osa, soupisky, statistiky, H2H.

   Rozvržení stránky detail sdílí s úvodkou — tři sloupce (.ss-layout),
   panely (.ss-panel) i pás karet (.ss-tabs) nese score-service.css. Tady je
   jen to, co má detail navíc.
   ========================================================================== */

/* --- HLAVIČKA ZÁPASU ---
   Podoba podle fotmob.com. Čtyři vodorovné řádky pod sebou: cesta zpátky
   se soutěží a kolem, termín a hřiště, týmy se skóre a střelci, pás karet.
   Mezi prvními třemi je linka — hlavička je jediné místo, kde ji fotmob
   nechává, řádky jsou tu opravdu různé věci. */
.match-head-panel { padding: 0 16px 0; overflow: hidden; }

/* Linky mezi řádky jdou od kraje ke kraji — přes odsazení panelu. */
.match-head-row { margin: 0 -16px; padding: 12px 16px; }
.match-head-row + .match-head-row { border-top: 1px solid var(--border); }

/* 1. Zpátky, soutěž a kolo. Tři buňky — tlačítko, střed, prázdná — aby
   střed stál opravdu uprostřed panelu a ne uprostřed zbytku za tlačítkem. */
.match-head-comp {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.match-head-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    white-space: nowrap;
}
.match-head-back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease;
}
.match-head-back:hover .match-head-back-arrow { background: rgba(255, 255, 255, 0.16); }

.match-head-comp-center {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
}
.match-head-comp-center:hover .match-head-comp-name { color: var(--accent); }
.match-head-comp-logo { display: inline-flex; flex: none; color: var(--text-muted); }
.match-head-comp-logo .ss-comp-logo { width: 20px; height: 20px; }
.match-head-comp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-head-round { white-space: nowrap; }

/* 2. Termín a hřiště, na jednom řádku uprostřed, každé se svou ikonou. */
.match-head-when-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 26px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.match-head-when,
.match-head-venue { display: inline-flex; align-items: center; gap: 8px; }
.match-head-meta-icon { flex: none; opacity: 0.85; }

/* 3. Týmy a výsledek: název – logo – skóre – logo – název. Názvy jsou
   pružné a zarovnané k logu (domácí doprava, hosté doleva), takže se
   dlouhý název zalomí u kraje a loga i skóre zůstanou na místě. Druhý
   řádek mřížky patří střelcům.

   Mezery nejsou stejné: logo stojí dál od skóre (56 px) než od názvu
   (24 px), ať logo s názvem drží pohromadě a skóre má kolem sebe vzduch.
   Mřížka proto mezeru mezi sloupci nemá, dělají ji okraje log. */
.match-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas:
        "home-name home-logo score away-logo away-name"
        "scorers   scorers   scorers scorers scorers";
    align-items: center;
    column-gap: 0;
    row-gap: 18px;
    padding-top: 26px;
    padding-bottom: 18px;
}
.match-head-home.match-head-name-cell { grid-area: home-name; justify-self: end; text-align: right; }
.match-head-home.match-head-logo-cell { grid-area: home-logo; margin: 0 56px 0 24px; }
.match-head-center-score             { grid-area: score; }
.match-head-away.match-head-logo-cell { grid-area: away-logo; margin: 0 24px 0 56px; }
.match-head-away.match-head-name-cell { grid-area: away-name; justify-self: start; text-align: left; }

.match-head-team {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--text-main);
}
.match-head-team .club-logo { width: 52px; height: 52px; font-size: 1.4rem; }
.match-head-team-name { font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
a.match-head-team:hover .match-head-team-name { color: var(--accent); }

.match-head-center-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 96px;
    text-align: center;
}
.match-head-score {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.match-head-score-sep { margin: 0 6px; font-weight: 700; }
/* Probíhající zápas: skóre tepe akcentem, týmž rytmem jako skóre v seznamu
   zápasů (ss-running-pulse z components/match-list.css). */
.match-head-score.is-running {
    color: var(--accent);
    animation: ss-running-blink 2.5s ease-in-out infinite;
}
/* Tepou jen čísla, dvojtečka si drží svou barvu. */
.match-head-score.is-running .match-head-score-sep { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
    .match-head-score.is-running { animation: none; }
}
.match-head-score-upcoming { font-size: 1.6rem; color: var(--text-muted); }

/* Stav pod skóre — „Konec", jako „Full time" na fotmobu. */
.match-head-score-note {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}
.match-head-score-forfeit { color: var(--draw); font-weight: 700; }
/* Průběžný výsledek — akcentní, protože je to živá informace, ne výhrada. */
.match-head-score-provisional { color: var(--accent); font-weight: 700; cursor: help; }

/* „Brzy začne" je očekávání, ne živá informace — proto tlumeně, ne akcentem.
   Akcent na stránce znamená „děje se to teď" a tenhle zápas se ještě nehraje. */
.match-head-score-soon { color: var(--text-muted); font-weight: 700; }

/* Střelci pod týmy: řádek sdílí sloupce mřížky nad sebou (subgrid) —
   domácí končí u pravé hrany svého loga, hosté začínají u levé, míč stojí
   pod skóre. Odsazení od středu je proto stejné jako okraj loga u skóre.
   Každý střelec má řádek — jméno a minuty; opakovaný střelec má minuty
   za sebou. */
.match-head-scorers-row {
    grid-area: scorers;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.match-head-scorers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-head-scorers li { display: flex; gap: 6px; min-width: 0; }
.match-head-scorers-home { grid-column: 1 / 3; justify-self: end; padding-right: 56px; }
.match-head-scorers-home li { justify-content: flex-end; text-align: right; }
.match-head-scorers-away { grid-column: 4 / 6; justify-self: start; padding-left: 56px; }
.match-head-scorers-away li { justify-content: flex-start; text-align: left; }
/* Míč stojí pod skóre i bez střelců na jedné straně — jinak by se posunul.
   Prázdná strana se v HTML nevykreslí, proto explicitní sloupce. */
.match-head-scorers-icon { grid-column: 3; justify-self: center; display: inline-flex; padding-top: 2px; color: var(--text-muted); }
.match-head-scorer-name { color: var(--text-main); }
.match-head-scorer-minutes { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-main); }
.match-head-scorer-minutes abbr { text-decoration: none; border: none; cursor: help; color: var(--text-muted); }

/* Pás karet je obyčejné .ss-tabs — stejná výška i písmo jako u karet
   soutěže. Linku nad sebou nemá, stojí rovnou pod střelci. */
.match-head-tabs { margin-top: 0; }

@media (max-width: 820px) {
    /* Z tlačítka zpět zbude jen kulatá šipka. Soutěž a kolo zůstávají
       uprostřed jako na desktopu — prázdná třetí buňka je stejně široká
       jako šipka, takže střed stojí v ose panelu (a v ose skóre pod ním). */
    .match-head-comp { grid-template-columns: 32px minmax(0, 1fr) 32px; padding-top: 10px; padding-bottom: 10px; }
    .match-head-back-label { display: none; }
    .match-head-comp-center { justify-self: center; font-size: 0.8rem; gap: 8px; }
    .match-head-comp-logo .ss-comp-logo { width: 16px; height: 16px; }

    /* Na úzkém displeji se názvy vedle log nevejdou, jdou pod ně. Loga
       stojí nahoře vedle skóre, každé uprostřed prostoru mezi skóre
       a krajem panelu (sloupec 1fr, logo v něm na střed), a název pod
       logem je vystředěný s ním. Střelci jdou pod své týmy, vystředění
       stejně jako názvy. */
    .match-head {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "home-logo score   away-logo"
            "home-name .       away-name"
            "scorers   scorers scorers";
        column-gap: 10px;
        row-gap: 8px;
        padding-top: 18px;
        padding-bottom: 14px;
    }
    .match-head-home.match-head-logo-cell,
    .match-head-away.match-head-logo-cell { margin: 0; justify-self: center; }
    .match-head-home.match-head-name-cell,
    .match-head-away.match-head-name-cell {
        justify-self: stretch;
        justify-content: center;
        text-align: center;
        align-self: start;
    }
    .match-head-scorers-row { margin-top: 6px; font-size: 0.72rem; }
    .match-head-scorers-home,
    .match-head-scorers-away { justify-self: stretch; padding: 0; }
    .match-head-scorers-home { grid-column: 1; }
    .match-head-scorers-away { grid-column: 3; }
    .match-head-scorers-icon { grid-column: 2; }
    .match-head-scorers-home li,
    .match-head-scorers-away li { justify-content: center; text-align: center; }
    .match-head-team .club-logo { width: 44px; height: 44px; font-size: 1.2rem; }
    .match-head-team-name { font-size: 0.86rem; }
    .match-head-center-score { min-width: 70px; }
    .match-head-score { font-size: 1.6rem; }
    .match-head-score-upcoming { font-size: 1.3rem; }
    .match-head-score-note { font-size: 0.74rem; }
    .match-head-when-row { font-size: 0.72rem; gap: 4px 16px; }
}

/* --- VELIKOST PÍSMA V DETAILU ZÁPASU ---
   Detail stojí v prostředním sloupci třísloupcové mřížky, ne na plné šířce
   stránky. Sdílené komponenty (soupiska, časová osa, tabulka statistik,
   sekční nadpisy) jsou pro takový sloupec předimenzované, tady se proto
   scvrknou. Pás karet se schválně nezmenšuje — má zůstat totožný
   s přepínačem soutěže na úvodce. */
.match-detail .section-header { margin: 0 0 14px; gap: 10px; }
.match-detail .section-header h3 { font-size: 0.95rem; letter-spacing: 0; }
/* Bloky seznamů zápasů stojí v detailu blíž u sebe než na kartě trenéra —
   panel je užší a 36px by ho roztrhalo. */
.match-detail .h2h-block { margin-bottom: 22px; }
.match-detail .h2h-block:last-child { margin-bottom: 0; }

/* Forma: domácí vlevo, hosté vpravo. Řádek zápasu je týž jako na úvodce,
   v polovičním sloupci se jen zkrátí názvy trojtečkou. Pod 820 px jeden
   sloupec — dva seznamy zápasů vedle sebe by na mobilu nešly přečíst. */
.match-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
}
.match-form-cell { min-width: 0; }
.match-form-cell .h2h-block { margin-bottom: 0; }
/* Strany jsou stejně široké jako v seznamu na úvodce, takže skóre stojí
   ve všech řádcích pod sebou. Dřív si tu strany braly, kolik potřebovaly
   (auto auto auto) — dlouhý název se tak lámal méně, ale skóre uhýbalo
   řádek od řádku ke kratšímu názvu a výsledky neležely v ose.

   Název se smí zalomit: s nowrap přetékal řádek, a u domácích (obsah
   u pravého kraje strany) přetékal doleva, kde ho uřízl okraj panelu. */
.match-form-cell .ss-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.match-form-cell .ss-side-name { white-space: normal; overflow-wrap: anywhere; }
/* Nad formou stojí logo týmu (bez názvu, ten nese tooltip) na středu
   sloupce, v ose výsledků pod ním. Linka by ho odtlačila ke kraji,
   proto tu není. */
.match-form-cell .section-header { justify-content: center; }
.match-form-cell .section-header h3 { white-space: normal; text-align: center; }
.match-form-cell .section-header .line { display: none; }
.h2h-title-logo a { display: inline-flex; }
.h2h-title-logo a:hover { opacity: 0.8; }
.h2h-title-logo .club-logo { width: 44px; height: 44px; }
@media (max-width: 820px) {
    .match-form-grid { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
}

/* Forma podle fotmob.com: nadpis uprostřed, řádky bez linek a vzdušnější,
   oba názvy stejně výrazné (vítěze nese barva skóre, ne písmo) a skóre
   jako plná pilulka v barvě výsledku z pohledu týmu. */
.match-form-title {
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 16px;
}
/* Logo týmu stojí hned pod nadpisem — obecný odstup nadpisu sekce (40 px)
   by ho od „Forma" odtrhl. */
.match-form-panel .section-header { margin-top: 0; }
.h2h-block-compact .ss-match {
    border-top: none;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 8px;
}
/* Ve formě jsou oba názvy stejně výrazné (vítěze nese barva skóre); ve
   vzájemných zápasech skóre barvu nemá, vítěze tam dál nese písmo. */
.h2h-block-compact.h2h-block-recent .ss-match:not(.ss-match-upcoming) .ss-side .ss-side-name { color: var(--text-main); font-weight: 700; }
.h2h-block-compact .ss-match:not(.ss-match-upcoming) .ss-side.is-winner .ss-side-name { font-weight: 700; }
.h2h-block-compact .ss-center-score {
    display: inline-block;
    min-width: 54px;
    padding: 5px 10px;
    border-radius: 7px;
    text-align: center;
    font-size: 0.95rem;
}
/* Vzájemné zápasy: pilulka bez barvy výsledku, jen podklad. */
.h2h-block-compact .ss-center-score:not(.is-v):not(.is-r):not(.is-p) { background: var(--bg-head); }
/* Nejčerstvější zápas: čárka pod skóre v téže barvě (background: inherit
   vezme barvu pilulky — výhra, remíza, prohra). */
.h2h-block-compact .h2h-item:first-child .ss-center-score { position: relative; }
.h2h-block-compact .h2h-item:first-child .ss-center-score::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: inherit;
    transform: translateX(-50%);
}

/* Nad každým zápasem v seznamu stojí jeho datum. Protože je vždycky první
   v .h2h-item, chytlo by ho .ss-list-head:first-child a řádky by se slepily —
   normální odstup se proto vrací od druhé položky dál. */
.h2h-item + .h2h-item .ss-list-head { padding-top: 12px; }

.match-detail .lineup-row   { gap: 10px; padding: 7px 0; }
.match-detail .lineup-shirt { width: 24px; font-size: 0.78rem; }
.match-detail .lineup-name  { font-size: 0.85rem; }
.match-detail .lineup-cap   { font-size: 0.72rem; }
.match-detail .lineup-grid      { --lineup-gap: 30px; }
.match-detail .lineup-row-title { margin: 22px 0 4px; }
.match-detail .lineup-coach-name { font-size: 0.85rem; }
/* Trenér je řádek jako hráč, jen bez čísla dresu — hodnoty přepínače
   (věk, země, zápasy) tak stojí ve stejném sloupci jako u hráčů. */
.match-detail .lineup-coach-card { border-bottom: none; }

.match-detail .half-header-label { font-size: 0.85rem; }
.match-detail .half-header-time  { font-size: 0.72rem; }
.match-detail .timeline-minute  { font-size: 0.86rem; padding: 3px 9px; }
.match-detail .timeline-row     { font-size: 0.76rem; gap: 5px; }
.match-detail .timeline-content .timeline-icon-goal { font-size: 0.88rem; }

/* Přepínač nad soupiskou — tytéž pilulky jako přepínače nad tabulkou
   soutěže (.ss-switch: samostatné, bez rámečku, vybraná světlá). Jen jsou
   z tlačítek, ne z odkazů, takže se ruší rámeček a písmo prohlížeče;
   podklad, odsazení i velikost nese .ss-switch-item. Na úzkém displeji se
   zalomí na dva řádky, stejně jako přepínače nad tabulkou. */
.lineup-switch { margin: 0 0 14px; }
.lineup-switch .ss-switch-item {
    border: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.match-detail .stats-filter-label { font-size: 0.7rem; letter-spacing: 1px; }
.match-detail .stats-filter-chip  { font-size: 0.76rem; padding: 5px 11px; }
.match-detail .full-stats-table    { font-size: 0.8rem; }
.match-detail .full-stats-table td { padding: 9px 8px; }
.match-detail .full-stats-table th { padding: 10px 8px; font-size: 0.64rem; letter-spacing: 0.5px; }

/* Datum nad řádkem zápasu v H2H nese i soutěž — seznam sahá napříč
   ročníky i úrovněmi, bez ní by řádky splývaly. */
.ss-list-head-comp { margin-left: 8px; text-transform: none; letter-spacing: 0; opacity: 0.75; }

/* Seznamy zápasů v detailu zápasu (forma, vzájemné zápasy, ostatní zápasy
   kola): datum a soutěž nad zápasem stojí na středu, v ose skóre pod nimi.
   Strany řádku jsou stejně široké, osa skóre je tedy střed řádku. */
.match-detail .h2h-block .ss-list-head { text-align: center; }
.match-aside-round .ss-match-meta { text-align: center; }


/* --- PRAVÝ SLOUPEC DETAILU ZÁPASU: čísla obou týmů ---
   Sloupec je úzký, obě strany proto stojí pod sebou, ne vedle sebe. Každý
   blok začíná hlavičkou týmu (logo + název), aby bylo jasné, ke komu čísla
   pod ní patří. */
.match-aside-block { margin-bottom: 16px; }
.match-aside-block:last-child { margin-bottom: 0; }

.match-aside-team {
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}
.match-aside-team-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-main);
    text-decoration: none;
}
.match-aside-team-name {
    font-size: 0.76rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-aside-team-link:hover .match-aside-team-name { color: var(--accent); }

.match-aside-standing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.match-aside-rank { font-size: 0.85rem; font-weight: 800; color: var(--text-main); }
.match-aside-standing-line { flex: 1 1 auto; min-width: 0; }
.match-aside-points { font-weight: 800; color: var(--accent); }
.match-aside-form { margin-top: 7px; }

/* Rozhodčí: jméno s vlajkou vpravo od něj a pod ním dvě dlaždice — žluté
   vlevo se žlutým rámečkem, červené vpravo s červeným. Rámeček je jediné,
   co druh karty říká; v dlaždici je průměr na zápas, stupnice se zářezem
   (průměr soutěže) a tečkou (jeho číslo) a slovo, jak si stojí. */
.match-aside-referee { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.match-aside-referee-name { font-size: 0.92rem; font-weight: 800; }

.match-aside-ref-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.match-aside-ref-tile {
    padding: 10px;
    border-radius: 10px;
    background: var(--bg-surface);
    min-width: 0;
}
.match-aside-ref-tile.is-yc { border-color: var(--yc); }
.match-aside-ref-tile.is-rc { border-color: var(--rc); }

.match-aside-ref-value { font-size: 1.05rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; cursor: help; }
.match-aside-ref-scale { cursor: help; }
.match-aside-ref-per { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

/* Stupnice: 0 vlevo, dvojnásobek průměru soutěže vpravo. Zářez je průměr
   soutěže, výplň a tečka rozhodčí. Tečka má pozici v procentech, translate
   ji vystředí nad hodnotou. */
.match-aside-ref-scale {
    position: relative;
    height: 5px;
    margin: 12px 0 6px;
    border-radius: 999px;
    background: var(--border);
}
.match-aside-ref-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--text-muted); }
.match-aside-ref-tile.is-above .match-aside-ref-fill { background: var(--accent); }
.match-aside-ref-tick {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 13px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--text-muted);
}
.match-aside-ref-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--text-main);
    border: 2px solid var(--bg-surface);
}
.match-aside-ref-tile.is-above .match-aside-ref-dot { background: var(--accent); }

.match-aside-ref-verdict { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); text-transform: lowercase; }
.match-aside-ref-tile.is-above .match-aside-ref-verdict { color: var(--accent); }

/* Zbytek delegace pod dlaždicemi: role vlevo drobně, jméno vpravo. */
.match-aside-officials { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.match-aside-official {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
}
.match-aside-official dt {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
}
.match-aside-official dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; text-align: right; }

/* Ostatní zápasy kola: řádky jako na úvodce, každý s termínem nad sebou.
   Sloupec má 255 px, do jednoho řádku se dva názvy klubů nevejdou — zbývají
   loga a skóre uprostřed; název řekne title loga a odkaz na klub zůstává. */
.match-aside-round .ss-match {
    gap: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 0.78rem;
}
.match-aside-round:last-child { margin-bottom: calc(-1 * var(--panel-pad, 0px)); }
.match-aside-round .ss-side-name { display: none; }
.match-aside-round .ss-side-club { gap: 0; }
/* Den už stojí v popisku nad řádkem, uprostřed zbývá čas. */
.match-aside-round .ss-center-day { display: none; }

/* Tipovačka: tři tlačítka vedle sebe — logo domácích, X, logo hostů —,
   pod nimi pruh s rozložením tipů (.ss-split ze score-service.css).
   Tlačítka nemají rámeček ani podklad, jsou to holá loga; že se dá
   kliknout, ukáže hover, a vybraný tip nese akcentní linku pod sebou —
   i po návratu ze serveru, ať je vidět, že se uložil. Pruh stojí bez
   popisku: kdo je vlevo a kdo vpravo, říkají loga nad ním. */
.match-aside-vote-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}
.match-aside-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 6px 6px 8px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    min-width: 0;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.match-aside-vote-btn:hover { opacity: 1; color: var(--accent); }
/* Po výkopu trojice nic nedělá — bez kurzoru ruky a bez hoveru. */
.match-aside-vote-btn.is-static { cursor: default; }
.match-aside-vote-btn.is-static:hover { opacity: 0.85; color: var(--text-muted); }
.match-aside-vote-btn.is-static.is-chosen,
.match-aside-vote-btn.is-static.is-chosen:hover { opacity: 1; color: var(--accent); }
.match-aside-vote-btn.is-chosen { opacity: 1; color: var(--accent); border-bottom-color: var(--accent); }
.match-aside-vote-btn .club-logo { width: 36px; height: 36px; }
.match-aside-vote-x { font-size: 1.6rem; font-weight: 800; line-height: 1; }

.match-aside-vote .ss-panel-note { margin-top: 8px; }

/* Celková bilance nad seznamem vzájemných zápasů. Tři sloupce jako samotný
   zápas: domácí, remízy, hosté. */
.h2h-balance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 4px 0 6px;
    text-align: center;
}
.h2h-balance-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.h2h-balance-label { max-width: 100%; }
.h2h-balance-value { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.h2h-balance-cell.is-home .h2h-balance-value,
.h2h-balance-cell.is-away .h2h-balance-value { color: var(--accent); }
.h2h-balance-cell.is-draw .h2h-balance-value { color: var(--text-muted); }
.h2h-balance-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h2h-balance-note {
    padding: 2px 0 14px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

/* Kdy padají góly: dva pruhy na koš, vstřelené a obdržené. Bez rozlišení by
   z pruhu nešlo poznat, jestli tým v té čtvrthodině útočí, nebo inkasuje. */
.match-aside-legend {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.66rem;
    color: var(--text-muted);
}
.match-aside-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.match-aside-swatch { width: 10px; height: 6px; border-radius: 2px; }
.match-aside-swatch.is-for { background: var(--accent); }
.match-aside-swatch.is-against { background: var(--rc); }

.match-aside-timing { display: flex; flex-direction: column; gap: 7px; }
.match-aside-timing-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}
.match-aside-timing-label { font-size: 0.66rem; color: var(--text-muted); }
.match-aside-timing-bars { display: flex; flex-direction: column; gap: 2px; }
.match-aside-bar {
    display: block;
    height: 5px;
    background: var(--bg-surface);
    border-radius: 999px;
    overflow: hidden;
}
.match-aside-bar > span { display: block; height: 100%; border-radius: 999px; }
.match-aside-bar.is-for > span { background: var(--accent); }
.match-aside-bar.is-against > span { background: var(--rc); }

.match-aside-timing-values {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.66rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.match-aside-timing-values .is-for { color: var(--accent); }
.match-aside-timing-values .is-against { color: var(--rc); }

.match-aside-split-row {
    /* Řádek i linka nad ním drží odsazení panelu, stejně jako linka pod
       hlavičkou týmu. Dřív se řádek zápornými okraji roztahoval k rámečku
       a hned nato „padding: 5px 0" zrušil boční odsazení — popisek „Doma"
       i body ležely na hraně panelu a linky v bloku končily každá jinde. */
    padding: 5px 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--border);
    font-size: 0.74rem;
    color: var(--text-muted);
}
/* První řádek pod hlavičkou týmu linku nemá — tu už kreslí hlavička.
   (:first-of-type tu nezabíral: první div bloku je hlavička, ne řádek,
   a pod hlavičkou tak stály dvě čáry.) */
.match-aside-team + .match-aside-split-row { border-top: none; }
.match-aside-split-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.match-aside-split-points { font-weight: 800; color: var(--accent); }

/* --- NESEHRANÝ ZÁPAS: vykartovaní hráči ve dvou sloupcích ---
   Čtou se po týmech, ne po řádcích — proto sloupec na tým. Předpokládané
   soupisky tuhle mřížku mívaly taky; dnes jedou v .lineup-grid jako
   soupisky odehraného zápasu, aby obě podoby zápasu vypadaly stejně. */
.match-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.match-upcoming-cell { min-width: 0; }
.match-upcoming-cell-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 700;
}

.match-upcoming-watch-group { margin-bottom: 14px; }
.match-upcoming-watch-group:last-child { margin-bottom: 0; }

/* Řádek je jen karta a jméno, proto se drží u kraje — u hostů díky
   row-reverse u toho protějšího. Zbytek (druh vyloučení, termín, délka
   trestu) je v popisku karty. */
.match-upcoming-watch-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.match-upcoming-watch-row:last-child { border-bottom: none; }
.match-upcoming-watch-row .rc-icon { flex: none; }
.match-upcoming-watch-name { color: var(--text-main); text-decoration: none; }
.match-upcoming-watch-name:hover { color: var(--accent); }

/* --- ZRCADLOVÝ SLOUPEC HOSTŮ ---
   Stejný princip jako u soupisek: hosté se čtou od středu ven, takže
   značky i popisky jdou zprava doleva a texty se zarovnávají k pravému
   okraji. Předpokládaná soupiska už jede v .lineup-grid jako ta skutečná
   (zrcadlení řeší lineup.css), tady zbývají vykartovaní hráči. */
.match-upcoming-cell[data-side="away"] .match-upcoming-cell-title,
.match-upcoming-cell[data-side="away"] .lineup-empty { text-align: right; }

.match-upcoming-cell[data-side="away"] .match-upcoming-watch-row { flex-direction: row-reverse; }

@media (max-width: 640px) {
    .match-upcoming-grid { grid-template-columns: minmax(0, 1fr); }

    /* V jednom sloupci pod sebou už není od čeho zrcadlit. */
    .match-upcoming-cell[data-side="away"] .match-upcoming-cell-title,
    .match-upcoming-cell[data-side="away"] .lineup-empty { text-align: left; }
    .match-upcoming-cell[data-side="away"] .match-upcoming-watch-row { flex-direction: row; }
}

/* --- HLAVIČKA POLOČASU --- */
.half-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 32px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.half-header:first-child {
    margin-top: 0;
}

.half-header-label {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--on-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.half-header-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.half-header-extra {
    margin-left: 6px;
    color: var(--accent);
    font-weight: 600;
}

/* --- ČASOVÁ OSA ZÁPASU --- */
.match-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid var(--border);
    margin: 20px 0 12px 10px;
}

.timeline-item {
    margin-bottom: 14px;
    position: relative;
}

/* Minuta jako badge — v rozdělené ose sedí přímo na centrální lince,
   na úzkém displeji na kraji řádku. */
.timeline-minute {
    font-weight: 800;
    color: var(--accent);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    background: var(--bg-main);
    border: 2px solid var(--accent);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-block;
}

/* Událost nemá vlastní rámeček ani podklad — osa sama je dost silná kresba
   a obdélník kolem každého jména z ní dělal seznam kartiček. */
.timeline-content { display: block; }

/* Stálý sloupec pro značku události.

   Míč je znak písma (~19 px), kartička kreslená CSS má 10 px a dvojitá žlutá
   16. Bez společného sloupce by každý typ události posunul číslo dresu i jméno
   jinam a osa by se rozjela. Značka si vlastní velikost nechává, jen se
   vystředí — proto slot, ne šířka na .timeline-icon: ta by kartičce roztáhla
   i její barevnou plochu. */
.timeline-icon-slot {
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ikony a popisky uvnitř události na časové ose */
.timeline-content .timeline-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.timeline-content .timeline-icon-goal {
    font-size: 0.95rem;
    line-height: 1;
}

/* Řádek události. Pořadí prvků je pro obě strany stejné a jde od osy ven:
   značka, u gólu skóre, číslo dresu, jméno. Domácí ho čtou zprava doleva,
   hosté zleva doprava. */
.timeline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    line-height: 1.35;
}

.timeline-shirt {
    min-width: 17px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Jméno je odkaz na detail hráče. Barvu ani podtržení nedědí po <a>, aby
   řádek osy vypadal stejně u hráče se záznamem i bez něj; kliknutelnost
   ukazuje až hover — stejně jako u soupisky (.lineup-name) a hlídání karet. */
.timeline-name { font-weight: 700; color: inherit; text-decoration: none; }
a.timeline-name:hover { color: var(--accent); }
.timeline-name-muted { font-weight: 400; color: var(--text-muted); }
.timeline-note { color: var(--text-muted); font-size: 0.7rem; }

/* Stav zápasu po gólu — jediný prvek osy, který se čte i bez jmen.

   Místo si drží každý řádek, i ten bez gólu (.is-empty). Kdyby ho měl jen
   gólový řádek, odstrčil by o svou šířku číslo dresu a jméno a sloupce osy
   by se rozešly. Pevná šířka je proto podstatná, ne kosmetická.

   V pořadí stojí jako první od osy: u hostů tedy nalevo od míče a u domácích
   napravo od něj, protože jejich řádek zrcadlí row-reverse. */
.timeline-goal-score {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: center;
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* Otevřený konec osy: zápas se hraje dál. Jen tečka a text, bez rámečku —
   pilulky na konci poločasů odešly a tohle je jediná značka, která zbyla.
   Tečka je táž jako u probíhajícího zápasu v seznamech (ss-running
   z components/match-list.css, tepe). */
.timeline-live {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.timeline-live-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* --- ROZDĚLENÁ ČASOVÁ OSA (domácí vlevo / hosté vpravo) --- */
.match-timeline.timeline-split {
    position: relative;
    padding-left: 0;
    margin: 20px 0 12px;
    border-left: none;
}

.match-timeline.timeline-split::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
}

.timeline-split .timeline-item {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.timeline-split .timeline-item.timeline-home {
    margin-left: 0;
    padding: 0 50px 0 0;
    text-align: right;
}

.timeline-split .timeline-item.timeline-away {
    margin-left: 50%;
    padding: 0 0 0 50px;
    text-align: left;
}

/* Minuta sedí přímo na centrální ose, vertikálně na středu události —
   u jednořádkové na středu řádku se skóre, značkou, dresem a jménem,
   u střídání mezi jmény obou hráčů. Dřív stála na horní hraně řádku;
   dokud byl odznak stejně vysoký jako text, nevadilo to, větší minuta
   ale přesahovala dolů a s řádkem nesouhlasila. */
.timeline-split .timeline-minute {
    position: absolute;
    top: 50%;
    z-index: 3;
}

.timeline-split .timeline-item.timeline-home .timeline-minute {
    right: 0;
    transform: translate(50%, -50%);
}

.timeline-split .timeline-item.timeline-away .timeline-minute {
    left: 0;
    transform: translate(-50%, -50%);
}

/* Obě strany se lepí ke středové lince osy — u domácích je to pravá hrana
   jejich poloviny, u hostů levá. HTML pořadí jde od osy ven, hosté ho tedy
   vykreslí rovnou (zleva doprava) a domácí obráceně; u row-reverse je
   flex-start vpravo, proto stejná hodnota justify-content pro obojí.
   Zalomený název pak pokračuje na svou stranu, ne doprostřed. */
.timeline-split .timeline-item.timeline-home .timeline-row {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
}
.timeline-split .timeline-item.timeline-away .timeline-row {
    justify-content: flex-start;
    text-align: left;
}

/* Střídání jsou dva řádky pod sebou; každý se zarovnává sám za sebe,
   proto musí být na plnou šířku poloviny. */
.timeline-sub-block { display: flex; flex-direction: column; gap: 2px; }

/* Barevné orámování badge minuty podle typu události */
.timeline-item.event-yc  .timeline-minute { border-color: var(--yc); color: var(--yc); }
.timeline-item.event-yc2 .timeline-minute,
.timeline-item.event-rc  .timeline-minute { border-color: var(--rc); color: var(--rc); }
.timeline-item.event-sub .timeline-minute { border-color: var(--text-muted); color: var(--text-muted); }

/* Pod 992 px středová osa není. Každá událost má celý řádek (i dlouhé
   jméno se může roztáhnout přes celou šířku panelu): domácí se
   čtou od levého kraje — minuta, skóre po gólu, značka, dres, příjmení —,
   hosté zrcadlově od pravého. HTML je pro obě strany stejné (minuta, pak
   obsah od skóre ke jménu), hosté ho obracejí přes row-reverse.
   Minuta má pevnou šířku, ať značky, dresy a jména stojí na každé straně
   pod sebou. */
@media (max-width: 992px) {
    .match-timeline.timeline-split::before { display: none; }

    .timeline-split .timeline-item,
    .timeline-split .timeline-item.timeline-home,
    .timeline-split .timeline-item.timeline-away {
        width: 100%;
        margin-left: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    .timeline-split .timeline-item.timeline-home { text-align: left; }
    .timeline-split .timeline-item.timeline-away {
        flex-direction: row-reverse;
        text-align: right;
    }

    .timeline-split .timeline-minute,
    .timeline-split .timeline-item.timeline-home .timeline-minute,
    .timeline-split .timeline-item.timeline-away .timeline-minute {
        position: static;
        transform: none;
        flex: 0 0 auto;
        min-width: 52px;
        text-align: center;
        box-sizing: border-box;
    }
    /* Obsah události si bere zbytek řádku: domácí i hosté mají celou
       šířku, ne polovinu jako na širokém displeji. */
    .timeline-split .timeline-content { flex: 1 1 auto; min-width: 0; }

    .timeline-split .timeline-item.timeline-home .timeline-row {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    .timeline-split .timeline-item.timeline-away .timeline-row {
        flex-direction: row-reverse;
        justify-content: flex-start;
        text-align: right;
    }
}


/* --- STATISTIKY: filtr týmu + tabulka --- */
/* Filtr stojí pod nadpisem sekce a při scrollu zůstává pod navigací. Záporné
   boční okraje ho roztáhnou přes celou šířku panelu (.ss-panel má padding
   16 px), aby linka pod ním oddělila celou sekci, ne jen text. */
.stats-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -16px 14px;
    padding: 10px 16px;
    background: var(--bg-card);
    position: sticky;
    top: 75px;
    z-index: 11;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-filter-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-right: 4px;
}

.stats-filter-chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stats-filter-chip:hover {
    color: var(--text-main);
    background: var(--hairline);
}

.stats-filter-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-glow);
    font-weight: 700;
}

.match-stats-table tbody tr[data-hidden="true"] { display: none; }

/* Wrapper kolem tabulky statistik. Neaktivujeme overflow-x:auto na desktopu,
   protože overflow blokuje position:sticky uvnitř (sticky thead pak nedrží
   pod stats-controls, ale uvnitř kontejneru → vypadá rozbitě). */
.match-stats-wrapper {
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 25px;
}

@media (max-width: 820px) {
    /* Na úzkém displeji obětujeme sticky thead pro horizontální scroll. */
    .match-stats-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .match-stats-table thead th { position: static !important; }
}

/* Sticky hlavička tabulky statistik – drží těsně pod stats-controls.
   border-collapse: separate je nezbytné, jinak Chrome ztrácí spodní border. */
.match-stats-table {
    border-collapse: separate;
    border-spacing: 0;
}

.match-stats-table thead th {
    position: sticky;
    top: calc(75px + var(--stats-controls-h, 56px));
    background: var(--bg-card);
    z-index: 10;
    box-shadow: inset 0 -1px 0 var(--border);
}

/* Aktivní sort column: --accent-glow je RGBA s 0.15 alpha → skrz prosvítají
   řádky tbody. Vrstvíme glow nad solidním bg-card, takže pozadí je neprůhledné. */
.match-stats-table thead th.stat-active,
.match-stats-table thead th[data-dir] {
    background:
        linear-gradient(var(--accent-glow), var(--accent-glow)),
        var(--bg-card);
}


/* --- RESPONZIVITA --- */
@media (max-width: 992px) {

}