/**
 * ============================================
 * KICK SKIN
 * ============================================
 * Poslední vrstva kaskády. Zdědili jsme po Respinners „neo cyberpunk" vzhled:
 * neonové záře, silné gradienty, velké zaoblení, průsvitné skleněné karty.
 * Kick vypadá přesně naopak: plochý, tichý, chladná tmavá šeď, jedna zelená,
 * tvrdý kontrast, malé rádiusy.
 *
 * Tenhle soubor sráží zděděné efekty zpátky k tomu, jak vypadá kick.com,
 * aniž by se přepisovalo 50 stylesheetů. Načítá se v header.php jako POSLEDNÍ,
 * takže přebíjí i perf.css.
 *
 * Doložená paleta Kicku: #00e701 (akcent), #0b0e0f (stránka), #191b1f (plochy),
 * #24272c (vyvýšené plochy a linky), #474f54 (ztlumené).
 *
 * Když bude potřeba vrátit původní neonový vzhled, stačí odebrat <link>
 * v header.php. Nic jiného na tomhle souboru nezávisí.
 */

:root {
    /* Plochy podle Kicku, pojmenované rolí, ne odstínem. Hodnoty si berou
       z variables.css: tenhle soubor barvy pojmenovává, nedeklaruje je. */
    --k-page:      var(--bg);
    --k-surface:   var(--panel);
    --k-elevated:  var(--raise);
    --k-line:      var(--rail);
    --k-muted:     var(--paper-3);
    --k-green:     var(--go);
    --k-green-hi:  var(--go-hi);
    --k-live:      var(--live);

    /* Skleněné karty měly průsvit a rozostření. Kick má plnou plochu. */
    --bg-card:        var(--k-surface);
    --bg-card-hover:  var(--k-elevated);
    --bg-card-alt:    var(--k-surface);
    --glass-card:     var(--k-surface);
    --glass-card-hover: var(--k-elevated);
    --bg-glass:       var(--k-surface);
    --bg-glass-strong: var(--k-page);
    --bg-glass-light: var(--k-surface);
    --card-bg:        var(--k-surface);

    /* Linky místo svítících okrajů. */
    --glass-border:       var(--k-line);
    --glass-border-hover: rgba(var(--go-rgb), 0.45);
    --glass-border-glow:  rgba(var(--go-rgb), 0.6);
    --border:             var(--k-line);
    --border-glow:        rgba(var(--go-rgb), 0.45);

    /* Kick nezáří. Zbyla po záři jenom vlasová linka. */
    --glow-cyan:          0 0 0 1px rgba(var(--go-rgb), 0.25);
    --glow-cyan-strong:   0 0 0 1px rgba(var(--go-rgb), 0.45);
    --glow-cyan-text:     none;
    --glow-magenta:       none;
    --glow-magenta-strong: none;
    --glow-pink:          none;
    --glow-purple:        none;
    --glow-gold:          0 0 0 1px rgba(var(--go-rgb), 0.25);
    --glow-gold-strong:   0 0 0 1px rgba(var(--go-rgb), 0.45);
    --glow-jlcasino:      0 0 0 1px rgba(var(--go-rgb), 0.35);
    --glow-primary:       var(--glow-cyan);
    --glow-primary-strong: var(--glow-cyan-strong);
    --glow-secondary:     none;
    --glow-secondary-strong: none;
    --shadow-neon:        var(--lift-sm);

    /* Ploché stíny: hloubka se dělá plochou, ne rozmazáním. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: var(--lift-sm);
    --shadow-xl: var(--lift);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: var(--lift-sm);

    /* Gradienty zůstávají, ale jen mezi dvěma zelenými. Přechod přes jiný
       odstín by okamžitě vypadal jako cizí značka. */
    --gradient-cyber:          linear-gradient(135deg, var(--go) 0%, var(--go-hi) 100%);
    --gradient-cyber-reverse:  linear-gradient(135deg, var(--go-hi) 0%, var(--go) 100%);
    --gradient-cyber-vertical: linear-gradient(180deg, var(--go) 0%, var(--go-hi) 100%);
    --gradient-primary:        var(--gradient-cyber);
    --gradient-primary-reverse: var(--gradient-cyber-reverse);
    --gradient-neon-accent:    var(--gradient-cyber);
    --gradient-neon-pink:      var(--gradient-cyber);
    --gradient-neon-purple:    var(--gradient-cyber);
    --gradient-jlcasino:       var(--gradient-cyber);
    --gradient-jlcasino-hover: var(--gradient-cyber-reverse);
    --gradient-gold:           var(--gradient-cyber);
    --gradient-glass:          linear-gradient(145deg, var(--k-surface) 0%, var(--k-surface) 100%);
    --gradient-glass-hover:    linear-gradient(145deg, var(--k-elevated) 0%, var(--k-elevated) 100%);
    --gradient-glass-border:   linear-gradient(135deg, rgba(var(--go-rgb), 0.35), rgba(var(--go-rgb), 0.12));
    --gradient-card:           linear-gradient(145deg, var(--k-surface) 0%, var(--k-surface) 100%);
    --gradient-card-cyber:     linear-gradient(145deg, rgba(var(--go-rgb), 0.06) 0%, rgba(var(--go-rgb), 0.02) 100%);

    --text-muted: var(--k-muted);
}

/* Tlačítka tady byla přebíjená přes !important. Teď jsou přepsaná ve
   zdroji — components/buttons.css a core/shared.css — a tenhle blok
   nemá co držet. */

/* ============================================
   PLOCHY
   ============================================
   Rozostřené sklo pryč: Kick má neprůhledné karty s tenkou linkou.
   Blur je navíc na slabších strojích to nejdražší, co stránka dělá. */
/* .gw-card a .jl-modal odsud odešly. Karta soutěže se tímhle pravidlem
   plnila plochou --k-surface, tedy TŘETÍM odstínem pozadí, a `border`
   zkratkou s !important si přitom umazala 3px hranu vlevo, kterou jí dává
   karty.css. Karta odměny (.shop-card) v seznamu nikdy nebyla, takže dvě
   karty téhož webu vypadaly jako dva systémy. Podle DESIGN-JLCASINO.md
   karta není plocha (pravidlo 3) a hranu nese stav (pravidlo 2), takže
   obě teď berou stejný plášť z karty.css. Modál plochu mít smí, ale
   dostane ji z components/modals.css, kde k ní patří i hrana. */
.jl-card,
.idx-card,
.mega-panel,
.catalog-card,
.review-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--k-surface) !important;
    border: 1px solid var(--k-line) !important;
}

.jl-card:hover,
.idx-card:hover,
.catalog-card:hover {
    background: var(--k-elevated) !important;
    border-color: rgba(var(--go-rgb), 0.35) !important;
}

/* ============================================
   TEXT
   ============================================
   Gradientový text je hezký efekt, ale Kick ho nemá; nadpisy jsou bílé
   a zvýrazňuje se jedním zeleným slovem. */
/* POZOR: .jl-section-label není jen malý eyebrow, na homepage do sebe balí
   celý <h2>. Obarvit celý blok na zeleno tedy znamená zelený nadpis přes půl
   obrazovky. Zelená patří jen samotnému popisku a zvýrazněnému slovu. */
.jl-section-label,
.section-label {
    background: none !important;
    text-shadow: none !important;
}
/* Osm !important, kterými se odsud hlavička sekce přebarvovala (blá nadpis,
   zelené zvýrazněné slovo, zelený popisek), je pryč. Tvar hlavičky sekce
   drží core/shared.css a zvýrazněné slovo se podtrhává, neobarvuje. */
.jl-section-label > span:not(:has(*)),
.section-label > span:not(:has(*)) {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Gradientní výplň textu v nadpisech se ruší. `-webkit-text-fill-color`
   se vrací na `currentColor`, ne na zelenou: kdyby tu zůstala zelená,
   obarví se i spanům, které nesou pořadí nebo ikonu, ne zvýrazněné slovo. */
h1 span, h2 span, h3 span,
.grad-text, .cp-grad, .text-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* Zvýrazněné slovo v nadpisu splývá s nadpisem. Zelené podtržení dělalo
   z nadpisu druhou „klikací" věc; zelená nese jen akci a aktivní záložku.
   Důraz nese váha řezu, ne barva ani linka. */
h1 > span:not([class]),
h2 > span:not([class]),
h3 > span:not([class]),
.grad-text, .cp-grad, .text-gradient {
    color: inherit;
    text-decoration: none;
}

/* ============================================
   LIVE ODZNAK
   ============================================
   Jediný prvek, který schválně NENÍ zelený. Na zeleném webu by zelené
   „LIVE" splynulo se vším ostatním a přestalo nést informaci. */
/* .jl-live si tvar i barvy drzi v core/shared.css - pilulka s pulzujici
   teckou podle produkcniho CSS jamierewards.gg. Tenhle blok ji prebijel
   na hranaty cerveny obdelnik, takze se offline stav vykresloval stejne
   jako zive vysilani. Zbyle tridy jsou zdedene a markup uz nemaji. */
.live-badge,
.is-live .live-dot {
    border-radius: var(--kt-r-sm);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ============================================
   POZADÍ
   ============================================
   Zděděné pozadí mělo tři patra: animovaný WebGL „Signal Field", čtyři
   fialovo-azurové radiální gradienty na body::before/::after a plovoucí slot
   symboly. Všechno pryč, byl to poznávací znak jiného webu a Kick za obsahem
   žádnou scénu nemá.
   Shader vypíná config.php (SHADER_BG=false); zbylé dvě vrstvy se ruší tady,
   BEZ ohledu na ten přepínač, jinak by se po vypnutí shaderu vrátily.

   Náhrada je záměrně tichá: plochý podklad, jemná mřížka a jeden zelený
   nádech u horní hrany, aby plocha nebyla úplně mrtvá. Nic se nehýbe. */
:root {
    --nav-plate: rgba(11, 14, 15, 0.92);
    --nav-plate-scrolled: rgba(11, 14, 15, 0.97);
    --nav-ico: var(--paper-3);
}

/* Plocha i vrstvy pozadí patří core/skin.css, který se načítá později.
   Tady stávala mřížka a nádech na !important — nová vrstva se kvůli nim
   vůbec nedostala ke slovu a barva plochy zůstávala na staré --k-page. */

/* Plovoucí slot symboly a orby byly dekorace neonového vzhledu. */
.floating-slots-container,
.floating-slot,
.cyber-grid,
.orb { display: none !important; }

/* Zbytky WebGL vrstvy, kdyby se SHADER_BG někdy zapnul zpět. */
.sbg { display: none !important; }

/* ============================================
   HUSTOTA
   ============================================
   Respinners staví stránku z vysokých sekcí s obrovskými nadpisy, mezi nimi
   hodně vzduchu. Kick je opak: hustá mřížka karet, malé nadpisy, málo místa.
   Bez tohohle bloku zůstane rozvržení „respinnersovské", i když barvy sedí. */
/* Rytmus. Sekce potřebují dýchat víc, než měly, ale míň než původní 120px,
   které z každé sekce dělaly samostatnou obrazovku. */
section { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (max-width: 700px) { section { padding-top: 38px !important; padding-bottom: 38px !important; } }

/* Nadpisy sekcí. Verzálky přes dva řádky se špatně čtou a H1 na /bonusy
   zabíral třetinu první obrazovky. Zpátky na běžné psaní a rozumnou velikost. */
/* .jl-section-label / .bp-section-label už tu nejsou: velikost, váhu
   i prostrkání hlavičky sekce určuje core/shared.css, bez !important. */
.idx-main h1, .idx-secondary h1, .jl-head h1,
.idx-main h2, .idx-secondary h2, .jl-head h2, .jl-section h2 {
    text-transform: none !important;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem) !important;
    letter-spacing: -.015em !important;
    line-height: 1.18 !important;
    text-wrap: balance;
    max-width: 24ch;
}
.jl-head p, .idx-secondary > .jl-container > p {
    font-size: .94rem;
    max-width: 66ch;
    color: var(--k-ink-2);
}

/* Delší text v obsahových blocích potřebuje míru řádku, jinak se čte špatně. */
.ed-body p, .landing-editorial p, .jl-prose p { max-width: 70ch; }

/* Odznak vedle nadpisu je šedá dlaždice jako kategorie na Kicku — a to už
   říká zdrojové pravidlo .jl-count-pill v core/shared.css, ve stejném bloku
   jako hlavička sekce. Šest !important odsud odešlo i s nimi: rádius 4px se
   rozcházel s tokenem --kt-r-sm (6px), 0,66rem je pod root font-size 14,5px
   jen 9,6px, .jl-stat je dnes buňka pásu čísel a .idx-badge nemá markup. */

/* Odkaz „vše →“ si barvu drzi ve zdrojovem pravidle (page-index.css).
   Tenhle blok ji prebijel pres !important na #6b757b, coz je 4.11:1 na
   pozadi stranky a WCAG AA neprojde. Prebijeni pryc, zdroj si poradi sam. */

/* Zalomení hlavičky sekce na úzkém displeji (odkaz „všechny …" spadne pod
   nadpis) řeší zdrojové pravidlo .jl-section-label / .jl-see-all
   v core/shared.css. Tenhle blok ho jen kopíroval přes tři !important na
   třídy .idx-see-all a .jl-head-link, které v žádné šabloně nejsou, a k tomu
   srovnával .idx-live-grid — mřížku, kterou homepage po přestavbě záhlaví
   nevykresluje. */

/* ============================================================================
   ROZPOČET NA ZELENOU
   ============================================================================
   Největší chyba zděděného vzhledu nebyla barva, ale to, že ji měl VŠECHNO.
   Na /bonusy svítilo zeleně osm tlačítek, dvaatřicet číslovaných kroků, všechny
   štítky i všechny nadpisy naráz. Když křičí každý prvek, nekřičí žádný a oko
   nemá kam jít první.

   Pravidlo: zelená patří jen třem věcem.
     1) primární akci (jedno tlačítko v bloku, ne všechna)
     2) jednomu číslu, které je pointou karty (částka bonusu)
     3) aktivní položce v navigaci
   Všechno ostatní je neutrální šeď. Zelené je pak méně, ale je vidět.
   ============================================================================ */

:root {
    --k-ink:      var(--paper);   /* hlavní text */
    --k-ink-2:    var(--paper-2); /* druhý plán */
    --k-chip:     var(--raise);   /* neutrální štítek */
    --k-chip-br:  var(--rail-2);
    --k-ease:     cubic-bezier(.32, .72, 0, 1);
}

/* Kroky, štítky, nadpis karty, logo, CTA i tvar samotné karty se dřív
   přebíjely tady. Zdrojová pravidla jsou přepsaná v core/shared.css
   a components/cards.css, takže tenhle úsek zmizel celý. */

/* ============================================
   POJISTKA PROTI PŘETOKU DO ŠÍŘKY
   ============================================
   Mřížky a flexy mají implicitní min-width:auto, takže je dlouhé slovo nebo
   široká tabulka umí roztlačit přes okraj a stránka začne jezdit do stran.
   Tohle drží obsah uvnitř, aniž by se sahalo na overflow celého dokumentu
   (to by rozbilo position:sticky). */
.jl-container, .idx-container, main.main-content { max-width: 100%; }

/* .idx-live-grid a .idx-live-card odsud vypadly: sekci „Kdo právě vysílá"
   na homepage nahradil řádek pilulek v záhlaví, takže obě třídy už žádná
   šablona nevypisuje. */
.jl-grid, .bonus-grid, .gw-grid, .kick-switch {
    min-width: 0;
}
.jl-card > * { min-width: 0; }

img, video, canvas, iframe { max-width: 100%; }

/* Široká tabulka se posouvá uvnitř sebe, ne celou stránkou.
   .ed-table a .ed-table-wrap si to řeší samy v components/editorial.css:
   obal má overflow-x a tabulka minimální šířku, takže se sloupce
   nezmáčknou na jedno písmeno na řádek. Tady zůstává jen starší
   .table-scroll, který na editorial vrstvu nepřešel. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================
   OVLÁDÁNÍ A PŘÍSTUPNOST
   ============================================
   Web se dá projít i klávesnicí. Zděděný vzhled na to neměl viditelný stav,
   takže se při tabování nedalo poznat, kde uživatel je. */
/* Prstenec je bily, ne zeleny. Na zelenem tlacitku byl zeleny prstenec
   neviditelny, tedy presne tam, kde ho clovek na klavesnici potrebuje
   nejvic. Bila projde na kazdem pozadi, ktere web pouziva. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 3px;
    border-radius: var(--kt-r-sm);
}
/* Myš nemá dostávat rámeček, ta si vystačí s hoverem. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(var(--go-rgb), .28); color: #fff; }

/* Odkaz v běžném textu má být poznat i bez barvy, ne jen zeleně. */
.ed-body a:not([class]),
.landing-editorial a:not([class]),
.jl-prose a:not([class]) {
    color: var(--k-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--go-rgb), .45);
}
.ed-body a:not([class]):hover,
.landing-editorial a:not([class]):hover,
.jl-prose a:not([class]):hover { text-decoration-color: var(--k-green); }

/* Kdo si vypnul animace, nemá dostat žádné posuny ani přechody. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Pilulky a filtry: ploché šedé dlaždice, aktivní zelená. */
.jl-chip, .filter-btn, .bonus-filter-btn {
    background: var(--k-surface) !important;
    border: 1px solid var(--k-line) !important;
    border-radius: var(--r-chip) !important;
    box-shadow: none !important;
    color: var(--paper-2) !important;
}
.jl-chip:hover, .filter-btn:hover, .bonus-filter-btn:hover { border-color: var(--k-green) !important; color: var(--paper) !important; }
.filter-btn.active, .bonus-filter-btn.active {
    background: var(--k-green) !important;
    border-color: var(--k-green) !important;
    color: var(--go-ink) !important;
}