/* ═══════════════════════════════════════════════════════════════════════════
   JLCasino — /klipy (KLIP MĚSÍCE + FANOUŠEK MĚSÍCE)

   Plochy, linky a rádiusy berou systémové tokeny (--panel, --rail, --r-card,
   --r-btn), stín je čistě černý a zelená --go patří výhradně primárnímu
   tlačítku. Částky odměn jedou strojopisem, protože jsou to čísla, a číslice
   stejné šířky se v mřížce zarovnají samy.

   CO JE ÚDAJ, TO JE STROJOPIS: pořadí, počty LIKE a komentářů, autor klipu,
   zdroj, kvóta, štítky formuláře i body fanouška jedou var(--font-code)
   v drobných verzálkách. Jméno vítěze a fanouška je naopak jméno, ne údaj —
   to sází Archivo, stejně jako .nb-name u karty nabídky.

   Odměny v záhlaví (.klp-prizes) jsou vlasová mřížka podle idiomu .nb-terms:
   gap 1 px nad barvou linky, buňky bez vlastního rámečku. Dřív to byly tři
   samostatné karty s mezerou a hned pod nimi sdílená .jl-stats jako mřížka —
   dvě číselné lišty nad sebou, každá jinak sázená.

   Žádný selektor tu necílí na jednu stránku přes id nebo body-class — vše visí
   na jmenném prostoru .klp-*, který renderuje jen pages/klipy.php.
   ═══════════════════════════════════════════════════════════════════════════ */

.klp-page {
    display: block;
    padding-bottom: 56px;
}

/* ── Záhlaví: fotka a text vedle sebe ──────────────────────────────────────
   Nestejné sloupce a fotka vlevo. Pod záhlavím jede žebříček, formulář
   a galerie, tedy tři bloky po celé šířce; souměrné záhlaví by z toho udělalo
   čtyři stejné vodorovné pásy pod sebou.

   Pás čísel jde přes oba sloupce, protože tři čísla vedle sebe potřebují
   šířku. Fotka nemá popisek ani štítek: je to prostředí, ne náhled klipu. */
.klp-page .klp-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    column-gap: 40px;
    margin-bottom: 26px;
}

/* Uvnitř mřížky si záhlaví nebere vlastní spodní linku ani odsazení. */
.klp-page .klp-top-text {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.klp-top-shot {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
}

.klp-top-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* margin-inline musí být 0: sdílená .jl-stats má „margin: 0 auto" a v mřížce
   automatický okraj potlačí roztažení do celého sloupce. Pás se pak smrskl na
   nejmenší možnou šířku a stál doprostřed jako čtvrtá karta. */
.klp-page .klp-top-stats {
    grid-column: 1 / -1;
    margin: 22px 0 0;
}

@media (max-width: 900px) {
    .klp-page .klp-top {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }
    /* Na mobilu čte divák nejdřív, o čem stránka je; fotka jde pod text. */
    .klp-top-shot { order: 2; }
    .klp-page .klp-top-stats { order: 3; margin-top: 0; }
}

/* ── Odměny v záhlaví ──────────────────────────────────────────────────── */

/* Vlasová mřížka: mezera 1 px nad barvou linky, buňka bez vlastního
   rámečku. Tři odměny se tak čtou jako jeden žebříček, ne jako tři karty —
   a sedí to na sdílenou .jl-stats, která stojí hned pod nimi. */
.klp-prizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    margin-top: 24px;
    background: var(--rail);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    overflow: hidden;
}

.klp-prize {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: var(--panel);
}

.klp-prize-place {
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.klp-prize-czk {
    font-family: var(--font-num);
    font-size: clamp(26px, 3.8vw, 32px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
}

/* Spojovací slova a jednotky zůstávají malé, ať je částka jediná velká věc. */
.klp-prize-czk em {
    font-style: normal;
    font-size: .46em;
    font-weight: 700;
    color: var(--paper-2);
    margin-left: 3px;
}

/* ── Poznámka archivu ──────────────────────────────────────────────────── */

.klp-archnote {
    margin: 0 0 22px;
    padding: 11px 15px;
    background: var(--band);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-size: 14px;
    color: var(--paper-2);
}

.klp-archnote b { color: var(--paper); }
.klp-archnote a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.klp-archnote a:hover { color: var(--go); }

/* ── Vyhlášení měsíce ──────────────────────────────────────────────────── */

.klp-winners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.klp-winner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

/* 3px pruh na horní hraně je jediná věc, podle které se karty od sebe liší. */
.klp-winner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: var(--r-card) var(--r-card) 0 0;
    background: var(--rail-2);
}

.klp-winner--fan::before { background: var(--coin); }

.klp-winner-cat {
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Jméno vítěze je jméno, ne údaj — Archivo, stejně jako .nb-name. */
.klp-winner-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}

.klp-winner-score {
    font-family: var(--font-code);
    font-size: .72rem;
    font-weight: 500;
    color: var(--paper-2);
}

.klp-winner-prize {
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--paper);
}

/* ── Výsledková tabule ─────────────────────────────────────────────────────
   Průběžné pořadí bývalo mřížka karet se čtyřmi stopami — přesně ta, kterou
   o sekci níž kreslí galerie. Dvě stejná rozvržení pod sebou se čtou jako
   jedna sekce omylem vysázená dvakrát a tři klipy se navíc na stránce
   objevily dvakrát, včetně druhého tlačítka LIKE na tentýž klip.

   Pořadí je proto výpis čísel v jedné desce: vlasová mezera nad barvou linky,
   řádky bez vlastního rámečku, stejný idiom jako odměny .klp-prizes v záhlaví.
   Hlasuje se v galerii, tabule stav jenom ukazuje. */

.klp-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rail);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    overflow: hidden;
}

.klp-brow {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 116px) minmax(0, 108px);
    align-items: center;
    gap: 4px 18px;
    padding: 16px 20px;
    background: var(--panel);
}

/* Vedoucí příčka nese jinou plochu, ne druhý rámeček ani zelenou. */
.klp-brow--lead { background: var(--panel-hi); }

.klp-bpos {
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}

.klp-brow--lead .klp-bpos { color: var(--coin); }

.klp-bmain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Název klipu je název, ne údaj — Archivo, stejně jako .nb-name u nabídky. */
.klp-btitle {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: var(--track-tight);
    color: var(--paper);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.klp-btitle:hover,
a.klp-btitle:focus-visible { color: var(--go); }

/* Autor a zdroj jsou údaje o klipu — strojopis v drobných verzálkách. */
.klp-bwho {
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.klp-bscore,
.klp-bprize {
    justify-self: end;
    text-align: right;
    font-family: var(--font-num);
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
    white-space: nowrap;
}

/* Odměna je peníze, tedy druhé číslo řádku: --coin, ne zelená. */
.klp-bprize { color: var(--coin); }

.klp-bscore em,
.klp-bprize em {
    font-style: normal;
    font-size: .5em;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--paper-3);
    margin-left: 4px;
}

/* ── Galerie klipů ─────────────────────────────────────────────────────── */

.klp-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}

/* ── Karta klipu ───────────────────────────────────────────────────────── */

.klp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.klp-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-hi);
    border-color: var(--rail-2);
}

/* Karta bez skutečného snímku. Blok média se nevykreslí vůbec, takže text
   začíná o kousek níž a karta se nečte jako obrázek, který se nenačetl. */
.klp-card--flat .klp-body { padding-top: 18px; }

/* ── Médium v kartě ────────────────────────────────────────────────────── */

.klp-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;   /* letterbox videa, ne plocha UI — proto ne token */
    overflow: hidden;
}

.klp-video,
.klp-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: #000;   /* letterbox videa, ne plocha UI — proto ne token */
}

/* Facade: náhled + tlačítko. Přehrávač YouTube se načte až po kliknutí. */
.klp-facade {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;   /* letterbox videa, ne plocha UI — proto ne token */
    cursor: pointer;
}

.klp-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: opacity var(--t-fast);
}

.klp-facade:hover img { opacity: 1; }

.klp-play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--bg) 74%, transparent);
    border: 1px solid var(--rail-2);
    color: var(--paper);
    pointer-events: none;
}

/* Vlastní poster ke klipu na síti bez embedu (Kick, TikTok, Instagram).
   Je to jenom obrázek: nápis „Otevřít klip" na něm ležel přes jeho vlastní
   sazbu, tak odešel do patičky karty. Na snímku nestojí žádný popisek. */
.klp-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Text karty ────────────────────────────────────────────────────────── */

.klp-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px 10px;
    flex: 1 1 auto;
}

.klp-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--paper);
    /* Dvouřádkový strop drží mřížku v jedné výšce i u dlouhých názvů. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Autor a zdroj klipu jsou údaje o něm — strojopis, drobné verzálky. */
.klp-meta {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.klp-author { color: var(--paper-2); font-weight: 600; }

.klp-note {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--paper-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Patička karty: LIKE, komentáře, mazání ────────────────────────────── */

.klp-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 13px;
    border-top: 1px solid var(--rail);
}

.klp-like,
.klp-cbtn,
.klp-del {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: var(--panel-hi);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: var(--font-code);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--paper-2);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.klp-like:hover,
.klp-cbtn:hover { color: var(--paper); border-color: var(--rail-2); }

/* Zapnutý LIKE nese --live, ne zelenou: zelená je vyhrazená primárnímu
   tlačítku a druhá zelená věc vedle sebe by rozbila jediné vodítko akce. */
.klp-like.is-on {
    color: var(--live);
    border-color: rgba(var(--live-rgb), .38);
    background: rgba(var(--live-rgb), .1);
}

.klp-like.is-on svg { fill: currentColor; }
.klp-like[disabled] { opacity: .55; cursor: default; }

/* Pravý konec patičky drží odkaz ven a mazání pohromadě. Jedno auto-odsazení
   na skupinu, ne dvě na jednotlivá tlačítka: dvě by si volné místo rozdělila
   a mezi odkazem a mazáním by zela díra. */
.klp-foot-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.klp-foot-end:empty { display: none; }

/* Pobídka na cizí síť je sazba, ne druhé zelené tlačítko: zelená na kartě
   patří LIKE a primárnímu tlačítku stránky. */
.klp-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-text);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--paper-2);
    text-decoration: none;
    transition: color var(--t-fast);
}

.klp-open:hover,
.klp-open:focus-visible { color: var(--go); }

.klp-del {
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.klp-del:hover { color: var(--live); border-color: rgba(var(--live-rgb), .38); }

/* ── Komentáře ─────────────────────────────────────────────────────────── */

.klp-comments {
    padding: 0 14px 14px;
    border-top: 1px solid var(--rail);
}

.klp-clist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 0;
}

.klp-c {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 28px 8px 10px;
    background: var(--panel);
    border-radius: var(--r-btn);
}

.klp-c-who {
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-2);
}

.klp-c-body {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--paper);
    overflow-wrap: anywhere;
}

.klp-c-del {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--r-chip);
    font-size: 16px;
    line-height: 1;
    color: var(--paper-3);
    cursor: pointer;
}

.klp-c-del:hover { color: var(--live); }

.klp-cempty {
    margin: 12px 0;
    font-size: 13px;
    color: var(--paper-3);
}

.klp-clogin {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.klp-clogin:hover { color: var(--go); }

.klp-cform {
    display: flex;
    gap: 8px;
}

.klp-cform input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--paper);
}

.klp-cform input:focus { border-color: var(--rail-2); outline: none; }
.klp-cform input::placeholder { color: var(--paper-3); }

.klp-csend {
    padding: 9px 14px;
    background: var(--panel-hi);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--paper);
    cursor: pointer;
}

.klp-csend:hover { border-color: var(--rail-2); }

/* ── Brána pro nepřihlášené ────────────────────────────────────────────── */

/* Brána je vodorovný pruh: text vlevo, akce vpravo. Jako úzká karta přes
   560 px nechávala polovinu pásu prázdnou a vypadala jako nedokončený blok. */
.klp-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 24px;
    max-width: none;
    padding: 24px 26px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

.klp-gate-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}

.klp-gate-text {
    grid-column: 1;
    grid-row: 2;
    max-width: 68ch;
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--paper-2);
}

.klp-gate > .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    white-space: nowrap;
}

/* ── Formulář nahrání ──────────────────────────────────────────────────── */

.klp-form {
    max-width: 640px;
    padding: 22px 24px 24px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

.klp-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.klp-tab {
    padding: 7px 14px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-pill);
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
    cursor: pointer;
}

.klp-tab.is-on { color: var(--paper); border-color: var(--rail-2); background: var(--panel-hi); }

.klp-field {
    display: block;
    margin-bottom: 15px;
}

.klp-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.klp-label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: .04em; color: var(--paper-3); }

.klp-field input[type="text"],
.klp-field input[type="url"],
.klp-field input[type="file"],
.klp-field textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-size: 14px;
    color: var(--paper);
    resize: vertical;
}

.klp-field input:focus,
.klp-field textarea:focus { border-color: var(--rail-2); outline: none; }
.klp-field input::placeholder,
.klp-field textarea::placeholder { color: var(--paper-3); }

.klp-field input[type="file"] { padding: 9px 11px; font-size: 13px; color: var(--paper-2); }

.klp-field input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 12px;
    background: var(--panel-hi);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-btn);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--paper);
    cursor: pointer;
}

.klp-hint {
    display: block;
    margin-top: 6px;
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .03em;
    color: var(--paper-3);
}

.klp-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.klp-quota {
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.klp-quota b { color: var(--paper-2); }

.klp-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.klp-progress-bar {
    flex: 1 1 auto;
    height: 6px;
    background: var(--panel);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.klp-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--go);
    transition: width .18s linear;
}

.klp-progress-txt {
    font-family: var(--font-code);
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--paper-2);
    white-space: nowrap;
}

.klp-msg {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--paper-2);
    min-height: 1px;
}

.klp-msg--ok  { color: var(--go); }
.klp-msg--err { color: var(--live-hi); }

.klp-rules {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rail);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--paper-3);
}

/* ── Hlavička galerie a řazení ─────────────────────────────────────────── */

.klp-galhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.klp-sort { display: flex; gap: 6px; }

/* Řazení je čip, ne tlačítko: pilulka a strojopis říkají „přepínač". */
.klp-sortbtn {
    padding: 7px 14px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-pill);
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
    text-decoration: none;
}

.klp-sortbtn:hover { color: var(--paper); border-color: var(--rail-2); }
.klp-sortbtn.is-on { color: var(--paper); background: var(--panel-hi); border-color: var(--rail-2); }

/* ── Prázdný stav ──────────────────────────────────────────────────────── */

.klp-empty {
    padding: 34px 26px;
    background: var(--panel);
    border: 1px dashed var(--rail-2);
    border-radius: var(--r-card);
    text-align: center;
}

.klp-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--paper);
}

.klp-empty-text {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--paper-2);
}

.klp-empty-text--pad { padding: 8px 0 4px; }

/* ── FANOUŠEK MĚSÍCE ───────────────────────────────────────────────────── */

.klp-fanbar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding: 16px 20px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

.klp-fanbar-prize {
    font-family: var(--font-num);
    font-size: clamp(34px, 5.4vw, 48px);
    font-weight: 900;
    line-height: .95;
    color: var(--paper);
}

.klp-fanbar-prize em {
    font-style: normal;
    font-size: .44em;
    font-weight: 700;
    color: var(--paper-2);
    margin-left: 4px;
}

.klp-fanbar-txt { font-size: 14.5px; color: var(--paper-2); }

.klp-fans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klp-fan {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
}

.klp-fan--first { border-color: rgba(var(--coin-rgb), .32); }

/* Řádek má čtyři potomky, ale jen tři sloupce. Bez explicitního umístění
   spadnou štítky na druhou řádku a poslední potomek (body) se sesype do
   třetí řádky pod pořadové číslo, tedy do buňky široké 34 px. Krajní
   sloupce proto drží obě řádky, uprostřed se skládá jméno nad štítky. */
.klp-fan-pos {
    grid-area: 1 / 1 / 3 / 2;
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: var(--paper-3);
    text-align: center;
}

.klp-fan--first .klp-fan-pos { color: var(--coin); }

/* Jméno fanouška je jméno, ne údaj — Archivo. */
.klp-fan-name {
    grid-area: 1 / 2 / 2 / 3;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    color: var(--paper);
    overflow-wrap: anywhere;
}

.klp-fan-pts {
    grid-area: 1 / 3 / 3 / 4;
    justify-self: end;
    text-align: right;
    font-family: var(--font-num);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: var(--paper);
    white-space: nowrap;
}

.klp-fan-pts em {
    font-style: normal;
    font-size: .5em;
    font-weight: 700;
    color: var(--paper-3);
    margin-left: 3px;
}

.klp-fan-parts {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.klp-fan-chip {
    padding: 3px 8px;
    background: var(--raise);
    border-radius: var(--r-chip);
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--paper-3);
}

.klp-fan-chip b { color: var(--paper-2); }
.klp-fan-chip.is-capped { color: var(--coin-deep); }

.klp-fannote {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--paper-3);
}

/* ── Archiv ────────────────────────────────────────────────────────────── */

.klp-arch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.klp-archlink {
    padding: 7px 14px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-pill);
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
    text-decoration: none;
}

.klp-archlink:hover { color: var(--paper); border-color: var(--rail-2); }

/* ── Právní řádek ──────────────────────────────────────────────────────── */

.klp-legal {
    margin: 34px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rail);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--paper-3);
}

.klp-legal strong { color: var(--paper-2); }
.klp-legal a { color: var(--paper-2); text-decoration: underline; text-underline-offset: 3px; }
.klp-legal a:hover { color: var(--paper); }

/* ── Mobil ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .klp-grid { grid-template-columns: 1fr; }

    /* Na úzkém displeji se čtyři sloupce tabule nevejdou: číslo drží levý
       sloupec přes obě řádky, vpravo se pod sebe skládá klip a pod ním
       LIKE s odměnou. */
    .klp-brow {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 14px 15px;
    }
    .klp-bpos   { grid-area: 1 / 1 / 3 / 2; font-size: 22px; }
    .klp-bmain  { grid-area: 1 / 2 / 2 / 4; }
    .klp-bscore { grid-area: 2 / 2 / 3 / 3; justify-self: start; text-align: left; font-size: 18px; }
    .klp-bprize { grid-area: 2 / 3 / 3 / 4; font-size: 18px; }

    /* Tři odměny vedle sebe se na mobil nevejdou a auto-fit by nechal
       poslední buňku prázdnou. Sloupec s hodnotou vlevo je totéž, co dělá
       sdílená .jl-stats hned pod nimi. */
    .klp-prizes { grid-template-columns: minmax(0, 1fr); }
    .klp-prize {
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: baseline;
        gap: 12px;
    }
    .klp-prize-czk { min-width: 96px; }

    .klp-form,
    .klp-gate { padding: 18px 16px 20px; }

    /* Pruh se na úzkém displeji nevejde vedle sebe, tlačítko jde pod text. */
    .klp-gate { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .klp-gate-title,
    .klp-gate-text { grid-column: 1; }
    .klp-gate > .btn { grid-column: 1; grid-row: 3; justify-self: stretch; margin-top: 8px; }

    .klp-fan {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        padding: 11px 13px;
    }
}

/* Pohyb je odpověď, ne ozdoba — a vestibulární porucha ho nesnese. */
@media (prefers-reduced-motion: reduce) {
    .klp-card,
    .klp-card:hover,
    .klp-facade img,
    .klp-progress-bar span { transition: none; transform: none; }
}