/* ============================================
   SHARED.CSS — Common patterns across all pages
   Eliminates duplication in page-*.css files
   ============================================ */

/* ─── Screen-reader-only utility — keeps element in DOM/a11y tree but invisible ─── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Container ─── */
.jl-container {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

/* base.css applies display:flex to ALL <section> elements for centering.
   Sections that ARE the container (multiple direct children) must block-flow. */
section.jl-container {
    display: block;
}

/* KRITICKÉ: base.css má `section:not(.hero-section) { padding: var(--space-12) 0 }`.
   Ta zkratka má specificitu (0,1,1), takže přebije `.jl-container { padding: 0 48px }`
   (0,1,0) a vynuluje boční okraj. Výsledek: <section class="jl-container"> lepí obsah
   na okraj okna, zatímco sourozenecké <div class="jl-container"> mají 48px.
   Na jedné stránce tak vznikaly dvě různé levé hrany a useknuté nadpisy.
   Řešíme longhandem se stejnou specificitou z později načteného souboru
   (header.php: base.css řádek 180, shared.css řádek 182) — base.css zůstává netknutý,
   ať se nerozbije starý .container glass systém pod ním. */
section.jl-container {
    padding-inline: 48px;
}

/* Vnořený kontejner (např. components/schedule.php uvnitř /stream) by jinak
   sečetl okraje a odsadil obsah dvakrát. */
.jl-container .jl-container {
    padding-inline: 0;
    max-width: none;
}

/* ─── Page wrapper ─── */
.jl-page {
    width: 100%;
    align-self: stretch;
}

/* ─── Main section (first — clears navbar) ─── */
.jl-main {
    padding: calc(var(--nav-height) + 40px) 0 100px;
    width: 100%;
}

/* ─── Secondary section ─── */
.jl-section {
    padding: 0 0 64px;
    width: 100%;
}

/* Blok .jl-hero* (obal, tag-pilulka, gradientní nadpis, popis, řádek statů)
   a s ním starší .jl-stat odsud odešly celé. Neměly markup na jediné stránce
   a .jl-stat se navíc srážel s pásem tvrdých čísel níž v tomhle souboru —
   z jednoho tokenu (10px roh, černý stín) tak vznikal 24px roh s azurovou
   září. Druhá kopie .jl-section-label a .jl-count-pill je pryč ze stejného
   důvodu: hlavička sekce je JEDNO pravidlo a to platné je v bloku
   „SDÍLENÉ KOMPONENTY RÁMU" níž. */

/* #jlBarMid hiding is per-page (shop, giveaways, stream CSS files) */

/* ─── Toast notification (global) ─── */
.jl-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: var(--panel);
    border: 1px solid var(--alpha-purple-40);
    border-radius: 0;
    color: #fff;
    font-family: var(--font-secondary, sans-serif);
    font-size: 0.88rem;
    z-index: var(--z-toast);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 0 10px 40px var(--alpha-black-50);
}
.jl-toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-success { border-color: var(--alpha-cyan-50); }
.toast-warn    { border-color: rgba(var(--coin-rgb),0.5); }
.toast-info    { border-color: var(--alpha-purple-40); }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
    .jl-container { padding: 0 36px; }
    section.jl-container { padding-inline: 36px; }
}

@media (max-width: 900px) {
    .jl-container { padding: 0 24px; }
    section.jl-container { padding-inline: 24px; }
}

@media (max-width: 700px) {
    .jl-container { padding: 0 20px; }
    section.jl-container { padding-inline: 20px; }
}

@media (max-width: 600px) {
    .jl-container { padding: 0 16px; }
    section.jl-container { padding-inline: 16px; }
}

/* ─── Tlacitko .jl-btn — stejny tvar jako .btn v components/buttons.css ─── */
.jl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85em 1.6em;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.jl-btn--primary,
.jl-btn-primary {
    background: var(--kt-green);
    border-color: var(--kt-green);
    color: #08090a;
}

.jl-btn--primary:hover,
.jl-btn-primary:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
    color: #08090a;
}

.jl-btn--outline,
.jl-btn--ghost,
.jl-btn-secondary {
    background: none;
    border-color: var(--kt-line-2);
    color: var(--kt-ink);
}

.jl-btn--outline:hover,
.jl-btn--ghost:hover,
.jl-btn-secondary:hover {
    border-color: var(--kt-green);
    color: var(--kt-ink);
}

/* ─── Internal links grid (shared component) ───
   Pruh "Doporučujeme také" je na skoro každé stránce, takže byl i nejvíc vidět:
   0.68rem popisek na 35% bílé nad pěti vlasovými dlaždicemi četl jako druhá
   patička nad tou skutečnou. Přepsáno na povrch obsahové karty (.ed-card).
   `padding-block` místo zkratky, jinak by přebilo boční okraj .jl-container. */
.internal-links {
    padding-block: 40px 48px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Nadpis "Doporučujeme také" — reálný nadpis, ne drobný šedý štítek. */
.il-title {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: var(--ed-h2, 1.6rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.il-title span {
    background: var(--gradient-neon-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* auto-fit, protože počet odkazů se mění po odfiltrování odkazu na sebe sama
   (repeat(5,1fr)) nechávalo prázdné fantomové sloupce). */
.il-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.il-card {
    background: var(--kt-sf, #16191c);
    border: 1px solid var(--alpha-white-5);
    border-radius: var(--radius-card, 16px);
    padding: 20px;
    text-decoration: none;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.il-card::after {
    content: "";
    position: absolute;
    bottom: 16px;
    right: 18px;
    width: 16px;
    height: 16px;
    background-color: var(--kt-ink-3, #8a949b);
    -webkit-mask: var(--kt-chevron) center / 16px 16px no-repeat;
            mask: var(--kt-chevron) center / 16px 16px no-repeat;
    transition: background-color .2s ease, transform .2s ease;
}

.il-card:hover {
    border-color: rgba(var(--go-rgb), .35);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px var(--alpha-black-40);
}

.il-card:hover::after {
    background-color: var(--kt-green);
    transform: translateX(3px);
}

.il-card strong {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
    padding-right: 24px;
}

.il-card span {
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.5;
    padding-right: 28px;
}

@media (max-width: 1100px) {
    .il-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .il-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ─── Pomůcky formuláře: oko u hesla, spinner, síla hesla ─────────────────
   Celý tenhle blok byl doslovná kopie zdroje — 95 z 96 deklarací shodných.
   Poznávacím znakem bylo barevné kódování: seznam požadavků svítil zeleně
   (var(--go)), když je splněný, a červeně (var(--error)), když není; ukazatel síly
   měnil barvu proužku od červené přes oranžovou po zelenou; kolečka
   požadavků byla kruhy s poloprůhlednou barevnou výplní. V jednom panelu
   tak byly naráz čtyři akcentní barvy.

   Nová logika: význam nese TVAR a DÉLKA, ne barva. Odškrtnutá položka
   zesvětlá, nesplněná zůstane ztlumená; proužek síly roste, ale barvu
   nemění. Zelená se v panelu objeví jen jednou — na primárním tlačítku.
   Kolečko zůstává kruh (rádius 50 % je povolený jen tam, kde je věc
   doopravdy kruh), plochy a rádiusy jinak padají na nulu.
   Barvy sem zapisoval i skript inline; ty zápisy z includes/header-scripts.php
   zmizely, takže tady není potřeba jediný !important. ─────────────────── */
.login-field-pw { position: relative; }
.login-field-pw .pw-input-wrap { position: relative; }
.pw-eye-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    padding: 4px;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--kt-ink-3);
    line-height: 0;
    cursor: pointer;
    transition: color 0.15s linear;
}
.pw-eye-btn:hover { color: var(--kt-ink); }
.login-field-pw input[type="password"],
.login-field-pw input[type="text"] { padding-right: 40px; }

/* Spinner je kruh, takže si 50 % ponechá. Leží na zelené ploše tlačítka,
   proto tmavý, ne bílý. */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    border: 2px solid rgba(8, 9, 10, 0.28);
    border-top-color: #08090a;
    border-radius: 50%;
    vertical-align: middle;
    animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.login-submit { display: inline-flex; align-items: center; justify-content: center; }

/* Síla hesla: vlásečnice, která roste. Jeden odstín, žádný semafor. */
.pw-strength-bar {
    height: 2px;
    margin-top: 8px;
    background: var(--kt-line);
    border-radius: 0;
    overflow: hidden;
}
.pw-strength-fill {
    height: 100%;
    width: 0;
    /* Jeden odstin. Zelena je v panelu jen jednou a patri primarnimu
       tlacitku; sila hesla ji nese delkou prouzku, ne barvou. */
    background: var(--kt-ink-2);
    border-radius: 0;
    transition: width 0.25s linear;
}
.pw-strength-text {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--kt-ink-3);
}
/* Dokud se do popisku nic nenapsalo, nedrží prázdné místo. */
.pw-strength-text:empty { display: none; }

/* ─── Požadavky na heslo: visutý sloupec, ne odrážka v řádku ───────────── */
.pw-requirements {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: grid;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.4;
}
.pw-requirements li {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    color: var(--kt-ink-3);
    transition: color 0.15s linear;
}
.pw-req-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: start;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: var(--kt-pg);
    border: 1px solid var(--kt-line-2);
    border-radius: 50%;
    transition: border-color 0.15s linear;
}
.pw-req-icon::before {
    content: '';
    width: 3px;
    height: 3px;
    background: var(--kt-ink-3);
    border-radius: 50%;
}
/* Splněno = odškrtnuto a text zesvětlá. Nesplněno = beze změny.
   Zdroj tady svítil zeleně a červeně; barva byla jediný nosič významu. */
.pw-requirements li.pw-req-ok { color: var(--kt-ink-2); }
.pw-requirements li.pw-req-ok .pw-req-icon {
    background: transparent;
    border-color: var(--kt-ink-2);
}
.pw-requirements li.pw-req-ok .pw-req-icon::before {
    width: 6px;
    height: 3px;
    background: transparent;
    border-radius: 0;
    border-left: 1.5px solid var(--kt-ink-2);
    border-bottom: 1.5px solid var(--kt-ink-2);
    transform: rotate(-45deg) translate(1px, -1px);
}
.pw-requirements li.pw-req-bad { color: var(--kt-ink-3); }

/* Shodu hesel nese znak ✓ / ✗, ne dvě barvy. */
.pw-match-icon {
    font-size: 12px;
    font-weight: 700;
    color: var(--kt-ink-2);
}
.field-counter {
    float: right;
    font-weight: 400;
    font-size: 11px;
    color: var(--kt-ink-3);
}
.field-hint {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--kt-live);
}
/* ─── konec bloku formulářových pomůcek ─── */

/* Zdedena kruhova vlna z tlacitka je pryc; .ripple z script.js nema co
   vykreslit a tlacitko uz nemusi mit overflow:hidden. */
.ripple {
    display: none;
}
@keyframes rippleAnimation {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================================================
   VARIANTY BONUSOVÉ KARTY
   ----------------------------------------------------------------------------
   Karta není plocha (pravidlo 3) — leží přímo na stránce. Varianty se proto
   NErozlišují jiným pozadím, ale barvou levé hrany (pravidlo 2):

       běžná        --kt-line-2
       doporučená   --kt-green     (partner, exkluzivní, hero)
       časově živá  --kt-live      (.bp-limited, viz page-bonuses.css)

   Zelená je v kartě nejvýš na dvou povolených místech — na hraně a na jednom
   primárním tlačítku (pravidlo 6). Čísla kroků, štítky, odznaky ani promo kód
   zelené nejsou. Zděděné svítící obrysy, animované přechody a druhá vrstva
   pozadí jsou pryč, ne přebité.
   ============================================================================ */

/* Doporučená karta = zelená hrana. Nic jiného se nemění. */
.bonus-card-h.bp-exclusive,
.bonus-card-h.bp-hero,
.bonus-card-h.is-partner,
.bonus-card-h.bp-tokyo,
.bonus-card-h.bp-dedek {
    border-left-color: var(--kt-green);
}

/* Jediné plné zelené tlačítko na kartě patří doporučené nabídce. */
.bonus-card-h.bp-exclusive .cta-btn-h,
.bonus-card-h.bp-hero .cta-btn-h,
.bonus-card-h.is-partner .cta-btn-h,
.bonus-card-h.bp-tokyo .cta-btn-h,
.bonus-card-h.bp-dedek .cta-btn-h {
    background: var(--kt-green);
    border-color: var(--kt-green);
    color: #08090a;
}
.bonus-card-h.bp-exclusive .cta-btn-h:hover,
.bonus-card-h.bp-hero .cta-btn-h:hover,
.bonus-card-h.is-partner .cta-btn-h:hover,
.bonus-card-h.bp-tokyo .cta-btn-h:hover,
.bonus-card-h.bp-dedek .cta-btn-h:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
    color: #08090a;
}

/* ─── Odznak je první vysázený řádek obsahu (pravidlo 7) ───
   Verzálky, prostrkání, tlumená barva. Žádná stužka přes roh, žádná pilulka,
   žádné position:absolute a žádný z-index, o který by se dalo zakopnout. */
.bp-exclusive-badge,
.bp-limited-badge,
.bp-hero-ribbon {
    position: static;
    order: -1;
    display: flex;
    align-items: center;
    gap: 0.6ch;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}
.bp-exclusive-badge svg,
.bp-hero-ribbon svg {
    flex: none;
    width: 12px;
    height: 12px;
    color: currentColor;
}

/* Zděděná tečka "doporučeno" duplikovala to, co už říká hrana. */
.featured-dot { display: none; }

/* ─── Promo kód ───
   Proužek držený vlásečnicí, ne kupón s gradientem a přerušovaným rámem.
   Sází se do visutého sloupce (pravidlo 4): kód vlevo, popis vpravo. */
.bonus-promo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--kt-line);
}
.bonus-promo-label {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}
.bonus-promo-code {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--kt-ink);
    font-variant-numeric: tabular-nums;
}
.bonus-promo-hint {
    grid-column: 2;
    font-size: 0.8rem;
    color: var(--kt-ink-2);
}

/* ─── Odkaz na recenzi partnera v mřížce recenzí ─── */
.review-others-grid a.ro-exclusive {
    border-left: 3px solid var(--kt-green);
}
.ro-exclusive-tag {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

/* ============================================================================
   DVOJICE HLAVNÍCH KARET (.bp-hero-row)
   Dvě karty vedle sebe. Je to jen rozvržení — obě karty jsou pořád obyčejné
   bonusové karty, aby se web nerozpadl na dva vzhledy.
   ============================================================================ */
.bp-hero-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .bp-hero-row { grid-template-columns: 1fr; }
}

/* ─── Bohatá varianta karty (.bp-hero) ───
   Stejná konstrukce, jen víc obsahu: nabídka, výhody, štítky, akce.
   Žádné druhé pozadí, žádná záře, žádný dýchající stín pod tlačítkem. */
.bonus-card-h.bp-hero .bonus-top-row {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
}
.bp-hero-trust {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--kt-ink-2);
}
.bp-trust-rating,
.bp-trust-tick {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    font-weight: 600;
}
.bp-trust-rating svg,
.bp-trust-tick svg {
    justify-self: start;
    color: var(--kt-ink-2);
}

.bp-hero-offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    align-items: start;
    padding-top: 16px;
    border-top: 1px solid var(--kt-line);
}
.bp-hero-offer .bp-hero-microbadges,
.bp-hero-offer .bonus-cta-h { grid-column: 1 / -1; }

.bp-hero-value {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bp-hero-value-label {
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}
.bp-hero-value-label strong { color: var(--kt-ink); }
.bp-hero-value-amount {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--kt-ink);
    font-variant-numeric: tabular-nums;
}
.bp-hero-free { font-style: normal; }
.bp-hero-value-sub {
    font-size: 0.86rem;
    color: var(--kt-ink-2);
}

/* Výhody ve visutém sloupci (pravidlo 4) — odrážka stojí vedle textu,
   ne v jeho řádku, a nemá vlastní podklad. */
.bp-hero-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bp-hero-benefits li {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--kt-ink-2);
}
.bp-hero-benefits li strong { color: var(--kt-ink); font-weight: 700; }
.bp-bene-ico {
    color: var(--kt-ink-2);
    font-weight: 700;
}

/* Mikroštítky jsou metadata, ne akce: prostý text oddělený mezerou. */
.bp-hero-microbadges {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6ch;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}
.bp-microbadge,
.bp-microbadge-only {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
}

.bonus-card-h.bp-hero .bonus-cta-h {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.bp-cta-reassure {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--kt-ink-2);
}
.bp-cta-fineprint {
    grid-column: 2;
    display: block;
    font-size: 0.74rem;
    color: var(--kt-ink-2);
}

/* =====================================================================
   2) INTERCEPT MODAL  (.tokyo-intercept-*)
      Calm glass dialog. ONE focal amount (shares the hero value recipe),
      one unified CTA, quiet exit. Short one-shot entrance.
   ===================================================================== */
.tokyo-intercept-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 2000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--alpha-black-80);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: tokyoFadeIn 0.2s ease;
}
.tokyo-intercept-box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: min(540px, calc(100vw - 28px));
    padding: 48px 44px 38px;
    text-align: center;
    overflow: hidden;
    background: var(--panel-hi);
    border: 1px solid var(--alpha-white-6);
    border-radius: var(--border-radius-lg, 24px);
    box-shadow:
        0 32px 90px var(--alpha-black-80),
        0 0 48px var(--alpha-cyan-10),
        inset 0 1px 0 var(--alpha-white-10);
    animation: tokyoPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .tokyo-intercept-box { border-color: transparent; }
    .tokyo-intercept-box::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 0;
        background: linear-gradient(135deg,
            var(--alpha-cyan-40), var(--alpha-purple-20) 60%, var(--alpha-white-5));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }
}
.tokyo-intercept-box > * { position: relative; z-index: 1; }

.tokyo-intercept-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alpha-white-6);
    background: var(--alpha-white-4);
    color: var(--text-secondary);
    border-radius: var(--border-radius-full, 9999px);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}
.tokyo-intercept-close:hover {
    background: var(--alpha-white-10);
    color: var(--text-primary);
    border-color: var(--alpha-cyan-30);
}

/* head cluster — eyebrow + logo + title tight together */
.tokyo-intercept-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
/* eyebrow — canonical tinted-glass label chip */
.tokyo-intercept-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--border-radius-full, 9999px);
    background: linear-gradient(135deg, var(--alpha-purple-20), var(--alpha-cyan-15));
    border: 1px solid var(--alpha-cyan-30);
    box-shadow: inset 0 1px 0 var(--alpha-white-10);
    color: var(--kt-ink-2);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* logo — clean, no heavy plate */
.tokyo-intercept-logo {
    display: block;
    width: 140px;
    height: auto;
    margin: 4px auto 0;
}
.tokyo-intercept-box h3 {
    margin: 0;
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
/* focal amount — single hero element with a quiet label above the number */
.tokyo-intercept-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 auto 22px;
    padding: 20px 28px;
    border-radius: var(--radius-lg, 12px);
    background:
        radial-gradient(120% 100% at 50% 0%, var(--alpha-cyan-10), transparent 65%),
        linear-gradient(160deg, var(--alpha-cyan-8), var(--alpha-purple-6));
    border: 1px solid var(--alpha-cyan-20);
    box-shadow: inset 0 1px 0 var(--alpha-white-10);
}
.tokyo-intercept-amount-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.tokyo-intercept-amount strong {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(2rem, 5.4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-shadow: none;
    text-wrap: balance;
}
/* benefits — aligned two-column checklist (feature left, value right) */
.tokyo-intercept-benefits {
    list-style: none;
    margin: 0 auto 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    max-width: 380px;
}
.tokyo-intercept-benefits li {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 11px 2px;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--alpha-white-6);
}
.tokyo-intercept-benefits li:last-child { border-bottom: 0; }
.tokyo-intercept-benefits .ti-check {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full, 9999px);
    background: var(--alpha-cyan-15);
    color: var(--kt-ink-2);
    font-size: 0.72rem;
    font-weight: 900;
}
.tokyo-intercept-benefits .ti-label {
    min-width: 0;
}
.tokyo-intercept-benefits .ti-value {
    justify-self: end;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text-primary);
}
/* primary CTA — unified Tokyo CTA recipe */
.tokyo-intercept-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 26px;
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(135deg, var(--alpha-purple-25), var(--alpha-cyan-25));
    border: 1px solid var(--alpha-cyan-40);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 var(--alpha-white-15),
        0 0 22px var(--alpha-cyan-20);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal);
}
.tokyo-intercept-primary span { transition: transform var(--transition-fast); }
.tokyo-intercept-primary:hover {
    background: linear-gradient(135deg, var(--alpha-purple-40), var(--alpha-cyan-40));
    border-color: var(--kt-green);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 var(--alpha-white-20),
        0 8px 24px var(--alpha-black-40),
        0 0 28px var(--alpha-cyan-30);
}
.tokyo-intercept-primary:hover span { transform: translateX(4px); }
/* secondary — quiet, low-emphasis exit */
.tokyo-intercept-secondary {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body, 'Montserrat'), sans-serif;
    font-size: 0.88rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.tokyo-intercept-secondary span { color: var(--text-secondary); font-weight: 600; }
.tokyo-intercept-secondary:hover { color: var(--text-secondary); }

/* Intercept modal — tighten on small screens */
@media (max-width: 560px) {
    .tokyo-intercept-overlay { padding: 14px; }
    .tokyo-intercept-box { padding: 30px 18px 22px; border-radius: var(--radius-xl, 16px); }
    .tokyo-intercept-box h3 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
    .tokyo-intercept-logo { width: 120px; }
    .tokyo-intercept-amount { padding: 16px 18px; }
    .tokyo-intercept-amount strong { font-size: clamp(1.7rem, 8.5vw, 2.2rem); }
    .tokyo-intercept-benefits { font-size: 0.9rem; }
    .tokyo-intercept-benefits li { column-gap: 10px; padding: 10px 0; }
    .tokyo-intercept-benefits .ti-value { font-size: 0.9rem; }
    .tokyo-intercept-primary { font-size: 0.96rem; padding: 16px 18px; letter-spacing: 0.04em; }
}

/* =====================================================================
   3) BLOG CTA  (aside.tokyo-blog-cta)  — horizontal callout
      Logo plate | body (focal headline + sub) | unified CTA. Calm chrome.
   ===================================================================== */
/* ── Stream → Web CTA (funnel bod 1): živé publikum → bonus na webu ────────── */
.stream-cta {
    position: relative;
    max-width: 1180px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 0;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(var(--go-rgb), .1), transparent 55%),
        var(--kt-sf, #16191c);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: var(--lift);
}
/* Media / klip výhry (levá strana). Vlož sem <video> nebo <img>. */
.stream-cta-media {
    position: relative;
    min-height: 190px;
    background: linear-gradient(135deg, rgba(var(--go-rgb), .08), rgba(var(--go-rgb), .1));
    border-right: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
}
.stream-cta-media > video,
.stream-cta-media > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.stream-cta-media-ph {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .2s;
}
.stream-cta-media-ph:hover { background: rgba(var(--go-rgb), .05); }
.stream-cta-play {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gradient-cyber);
    color: #0b0e0f;
    font-size: 1.2rem;
    padding-left: 4px;
    box-shadow: var(--lift);
}
.stream-cta-ph-text { font-size: .82rem; letter-spacing: .02em; }

.stream-cta-body {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.stream-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.stream-cta-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #888;
    flex-shrink: 0;
}
/* Live stav — JS přidá .is-live na .stream-cta[data-stream-cta] */
.stream-cta.is-live .stream-cta-dot {
    background: #ff2d55;
    box-shadow: 0 0 0 0 rgba(255, 45, 85, .6);
    animation: streamLivePulse 1.6s infinite;
}
.stream-cta.is-live .stream-cta-eyebrow { color: var(--live); }
@keyframes streamLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 45, 85, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 45, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
}
.stream-cta-body h3 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}
.stream-cta-body p {
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.stream-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
/* Jedno plne zelene tlacitko v bloku, druhe je obrys (pravidlo 6). */
.stream-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--kt-green);
    border: 1px solid var(--kt-green);
    border-radius: 0;
    color: #08090a;
    font-weight: 700;
    text-decoration: none;
}
.stream-cta-btn:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
}
.stream-cta-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: none;
    border: 1px solid var(--kt-line-2);
    border-radius: 0;
    color: var(--kt-ink);
    font-weight: 700;
    text-decoration: none;
}
.stream-cta-link:hover {
    border-color: var(--kt-green);
}
@media (max-width: 720px) {
    .stream-cta { grid-template-columns: 1fr; }
    .stream-cta-media { min-height: 160px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .stream-cta-actions .stream-cta-btn,
    .stream-cta-actions .stream-cta-link { flex: 1 1 100%; justify-content: center; }
}

.tokyo-blog-cta {
    position: relative;
    max-width: 1180px;
    margin: 32px auto;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: var(--border-radius, 16px);
    background:
        radial-gradient(80% 160% at 0% 50%, var(--alpha-purple-10), transparent 55%),
        var(--kt-sf, #16191c);
    border: 1px solid var(--alpha-white-6);
    box-shadow:
        0 12px 34px var(--alpha-black-40),
        0 0 22px var(--alpha-cyan-8),
        inset 0 1px 0 var(--alpha-white-10);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .tokyo-blog-cta { border-color: transparent; }
    .tokyo-blog-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 0;
        background: linear-gradient(135deg,
            var(--alpha-cyan-40), var(--alpha-purple-20) 60%, var(--alpha-white-5));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }
}
.tokyo-blog-cta:hover {
    border-color: var(--alpha-cyan-20);
    box-shadow:
        0 16px 40px var(--alpha-black-50),
        0 0 28px var(--alpha-cyan-15),
        inset 0 1px 0 var(--alpha-white-15);
}
.tokyo-blog-cta > * { position: relative; z-index: 1; }

/* logo plate */
.tokyo-blog-cta-logo {
    width: 104px;
    flex: none;
    padding: 12px 14px;
    background: var(--alpha-white-3);
    border: 1px solid var(--alpha-white-6);
    border-radius: var(--radius-md, 10px);
}
.tokyo-blog-cta-body { flex: 1 1 280px; min-width: 0; }
/* eyebrow — canonical tinted-glass label chip */
.tokyo-blog-cta-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: var(--border-radius-full, 9999px);
    background: linear-gradient(135deg, var(--alpha-purple-15), var(--alpha-cyan-10));
    border: 1px solid var(--alpha-cyan-25);
    box-shadow: inset 0 1px 0 var(--alpha-white-10);
    color: var(--kt-ink-2);
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tokyo-blog-cta-body h3 {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.tokyo-blog-cta-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
/* Callout ma jednu akci, takze ta je ta jedna zelena v bloku. */
.tokyo-blog-cta-btn {
    flex: none;
    padding: 14px 24px;
    background: var(--kt-green);
    border: 1px solid var(--kt-green);
    border-radius: 0;
    color: #08090a;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}
.tokyo-blog-cta-btn:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
}
@media (max-width: 620px) {
    .tokyo-blog-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 18px;
        padding: 22px;
    }
    .tokyo-blog-cta-btn { width: 100%; text-align: center; }
}

/* =====================================================================
   KEYFRAMES (one drifting hairline + short one-shot modal entrance)
   ===================================================================== */
@keyframes jlAccentDrift {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}
@keyframes tokyoFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tokyoPop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   REDUCED MOTION — disable decorative motion + hover transforms in one place
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tokyo-intercept-overlay,
    .tokyo-intercept-box,
    .tokyo-intercept-primary,
    .tokyo-blog-cta {
        animation: none;
        transition: none;
    }
    .tokyo-intercept-primary:hover,
    .tokyo-blog-cta:hover { transform: none; }
}

/* =====================================================================
   SDÍLENÉ KOMPONENTY RÁMU
   ---------------------------------------------------------------------
   Jeden tvar pro celý web. Když stránka potřebuje záhlaví, pás nebo
   odznak stavu, sáhne sem — vlastní selektor na jednu stránku se
   nezakládá.
   ===================================================================== */

/* ─── Pruh 18+ nad navigací ───
   Vstupní brána jako blokující modal odešla; průzkum ji nenašel ani na
   jednom z jednadvaceti webů v oboru. 18+ patří sem a do patičky. */
.jl-agebar {
    background: var(--kt-head);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
    line-height: 1.4;
}
.jl-agebar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--kt-rail);
    margin: 0 auto;
    padding: 7px 30px;
}
.jl-agebar__txt { color: var(--kt-ink-3); }
.jl-agebar__law { color: var(--kt-ink-2); white-space: nowrap; }
/* Odznak 18+ nemluvi o vysilani, takze nenese --kt-live. Bily text na
   cervene dava 3,79:1 a AA neprojde; obrys s vlastni barvou textu ano. */
.jl-agebar__law b {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    border: 1px solid var(--kt-ink-3);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
@media (max-width: 46rem) {
    .jl-agebar__in { padding: 6px 16px; }
    .jl-agebar__txt { display: none; }
    .jl-agebar__law { margin: 0 auto; }
}

/* ─── Záhlaví stránky ───
   Není to sekce, je to záhlaví, takže nenese sekční padding. */
.jl-pagehead {
    display: block;
    max-width: var(--kt-rail);
    margin: 0 auto 26px;
    padding: 34px 30px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* Šablony záhlaví vkládají do .jl-container, který má vodorovné odsazení
   už sám. Sečtená odsazení odsazovala <h1> o 30 px dál než hlavičky sekcí
   pod ním, takže stránka měla dvě různé levé hrany. */
.jl-container > .jl-pagehead { padding-inline: 0; }
.jl-pagehead > h1 {
    margin: 0;
    font-family: var(--font-accent);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--kt-ink);
    text-wrap: balance;
}
.jl-pagehead > h1 span {
    color: inherit;
    box-shadow: inset 0 -.14em 0 var(--kt-green);
}
.jl-pagehead > p {
    margin: 12px 0 0;
    max-width: 66ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--kt-ink-2);
}

/* ─── Záhlaví, řádek stavu vysílání ───
   Pořadí nad přehybem je identita → jedna věta → stav vysílání → nejvýš dvě
   tlačítka → pás tvrdých čísel (DESIGN-JLCASINO.md, pravidlo 4). Tyhle tři
   řádky jsou ty tři poslední kroky a patří do záhlaví, ne do vlastní sekce
   na každé stránce zvlášť. */
.jl-pagehead__live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 16px 0 0;
}
/* Doprovodná věta vedle pilulek. Nesmí být menší než 11,5px. */
.jl-pagehead__livenote {
    font-size: 13px;
    line-height: 1.4;
    color: var(--kt-ink-3);
}

/* Vedle primárního tlačítka nikdy nestojí druhé barevné tlačítko, jen
   textový odkaz (pravidlo 2). */
.jl-pagehead__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 18px 0 0;
}

/* Pás čísel uzavírá záhlaví, proto sedí uvnitř něj a ne ve vlastní sekci. */
.jl-pagehead > .jl-stats { margin-top: 22px; }

@media (max-width: 46rem) {
    .jl-pagehead { padding: 22px 16px 16px; margin-bottom: 18px; }
}

/* ─── Pás sekce ───
   Sousední sekce se nesmí slít; ta, která má stát proti té nad sebou,
   dostane tuhle třídu. */
.jl-band {
    position: relative;
    background: var(--kt-band);
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* Pas oddeluje odstinem, ne zelenym prelivem - zelena je vyhradne vypln
   primarniho tlacitka. Preliv je bily nadech, takze pas zustane citelny
   a zadna druha zelena na webu nevznikne. */
.jl-band::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(80% 60% at 10% 0%,
        rgba(255, 255, 255, .035) 0%, transparent 62%);
}
.jl-band > * { position: relative; }
/* Dva pásy hned za sebou by splynuly v jeden. */
.jl-band + .jl-band { background: var(--kt-pg); border-top: 0; }
.jl-band + .jl-band::before { background: none; }

/* ─── Odznak živého vysílání ───
   Napříč weby skoro identická komponenta; hodnoty jsou z produkčního CSS
   jamierewards.gg. Pilulka je jediné místo na webu s rádiusem 999px. */
.jl-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--kt-r-pill);
    background: color-mix(in srgb, var(--kt-live) 15%, transparent);
    /* Průzkum měl 10–11px verzálky, jenže root font-size je pod 1440px
       14,5px a nejmenší text na webu nesmí spadnout pod 11,5px. */
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* Text pilulky je --kt-live-2, ne --kt-live: sytá #ff1f44 má na vlastní
       podložce kontrast 4,11:1 a WCAG AA (4,5:1) na ní neprojde. Světlejší
       odstín téže barvy dá 5,87:1. Tečka pod ním zůstává sytá — je to
       grafika, ne čtený text. */
    color: var(--kt-live-2);
}
.jl-live__dot {
    flex: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kt-live);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kt-live) 18%, transparent);
    animation: jl-live-pulse 1.6s ease-in-out infinite;
}
/* Popisek pilulky. Vlastní prvek proto, že na nejužších telefonech ustoupí
   a zůstane jen tečka; význam pak nese aria-label odkazu. */
.jl-live__txt { line-height: 1; }
@keyframes jl-live-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kt-live) 18%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kt-live) 5%, transparent); }
}
/* Pohyb je odpověď, ne ozdoba: komu je z něj špatně, ten ho mít nemusí. */
@media (prefers-reduced-motion: reduce) {
    .jl-live__dot { animation: none; }
}
/* Offline se nikdy neschovává, jen zešedne. */
.jl-live--off {
    background: rgba(255, 255, 255, .06);
    color: var(--kt-ink-3);
}
.jl-live--off .jl-live__dot {
    background: var(--kt-ink-3);
    box-shadow: none;
    animation: none;
}

/* ─── Pás tvrdých čísel ───
   Konvence segmentu: pod hero stojí řádek konkrétních čísel. */
.jl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    max-width: var(--kt-rail);
    margin: 0 auto;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--kt-r);
    overflow: hidden;
}
.jl-stat {
    padding: 16px 18px;
    background: var(--kt-card);
    text-align: center;
}
.jl-stat__num {
    display: block;
    font-family: var(--font-accent);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--kt-ink);
    font-variant-numeric: tabular-nums;
}
.jl-stat__num--coin { color: var(--kt-coin); }
.jl-stat__lbl {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}

/* ─── Hlavička sekce ───
   Jedno pravidlo pro celý web, a to včetně obou věcí, které v řádku stojí
   vedle nadpisu: počtu položek a odkazu „všechny …". Dřív běžely paralelně
   čtyři kopie — druhá výš v tomhle souboru, třetí přes !important
   v components/karty.css, čtvrtá přes !important v components/kick-skin.css
   a pátá jako doslovný obtisk v page-stream.css. */
.jl-section-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 18px;
}
.jl-section-label h1,
.jl-section-label h2 {
    margin: 0;
    font-family: var(--font-accent);
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    text-transform: none;
    color: var(--kt-ink);
}
/* Zvýrazněné slovo se podtrhává, neobarvuje. */
.jl-section-label h1 span,
.jl-section-label h2 span {
    color: inherit;
    box-shadow: inset 0 -.13em 0 var(--kt-green);
}

/* Počet položek vedle nadpisu. Čip leží na --kt-el jako každý jiný čip
   na webu a má rádius tlačítka, ne pilulky. */
.jl-count-pill {
    display: inline-block;
    padding: 3px 9px;
    background: var(--kt-el);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-accent);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

/* Odkaz „všechny …". Je to sazba, ne druhé tlačítko — proto smí stát
   i vedle primárního tlačítka v záhlaví. */
.jl-see-all {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kt-ink-2);
    transition: color .18s ease;
}
.jl-see-all:hover,
.jl-see-all:focus-visible { color: var(--kt-green); }
/* Na konec řádku ho posílá až hlavička sekce; v řádku akcí má naopak stát
   hned vedle tlačítka, ne u protějšího okraje. */
.jl-section-label > .jl-see-all { margin-left: auto; }
@media (max-width: 700px) {
    /* Na úzkém displeji se odkaz nevešel a ořízl se o okraj. */
    .jl-section-label > .jl-see-all { margin-left: 0; flex-basis: 100%; }
}

/* =====================================================================
   KARTA NABÍDKY — ŘÁDKOVÁ (.bp-row)
   markup: includes/components/bonus-card.php
   ---------------------------------------------------------------------
   Kostra logo | nabídka | akce. Osm z devíti českých a všech šest
   světových webů v oboru skládá nabídky takhle; casino.org má doslova
   grid-template-columns:170px minmax(0,1fr) auto.

   Částka je největší prvek stránky a je v HLAVNÍ textové barvě. Značková
   barva kasina žije jen ve 3px pruhu nahoře a v rámečku při hoveru —
   deset různobarevných obřích čísel pod sebou by rozbilo sloupec, ve
   kterém má jít o porovnání.
   ===================================================================== */
.bonuses-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: none;
    border: 0;
}

.bp-row {
    --bp-odstin: var(--kt-line-2);
    position: relative;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
    padding: 26px 24px 22px;
    background: var(--kt-card);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--kt-r);
    box-shadow: var(--kt-shadow);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Pruh v barvě kasina — jediná věc, podle které se karty od sebe liší. */
.bp-row::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--bp-odstin);
    border-radius: var(--kt-r) var(--kt-r) 0 0;
}
.bp-row:hover,
.bp-row:focus-within {
    border-color: color-mix(in srgb, var(--bp-odstin) 55%, transparent);
    box-shadow: var(--kt-shadow-hi);
    transform: translateY(-2px);
}
.bp-row--limited { --bp-odstin: var(--kt-live); }

/* ─── Sloupec 1: logo v pevné dlaždici ───
   Dlaždice má vlastní plochu i rámeček, jinak bílá loga na tmavé kartě
   splynou (BonusFinder a AskGamblers to řeší stejně). */
.bp-row__mark { display: grid; gap: 10px; justify-items: center; }
.bp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 74px;
    padding: 10px;
    background: var(--kt-el);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--kt-r-sm);
}
.bp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bp-logo__ini {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    font-family: var(--font-accent);
    font-size: 22px; font-weight: 800;
    color: var(--bp-odstin);
}
.bp-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--kt-ink-2);
    text-align: center;
}

/* ─── Sloupec 2: nabídka ─── */
.bp-row__offer { display: grid; gap: 8px; align-content: start; }

.bp-tag {
    justify-self: start;
    margin: 0;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bp-odstin);
    background: color-mix(in srgb, var(--bp-odstin) 13%, transparent);
    border-radius: var(--kt-r-sm);
}

/* Největší prvek stránky. mrBigSpin má clamp(46px,7.5vw,62px). */
.bp-amount {
    margin: 0;
    font-family: var(--font-accent);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.01em;
    color: var(--kt-ink);
    text-wrap: balance;
}
.bp-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kt-ink-2);
    max-width: 54ch;
}

/* Mini-buňky s dílčími hodnotami. */
.bp-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
}
.bp-cell {
    padding: 8px 12px;
    background: var(--kt-el);
    border-radius: var(--kt-r-sm);
    max-width: 30ch;
}
.bp-cell dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}
.bp-cell dd {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--kt-ink-2);
}

.bp-steps-wrap { margin: 2px 0 0; }
.bp-steps-wrap > summary {
    cursor: pointer;
    list-style: none;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    color: var(--kt-ink-2);
}
.bp-steps-wrap > summary::-webkit-details-marker { display: none; }
.bp-steps-wrap > summary::before { content: "+ "; font-weight: 800; }
.bp-steps-wrap[open] > summary::before { content: "\2212 "; }
.bp-steps-wrap > summary:hover { color: var(--kt-ink); }
.bp-steps {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: bp-krok;
    display: grid;
    gap: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kt-ink-2);
}
.bp-steps li {
    counter-increment: bp-krok;
    display: grid;
    grid-template-columns: 2.4ch 1fr;
    column-gap: .8ch;
    align-items: baseline;
}
.bp-steps li::before {
    content: counter(bp-krok) ".";
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--bp-odstin);
}

/* ─── Sloupec 3: akce ───
   Vedle primárního tlačítka nikdy nestojí druhé barevné tlačítko — v celém
   vzorku bez výjimky. */
.bp-row__act { display: grid; gap: 10px; align-content: start; }

.bp-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 18px;
    background: var(--kt-green);
    color: var(--go-ink);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-accent);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.bp-go:hover,
.bp-go:focus-visible { background: var(--kt-green-h); transform: translateY(-1px); }

/* Kupón s přerušovaným okrajem. mrBigSpin má přesně tuhle komponentu. */
.bp-coupon {
    display: grid;
    gap: 1px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--kt-green) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--kt-green) 55%, transparent);
    border-radius: var(--kt-r-sm);
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}
.bp-coupon:hover { background: color-mix(in srgb, var(--kt-green) 14%, transparent); }
.bp-coupon__cap {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}
.bp-coupon__code {
    font-family: var(--font-accent);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--kt-green);
}
.bp-coupon__hint { font-size: 11.5px; color: var(--kt-ink-3); }
.bp-coupon.je-zkopirovano {
    background: color-mix(in srgb, var(--kt-green) 20%, transparent);
    border-style: solid;
}
.bp-coupon.je-zkopirovano .bp-coupon__hint { color: var(--kt-green); }

.bp-nocode,
.bp-fine {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--kt-ink-3);
    text-align: center;
}
.bp-fine b { color: var(--kt-ink-2); }

@media (max-width: 60rem) {
    .bp-row { grid-template-columns: 110px minmax(0, 1fr); }
    .bp-row__act { grid-column: 1 / -1; }
    .bp-logo { height: 58px; }
}
@media (max-width: 34rem) {
    .bp-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px 18px; }
    .bp-row__mark { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; }
    .bp-logo { height: 48px; }
    .bp-row__name { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .bp-row:hover, .bp-go:hover { transform: none; }
}

/* =====================================================================
   KARTA V MŘÍŽCE — .jl-tile
   markup: includes/components/giveaway-card.php · pages/shop.php
   ---------------------------------------------------------------------
   Sourozenec řádkové karty nabídky (.bp-row). Tam, kde se nabídky
   porovnávají shora dolů, je karta řádek; tam, kde jde o soupis věcí,
   ze kterých si divák vybírá (soutěže, odměny), je to dlaždice. Jazyk
   je ale jeden a týž: plocha --kt-card, rádius --kt-r, černý stín,
   3px pruh nahoře ve značkové nebo stavové barvě, zvednutí v hoveru
   a JEDINÁ zelená v celé kartě — tlačítko.

   jamierewards.gg staví obchod přesně takhle: štítek zásoby, cena,
   jedna věta, checklist podmínek a tlačítko, které při nesplněné
   podmínce mění NÁZEV, ne jen barvu.

   Odstín se posílá jako --jl-tile-hue. Kasino mimo mapu ho nedostane
   a karta zůstane neutrální — barva se nepřiděluje náhodně. Stavová
   barva (soutěž dobíhá) přebíjí značkovou.
   ===================================================================== */
.jl-tile {
    --jl-tile-hue: var(--kt-line-2);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--kt-card);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--kt-r);
    box-shadow: var(--kt-shadow);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Pruh v barvě značky nebo stavu — jediná věc, podle které se karty
   od sebe liší. Stejné pravidlo jako u .bp-row. */
.jl-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--jl-tile-hue);
}
.jl-tile:hover,
.jl-tile:focus-within {
    border-color: color-mix(in srgb, var(--jl-tile-hue) 55%, transparent);
    box-shadow: var(--kt-shadow-hi);
    transform: translateY(-2px);
}
/* Stav, ve kterém se s kartou nedá nic dělat (vyprodáno, došlý čas).
   Karta zůstane čitelná, jen se přestane hlásit o pozornost. */
.jl-tile--off { --jl-tile-hue: var(--kt-line-2); }
.jl-tile--off:hover { transform: none; box-shadow: var(--kt-shadow); }

/* ─── 1. řádek: štítek ───
   Odznak je první vysázený řádek obsahu, ne stužka přes roh.
   Značková barva kasina štítek NENESE: podle DESIGN-JLCASINO.md žije jen
   ve 3px pruhu nahoře a v rámečku při najetí. Navíc by neutrální karta
   (kasino mimo mapu) dostala text v --kt-line-2, a to je na ploše karty
   1,7 : 1 — nečitelné. Štítek je proto v hlavní tlumené barvě, 9,2 : 1. */
.jl-tile__flag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px 0;
    font-family: var(--font-accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}
/* Značka kasina stojí na opačném konci řádku a je tichá. */
.jl-tile__flag-side {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kt-ink-3);
}
.jl-tile__flag img {
    display: block;
    width: auto;
    height: 18px;
    margin-left: auto;
    object-fit: contain;
}

/* ─── 2. řádek: náhled + to hlavní ─── */
.jl-tile__head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 16px 14px;
}
.jl-tile__head--plain { grid-template-columns: minmax(0, 1fr); }

/* Dlaždice náhledu má vlastní plochu i rámeček, jinak bílé logo na
   tmavé kartě splyne (stejný důvod jako u .bp-logo). */
.jl-tile__mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding: 6px;
    background: var(--kt-el);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-3);
    overflow: hidden;
}
.jl-tile__mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Fotka ceny se plochou dlaždice vyplní; předmět na šířku (dres, nůž)
   má být vidět celý. */
.jl-tile__mark--photo { padding: 0; }
.jl-tile__mark--photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.jl-tile__mark--fit { padding: 4px; }
.jl-tile__mark--fit img { width: 100%; height: 100%; object-fit: contain; }

.jl-tile__lines { min-width: 0; }

/* Největší prvek karty: to, o co se hraje / co si divák odnese. Je
   v HLAVNÍ textové barvě, ne ve značkové — dvacet různobarevných
   nadpisů pod sebou by rozbilo mřížku, ve které se má porovnávat. */
.jl-tile__value {
    margin: 0;
    font-family: var(--font-accent);
    font-size: clamp(19px, 2.1vw, 24px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--kt-ink);
    overflow-wrap: anywhere;
}
.jl-tile__sub {
    margin: 5px 0 0;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kt-ink-2);
}

/* ─── Ukazatel: odpočet zbývajícího času i postup ke koupi ───
   Šířku počítá server (soutěž) nebo JS (coiny). Bez skriptu je proužek
   prázdný, takže nic neslibuje. */
.jl-tile__meter {
    display: block;
    height: 4px;
    border-radius: var(--kt-r-pill);
    background: var(--kt-el);
    overflow: hidden;
}
/* Výplň je STAV, ne značka: kolik času zbývá, kolik coinů už mám. Stavová
   barva podle DESIGN-JLCASINO.md přebíjí značkovou, takže si ji dopisují
   stavy (dobíhá, vypršelo, postup k ceně). Výchozí je čitelná neutrální —
   značkový odstín by u kasina mimo mapu spadl na --kt-line-2 a proužek by
   proti své drážce měl 2,1 : 1, tedy pod hranicí 3 : 1 pro grafiku. */
.jl-tile__meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--kt-ink-3);
}

.jl-tile__time {
    display: block;
    padding: 0 16px 12px;
}
.jl-tile__time-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}
.jl-tile__time-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}
.jl-tile__time-val {
    font-family: var(--font-accent);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--kt-ink);
}
.jl-tile__unit {
    margin: 0 6px 0 1px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-ink-3);
}
.jl-tile__colon { margin: 0 1px; color: var(--kt-ink-3); }

/* ─── Fakta: popisek vlevo, hodnota vpravo, mezi řádky vlásečnice ─── */
.jl-tile__facts {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 16px;
}
.jl-tile__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.jl-tile__fact dt {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kt-ink-3);
}
.jl-tile__fact dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kt-ink-2);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.jl-tile__fact dd b { color: var(--kt-ink); font-weight: 700; }

/* ─── Checklist podmínek (jamierewards.gg) ───
   Říká, co je potřeba, ne co je splněno — dokud to neví JS, žádná
   odrážka netvrdí ani jedno. Splněnou označí až skript. */
.jl-tile__check {
    margin: 0;
    padding: 12px 16px 0;
    list-style: none;
    display: grid;
    gap: 6px;
}
.jl-tile__check li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 9px;
    align-items: baseline;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--kt-ink-2);
}
.jl-tile__check li::before {
    content: "";
    width: 9px;
    height: 9px;
    align-self: center;
    justify-self: center;
    border: 1.5px solid var(--kt-line-2);
    border-radius: 2px;
}
.jl-tile__check li.je-splneno { color: var(--kt-ink); }
.jl-tile__check li.je-splneno::before {
    border-color: var(--kt-green);
    background: var(--kt-green);
}
.jl-tile__check li.je-chybi::before { border-color: var(--kt-live); }

/* ─── Počet přihlášených ───
   Pilulka se při nule NEVYKRESLUJE — „0 přihlášených" je horší než nic
   a zároveň by otevírala prázdný seznam. Místo ní stojí poctivá věta. */
.jl-tile__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, .06);
    border: 0;
    border-radius: var(--kt-r-pill);
    color: var(--kt-ink);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s ease;
}
.jl-tile__pill:hover,
.jl-tile__pill:focus-visible { background: rgba(255, 255, 255, .12); }
.jl-tile__pill svg { color: var(--kt-ink-3); flex: none; }
.jl-tile__pill-cap { color: var(--kt-ink-3); font-weight: 600; }
.jl-tile__none {
    margin: 0;
    font-size: 12.5px;
    color: var(--kt-ink-3);
}

/* ─── Spodní pás: cena a akce ─── */
.jl-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
    padding: 13px 16px 15px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.jl-tile__foot--stack { flex-direction: column; align-items: stretch; }
.jl-tile__foot--stack .jl-tile__cta { width: 100%; }

/* Cena v coinech je VŽDY v --kt-coin a nikdy zelená: zelená patří jen
   akci, oranžová jen měně. */
.jl-tile__price {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    min-width: 0;
    color: var(--kt-coin);
}
.jl-tile__price svg { align-self: center; flex: none; }
.jl-tile__price b {
    font-family: var(--font-accent);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.jl-tile__price span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-ink-3);
}

/* Jediná zelená v celé kartě. */
.jl-tile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    background: var(--kt-green);
    border: 0;
    border-radius: var(--kt-r-sm);
    color: var(--go-ink);
    font-family: var(--font-accent);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.jl-tile__cta:hover:not(:disabled),
.jl-tile__cta:focus-visible:not(:disabled) {
    background: var(--kt-green-h);
    transform: translateY(-1px);
}
.jl-tile__cta:focus-visible { outline: 2px solid var(--kt-green); outline-offset: 2px; }
/* Nesplněná podmínka MĚNÍ NÁZEV tlačítka („Chybí ti 200 coinů"), takže
   tiché tlačítko není hádanka — divák z něj přečte, co mu schází. */
.jl-tile__cta:disabled {
    background: var(--kt-el);
    color: var(--kt-ink-2);
    cursor: not-allowed;
    transform: none;
}
.jl-tile__cta--done {
    background: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: var(--kt-ink-2);
}

/* Vedle primárního tlačítka nikdy nestojí druhé barevné tlačítko, jen
   textový odkaz nebo poznámka. */
.jl-tile__note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--kt-ink-3);
}
.jl-tile__note a { color: var(--kt-green); font-weight: 700; text-decoration: none; }
.jl-tile__note a:hover { text-decoration: underline; }

/* Promo řádek u soutěže: vysázený řádek za hranou, ne plocha. */
.jl-tile__promo {
    margin: 12px 16px 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--jl-tile-hue);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kt-ink-2);
}
.jl-tile__promo b {
    margin-left: 6px;
    font-family: var(--font-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--kt-ink);
}

@media (max-width: 34rem) {
    .jl-tile__head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .jl-tile__mark { width: 48px; height: 48px; }
    .jl-tile__fact { flex-direction: column; align-items: flex-start; gap: 3px; }
    .jl-tile__fact dd { text-align: left; }
    .jl-tile__foot { align-items: stretch; }
    .jl-tile__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .jl-tile:hover, .jl-tile__cta:hover { transform: none; }
    .jl-tile, .jl-tile * { transition: none; }
}

/* ─── Poctivý prázdný stav ───
   Když neběží nic, stránka to řekne rovnou a nabídne, co dál. Není to
   dlaždice s obrázkem, je to odstavec za hranou. */
.jl-empty {
    margin: 0;
    padding: 18px 0 18px 16px;
    border-left: 3px solid var(--kt-line-2);
    color: var(--kt-ink-2);
}
.jl-empty > * { margin: 0; max-width: 62ch; }
.jl-empty > * + * { margin-top: 10px; }
.jl-empty strong { color: var(--kt-ink); font-weight: 700; }
.jl-empty a { color: var(--kt-green); font-weight: 700; text-decoration: none; }
.jl-empty a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   Globální sticky bar — kostra
   Komponenta: includes/components/tokyo-sticky.php
   ──────────────────────────────────────────────────────────────────────────
   Tady zůstalo jen chování: kde lišta visí, jak vyjíždí a kolik místa si
   vyžádá dole na stránce. VZHLED popisuje jedno místo, karty-parts/70-coiny.css
   (.rtb2). Dřív byl rozepsaný tady (fialová plocha var(--head), zelený
   horní okraj, rozostření pozadí, zelený svit pod logem), pak ho přemalovala
   karty.css přes pět !important a nakonec ho přemalovala 70-coiny.css přes
   dalších dvanáct. Tři vrstvy, jedna lišta.
   ══════════════════════════════════════════════════════════════════════════ */
.rtb {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rtb[hidden] { display: none; }
.rtb.rtb-in { transform: translateY(0); }

/* Odsazení pro fixní lištu, ať nepřekrývá poslední řádek stránky.
   Třídu .has-rtb nasazuje a snímá script.js podle toho, zda je lišta vidět. */
/* Lišta je teď deska s 12px mezerou pod sebou; odsazení ji musí pokrýt
   včetně té mezery, jinak trvale zakryje poslední řádek obsahu. */
.has-rtb body { padding-bottom: 96px; }
@media (max-width: 640px) {
    .has-rtb body { padding-bottom: 86px; }
}
@media (max-width: 360px) {
    /* Pod 360 px sjede CTA pod částku, lišta je zase dvouřádková. */
    .has-rtb body { padding-bottom: 132px; }
}

.rtb-logo { flex: none; width: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
    .rtb { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   GLOBÁLNÍ ZÁMEK BARVY TEXTU TLAČÍTEK PŘI HOVERU
   Na přání: žádné tlačítko nemění barvu textu při najetí myší. Necháváme
   ostatní hover efekty (pozadí, rámeček, posun, glow) — měníme jen to, že
   text zůstává ve své klidové barvě. !important je tu cíleně, protože
   shared.css se načítá PŘED page-*.css, takže by jinak prohrál kaskádu.
   Pinujeme hover/focus barvu = klidová barva daného tlačítka.
   ──────────────────────────────────────────────────────────────────── */
/* Tlačítka .btn-*, .jl-btn-*, .cta-btn-h a .bonus-more-link tady mívala
   patnáct zámků s !important. Barvu textu při najetí nemění už ve zdroji,
   takže není co zamykat. */

/* prezentační stránky partnerů (/tokyo, /dedek, /partneri) */
.cp-cta:hover, .cp-cta:focus-visible { color: var(--go-ink) !important; }
.prt-card-cta:hover, .prt-card-cta:focus-visible { color: var(--go-ink) !important; }
.prt-card-cta-ghost:hover, .prt-card-cta-ghost:focus-visible { color: var(--c) !important; }

/* tlačítka „Získat bonus" v mega-menu (u každého casina) */
.mega-casino-cta:hover, .mega-casino-cta:focus-visible { color: #fff !important; }

/* stránka /o-nas — social tlačítka (bez vlastní barvy = dědí) + blog link */
.social-btn.twitch:hover, .social-btn.instagram:hover, .social-btn.twitter:hover { color: inherit !important; }
.ab-blog-all-link:hover, .ab-blog-all-link:focus-visible { color: var(--alpha-white-40) !important; }

/* sleduj nás — social tlačítka drží klidovou barvu */
.stream-btn--twitch:hover { color: #fff !important; }
.stream-btn--youtube:hover { color: var(--live) !important; }

/* shop / coiny / soutěže — komunitní tlačítka */
.sw-checkin-btn:hover { color: #53fc18 !important; }
.sw-earn-btn:hover { color: var(--alpha-cyan-50) !important; }
.gw-winners-more-btn:hover { color: var(--alpha-white-50) !important; }
.earn-info-btn:hover { color: var(--alpha-white-60) !important; }

/* admin panel tlačítka — drží svou klidovou barvu */
.btn-ghost:hover { color: var(--text2) !important; }
.aof-btn:hover { color: rgba(255,255,255,0.45) !important; }
.page-btn:hover { color: var(--muted) !important; }
.cal-nav-btn:hover { color: var(--text2) !important; }
.sidebar-collapse-btn:hover { color: var(--muted) !important; }
.btn-danger:hover { color: inherit !important; }

/* herní stránky (/hry/*) — quick-bet a random tlačítka */
.gmb-bet-quick button:hover { color: rgba(255,255,255,.8) !important; }
.gmb-rand:hover { color: rgba(255,255,255,.85) !important; }
.gmb-back:hover { color: rgba(255,255,255,.6) !important; }

/* ════════════════════════════════════════════════════════════════════════
   VELKÉ MONITORY — větší obsah, širší kontejnery
   Web je „designed for 2K"; nad 2000/2560px zvětšíme písmo i šířku obsahu,
   ať web nekončí úzký uprostřed s prázdnými kraji.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 2000px) {
    html { font-size: 17px; }
    :root { --container-width: 1560px; --container-wide: 1800px; }
    .jl-container { max-width: 1860px; }
}
@media (min-width: 2560px) {
    html { font-size: 18px; }
    :root { --container-width: 1780px; --container-wide: 2040px; }
    .jl-container { max-width: 2100px; }
}

/* ── Rank chip (level odznak vedle jména: účastníci, výherci, žebříček her) ── */
.jl-rank{
    display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
    padding:1px 7px 1px 5px;border-radius:0;line-height:1;white-space:nowrap;
    background:color-mix(in srgb, var(--rc,#53fc18) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--rc,#53fc18) 42%, transparent);
}
.jl-rank-ico{font-size:.82em;line-height:1;}
.jl-rank-lv{font-size:.72em;font-weight:800;color:var(--rc,#53fc18);letter-spacing:.02em;}
.jl-rank-nm{font-size:.72em;font-weight:700;color:var(--rc,#53fc18);margin-left:2px;}

/* ============================================================================
   PARTNERSKÁ DVOJICE (.hpx-*) — markup includes/components/hero-pair-row.php
   ----------------------------------------------------------------------------
   Je to karta, takže platí totéž co pro bonusovou kartu: žádná vlastní plocha,
   žádný rádius, žádná záře pod nadpisem a žádné dvě značkové palety. Partnera
   pozná zelená levá hrana, odznak je první vysázený řádek a zelené je v celém
   bloku jen jedno tlačítko.
   ============================================================================ */
.hpx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

.hpx,
.hpx--tokyo,
.hpx--dedek {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: none;
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-green);
    border-radius: 0;
}

/* Značková záře nad nadpisem byla druhá vrstva pozadí. */
.hpx-bg { display: none; }

/* Odznak jde nad logo a stává se prvním řádkem obsahu (pravidlo 7). */
.hpx-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.hpx-logo { max-height: 34px; width: auto; }

.hpx-badge {
    order: -1;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
    white-space: nowrap;
}

/* Nabídka je největší prvek karty. Hierarchii nese velikost, ne barva. */
.hpx-offer { margin: 0 0 8px; }

.hpx-offer-big {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--kt-ink);
    font-variant-numeric: tabular-nums;
}

.hpx-offer-rest {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--kt-ink-2);
}

.hpx-sub {
    margin: 0 0 18px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--kt-ink-2);
    max-width: 68ch;
}

/* Odrážky ve visutém sloupci (pravidlo 4). */
.hpx-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.hpx-list li {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--kt-ink-2);
    max-width: 68ch;
}

.hpx-list li::before {
    content: "—";
    color: var(--kt-ink-2);
}

/* Patka: kód nebo štítky vlevo, akce vpravo. */
.hpx-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 1.6ch;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--kt-line);
}

.hpx-promo,
.hpx-tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.6ch;
    font-family: var(--font-display);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-ink-2);
}

/* Kód je hlasitý sazbou, ne barevnou pilulkou. */
.hpx-promo strong {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--kt-ink);
    font-size: 1.15em;
    letter-spacing: 0.1em;
}

.hpx-tags span {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
}

.hpx-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6ch;
    padding: 0.85em 1.6em;
    background: var(--kt-green);
    border: 1px solid var(--kt-green);
    border-radius: 0;
    color: #08090a;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.hpx-cta:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
}

.hpx-more {
    width: 100%;
    font-size: 0.82rem;
    color: var(--kt-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hpx-more:hover { color: var(--kt-ink); }

.hpx :focus-visible { outline: 2px solid var(--kt-green); outline-offset: 2px; }

@media (max-width: 900px) {
    .hpx-row { grid-template-columns: 1fr; gap: 16px; }
    .hpx-cta { margin-left: 0; width: 100%; justify-content: center; }
}