/* assets/css/pages/score-service.css — třísloupcová skořápka celého webu.
 *
 * Vlevo výběr soutěží, uprostřed obsah stránky, vpravo rekordy a čísla.
 * Boční sloupce jsou stejně široké (255 px), prostřední zabere zbytek.
 *
 * Jak se to zužuje:
 *
 *   ≤ 1200 px  pravý sloupec odchází pod obsah a rozloží se do mřížky panelů
 *   ≤  820 px  jeden sloupec. Levý se nekreslí vůbec — na mobilu ho zastupuje
 *              karta „Soutěže" ve spodní liště (/souteze). Na výsledkovém
 *              servisu (.score-page) mizí i pravý sloupec, takže zbývají jen
 *              zápasy; na kartě hráče nebo zápasu pravý sloupec zůstává,
 *              tam je to obsah, který jinde není.
 */

/* Navigace je fixní a vysoká 75 px (.nav-spacer v base.css). Odsazení shora
   dělá mezeru mezi hlavičkou a sloupci. */
/* Výsledkový servis se vědomě vymyká šířce .container z base.css (1200 px).
   Tři sloupce potřebují víc místa než zbytek webu, takže se obal na téhle
   stránce zneutralizuje a okraje stránky si servis určuje sám paddingem níž.
   Bez toho by se max-width nastavená tady vůbec neuplatnila — .container by
   ji uřízl dřív. */
.container:has(> .score-service) {
    max-width: none;
    padding: 0;
}

.score-service { max-width: 1600px; margin: 0 auto; padding: 24px 16px 40px; }

/* Boční sloupce jsou stejně široké, prostřední si drží šířku, jakou měl.
   Počítá se to takhle: obal má 1600 px a 16 px odsazení po stranách, tedy
   1568 px obsahu; dvě mezery po 20 px z toho ukrojí 40. Na sloupce zbývá
   1528 a prostřední jich měl 1528 − 190 − 320 = 1018. Na oba boční tedy
   zbývá 510, po 255 na každý.

   Kdyby se změnila max-width servisu, mezera nebo odsazení, musí se
   přepočítat i tohle číslo — jinak střed přeskočí. */
.ss-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr) 255px;
    gap: 20px;
    align-items: start;
}

/* Každý sloupec má místo v mřížce určené natvrdo, aby nezáleželo na pořadí
   ve zdroji. Pravý sloupec totiž ve zdroji stojí PŘED prostředním.

   Je to kvůli tomu, jak prohlížeč stránku skládá, jak přitéká. Prostřední
   sloupec bývá dlouhý — karta Zápasy hráče s dlouhou kariérou má přes dvě
   stě zápasů a půl megabajtu HTML. Když pravý sloupec stál ve zdroji až za
   ním, existoval teprve po dočtení celého dokumentu: stránka se nejdřív
   vykreslila s prázdnou pravou třetinou a panel do ní pak naskočil.
   S opačným pořadím je pravý sloupec na svém místě od první porce dat.

   Čte se pořád zleva doprava, protože o poloze rozhoduje mřížka. Jediné,
   co se přehozením mění, je pořadí pro čtečku a tabulátor — pravý panel
   je v něm před prostředním sloupcem. Je to sedm odkazů, snesitelná daň
   za stránku, která pod rukama neposkakuje. */
.ss-competitions { grid-column: 1; grid-row: 1; }
.ss-matches      { grid-column: 2; grid-row: 1; }
.ss-highlights   { grid-column: 3; grid-row: 1; }

/* Bez levého sloupce (detail zápasu, viz $ssLeftColumn v _ss_page.php):
   dva sloupce, střed si bere místo po soutěžích. Pravý sloupec zůstává
   stejně široký jako na úvodce — o co je stránka širší, o to je širší
   střed. */
.ss-layout-no-left { grid-template-columns: minmax(0, 1fr) 255px; }
.ss-layout-no-left .ss-matches    { grid-column: 1; }
.ss-layout-no-left .ss-highlights { grid-column: 2; }

/* Nadpis stránky uvnitř panelu — adresář klubů, o projektu, 404. Dřív to
   byl .section-header s vodorovnou linkou; v panelu ji nepotřebuje, panel
   sám je ohraničení. */
.ss-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.ss-col-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 0 0 10px;
    font-weight: 700;
}

/* --- LEVÝ SLOUPEC: soutěže --- */
.ss-competitions {
    /* Sticky se drží 24 px pod navigací. Musí být níž, než kde sloupec stojí
       v klidu (75 + 24 = 99 px), jinak by ho sticky hned po načtení posunulo
       dolů a horní hrany sloupců by se rozešly. */
    position: sticky;
    top: 99px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
}

/* Seznam podle fotmob.com („All leagues"): nadpis s trojúhelníkem sbalí
   celý seznam, pod ním filtr a úrovně jako rozbalovací řádky se znakem
   úrovně (místo vlajky státu) a trojúhelníkem vpravo; rozbalená úroveň
   ukáže soutěže s pohárem. Všechno <details>, viz _ss_competitions.php. */
.ss-leagues-head {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 2px 4px 12px;
}
.ss-leagues-head::-webkit-details-marker { display: none; }
.ss-leagues-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--text-muted); }
.ss-leagues-head:hover .ss-leagues-title { color: var(--text-main); }
.ss-leagues[open] > .ss-leagues-head .ss-dropdown-caret { transform: rotate(180deg); }
.ss-leagues-filter { margin-bottom: 10px; }

.ss-level-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-radius: 8px;
    list-style: none;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
}
.ss-level-head::-webkit-details-marker { display: none; }
.ss-level-head:hover { background: rgba(255, 255, 255, 0.05); }
.ss-level-head .ss-dropdown-caret { margin-left: auto; opacity: 0.6; }
.ss-level[open] > .ss-level-head .ss-dropdown-caret { transform: rotate(180deg); opacity: 1; }
/* Znak úrovně místo vlajky: číslo ligy v kruhu. */
.ss-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
}
.ss-level-name { min-width: 0; }

.ss-comp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px 8px 40px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.3;
}
.ss-comp:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }
.ss-comp.active { color: var(--accent); font-weight: 700; }
.ss-comp-icon { display: inline-flex; flex: none; color: var(--text-muted); }
.ss-comp.active .ss-comp-icon { color: var(--accent); }
.ss-comp-icon .ss-comp-logo { width: 16px; height: 16px; }
.ss-comp-label { min-width: 0; }
.ss-leagues-empty { font-size: 0.78rem; margin: 6px 4px 0; }
/* Stránka /souteze: tentýž seznam jako levý sloupec, na PC nepřerostlý
   do šířky celé stránky. */
.ss-competitions-page { width: 100%; max-width: 440px; }

/* Přepínač ročníku stával pod seznamem soutěží v levém sloupci a pak ještě
   nad seznamem na stránce /souteze. Odešel do hlavičky soutěže — viz
   .ss-comp-season —, protože jinde přepínal jen to, které soutěže se vypíšou,
   což je odpověď na otázku, kterou si nikdo nekladl. Styly obou dřívějších
   podob (.ss-season-form, .ss-season-label, .ss-season-select) zanikly s ním. */

/* --- STŘED: soutěž v záložkách ---
   Střed není jedna velká karta, ale stoh panelů — stejných, jaké nese pravý
   sloupec. Každá sekce přehledu tak stojí opticky sama za sebe. */
.ss-matches {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ss-matches-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* --- HLAVIČKA SOUTĚŽE (_ss_comp_header.php) ---
   Přes celou šířku nad oběma sloupci: vlevo znak, název a úroveň, vpravo
   hvězdička a ročník, pod tím pás karet. Mezera pod ní je táž jako mezi
   sloupci. */
.ss-comp-header { margin-bottom: 20px; }
.ss-comp-header .ss-tabs { margin-top: 18px; }

.ss-comp-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ss-comp-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Znak soutěže. Loga soutěží web zatím nemá, stojí za ně pohár
   (getCompetitionLogoHtml) v kruhu — velikostí jako logo klubu v jeho
   hlavičce (xl). SVG se kreslí barvou textu, tu mu dává kruh. */
.ss-comp-emblem {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-glow);
    border: 2px solid var(--accent);
    color: var(--accent);
}
.ss-comp-emblem .ss-comp-logo { width: 32px; height: 32px; }

.ss-comp-names { min-width: 0; }
.ss-comp-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.ss-comp-level {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ss-comp-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Ročník a Sledovat v hlavičce soutěže, jako na fotmob.com: dvě pilulky
   stejné výšky. Ročník má tenký světlý obrys a plný trojúhelník (menu je
   .ss-dropdown, vpravo zarovnané), Sledovat je plná bílá. */
.ss-comp-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ss-comp-pill:hover,
.ss-comp-pill.ss-dropdown-toggle:hover { border-color: var(--text-main); color: var(--text-main); }
.ss-dropdown-right .ss-dropdown-menu { left: auto; right: 0; min-width: 140px; }

/* Sledovat vedle ročníku má tutéž výšku (36 px) — styl tlačítka je
   společný pro celý web, viz .fav-btn v buttons.css. */

/* Skupina přehledu (úroveň, nebo den): jen obal panelů soutěží kvůli
   živému obnovování (data-week-matches). Skupina sama panel není, hlavičku
   nemá — rámeček i hlavičku má až soutěž. */
.ss-week-group { min-width: 0; }
/* Mezera mezi panely je táž jako mezera mezi skupinami (gap .ss-matches),
   takže se nepozná, kde jedna úroveň nebo den končí a další začíná — což
   je záměr, hlavičky skupin zanikly. */
.ss-comp-panel { margin-top: 16px; }
.ss-comp-panel:first-of-type { margin-top: 0; }

/* Hlavička panelu soutěže: podbarvený pruh přes celou šířku panelu
   (záporné okraje sahají přes jeho odsazení), ne linka. Barvou se od
   seznamu pod ní liší sama, oddělovač nepotřebuje.

   Pruh sedí přímo na prvním řádku a seznam končí přímo na spodním
   rámečku (záporný spodní okraj): první i poslední řádek tak mají kolem
   sebe stejně místa jako ostatní — jen své vlastní odsazení. Dřív měl
   první řádek nad sebou mezeru pod pruhem a poslední pod sebou odsazení
   panelu, takže oba vypadaly vyšší. overflow: hidden ořízne podbarvení
   při najetí na zaoblené rohy panelu. */
.ss-comp-panel { overflow: hidden; }
.ss-comp-panel > .ss-comp-head-row {
    margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) 0;
    padding: 9px var(--panel-pad);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    background: var(--bg-head);
}
/* Jeden odstín pro celou kresbu panelu: podklad hlavičky, rámeček panelu
   i linky mezi zápasy jsou --bg-head. Linka mezi hlavičkou a prvním
   řádkem není potřeba — splynula by s hlavičkou. */
.ss-comp-panel { border-color: var(--bg-head); }
.ss-comp-panel .ss-match { border-top-color: var(--bg-head); }
.ss-comp-panel .ss-match-list > .ss-match:first-child,
.ss-comp-panel .ss-match-list > .ss-row-fold:first-child > .ss-match { border-top-color: transparent; }
.ss-comp-panel > .ss-match-list:last-child { margin-bottom: calc(-1 * var(--panel-pad)); }
/* Panel podle času nemá hlavičku: seznam začíná hned u horního rámečku
   a první řádek si nechává linku nad sebou vypnutou stejně jako jinde. */
.ss-time-panel > .ss-match-list:first-child { margin-top: calc(-1 * var(--panel-pad)); }

/* Seznam zápasů na úvodce podle fotmob.com: vzdušnější řádky (přes 60 px
   místo 40), výraznější pruh se soutěží, větší loga, skóre a názvy.
   .ss-comp-panel je jen na úvodce — seznamy jinde (karta Zápasy, panel
   kola, detail zápasu, klub, hráč) si hustší řádek nechávají. */
.ss-comp-panel > .ss-comp-head-row { padding-top: 14px; padding-bottom: 14px; }
.ss-comp-panel .ss-comp-head { font-size: 0.9rem; font-weight: 700; }
.ss-comp-panel .ss-match { padding-top: 16px; padding-bottom: 16px; column-gap: 14px; }
.ss-comp-panel .ss-side-name { font-size: 0.9rem; }
.ss-comp-panel .ss-side .club-logo { width: 24px; height: 24px; }
.ss-comp-panel .ss-center-score { font-size: 1rem; }
.ss-comp-panel .ss-center-time { font-size: 0.95rem; }
@media (max-width: 520px) {
    .ss-comp-panel .ss-match { padding-top: 13px; padding-bottom: 13px; column-gap: 10px; }
    .ss-comp-panel .ss-side-name { font-size: 0.85rem; }
    .ss-comp-panel .ss-side .club-logo { width: 22px; height: 22px; }
}

/* Panel je <details>: sbalený má jen hlavičku, která pak tvoří celý panel
   i se spodními rohy; její záporný spodní okraj by jinak nechal prázdný
   proužek pod ní. */
/* Specifičtěji než .ss-fold:not([open]) > .ss-fold-head níž, které by
   spodní okraj vrátilo na nulu. */
.ss-comp-panel.ss-fold:not([open]) > .ss-comp-head-row {
    margin-bottom: calc(-1 * var(--panel-pad));
    border-radius: var(--radius);
}

/* Sbalit/rozbalit v hlavičce panelu: plný rovnoramenný trojúhelník
   se zaoblenými rohy vpravo. Míří dolů = sbaleno (klik rozbalí), nahoru
   = rozbaleno (klik sbalí) — stejná logika jako šipka u úrovně. Je to
   inline SVG: zaoblení rohů dělá kulaté napojení tahu (stroke-linejoin),
   které okraje CSS ani znak písma neumí. */
.ss-comp-fold-tri {
    flex: none;
    margin-left: auto;
    display: block;
    color: var(--text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}
.ss-comp-panel[open] > .ss-comp-head-row .ss-comp-fold-tri { transform: rotate(180deg); }
.ss-comp-head-row:hover .ss-comp-fold-tri { color: var(--accent); }

.ss-comp-head {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    text-decoration: none;
}
/* Nadpis vnořeného bloku. U soutěže je to odkaz do jejího pohledu, u výkopu
   jen čas — proto hover jen na odkazu. */
a.ss-comp-head:hover { color: var(--accent); }

/* Hlavička bloku soutěže (program soutěže; v přehledu ji přebarvuje
   .ss-comp-panel výš). */
.ss-comp-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.ss-comp-panel .ss-comp-head { font-size: 0.82rem; color: var(--text-main); }
.ss-comp-head-row .ss-chevron { width: 13px; height: 13px; }

/* Odkaz na plnou záložku na konci sekce přehledu. */
.ss-panel-more {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-decoration: none;
}
.ss-panel-more:hover { color: var(--accent); }

/* Pás karet (_ss_tabs.php) — soutěž, klub, zápas i hráč. Jako na
   fotmob.com: jen text, bez rámečku a podkladu; vybraná karta je bílá
   a podtržená akcentem, který sedí na spodní hraně panelu. Na úzkém
   displeji se pás posouvá vodorovně (vybranou kartu k ní posune main.js). */
.ss-tabs {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ss-tabs::-webkit-scrollbar { display: none; }

.ss-tab {
    position: relative;
    flex: none;
    padding: 10px 0 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.ss-tab:hover { color: var(--text-main); }
.ss-tab.active { color: var(--text-main); font-weight: 700; }
.ss-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
}
/* Panel, který pásem karet končí, nemá pod ním odsazení — podtržení
   vybrané karty tak leží přímo na spodní hraně panelu. */
.ss-panel:has(> .ss-tabs:last-child) { padding-bottom: 0; }

/* Přepínač týdnů v hlavičce přehledu — protějšek přepínače ročníku vlevo.
   Šipky po stranách, výběr uprostřed. */
/* Přepínač je jediný obsah hlavičky přehledu, roztáhne se proto přes celou
   šířku panelu: šipky po krajích, výběr mezi nimi. */
.ss-week-nav { display: flex; align-items: center; gap: 8px; width: 100%; }
.ss-week-form { margin: 0; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }

/* Týden uprostřed: jako na fotmob.com bez rámečku a podkladu, tučný text
   a plný trojúhelník — rozbalovací menu .ss-dropdown, vycentrované pod
   textem. */
.ss-week-select { font-size: 0.95rem; font-weight: 700; }
.ss-week-pick .ss-dropdown-menu { left: 50%; transform: translateX(-50%); min-width: 220px; text-align: center; }
.ss-week-pick .ss-dropdown-item.ss-week-now { color: var(--accent); }

/* Krok o týden. Obsahem je tatáž šipka jako u sbalování — jen otočená
   doleva, respektive doprava; tvar je kulatý jako šipky kola (fotmob.com).
   Dvě třídy, ať přebijí zaoblení .ss-toggle-btn, které stojí níž. */
.ss-toggle-btn.ss-week-step { text-decoration: none; border-radius: 50%; color: var(--text-main); }
.ss-toggle-btn.ss-week-step:hover { color: var(--accent); }
.ss-week-step.is-disabled { opacity: 0.3; pointer-events: none; }

/* Probíhající týden se pozná barvou — v rozbalené nabídce i na zavřeném
   ovladači, když je zrovna vybraný. Ostatní položky dostávají barvu natvrdo:
   jinak by po ovladači zdědily akcent i ony a rozlišení by zmizelo. */
.ss-week-select.is-now { color: var(--accent); }

.ss-week-static { flex: 1 1 auto; text-align: center; font-size: 0.8rem; font-weight: 600; }
.ss-week-static.is-now { color: var(--accent); }

/* --- Ovladače pohledu na týden -------------------------------------------
   Druhý řádek hlavičky pod přepínačem týdnů: vypínač řazení podle času,
   filtr týmu a na konci sbalení všeho.

   Řádek se nezalamuje ani na telefonu. Ovladače po stranách mají pevnou
   šířku a filtr mezi nimi se zúží — tři ovladače pod sebou by na malé
   obrazovce odsunuly zápasy o kus níž, a to je právě to, co se sem chodí
   hledat. */
.ss-view-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    /* Linka nad řádkem jde přes celou šířku panelu, jako na fotmob.com. */
    width: calc(100% + 2 * var(--panel-pad, 16px));
    margin: 12px calc(-1 * var(--panel-pad, 16px)) 0;
    padding: 14px var(--panel-pad, 16px) 0;
    border-top: 1px solid var(--border);
}

/* Řazení podle času je vypínač, ne volba ze dvou. Vypnutý je útlumový,
   zapnutý svítí akcentem — stejné rozlišení, jaké mají aktivní záložky. */
/* Řazení podle času je vypínač, ne volba ze dvou. Vypnutý je útlumový,
   zapnutý svítí akcentem — stejné rozlišení, jaké mají aktivní záložky.
   Ikona hodin z něj zmizela: popisek říká totéž a v řádku, kde se vedle
   krčí filtr, je každý pixel šířky znát. */
/* Vypínače jsou pilulky jako přepínače podoby (.ss-switch-item): tmavé,
   zapnutý světlý — fotmob.com, „Live" a „By time". */
.ss-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    background: var(--bg-head);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ss-sort-toggle:hover { color: var(--accent); }
.ss-sort-toggle.is-on {
    background: var(--text-main);
    color: var(--bg-card);
}

/* Vypínač, po kterém by zůstala prázdná stránka, se nedá zmáčknout. Stejný
   útlum jako u šipky na týden, který v ročníku není — web nenabízí ovladač,
   který by nic neudělal. */
.ss-sort-toggle.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Ovladač sbalování ---------------------------------------------------
   Jeden tvar pro všechna tlačítka, která něco sbalují: čtvercové, orámované,
   s ikonou uvnitř. Liší se jen tím, co v nich je a jak jsou velká — v řádku
   ovladačů drží výšku ostatních, v hlavičce bloku jsou o kus menší, aby
   nepřerostly nadpis. */
.ss-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-size);
    height: var(--control-size);
    padding: 0;
    /* <button> by jinak dostal rámeček z prohlížeče. */
    border: none;
    background: var(--bg-head);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: inherit;
}

.ss-fold-all { cursor: pointer; width: 36px; height: 36px; border-radius: 50%; color: var(--text-main); }
.ss-fold-all:hover { color: var(--accent); }

/* Dvojice šipek v tlačítku „sbalit vše". V tlačítku jsou obě sady, vidět má
   být vždycky jen jedna — rozbaleno šipky dovnitř (klik sbalí), sbaleno ven
   (klik rozbalí). Tvar tedy říká, co se stane, ne jaký je stav.
   Ta druhá sada se schovává tady; obecné pravidlo na všechna svg uvnitř
   .ss-toggle-btn tu stálo dřív a přebilo ji, takže se v tlačítku ukázaly
   všechny čtyři šipky naráz. */
.ss-fold-icon { display: none; }
.ss-fold-all[aria-expanded="true"]  .ss-fold-icon-in  { display: block; }
.ss-fold-all[aria-expanded="false"] .ss-fold-icon-out { display: block; }

/* Filtr zabere zbytek řádku a smrskne se, jak je potřeba — proto min-width
   na nule, bez ní by mu prohlížeč nechal vnitřní šířku pole a řádek by
   přetekl. */
.ss-team-filter { flex: 1 1 auto; min-width: 0; display: block; position: relative; }
/* Filtr je široká pilulka s ikonou vlevo, jako „Filter" na fotmob.com. */
.ss-team-filter input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 14px 0 40px;
    background: var(--bg-head);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.85rem;
}
.ss-team-filter-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.ss-team-filter input:focus { outline: none; border-color: var(--accent); }
/* Telefon: řádek ovladačů se nezalamuje, filtr dostane, co pilulky ušetří. */
@media (max-width: 520px) {
    .ss-view-controls { gap: 6px; }
    .ss-sort-toggle { padding: 0 12px; gap: 6px; }
    .ss-team-filter input { padding-left: 32px; }
    .ss-team-filter-icon { left: 11px; }
}
.ss-team-filter input::placeholder { color: var(--text-muted); }

/* Bez pásu karet je hlavička poslední v panelu a nemá co odsazovat. */
.ss-panel > .ss-matches-head:last-child { margin-bottom: 0; }

/* --- SBALOVACÍ BLOKY ---
   Chování nese <details>, tenhle blok jen převléká <summary> do hlavičky
   sekce: výchozí trojúhelníková značka pryč, místo ní vlastní šipka vpravo.
   Bez JS se stále dá sbalovat, JS jen pamatuje stav mezi načteními. */
.ss-fold-head {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Odstup od obsahu nese hlavička — nadpis uvnitř má margin vynulovaný,
       jinak by rozhodil zarovnání řádku. */
    margin-bottom: 10px;
    cursor: pointer;
    list-style: none;
}
.ss-fold-head::-webkit-details-marker { display: none; }
.ss-fold-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- Šipka ---------------------------------------------------------------
   Jeden tvar (_ss_chevron.php), ve výchozí poloze míří dolů. Kam má mířit
   jinde, řekne třída — otočení dělá CSS, ne druhá kresba. */
.ss-chevron { display: block; transition: transform 0.15s ease; }
.ss-chevron-left  { transform: rotate(90deg); }
.ss-chevron-right { transform: rotate(-90deg); }

/* Sbalená hlavička nemá pod sebou co oddělovat — mezera zmizí s obsahem. */
.ss-fold:not([open]) > .ss-fold-head { margin-bottom: 0; }

.ss-round-block { margin-bottom: 14px; }
.ss-round-block:last-child { margin-bottom: 0; }

.ss-round-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}






/* Tabulka sedí uvnitř karty, vlastní rámeček ani pozadí proto nechce —
   z .table-wrapper zůstává jen vodorovný scroll pro úzké displeje. */
/* --- PŘEPÍNAČE NAD TABULKOU ---
   Dvě skupinky pilulek vedle sebe: podoba tabulky a množina zápasů.
   Na úzkém displeji se zalomí pod sebe. */
.ss-table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Přepínač podoby (Tabulka / HT/FT, Celkem / Doma / Venku, Týden / Kolo /
   Tým): samostatné pilulky bez rámečku, vybraná světlá — jako na
   fotmob.com. */
.ss-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ss-switch-item {
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--bg-head);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    white-space: nowrap;
}
.ss-switch-item:hover { color: var(--accent); }
.ss-switch-item.active:hover { color: var(--bg-card); }
.ss-switch-item.active {
    background: var(--text-main);
    color: var(--bg-card);
}

/* Během výměny bloku tabulky se obsah jen zjemní — bez posunu a bez
   probliknutí, výška zůstává, dokud nedorazí nová tabulka. */
.ss-table-block.is-swapping { opacity: 0.55; transition: opacity 0.12s ease; }

/* Řazení tabulek. Třídy swap-th / stat-active i atribut data-dir rozdává
   initSortableTable() v main.js; tady dostávají vzhled — klikací hlavička,
   aktivní sloupec v akcentu a šipka podle směru. Jména tříd jsou starší než
   dnešní řazení, zůstala po výměně celých tbody, kterou nahradilo. */
.ss-table thead th.swap-th { cursor: pointer; user-select: none; }
.ss-table thead th.swap-th:hover { color: var(--text-main); }
.ss-table thead th.stat-active { color: var(--accent); }
.ss-table thead th.stat-active::after {
    content: '▾';
    margin-left: 3px;
    font-size: 0.6rem;
}
.ss-table thead th.stat-active[data-dir="asc"]::after { content: '▴'; }


/* --- TABULKA HT/FT ---
   Devět sloupců navíc; ať se vejdou, jsou užší a bez zbytečného odsazení.
   Trojice se od sebe oddělí linkou, aby šlo poznat, kde končí „vedl
   o poločase" a začíná „remizoval". */
.ss-htft-table th,
.ss-htft-table td { padding-left: 4px; padding-right: 4px; }
.ss-htft-table th { font-size: 0.68rem; }

.ss-htft-table th:nth-child(4),
.ss-htft-table td:nth-child(4),
.ss-htft-table th:nth-child(7),
.ss-htft-table td:nth-child(7),
.ss-htft-table th:nth-child(10),
.ss-htft-table td:nth-child(10),
.ss-htft-table th:last-child,
.ss-htft-table td:last-child { border-left: 1px solid var(--border); }

.ss-table-wrapper {
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
/* Šířky sloupců nesmí viset na obsahu: v pohledu doma/venku jsou čísla
   o řád menší a auto-layout by je při přepnutí posunul do strany. Pevný
   layout rozdělí zbytek místa rovnoměrně bez ohledu na to, co v buňkách
   stojí — pevné šířky si drží jen pořadí, klub a forma. */
.ss-table { width: 100%; table-layout: fixed; }
.ss-table th { white-space: nowrap; }
.ss-table td { font-variant-numeric: tabular-nums; }
/* Tabulka soutěže je bez vodorovných linek mezi řádky (compact-table je
   jinde má) — řádky čte oko po řádku samo, jako na fotmob.com. Svislé
   předěly skupin v tabulce poločas/konec zůstávají. */
.ss-table td { border-top: none; }
/* Totéž o číslo menší: dvojciferné pořadí měří 18,9 px, s odsazením tedy
   potřebuje 35 px. Při 28 px přetékalo do sloupce s logem — na střed
   zarovnané to nebylo vidět jako posun, ale okusovalo to sousední buňku. */
.ss-table th.ss-th-rank { width: 36px; }

/* Klub zastupuje jen logo — na deset sloupců by se název nevešel.
   Jméno ukáže tooltip odkazu (title v _ss_table.php). */
/* 34 px stačilo na logo, ale s pevným layoutem se do sloupce musí vejít
   i vlastní hlavička — auto-layout ho dřív rozšířil sám. */
.ss-table th.ss-th-club { width: 40px; }

/* --- Úvodní trojice sloupců sedí v obou podobách tabulky stejně ---
   Přepínač Tabulka / HT/FT vyměňuje jen prostředek tabulky, ale hlavičky
   „Klub" a „Z" se při tom posouvaly. Dvě různé příčiny:

   Klub — hlavička je širší (32 px) než sloupec bez odsazení (40 − 2×8),
   takže ji odsazení odtlačí. HT/FT má odsazení 4 px, standardní tabulka
   dědila 8 px z .compact-table, a text se lišil o 4 px. Sjednoceno na 4 px,
   tedy na podobu z HT/FT.

   Z — sloupec byl pružný a zbylé místo si v HT/FT dělí jedenáct sloupců,
   kdežto ve standardní tabulce sedm. Z tedy vycházelo pokaždé jinak široké
   (na 980px tabulce 82 px proti 100 px) a jeho číslo skákalo o deset pixelů.
   Nově má vlastní šířku v procentech: v obou podobách stejnou, a protože
   je relativní, drží se i při zúžení okna. Osm procent odpovídá tomu, co
   Z vycházelo v HT/FT. */
.ss-table th.ss-th-club,
.ss-table td.ss-td-club,
.ss-table th.ss-th-played,
.ss-table td.ss-td-played { padding-left: 4px; padding-right: 4px; }

.ss-table th.ss-th-played { width: 8%; }
.ss-table-club { display: inline-flex; }
.ss-table-club:hover { opacity: 0.75; }

/* Název klubu vedle loga (viz $ssTableNames v _ss_table.php). V tabulce
   soutěže je to plný název se zkratkou (ClubFullName) a je vždycky celý —
   dlouhý se zalomí na druhý řádek, trojtečkou se nezkracuje. Na mobilu se
   schová a zůstane logo (title nese název). */
.ss-table.has-names th.ss-th-club { width: 34%; text-align: left; }
.ss-table.has-names td.ss-td-club { text-align: left; }
/* Odkaz je celý řádek klubu — logo i název. Barvu ani podtržení odkazu
   nedědí (název má vypadat jako ostatní text v řádku), klikatelnost ukáže
   až hover na názvu; logo se při něm nezjemňuje jako v tabulce bez názvů. */
.ss-table.has-names .ss-table-club {
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}
.ss-table.has-names .ss-table-club:hover { opacity: 1; }
.ss-table.has-names .ss-table-club:hover .ss-table-club-name { color: var(--accent); }
.ss-table-club-name {
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Telefon na výšku: bez sloupců výher, remíz, proher a skóre. Zbytek
   (pořadí, klub, Z, rozdíl, body, forma) se vejde bez posouvání. */
@media (max-width: 640px) and (orientation: portrait) {
    .ss-table .ss-col-detail { display: none; }
}

.ss-diff.is-plus { color: var(--accent); }
.ss-diff.is-minus { color: var(--text-muted); }

/* Forma: pět čtverečků od nejstaršího zápasu vlevo po nejnovější vpravo. */
.ss-table th.ss-th-form { width: 118px; }
.ss-table td.ss-td-form { padding-left: 4px; padding-right: 4px; }
.ss-form { display: inline-flex; gap: 3px; }



/* Oba týmy zápasu, na jehož značku se najelo (podsvícení řídí main.js).
   Tón jde přes background-image, protože barvu pozadí u postupových
   a sestupových řádků drží !important a ta se má zachovat. */
.ss-table tr.is-linked td {
    background-image: linear-gradient(var(--accent-glow), var(--accent-glow));
}
.ss-table tr.is-linked .ss-table-club { opacity: 1; }

/* Legenda postupů a sestupů pod tabulkou. V užším sloupci než na stránce
   soutěže: logo napovídá, který řádek v tabulce klubu patří. */
/* Hvězdička u bodů a vysvětlivka pod tabulkou. Ročník hraný na dvě části
   si do té druhé nese polovinu bodů z první, takže sloupec B nesedí se
   součtem výher a remíz — bez upozornění to vypadá jako chyba výpočtu.
   Týká se jediné soutěže v datech, viz CompetitionPhaseService. */
.ss-carried {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    cursor: help;
    margin-left: 2px;
}
.ss-table-note {
    margin: 8px 2px 0;
    font-size: 0.72rem;
    line-height: 1.5;
}
.ss-table-note strong { color: var(--text-main); }

.ss-table-legend { padding: 12px 14px; }
.ss-table-legend .table-legend-row { gap: 7px; font-size: 0.78rem; }
.ss-table-legend .table-legend-club { min-width: 0; flex: 1 1 auto; }
.ss-table-legend .table-legend-text { white-space: nowrap; }

/* --- Karta Síň slávy (_ss_seasons.php) ---
   Podle fotmob.com („Seasons"): dlaždice po třech, v každé ročník tučně
   a pod ním vítěz a druhý — logo, název a drobně pořadí. Užší obrazovka
   dvě vedle sebe, mobil pod sebou. */
.ss-seasons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.ss-panel.ss-season-card { padding: 20px; }
.ss-season-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ss-season-title a { color: var(--text-main); text-decoration: none; }
.ss-season-title a:hover { color: var(--accent); }
/* Ročník hraný na dvě části: ze které vítěz vzešel (CompetitionPhaseService). */
.ss-season-phase {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.ss-season-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.ss-season-club {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text-main);
    text-decoration: none;
}
.ss-season-club-text { display: flex; flex-direction: column; min-width: 0; }
.ss-season-club-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ss-season-club:hover .ss-season-club-name { color: var(--accent); }
.ss-season-club-rank { font-size: 0.72rem; color: var(--text-muted); }
@media (max-width: 980px) {
    .ss-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ss-seasons { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ss-panel.ss-season-card { padding: 16px; }
    .ss-season-title { margin-bottom: 16px; }
    .ss-season-podium { gap: 14px; }
}

/* --- PRAVÝ SLOUPEC: rekordy a zajímavosti --- */
.ss-highlights { display: flex; flex-direction: column; gap: 16px; }

/* --panel-pad čtou řádky se vodorovnou linkou (zápasy, žebříčky, rekordy…):
   zápornými okraji si sáhnou přes odsazení panelu, takže linka jde od
   rámečku k rámečku, ne jen pod textem. Kdo mění odsazení panelu, mění
   i proměnnou — viz 520 px níž. */
.ss-panel {
    --panel-pad: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--panel-pad);
}
.ss-panel-note { font-size: 0.68rem; margin: 10px 0 0; line-height: 1.5; }
/* Doplněk k nadpisu panelu — „12. kolo · další zápasy". */
.ss-col-title-note { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.ss-col-title-note::before { content: '· '; }

/* --- Tabulky soutěží v pravém sloupci přehledu (_ss_mini_tables.php) ---
   Nahoře šipky a tečky, pod nimi název soutěže a tabulka jen s logy. Vidět
   je jedna tabulka, ostatní mají hidden (přepíná main.js). */
.ss-mini-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
/* [hidden] musí vyhrát nad display: flex výš i nad blokem slajdu. */
.ss-mini-nav[hidden],
.ss-mini-slide[hidden] { display: none; }
.ss-mini-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
    border: none;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-muted);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.ss-mini-arrow:hover { color: var(--text-main); }
.ss-mini-arrow:focus-visible,
.ss-mini-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-mini-dots { display: inline-flex; gap: 6px; }
.ss-mini-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
}
.ss-mini-dot:hover { background: var(--text-muted); }
.ss-mini-dot.is-active { background: var(--win-bright); }

.ss-mini-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    margin: 0 calc(-1 * var(--panel-pad));
    padding-left: var(--panel-pad);
    padding-right: var(--panel-pad);
    border-bottom: 1px solid var(--border);
}
.ss-mini-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--text-main);
    text-decoration: none;
}
.ss-mini-name:hover { color: var(--accent); }
.ss-mini-level { font-size: 0.72rem; color: var(--text-muted); }

/* Čísla ve stejně širokých sloupcích (pevný layout), pevné šířky mají jen
   pořadí a logo. Buňky jsou těsnější než v .compact-table — na šest
   číselných sloupců zbývá v 255px sloupci kolem 175 px. Linky mezi
   řádky nejsou, jako na předloze; řádky odděluje výška. */
.ss-mini-table { table-layout: fixed; margin-top: 6px; font-size: 0.78rem; }
.ss-mini-table th,
.ss-mini-table td { padding: 5px 2px; border-top: none; font-variant-numeric: tabular-nums; }
.ss-mini-table th { padding-bottom: 6px; }
.ss-mini-table .ss-mini-rank { width: 22px; text-align: left; padding-left: 0; }
.ss-mini-table td.ss-mini-rank { font-weight: 700; }
.ss-mini-table .ss-mini-club { width: 26px; }
.ss-mini-table td.ss-mini-points { font-weight: 800; }
.ss-mini-club-link { display: inline-flex; vertical-align: middle; }
.ss-mini-club-link:hover { opacity: 0.75; }
.ss-mini-table tbody tr:hover { background: var(--bg-surface); }

.ss-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ss-number { display: flex; flex-direction: column; gap: 2px; }
.ss-number-value { font-size: 1.25rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ss-number-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.ss-split-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; margin: 16px 0 5px; }
.ss-split { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--bg-surface); }
.ss-split-home { background: var(--accent); }
.ss-split-draw { background: var(--draw); }
.ss-split-away { background: var(--neutral); }
/* Popisky vycházejí ze šířek úseků (flex-basis), takže každé procento
   stojí nad tím svým. Smí se ale zmenšit a mají nejmenší šířku pro „100 %"
   — úzký úsek u kraje si místo vezme od širších sousedů, místo aby jeho
   číslo vyskočilo z panelu. Viz ssSplitLegendSpan() ve functions.php. */
.ss-split-legend { display: flex; font-size: 0.66rem; margin-top: 4px; }
.ss-split-legend span {
    flex: 0 1 auto;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
}
.ss-split-legend span:not(:empty) { min-width: 3.4em; }

/* Logo klubu u hráče sezóny na Přehledu (_ss_top_players.php), název
   v tooltipu. */
.ss-club-badge { display: inline-flex; }
.ss-club-badge:hover { opacity: 0.75; }

.ss-timing { display: flex; flex-direction: column; gap: 6px; }
.ss-timing-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.ss-timing-label { font-size: 0.68rem; color: var(--text-muted); }
.ss-timing-bar { height: 6px; background: var(--bg-surface); border-radius: 999px; overflow: hidden; }
.ss-timing-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ss-timing-value { font-size: 0.72rem; font-weight: 700; text-align: right; }

/* Upozornění nad tabulkou počítanou s průběžnými výsledky. Je to pohled na
   rozehraný víkend, ne oficiální pořadí — a to musí být vidět dřív, než si
   podle něj někdo něco spočítá. */
.ss-table-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
    border-radius: 0 6px 6px 0;
}

/* --- Zvýraznění řádků dvou týmů ---
   Podbarvené řádky obou týmů zápasu, ze kterého se na tabulku kouká. Třídu
   dává _ss_table.php podle $ssTableHighlight; nastavuje ho detail zápasu
   a AJAX fragment tabulky (table-fragment.php).

   Bydlí tady, u zbytku .ss-table, a ne v match.css: fragment se dotahuje
   i pod stránky, které match.css nenačítají, a pravidlo by pak nemělo kdo
   uplatnit. Hover tabulky je slabší než podbarvení, proto se pozadí vypisuje
   i pro něj — jinak by při přejetí zmizelo. */
.ss-table tr.ss-table-row-home,
.ss-table tr.ss-table-row-away,
.ss-table tr.ss-table-row-home:hover td,
.ss-table tr.ss-table-row-away:hover td {
    background: var(--accent-glow);
}
.ss-table tr.ss-table-row-home td:first-child,
.ss-table tr.ss-table-row-away td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}
.ss-table tr.ss-table-row-home td,
.ss-table tr.ss-table-row-away td {
    font-weight: 600;
}

/* --- SOUTĚŽ: rozvržení bez levého sloupce (.comp-page) ---
   Hlavička přes celou šířku, pod ní dva sloupce. Pravý je širší než
   jinde (340 místo 255 px): na Přehledu v něm stojí zápasy kola a řádek
   zápasu má oba týmy vedle sebe i s názvy. */
.comp-page .ss-layout-no-left { grid-template-columns: minmax(0, 1fr) 340px; }

/* --- KLUB (club.php) ------------------------------------------------------
   Rozvržení i hlavička jako u soutěže (.comp-page, .ss-comp-header). Místo
   znaku soutěže v kruhu stojí logo klubu; logo, název, ročník a Sledovat
   na jedné ose. */
.club-header-logo { flex: none; display: inline-flex; }
.club-header-logo .club-logo { width: 64px; height: 64px; }

/* Štítek týmu (forma, nejbližší zápas): „B tým" (jen u víc týmů)
   a vpravo tlumeně soutěž s odkazem na ni. */
.club-team-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.club-team-label strong { color: var(--text-main); font-weight: 700; white-space: nowrap; }
.club-team-comp {
    min-width: 0;
    margin-left: auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.club-team-comp:hover { color: var(--accent); }

/* Přehled: forma a nejbližší zápas vedle sebe, jako na fotmob.com.
   Řádky obalu jsou nadpis a jeden na tým (--club-teams); oba panely je
   převezmou (subgrid), řádek týmu je tedy v obou stejně vysoký a štítky
   týmů stojí vedle sebe na jedné ose. Mezery mezi týmy nesou řádky samy,
   v obou panelech stejné, bez linek. */
.club-overview-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(var(--club-teams, 1), auto);
    column-gap: 16px;
}
.club-overview-top > .ss-panel {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
}
.club-team-row { display: flex; flex-direction: column; min-width: 0; }
.club-team-row + .club-team-row { margin-top: 14px; padding-top: 14px; }
.club-team-empty { margin: 0; font-size: 0.8rem; }

/* Forma: skóre obarvené výsledkem (barvy jako značky formy v tabulce),
   pod ním znak soupeře; od nejstaršího vlevo. Řádek týmu je vysoký jako
   u nejbližšího zápasu vedle — řada výsledků stojí uprostřed místa pod
   štítkem, ať dole nezůstává prázdno. */
.club-form-list {
    list-style: none;
    margin: auto 0;
    padding: 4px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.club-form-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.club-form-score {
    min-width: 46px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--on-light);
}
.club-form-score.is-v { background: var(--win-bright); }
.club-form-score.is-r { background: var(--neutral); }
.club-form-score.is-p { background: var(--loss); color: var(--on-dark); }
.club-form-item .club-logo { width: 36px; height: 36px; }
.club-form-item:hover .club-form-score { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Nejbližší zápas (jeden na tým): pod štítkem domácí – čas – hosté. */
/* Blok vede na zápas průhlednou vrstvou pod obsahem; týmy (odkazy na
   kluby) leží nad ní, čas a datum jsou pro klik průchozí.

   Dva řádky mřížky: nahoře loga a mezi nimi čas, svisle na střed; pod
   nimi názvy a mezi nimi datum. Odkaz na klub i blok času se rozpustí
   (display: contents), každá část si najde svůj řádek — dlouhý název na
   dva řádky tak logo ani čas neposune. */
.club-next-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    margin-top: 8px;
    color: var(--text-main);
}
.club-next-team.is-home > .club-logo { grid-column: 1; grid-row: 1; }
.club-next-team.is-home > .club-next-name { grid-column: 1; grid-row: 2; }
.club-next-team.is-away > .club-logo { grid-column: 3; grid-row: 1; }
.club-next-team.is-away > .club-next-name { grid-column: 3; grid-row: 2; }
.club-next-team > .club-logo,
.club-next-team > .club-next-name { position: relative; z-index: 1; justify-self: center; }
.club-next-team > .club-next-name { align-self: start; text-align: center; }
.club-next-cover { position: absolute; inset: 0; z-index: 0; border-radius: 8px; }
.club-next-cover:hover ~ .club-next-when .club-next-time { color: var(--accent); }
.club-next-cover:hover ~ .club-next-when .club-next-date { color: var(--text-main); }
.club-next-team { display: contents; color: var(--text-main); text-decoration: none; }
.club-next-team .club-logo { width: 44px; height: 44px; }
.club-next-name { font-size: 0.82rem; font-weight: 700; overflow-wrap: anywhere; }
a.club-next-team:hover .club-next-name { color: var(--accent); }
.club-next-when { display: contents; }
.club-next-time,
.club-next-date { grid-column: 2; position: relative; z-index: 1; pointer-events: none; justify-self: center; }
.club-next-time { grid-row: 1; font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.club-next-date { grid-row: 2; align-self: start; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
/* Zápas bez termínu má jen „Termín zatím neurčen" — na ose log. */
.club-next-when > .club-next-date:only-child { grid-row: 1; align-self: center; }

/* Karta Zápasy: panel Další zápas pro každý tým (_club_next_panels.php),
   podle fotmob.com — nadpis a vpravo soutěž, zápas a pod ním srovnání
   obou týmů z tabulky; lepší hodnota v pilulce. */
.club-next-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 0.75rem; color: var(--text-muted); }
.club-next-card-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
.club-next-stats {
    margin: 16px calc(-1 * var(--panel-pad, 0px)) 0;
    padding: 12px var(--panel-pad, 0px) 0;
    border-top: 1px solid var(--border);
}
.club-next-stat {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.82rem;
}
.club-next-stat dt { text-align: center; color: var(--text-muted); }
.club-next-stat dd { margin: 0; }
.club-next-stat-val {
    justify-self: start;
    min-width: 36px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.club-next-stat-val:last-child { justify-self: end; }
.club-next-stat-val.is-better { background: var(--accent); color: var(--on-light); }

/* Seznam zápasů jako hlavní panel karty Zápasy: širší, řádky vyšší,
   loga větší. */
.club-matches .ss-matches .club-fixtures .ss-match { padding: 14px 0; }
.club-matches .ss-matches .club-fixtures .ss-side .club-logo { width: 28px; height: 28px; }
@media (max-width: 640px) {
    .club-matches .ss-matches .club-fixtures .ss-side .club-logo { width: 24px; height: 24px; }
}

/* Karta Soupiska (_club_squad.php), podle karty Squad na fotmob.com:
   hráč, pozice, země, dres, věk. Hlavička řadí jako na kartě Přestupy
   soutěže — kroužek se šipkami sedí na lince pod ní (--tr-head-pb). */
.club-squad-list { list-style: none; margin: 0; padding: 0; }
.club-squad-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.3fr) 64px 64px;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    font-size: 0.82rem;
}
.club-squad-list .club-squad-row { min-height: 60px; border-top: 1px solid var(--bg-head); }
.club-squad-head {
    --tr-head-pb: 18px;
    align-items: start;
    padding-top: 6px;
    padding-bottom: var(--tr-head-pb);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}
.club-squad-pos,
.club-squad-num { text-align: center; font-variant-numeric: tabular-nums; }
.club-squad-player { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text-main); font-weight: 700; }
.club-squad-head .club-squad-player { font-weight: 600; }
.club-squad-player .person-avatar { width: 36px; height: 36px; flex: none; }
/* Jméno nejvýš na dva řádky: příjmení nahoře, křestní jméno za ním, nebo
   celé pod ním, když se nevejde (na telefonu na výšku vždy pod ním);
   přetékající část končí trojtečkou. Jen u hráčů, trenér má jeden řádek. */
.club-squad-name { min-width: 0; overflow: hidden; line-height: 1.25; }
.club-squad-name-part {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
a.club-squad-player:hover .club-squad-name { color: var(--accent); }
.club-squad-country { display: flex; align-items: center; gap: 8px; min-width: 0; }
.club-squad-country-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Trenér nad seznamem: ikona, jméno s rolí, vpravo země a věk. */
.club-squad-coach {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-surface);
    font-size: 0.82rem;
}
.club-squad-coach .club-squad-player { flex: 1 1 auto; }
.club-squad-coach-text { display: flex; flex-direction: column; min-width: 0; }
/* Trenér má jméno vždy na jednom řádku, přetékající končí trojtečkou. */
.club-squad-coach .club-squad-name { white-space: nowrap; text-overflow: ellipsis; }
.club-squad-coach .club-squad-name-part { display: inline; }
.club-squad-coach-role { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.club-squad-coach .club-squad-country { flex: none; }
.club-squad-coach-age { flex: none; min-width: 48px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    /* Na telefonu u země jen vlajka, sloupce užší. */
    .club-squad-row { grid-template-columns: minmax(0, 1fr) 52px 36px 40px 36px; gap: 8px; }
    .club-squad-country-name { display: none; }
    .club-squad-country { justify-content: center; }
    .club-squad-player { gap: 10px; }
    .club-squad-player .person-avatar { width: 32px; height: 32px; }
}
@media (max-width: 640px) and (orientation: portrait) {
    /* Na výšku u hráčů příjmení vždy nahoře a křestní jméno vždy pod ním. */
    .club-squad-name-part { display: block; }
}

/* --- Karta Trenéři: úspěšnost trenérů po ročnících (podle fotmobu) ---
   Sloupec na ročník a trenéra: nahoře pás s pilulkou (podíl výher a body
   na zápas) — tím výš, čím víc výher —, pod ním ikona, příjmení a ročník.
   Pás se posouvá vodorovně šipkami; bublinu kreslí main.js do
   .club-coach-float, uvnitř posuvného pásu by ji jeho okraj ořízl. */
.club-coaches-title { margin: 0; }
.club-coaches-sub { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-muted); }
.club-coach-chart { --coach-bar-h: 140px; position: relative; margin-top: 6px; }
.club-coach-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.club-coach-track::-webkit-scrollbar { display: none; }
.club-coach-item { flex: 1 0 96px; display: flex; flex-direction: column; min-width: 0; }
.club-coach-bar {
    position: relative;
    height: var(--coach-bar-h);
    /* Svislá linka středem sloupce, přes ni pilulka. */
    background: linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat, var(--surface-2);
    outline: none;
    cursor: default;
}
.club-coach-item:hover .club-coach-bar,
.club-coach-bar.is-active { background-color: var(--bg-head); }
.club-coach-pill {
    position: absolute;
    left: 50%;
    /* 0 % výher u spodního okraje, 100 % u horního; 44 px je výška pilulky. */
    bottom: calc(8px + (var(--coach-bar-h) - 16px - 44px) * var(--pct) / 100);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    min-width: 54px;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}
.club-coach-pct { padding: 4px 8px; background: var(--accent); color: var(--on-accent); font-size: 0.8rem; font-weight: 800; }
.club-coach-ppg { padding: 3px 8px; background: var(--bg-main); color: var(--text-main); font-size: 0.7rem; font-weight: 700; }
.club-coach-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 12px 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}
.club-coach-who .person-avatar { width: 32px; height: 32px; margin-bottom: 3px; }
.club-coach-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.club-coach-who:hover .club-coach-name { color: var(--accent); }
.club-coach-season { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.club-coach-nav {
    position: absolute;
    top: calc(var(--coach-bar-h) + 28px);
    z-index: 2;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    cursor: pointer;
}
.club-coach-nav.is-prev { left: -10px; }
.club-coach-nav.is-next { right: -10px; }
.club-coach-nav[disabled] { opacity: 0; pointer-events: none; }
.club-coach-float {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -100%);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-head);
    box-shadow: var(--shadow-pop);
    font-size: 0.78rem;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
.club-coach-tip-comp { display: block; font-weight: 800; }
.club-coach-tip-season { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 600; }
.club-coach-tip-wdl { display: flex; justify-content: center; gap: 12px; font-weight: 700; }
.club-coach-tip-wdl > span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) {
    .club-coach-item { flex-basis: 84px; flex-grow: 1; }
    .club-coach-nav.is-prev { left: -6px; }
    .club-coach-nav.is-next { right: -6px; }
}

/* Trenér s ikonou jako odkaz (současný, rekordy, historie). */
.club-coach-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; color: var(--text-main); }
.club-coach-person .person-avatar { flex: none; }
.club-coach-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.club-coach-person:hover .club-coach-person-name { color: var(--accent); }

/* Současný trenér: kdo, od kdy, čtyři čísla a forma. */
.club-coach-now-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.club-coach-now-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.club-coach-now-who .club-coach-person { font-size: 1.05rem; }
.club-coach-now-who .person-avatar { width: 56px; height: 56px; }
.club-coach-now-since { font-size: 0.78rem; color: var(--text-muted); }
.club-coach-now-total { display: flex; flex-direction: column; gap: 6px; }
.club-coach-now-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.club-coach-now-stats dt { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.club-coach-now-stats dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.club-coach-now-cmp { margin-left: 6px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.club-coach-now-cmp.is-better { color: var(--win-bright); }
.club-coach-now-cmp.is-worse { color: var(--loss); }
.club-coach-now-form { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.club-coach-now-label { margin-right: 4px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.club-coach-now-form .ss-form-badge { width: 24px; height: 24px; font-size: 0.72rem; }

/* Rekordy: karty v mřížce — popisek, hodnota, trenér, podrobnost. */
.club-coach-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.club-coach-record { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 8px; background: var(--surface-2); }
.club-coach-record-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.club-coach-record-value { font-size: 1.15rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.club-coach-record .club-coach-person { font-size: 0.82rem; }
.club-coach-record .person-avatar { width: 24px; height: 24px; }
.club-coach-record-note { font-size: 0.72rem; color: var(--text-muted); }

/* Historie: řádek na trenéra, hlavička řadí jako Soupiska. Patnáct
   číselných sloupců; na užším displeji zbydou skupiny .is-base a .is-mid,
   na telefonu jen .is-base. */
.club-coach-row {
    display: grid;
    grid-template-columns: minmax(150px, 2.4fr) repeat(15, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-size: 0.8rem;
}
.club-coach-list { margin: 0; padding: 0; list-style: none; }
.club-coach-list .club-coach-row { min-height: 56px; border-top: 1px solid var(--bg-head); }
.club-coach-head {
    --tr-head-pb: 18px;
    align-items: start;
    padding-top: 6px;
    padding-bottom: var(--tr-head-pb);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
}
.club-coach-row .person-avatar { width: 32px; height: 32px; }
.club-coach-c-who { min-width: 0; }
.club-coach-c-who .club-coach-person { display: flex; max-width: 100%; }
.club-coach-c-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-coach-list .club-coach-c-num { font-weight: 700; }
@media (max-width: 1100px) {
    /* Užší: bez penalt a gólů na zápas. */
    .club-coach-row { grid-template-columns: minmax(140px, 2.4fr) repeat(10, minmax(0, 1fr)); }
    .club-coach-c-num.is-wide { display: none; }
}
@media (max-width: 640px) {
    /* Telefon: trenér, zápasy, body, body na zápas, výhry. */
    .club-coach-row { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); gap: 6px; }
    .club-coach-c-num.is-mid { display: none; }
    /* Jméno smí na dva řádky — sloupec je úzký. */
    .club-coach-c-who .club-coach-person-name { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
    .club-coach-now-form { margin-left: 0; }
}

/* --- Karta Síň slávy klubu: trofeje (podle fotmobu) ---
   Úroveň soutěže s ikonou, pod ní řádky Vítěz a 2. místo s počtem
   a rozbalenými pilulkami ročníků (details, klikem se sbalí). */
.club-trophies { padding-bottom: 4px; }
.club-trophy { padding: 14px 0; border-top: 1px solid var(--bg-head); }
.club-trophy:first-of-type { border-top: 0; }
.club-trophy-comp { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 0.9rem; font-weight: 800; }
.club-trophy-comp .ss-comp-logo { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--bg-head); color: var(--text-muted); }
.club-trophy-place > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    list-style: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.club-trophy-place > summary::-webkit-details-marker { display: none; }
.club-trophy-place > summary:hover { color: var(--text-main); }
.club-trophy-count { margin-left: auto; color: var(--text-main); font-weight: 800; font-variant-numeric: tabular-nums; }
.club-trophy-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform 0.15s; }
.club-trophy-place[open] .club-trophy-caret { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.club-trophy-seasons { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; }
.club-trophy-season {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg-head);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.club-trophy-season:hover { color: var(--accent); }
.club-trophy-tag { margin-left: 4px; color: var(--text-muted); font-weight: 600; }

/* Nadpis panelu s tabulkou vede na soutěž; vedle něj přepínač týmů. */
.club-table-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.club-table-head .ss-col-title { margin: 0; }
.club-table-title a:hover { color: var(--accent); }
.club-team-switch { margin: 0; }
/* Tabulka a hráči sezóny vybraného týmu — obal kvůli výměně bez
   přenačtení (main.js); v rozvržení se neprojeví. */
.club-team-block { display: contents; }
.club-team-block.is-swapping > *,
.club-fixtures.is-swapping,
.club-coach-history.is-swapping,
.club-squads.is-swapping > * { opacity: 0.55; transition: opacity 0.12s ease; }
/* Obal panelů soupisky (výměna při řazení); v rozvržení se neprojeví. */
.club-squads { display: contents; }

/* Zápasy ročníku vpravo, podle panelu Fixtures na fotmob.com: šipky
   a nadpis nahoře, u zápasu nad řádkem den a datum vlevo, soutěž vpravo. */
.club-fixtures-nav { margin-bottom: 4px; }
.club-fixtures-title { flex: 1 1 auto; margin: 0; text-align: center; font-size: 1rem; font-weight: 800; }
.club-fixtures .ss-match {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 0;
    column-gap: 10px;
    border-top-color: var(--bg-head);
}
.club-fixtures .ss-match:first-child { border-top-color: transparent; }
.club-fixtures .ss-match-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.72rem;
}
.club-fixtures-comp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-fixtures-date { white-space: nowrap; }
.club-fixtures .ss-match-upcoming { color: var(--text-main); }

/* --- Panel kola (_ss_round_panel.php) ---
   Nahoře šipky a mezi nimi výběr kola, pod tím zápasy po dnech. */
.ss-round-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ss-round-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-head);
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
}
.ss-round-arrow:hover { border-color: var(--accent); color: var(--accent); }
.ss-round-arrow.is-disabled { opacity: 0.3; }
.ss-round-form {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
/* Výběr kola a týmu mezi šipkami: bez rámečku a podkladu, jen text
   a plný trojúhelník — jako na fotmob.com. Zaostření klávesnicí ukáže
   obrys, jinak by nebylo poznat, kde fokus je. */
.ss-round-select {
    padding: 6px 26px 6px 10px;
    border: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 9px 6px;
    background-position: right 8px center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}
.ss-round-select:hover { color: var(--accent); }
.ss-round-select:focus { box-shadow: none; }
.ss-round-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-round-select option { background: var(--bg-card); color: var(--text-main); }
.ss-round-go { padding: 5px 10px; font-size: 0.75rem; }
.ss-round-panel.is-swapping { opacity: 0.55; transition: opacity 0.12s ease; }

/* --- Hráči sezóny pod tabulkou (_ss_top_players.php) ---
   Podle fotmob.com: jeden panel, tři sloupce oddělené svislými předěly
   přes celou výšku panelu, v každém nadpis, tři hráči s linkou pod každým
   a „Vše" dole uprostřed. Pod 640 px sloupce pod sebou, předěl je pak
   vodorovný přes celou šířku. */
.ss-top-players {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
}
/* Sloupec sahá přes odsazení panelu nahoru i dolů, takže předěl vede od
   hrany k hraně; odsazení si vrací uvnitř. */
.ss-top-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: calc(-1 * var(--panel-pad, 0px)) 0;
    padding: var(--panel-pad, 0px) 22px;
}
.ss-top-col:first-child { padding-left: 0; }
.ss-top-col:last-child  { padding-right: 0; }
.ss-top-col + .ss-top-col { border-left: 1px solid var(--border); }
.ss-top-title {
    margin: 2px 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: help;
}
/* Tři sloupce řádků (logo, hráč, hodnota) sdílí celý seznam (subgrid),
   takže hodnoty stojí pod sebou uprostřed společného sloupce — pilulka
   prvního místa i čísla pod ní. */
.ss-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-content: start;
    column-gap: 12px;
}
.ss-top-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.ss-top-logo { display: inline-flex; justify-content: center; }
.ss-top-logo .club-logo { width: 32px; height: 32px; }
.ss-top-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-top-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Pod jménem drobné logo klubu a jeho název (logo patří klubu, ne hráči). */
.ss-top-club {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.ss-top-club .club-logo { width: 14px; height: 14px; }
.ss-top-club-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-top-value-cell { justify-self: center; text-align: center; cursor: help; }
.ss-top-value {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* První místo: číslo v pilulce. Hodnocení má barvu svého pásma
   (.ss-rating), góly a minuty akcent. */
.ss-top-value.ss-rating { min-width: 0; padding: 4px 9px; border-radius: 999px; font-size: 0.85rem; }
.ss-top-value.is-first {
    min-width: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-light);
    text-align: center;
}
.ss-top-all {
    display: block;
    margin-top: 4px;
    padding: 12px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    text-decoration: none;
}
.ss-top-all:hover { color: var(--accent); }
@media (max-width: 640px) {
    .ss-top-players { grid-template-columns: minmax(0, 1fr); }
    .ss-top-col,
    .ss-top-col:first-child,
    .ss-top-col:last-child { margin: 0; padding: 0; }
    .ss-top-col + .ss-top-col {
        border-left: none;
        border-top: 1px solid var(--border);
        margin: 18px calc(-1 * var(--panel-pad, 0px)) 0;
        padding: 18px var(--panel-pad, 0px) 0;
    }
}

/* Průměrné hodnocení — týž štítek a tatáž pásma jako hodnocení u soupisky
   (.lineup-rating v lineup.css; ten modul tahle stránka nenačítá). */
.ss-rating {
    min-width: 34px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.3;
    cursor: help;
}
.ss-rating.is-top  { background: var(--accent);     color: var(--on-light); }
.ss-rating.is-good { background: var(--win-bright); color: var(--on-light); }
.ss-rating.is-ok   { background: var(--bg-head);    color: var(--text-main); }
.ss-rating.is-low  { background: var(--yc-dim);     color: var(--on-light); }
.ss-rating.is-poor { background: var(--loss);       color: var(--on-dark); }

/* --- Karta Zápasy (_ss_comp_matches.php) ---
   Přepínač filtru (.ss-switch, jako nad tabulkou), pod ním ovladač filtru —
   šipky a uprostřed popis týdne nebo výběr kola či týmu (.ss-round-nav
   z panelu kola) — a seznam přes celou šířku. */
.ss-matches-nav { margin: 4px 0 14px; }
.ss-matches-nav-label {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.9rem;
    text-align: center;
}
.ss-matches-nav .ss-round-form { align-items: center; }
.ss-matches-empty { text-align: center; margin: 24px 0; }

/* Datum na kartě Zápasy je pruh přes celou šířku, jako na fotmob.com —
   den nad skupinou (Týden, Kolo) i rozmezí nad osmičkou zápasů týmu.
   Stejně vypadá panel kola na Přehledu (.ss-round-panel), aby se kolo
   četlo na obou místech stejně. Seznamy jinde na webu (přehled týdne)
   mají dál drobnou hlavičku z match-list.css; zesílený selektor ji tady
   přebije bez ohledu na pořadí souborů. */
.ss-panel.ss-comp-matches .ss-list-head,
.ss-panel.ss-round-panel .ss-list-head {
    /* Bez odstupu nad a pod: pruh navazuje přímo na řádky, které mají
       pevnou výšku s obsahem na střed. S odstupem vypadal poslední zápas
       dne vyšší než ostatní — mezera pod ním se četla jako jeho součást. */
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-head);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.ss-panel.ss-comp-matches .ss-list-head:first-child,
.ss-panel.ss-round-panel .ss-list-head:first-child { margin-top: 0; padding-top: 10px; }
.ss-panel.ss-comp-matches .ss-list-head::first-letter,
.ss-panel.ss-round-panel .ss-list-head::first-letter { text-transform: uppercase; }
/* Pod pruhem data linka nad prvním zápasem není — pruh sám skupinu odděluje. */
.ss-panel.ss-comp-matches .ss-list-head + .ss-match,
.ss-panel.ss-round-panel .ss-list-head + .ss-match { border-top-color: transparent; }
.ss-panel.ss-comp-matches .ss-matches-range { margin-bottom: 0; }
/* Datum a kolo nad řádkem zápasu týmu — drobně a tlumeně, řádek je hlavní. */
.ss-comp-matches .ss-match-meta { font-size: 0.72rem; padding-left: 14px; }
/* Řádky zápasů jako na fotmob.com: vyšší a linka mezi nimi jen tak dlouhá
   jako pruh data nad nimi — neutíká přes odsazení panelu ke krajům.
   Tlumená barva linky jako v seznamu zápasů na úvodce (.ss-comp-panel).

   Všechny řádky jsou stejně vysoké: pevná výška místo odsazení, obsah na
   střed. Dlouhý název klubu se zalomí nejvýš na dva řádky (pak trojtečka)
   a poznámka pod skóre (penalty, kontumace) se vejde do téže výšky —
   dřív s nimi řádek povyrostl. Řádky s popiskem nad sebou (filtr Tým:
   datum a kolo) mají výšku o ten popisek větší, zase všechny stejnou. */
.ss-panel.ss-comp-matches .ss-match,
.ss-panel.ss-round-panel .ss-match {
    margin-left: 0;
    margin-right: 0;
    height: 68px;
    padding: 0;
    align-content: center;
    column-gap: 14px;
    border-top-color: var(--bg-head);
}
.ss-panel.ss-comp-matches .ss-match.has-meta { height: 86px; padding: 0; }
.ss-panel.ss-comp-matches .ss-side-name,
.ss-panel.ss-round-panel .ss-side-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.ss-panel.ss-comp-matches .ss-list-head + .ss-match,
.ss-panel.ss-round-panel .ss-list-head + .ss-match { border-top-color: transparent; }
/* Nesehraný zápas má názvy bílé jako na fotmobu; tlumený zůstává jen čas. */
.ss-panel.ss-comp-matches .ss-match-upcoming,
.ss-panel.ss-round-panel .ss-match-upcoming { color: var(--text-main); }
@media (max-width: 640px) {
    .ss-panel.ss-comp-matches .ss-match,
    .ss-panel.ss-round-panel .ss-match { height: 60px; column-gap: 10px; }
    .ss-panel.ss-comp-matches .ss-match.has-meta { height: 78px; }
}

/* Panel kola je úzký (340 px) — mezera mezi týmy a skóre menší, stejná
   jako na kartě Zápasy na mobilu, ať se názvy vejdou. */
.ss-panel.ss-round-panel .ss-match { column-gap: 10px; }

/* Šipky na dalších osm zápasů týmu, pod seznamem. */
.ss-matches-pager { margin: 14px 0 0; }
.ss-matches-pager-count { flex: 1 1 auto; text-align: center; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* --- Karta Týmy (_ss_team_stats.php) ---
   Mřížka karet žebříčků jako na fotmob.com: nadpis s šipkou na celé
   pořadí, tři řádky, hodnota prvního místa ve štítku. */
.ss-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}
.ss-leaders-note { margin: 0 4px; }
/* Oddíl karty Týmy (Celkově, Útok, Obrana…): nadpis nad mřížkou karet. */
.ss-leaders-group { display: flex; flex-direction: column; gap: 12px; }
.ss-leaders-group + .ss-leaders-group { margin-top: 12px; }
.ss-leaders-group-title { margin: 0 4px; font-size: 1.15rem; font-weight: 800; }
.ss-leader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: var(--text-main);
    text-decoration: none;
}
.ss-leader-head:hover .ss-leader-more,
.ss-leader-head:hover .ss-leader-title { color: var(--accent); }
.ss-leader-title { margin: 0; font-size: 1rem; font-weight: 700; }
.ss-leader-more { font-size: 1.4rem; line-height: 1; color: var(--text-muted); }
/* Rozbalovací menu (.ss-dropdown) — náhrada nativního <select> tam, kde
   má vypadat jako na fotmob.com: tlačítko s plným trojúhelníkem a pod ním
   tmavý zaoblený panel s nadpisy skupin a položkami. Je to <details>
   s odkazy, bez JS funguje; main.js ho zavře kliknutím mimo nebo Esc. */
.ss-dropdown { position: relative; display: inline-block; }
.ss-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    color: var(--text-main);
    user-select: none;
}
.ss-dropdown-toggle::-webkit-details-marker { display: none; }
.ss-dropdown-toggle:hover { color: var(--accent); }
.ss-dropdown-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ss-dropdown-caret {
    width: 9px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.15s ease;
}
.ss-dropdown[open] .ss-dropdown-caret { transform: rotate(180deg); }
.ss-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 260px;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-head);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
.ss-dropdown-group {
    padding: 10px 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ss-dropdown-item {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    white-space: nowrap;
}
.ss-dropdown-item:hover,
.ss-dropdown-item.is-active { background: rgba(255, 255, 255, 0.07); }
.ss-dropdown-item.is-active { font-weight: 700; }

/* Celé pořadí jedné statistiky (?stat=), podle fotmob.com: lišta se
   šipkou zpátky, pruh s vedoucím týmem, panel s výběrem a všemi týmy. */
.ss-stat-bar { display: flex; align-items: center; gap: 16px; }
.ss-stat-bar-title { margin: 0; font-size: 1.05rem; font-weight: 700; flex: 1 1 auto; }
.ss-stat-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-head);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: help;
}
.ss-stat-lead {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-light);
}
.ss-stat-lead .club-logo { flex: none; }
.ss-stat-lead-text { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }

.ss-stat-full { padding-bottom: 4px; }
.ss-stat-pick { margin: 4px 0 8px; }
.ss-stat-pick-toggle { font-size: 1.15rem; font-weight: 700; }
.ss-stat-season-toggle { font-size: 0.82rem; font-weight: 700; }
.ss-stat-comp { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.82rem; font-weight: 700; }
.ss-stat-comp-logo { display: inline-flex; color: var(--text-muted); }
.ss-stat-comp-logo .ss-comp-logo { width: 20px; height: 20px; }
.ss-stat-comp-season { font-variant-numeric: tabular-nums; }

.ss-stat-list { list-style: none; margin: 0; padding: 0; }
.ss-stat-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 calc(-1 * var(--panel-pad));
    padding: 14px var(--panel-pad);
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
}
.ss-stat-rank { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ss-stat-club {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
}
.ss-stat-club:hover .ss-stat-name { color: var(--accent); }
.ss-stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Hráč v žebříčku (karta Hráči): ikona osoby místo fotky (nebo symbol
   stavu), jméno a pod ním klub drobně s logem — jako na fotmob.com. */
.ss-player-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text-main);
    text-decoration: none;
}
.ss-player-link .club-logo { flex: none; }
.ss-player-link:hover .ss-player-name { color: var(--accent); }
.ss-player-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.25; }
.ss-player-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-player-club { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.75rem; color: var(--text-muted); }
/* Drobné logo klubu u jeho názvu; obrázkem hráče je ikona osoby. */
.ss-player-link .ss-player-club .club-logo { width: 14px; height: 14px; }
.ss-player-club-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Karty Hráči a Trenéři: kluby, kterých se statistika týká (getClubListHtml).
   Název se zalomí nejvýš na dva řádky, trojtečkou se nezkracuje na jeden.
   Víc klubů jsou v krátké podobě jen loga vedle sebe, i do více řad. */
.ss-leader-row-player .ss-player-club,
.ss-stat-row .ss-player-club { flex-wrap: wrap; row-gap: 3px; }
.ss-leader-row-player .ss-player-club-name,
.ss-stat-row .ss-player-club-name {
    flex: 1 1 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25;
}
.ss-player-club-logo { display: inline-flex; }
/* Celé pořadí: na počítači u každého klubu logo a plný název (široká
   podoba), na mobilu krátká jako v kartách s první trojicí. */
.ss-clubs-narrow { display: none; }
.ss-clubs-wide { display: flex; flex-wrap: wrap; gap: 3px 12px; min-width: 0; }
.ss-club-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
@media (max-width: 820px) {
    .ss-clubs-wide { display: none; }
    .ss-clubs-narrow { display: contents; }
}
/* Ikona hráče v kartě stejně velká jako logo klubu na kartě Týmy (40 px). */
.ss-leader-row .ss-player-link > .person-avatar { width: 40px; height: 40px; }
.ss-stat-row .ss-player-link { gap: 16px; }
/* Obrázky v celém pořadí jsou velké jako na fotmob.com — 44 px z velikosti
   lg. Jen obrázek hráče; drobné logo u názvu klubu zůstává drobné. */
.ss-stat-row .ss-stat-club > .club-logo,
.ss-stat-row .ss-player-link > .club-logo,
.ss-stat-row .ss-player-link > .person-avatar { width: 44px; height: 44px; }
@media (max-width: 640px) {
    .ss-stat-lead { gap: 14px; padding: 16px; }
    .ss-stat-lead .club-logo,
    .ss-stat-lead .person-avatar { width: 40px; height: 40px; }
    .ss-stat-lead-text { font-size: 0.95rem; }
    .ss-stat-club { gap: 10px; }
    .ss-stat-row .club-logo { width: 36px; height: 36px; }
}


/* Karty Týmy i Hráči mají stejné panely: řádek o pevné výšce (obrázek
   40 px + odsazení + linka) a seznam vysoký vždy na tři řádky — karta se
   dvěma hráči nebo týmy je stejně velká jako karta se třemi. */
.ss-leader-list {
    --leader-row: 61px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: calc(3 * var(--leader-row));
}
/* V kartě bez pořadí (jen v celém pořadí, .ss-stat-rank): obrázek s názvem
   a hodnota, u týmů i hráčů. */
.ss-leader-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: var(--leader-row);
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}
.ss-leader-row:first-child { border-top: none; }
.ss-leader-club {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
}
.ss-leader-club:hover .ss-leader-name { color: var(--accent); }
/* Logo klubu v kartě velké jako ikona hráče na kartě Hráči. */
.ss-leader-club > .club-logo { width: 40px; height: 40px; }
.ss-leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-leader-value {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ss-leader-value.is-top { background: var(--accent); color: var(--on-light); }

/* --- Karta Přestupy (_ss_transfers.php) ---
   Podle fotmob.com: vlevo panel s filtry, vpravo nadpis a seznam. Řádek:
   odkud → kam (pilulky s logem), hráč s ikonou, odstupné, datum. Pod
   820 px filtry nad seznamem, pod 640 px se řádek skládá do dvou pater. */
.ss-transfers-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.ss-tr-filter-title { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700; color: var(--text-main); }
.ss-tr-filter-group + .ss-tr-filter-group { margin-top: 22px; }
.ss-tr-filter-label { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--text-main); }

/* Segmentový přepínač: tmavý žlab, vybraná položka světlejší. */
.ss-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-surface);
}
.ss-seg-item {
    /* Šířka podle popisku, ne dílem stejná: „Hostování" je dvakrát delší
       než „Vše" a ve stejném dílu by se ořízlo. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-seg-item:hover { color: var(--text-main); }
.ss-seg-item.is-active { background: var(--bg-head); color: var(--text-main); }

.ss-tr-team { margin-top: 12px; }
.ss-tr-team .ss-tr-team-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 0.8rem;
    font-weight: 700;
}
.ss-tr-team .ss-dropdown-menu { max-height: 360px; overflow-y: auto; }
.ss-tr-team .ss-dropdown-item { display: flex; align-items: center; gap: 8px; }

.ss-tr-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Posuvník odstupného jako na fotmobu: nahoře Min a Max, pod tím bílá
   dráha mezi dvěma kulatými jezdci. Dva input[type=range] leží přes sebe,
   dráha i jezdci jsou jejich; vybraný úsek (--lo až --hi) kreslí pozadí. */
.ss-range-values { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.78rem; color: var(--text-main); }
.ss-range-values strong { font-weight: 700; }
.ss-range-track {
    position: relative;
    height: 24px;
    margin: 0 4px;
}
.ss-range-track::before,
.ss-range-track::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 3px;
    border-radius: 2px;
    transform: translateY(-50%);
}
.ss-range-track::before { left: 0; right: 0; background: var(--bg-head); }
.ss-range-track::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--text-main); }
.ss-range-track input[type=range] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}
.ss-range-track input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.ss-range-track input[type=range]::-moz-range-track { background: none; border: none; }
.ss-range-track input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: inset 0 0 0 2px var(--text-main);
    cursor: pointer;
    pointer-events: auto;
}
.ss-range-track input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-main);
    border-radius: 50%;
    background: var(--bg-card);
    cursor: pointer;
    pointer-events: auto;
}
.ss-range-track input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-range-submit { margin-top: 10px; }
/* Seznam jde od kraje ke kraji panelu (čáry mezi řádky taky, jako na
   fotmobu); odsazení nesou řádky, hlášení a stránkovač. */
.ss-panel.ss-tr-list-panel { padding: 0; }
.ss-tr-empty { margin: 0; padding: 16px; }

.ss-tr-list { list-style: none; margin: 0; padding: 0; }
.ss-tr-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 110px 86px;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    font-size: 0.82rem;
}
/* Řádky seznamu vyšší, jako na fotmobu: pilulky klubů mají místo na
   název ve dvou řádcích. */
.ss-tr-list .ss-tr-row { min-height: 72px; border-top: 1px solid var(--bg-head); }

/* Hlavička: tlumené popisky, Odkud a Kam nad pilulkami klubů (stejné
   rozvržení jako .ss-tr-move v řádku, text u loga). Pod řadicím sloupcem
   sedí kulaté tlačítko přesně na lince pod hlavičkou — půlka nad, půlka
   pod: odsazení hlavičky zespodu (--tr-head-pb) minus půl kroužku. */
.ss-tr-row-head {
    --tr-head-pb: 18px;
    align-items: start;
    padding-top: 16px;
    padding-bottom: var(--tr-head-pb);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}
.ss-tr-head-side { flex: 1 1 0; min-width: 0; padding-left: 10px; }
.ss-tr-head-gap { flex: none; width: 24px; }
.ss-tr-sort {
    position: relative;
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.ss-tr-sort:hover { color: var(--text-main); }
.ss-tr-sort-dir {
    position: absolute;
    top: calc(100% + var(--tr-head-pb) - 10px);
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-head);
    color: var(--text-main);
    transform: translateX(-50%);
}
/* Dva plné trojúhelníky nad sebou jako na fotmobu, oba stejně; směr
   řazení říká popisek odkazu. */
.ss-tr-sort:hover .ss-tr-sort-dir { color: var(--accent); }

.ss-tr-move { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ss-tr-club {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--bg-head);
    color: var(--text-main);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}
a.ss-tr-club:hover .ss-tr-club-name { color: var(--accent); }
/* Kam: zrcadlově, logo na pravém kraji a název zarovnaný k němu (fotmob). */
.ss-tr-club.is-to { flex-direction: row-reverse; text-align: right; }
/* Logo klubu bez kruhového podkresu, jen velikost. */
.ss-tr-club .club-logo { width: 24px; height: 24px; flex: none; }
/* Vlajka země u uvolnění do zahraničí a na soupisce klubu. Kroužek jinak
   kreslí lineup.css, který stránky soutěže a klubu nenačítají. */
.ss-tr-club .flag-circle,
.club-squad-country .flag-circle,
.player-info-country .flag-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
}
.ss-tr-club .flag-circle img,
.club-squad-country .flag-circle img,
.player-info-country .flag-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-tr-club .flag-circle-code { font-size: 0.42rem; font-weight: 700; color: var(--text-muted); }
.ss-tr-club-name {
    min-width: 0;
    overflow: hidden;
    /* Název se zalomí nejvýš do dvou řádků, zbytek výpustka (fotmob). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}
.ss-tr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-main);
}
.ss-tr-icon.is-loan { color: var(--accent); }

.ss-tr-player { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text-main); }
.ss-tr-player:hover .ss-tr-player-name { color: var(--accent); }
.ss-tr-player .person-avatar { width: 34px; height: 34px; }
.ss-tr-player-name { min-width: 0; font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tr-fee { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-tr-fee-note { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.ss-tr-date { text-align: right; font-weight: 700; white-space: nowrap; }
.ss-tr-note { margin: 0 4px; }
/* Stránkování dlouhého seznamu: šipky a rozsah. */
.ss-tr-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--bg-head); }
.ss-tr-pager-count { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ss-tr-pager .is-disabled { opacity: 0.35; pointer-events: none; }

@media (max-width: 820px) {
    .ss-transfers-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* Nahoře hráč: ikona, vpravo od ní jméno a pod ním odstupné, datum na
       kraji. Pod tím odkud → kam přes celou šířku. Odkaz na hráče se
       rozloží do mřížky (display: contents), ikona i jméno odkazem zůstávají. */
    .ss-tr-list .ss-tr-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "av name date" "av fee date" "move move move";
        gap: 2px 12px;
    }
    .ss-tr-list .ss-tr-player { display: contents; }
    .ss-tr-list .ss-tr-player .person-avatar { grid-area: av; align-self: center; }
    .ss-tr-list .ss-tr-player-name { grid-area: name; align-self: end; }
    .ss-tr-list .ss-tr-fee { grid-area: fee; align-self: start; flex-direction: row; flex-wrap: wrap; gap: 0 8px; font-size: 0.76rem; color: var(--text-muted); }
    .ss-tr-list .ss-tr-date { grid-area: date; align-self: center; font-size: 0.74rem; color: var(--text-muted); }
    .ss-tr-list .ss-tr-move { grid-area: move; margin-top: 10px; }
    /* Hlavička na mobilu jen jako řada řadicích popisků; šipky stojí
       za aktivním popiskem, ne na lince. */
    .ss-tr-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: 12px; }
    .ss-tr-row-head .ss-tr-move,
    .ss-tr-row-head .ss-tr-head-side { display: contents; }
    .ss-tr-row-head .ss-tr-head-gap { display: none; }
    .ss-tr-row-head .ss-tr-sort { display: inline-flex; align-items: center; gap: 6px; }
    .ss-tr-row-head .ss-tr-sort-dir { position: static; transform: none; }
    .ss-tr-player .person-avatar { width: 36px; height: 36px; }
    .ss-tr-player-name { font-size: 0.85rem; }
}

/* Plný a krátký název klubu v tabulce: na širokém displeji plný se
   zkratkou, na mobilu na šířku krátký (pravidla na konci souboru, aby
   přebila schování názvu ve zlomu 820 px), na výšku žádný (jen logo). */
.ss-table-name-short { display: none; }

/* Průměry na zápas (historická tabulka): dvě desetinná místa. */
.ss-table th.ss-th-avg { width: 64px; }
/* Historická tabulka sčítá celou historii — skóre má čtyřmístná čísla
   („647:548") a rozdíl trojmístná, a sloupců je až třináct. S pevnými
   šířkami skóre, rozdílu a průměrů zbylo na V, VP, R, PP, P a B na
   mobilu na šířku po deseti pixelech a čísla se překrývala. Proto
   procenta pro všechny číselné sloupce — rozdělí se úměrně šířce — a
   menší odsazení, ať se čtyřmístné číslo vejde i do úzkého sloupce.
   Klub si vezme, co zbude. */
.ss-table.is-alltime th,
.ss-table.is-alltime td { padding-left: 3px; padding-right: 3px; }
.ss-table.is-alltime th.ss-th-rank   { width: 30px; }
.ss-table.is-alltime th.ss-th-played { width: 6%; }
.ss-table.is-alltime th.ss-col-detail { width: 5%; }
.ss-table.is-alltime th.ss-th-score  { width: 10%; }
.ss-table.is-alltime th.ss-th-diff   { width: 7%; }
.ss-table.is-alltime th.ss-th-avg    { width: 7%; }
.ss-table.is-alltime th.ss-th-points { width: 6%; }
.ss-table.is-alltime.has-names th.ss-th-club { width: auto; }

/* Sloučené V, R, P (výhry a remízy včetně rozstřelů) jen na telefonu na
   výšku, kde rozepsané sloupce nejsou; viz _ss_table.php. */
.ss-table .ss-col-merged { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
    /* Klub je tu jen logo: ze zbytku po procentech mu zbude kolem 50 px. */
    .ss-table.is-alltime .ss-col-merged { display: table-cell; width: 10%; }
    .ss-table.is-alltime th.ss-th-played { width: 10%; }
    .ss-table.is-alltime th.ss-th-diff   { width: 13%; }
    .ss-table.is-alltime th.ss-th-points { width: 11%; }
}

/* Nejbližší soupeř — poslední sloupec tabulky na kartě Tabulka. Na mobilu
   není, tabulka tam má jen pořadí, logo, Z, rozdíl, body a formu. */
.ss-table th.ss-th-next { width: 56px; }
.ss-table td.ss-td-next { padding-left: 4px; padding-right: 4px; }
.ss-next-opponent { display: inline-flex; vertical-align: middle; }
.ss-next-opponent:hover { opacity: 0.75; }
@media (max-width: 640px) {
    .ss-table th.ss-th-next,
    .ss-table td.ss-td-next { display: none; }
}
/* Telefon na výšku: tabulka soutěže má pořadí, logo klubu, Z, rozdíl,
   body a formu. Logo a forma (5 × 18 + 4 × 3 + odsazení) mají pevnou
   šířku, číselné sloupce si rozdělí zbytek. */
@media (max-width: 640px) and (orientation: portrait) {
    .ss-league-table th.ss-th-form   { width: 110px; }
}

/* --- RESPONZIVITA --- */
@media (max-width: 1200px) {
    /* Pravý sloupec se přesune pod zápasy a rozloží do mřížky panelů.
       Řádek se mu musí určit stejně jako sloupec — ve zdroji stojí před
       zápasy, takže by se sám umístil nad ně.

       Levý sloupec si drží touž šířku jako na širokém displeji: dřív se tu
       zužoval na 175 px, ale to bylo jen o osmnáct pixelů proti tehdejším
       190 a dnes by z toho byl skok o osmdesát. */
    .ss-layout { grid-template-columns: 255px minmax(0, 1fr); }
    .ss-matches { grid-column: 2; grid-row: 1; }
    .ss-highlights {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    /* Bez levého sloupce je i pod 1200 px dost místa na dva sloupce —
       střed drží šířku, kterou má na úvodce na širokém displeji. Pravý
       sloupec se pod střed přesune až s jedním sloupcem, viz 992 px. */
    .ss-layout-no-left { grid-template-columns: minmax(0, 1fr) 255px; }
    .ss-layout-no-left .ss-matches    { grid-column: 1; }
    .ss-layout-no-left .ss-highlights {
        grid-column: 2;
        grid-row: 1;
        display: flex;
    }
}

@media (max-width: 992px) {
    .ss-layout-no-left { grid-template-columns: minmax(0, 1fr); }
    .ss-layout-no-left .ss-highlights {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 820px) {
    /* Jeden sloupec. Levý sloupec se soutěžemi se nekreslí vůbec — na mobilu
       má vlastní kartu ve spodní liště (/souteze), takže by tu stál podruhé.
       Zbývá tedy obsah a pod ním panely. */
    .ss-layout { grid-template-columns: minmax(0, 1fr); }
    .ss-competitions { display: none; }
    .ss-matches      { grid-column: 1; grid-row: 1; }
    .ss-highlights   { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }

    /* Název klubu v tabulce se na mobil na výšku nevejde, zbývá logo
       (a title). Na šířku je místo na krátký název, viz níž. */
    .ss-table.has-names th.ss-th-club { width: 40px; }
    .ss-table-club-name { display: none; }

    /* Výsledkový servis ukazuje na mobilu jen prostřední sloupec: zápasy
       týdne, respektive vybranou soutěž. Rekordy a zajímavosti jsou
       zpestření a na malé obrazovce by odsunuly to hlavní o obrazovku níž.
       Na kartě hráče nebo zápasu pravý sloupec zůstává — tam je to obsah,
       který jinde na webu není. */
    .score-page .ss-highlights { display: none; }

    /* Detail zápasu mimo kartu Přehled: pravý sloupec (rozhodčí, tipovačka,
       čísla týmů) by na mobilu stál pod soupiskou, formou nebo tabulkou
       a jen je prodlužoval. Kdo ho chce, má ho na Přehledu. */
    .match-subcard .ss-highlights { display: none; }
}

@media (max-width: 520px) {
    .ss-tabs { gap: 20px; }
    .ss-tab { font-size: 0.82rem; }
    .ss-matches { gap: 12px; }
    .ss-panel { --panel-pad: 12px; }
    .ss-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Soutěž na užším displeji. Od 992 px jeden sloupec — a na Přehledu musí
   zápasy kola přijít první, ne až pod tabulkou a hráči sezóny. Jenže kolo
   bydlí v pravém sloupci a tabulka v prostředním, takže je nejde prostě
   přeskládat. Oba sloupce se proto rozpustí (display: contents) a jejich
   panely se seřadí v mřížce stránky samy: kolo, tabulka, hráči sezóny,
   rekordy. Rekordy jdou po dvou vedle sebe jako dřív v mřížce panelů,
   ostatní přes celou šířku. */
@media (max-width: 992px) {
    .comp-page .ss-layout-no-left { grid-template-columns: minmax(0, 1fr); }
    .comp-overview .ss-layout-no-left { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .comp-overview .ss-matches,
    .comp-overview .ss-highlights { display: contents; }
    .comp-overview .ss-highlights > *     { order: 4; }
    .comp-overview .ss-round-panel        { order: 1; grid-column: 1 / -1; }
    .comp-overview .ss-overview-table     { order: 2; grid-column: 1 / -1; }
    .comp-overview .ss-top-players        { order: 3; grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    /* Rekordy se na mobilu schovávají jako všude ve výsledkovém servisu
       (.score-page výš) — zápasy kola ale ne, ty jsou jádro Přehledu. */
    .score-page.comp-overview .ss-highlights { display: contents; }
    .comp-overview .ss-highlights > :not(.ss-round-panel) { display: none; }
    .comp-overview .ss-layout-no-left { grid-template-columns: minmax(0, 1fr); }
}
/* Přehled klubu na užším displeji: jako u soutěže se sloupce rozpustí
   a panely se seřadí samy — forma a nejbližší zápas vedle sebe, pod nimi
   nejbližší zápasy, tabulka a hráči sezóny; na telefonu vše pod sebou.
   Karta Zápasy totéž, jen v jednom sloupci. */
@media (max-width: 992px) {
    .club-overview .ss-layout-no-left { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .club-overview .ss-matches,
    .club-overview .ss-highlights { display: contents; }
    .club-overview .club-overview-top { order: 1; grid-column: 1 / -1; }
    .club-overview .club-fixtures     { order: 3; grid-column: 1 / -1; }
    .club-overview .ss-overview-table { order: 4; grid-column: 1 / -1; }
    .club-overview .ss-top-players    { order: 5; grid-column: 1 / -1; }
    /* Karta Zápasy: panely Další zápas nad seznamem, ne až pod dvanácti zápasy. */
    .club-matches .ss-layout-no-left { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .club-matches .ss-matches,
    .club-matches .ss-highlights { display: contents; }
    .club-matches .club-next-card { order: 1; }
    .club-matches .club-fixtures  { order: 2; }
}
@media (max-width: 640px) {
    .club-overview .ss-layout-no-left { grid-template-columns: minmax(0, 1fr); }
    /* Na telefonu panely pod sebou — sdílet řádky není s čím. */
    .club-overview-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
    .club-overview-top > .ss-panel { grid-row: auto; display: block; }
    .club-header-logo .club-logo { width: 48px; height: 48px; }
    .ss-comp-emblem { width: 48px; height: 48px; }
    .ss-comp-emblem .ss-comp-logo { width: 26px; height: 26px; }
    .ss-comp-name { font-size: 1.15rem; }
    .ss-comp-identity { gap: 12px; }
    .ss-comp-actions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Detail chyby v servisním režimu — běžný návštěvník ho nikdy neuvidí. */
.ss-debug {
    margin: 10px 0 0;
    padding: 10px;
    background: var(--bg-main);
    border: 1px dashed var(--danger);
    border-radius: 6px;
    color: var(--danger);
    font-size: 0.68rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- JEDNOTNÝ HOVER ---
   Všechny prokliky ve výsledkovém servisu se chovají stejně: text zežloutne
   do akcentní barvy, nic se nepodtrhává ani neposouvá. Pravidla stojí až
   na konci souboru, aby přebila barvy nastavené výš (třeba u vítězného
   týmu, kde má stejnou specificitu). */
.ss-comp-name a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Tabulka na úvodce dědí .full-stats-table efekty jen zčásti — posun textu
   do strany sem nepatří, řádky jsou úzké. */
.ss-table a:hover { transform: none; }


/* --- Proužek přihlášeného nad výsledkovým servisem ---------------------
   Přesunuto z pages/account.css — vykresluje ho index_top.php. */
.ss-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 22px;
}
.ss-strip-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-strip-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.ss-strip-teams { font-weight: 700; font-size: 0.92rem; }
.ss-strip-when { font-size: 0.75rem; color: var(--accent); }
.ss-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }









/* --- Linky přes celou šířku panelu ----------------------------------------
   Řádky seznamů oddělené vodorovnou linkou si sahají přes odsazení panelu,
   aby linka šla od rámečku k rámečku — stejně jako řádek zápasu
   (viz components/match-list.css). Vodorovné odsazení uvnitř zůstává,
   jaké bylo, jen se k němu přičítá odsazení panelu. */
.ss-fact {
    margin-left: calc(-1 * var(--panel-pad, 0px));
    margin-right: calc(-1 * var(--panel-pad, 0px));
    padding-left: var(--panel-pad, 0px);
    padding-right: var(--panel-pad, 0px);
}

/* Bez levého i pravého sloupce (karta Tabulka soutěže) je obsah přes celou
   šířku. Tři třídy, aby to přebilo šířky .comp-page i všech zlomů výš. */
.ss-layout.ss-layout-no-left.ss-layout-single { grid-template-columns: minmax(0, 1fr); }

/* Mobil na šířku: tabulka má místo na krátký název klubu vedle loga.
   Stojí až tady, za zlomem 820 px, který název schovává. */
@media (max-width: 820px) and (orientation: landscape) {
    .ss-table-legend .table-legend-title { font-size: 0.68rem; }
    .ss-table-legend .table-legend-row { font-size: 0.72rem; }
    .ss-table.has-names th.ss-th-club { width: 28%; }
    .ss-table-club-name { display: block; }
    .ss-table-name-full  { display: none; }
    .ss-table-name-short { display: inline; }
}