/* ==========================================================================
   no-gamstop.com — hlavni stylesheet
   --------------------------------------------------------------------------
   Postaveno na CSS promennych, takze zmena barvy webu = zmena 3 radku.
   Vse je v jednom souboru zamerne: web ma byt rychly a bez externich
   zavislosti (zadne Google Fonts, zadne CDN — vsechno se nacita lokalne).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root {
    /* Podklad — tmava modra, pusobi duveryhodne a "kasinove", ale ne lacine */
    --bg:        #0a0f1e;
    --bg-2:      #0f1730;
    --surface:   #141d38;
    --surface-2: #1a2444;
    --line:      #253054;
    --line-soft: #1c2647;

    /* Text */
    --text:      #eef2fb;
    --text-2:    #a9b4d0;
    --text-3:    #7180a3;

    /* Zlata — akcentni barva pro CTA a hodnoceni */
    --gold:      #f5c451;
    --gold-2:    #e0a92c;
    --gold-soft: #3a2f14;

    /* Zelena pro pozitiva, cervena pro negativa */
    --green:     #3ddc97;
    --green-bg:  #0d2f24;
    --red:       #ff6b6b;
    --red-bg:    #331616;
    --amber:     #ffb84d;
    --amber-bg:  #33260f;

    /* Tvary */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --r-xl: 26px;

    /* Stiny */
    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh:    0 4px 16px rgba(0,0,0,.35);
    --sh-lg: 0 18px 50px rgba(0,0,0,.5);
    --glow:  0 0 0 1px rgba(245,196,81,.25), 0 8px 30px rgba(245,196,81,.12);

    --wrap: 1180px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16.5px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    /* Jemny svetelny prechod v pozadi — aby web nebyl plochy */
    background-image:
        radial-gradient(1100px 500px at 15% -8%, rgba(245,196,81,.07), transparent 60%),
        radial-gradient(900px 460px at 88% 2%, rgba(61,220,151,.05), transparent 62%);
    background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); margin-top: 1.7em; }
p  { margin: 0 0 1.1em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
strong { color: #fff; font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

::selection { background: var(--gold); color: #10131c; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--gold); color: #10131c; padding: .7rem 1.1rem;
    font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.15rem; }

/* --------------------------------------------------------------------------
   3. TOPBAR + HLAVICKA
   -------------------------------------------------------------------------- */
.topbar {
    background: #070b16;
    border-bottom: 1px solid var(--line-soft);
    font-size: .82rem;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 36px; flex-wrap: wrap; }
.topbar-item { color: var(--text-3); display: inline-flex; align-items: center; gap: .45rem; }
.topbar-badge {
    background: var(--red); color: #fff; font-weight: 800; font-size: .7rem;
    padding: .1rem .38rem; border-radius: 4px; letter-spacing: .02em;
}
.topbar-help { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.topbar-help:hover { color: var(--gold); }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(10,15,30,.9);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 68px; }

.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo-mark {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(145deg, var(--gold), var(--gold-2));
    color: #10131c; font-weight: 800; font-size: .95rem;
    display: grid; place-items: center; letter-spacing: -.02em;
    box-shadow: 0 4px 14px rgba(245,196,81,.28);
}
.logo-text { font-size: 1.16rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.logo-text em { font-style: normal; color: var(--gold); }

/* Menu */
.main-nav { display: flex; align-items: center; gap: .25rem; }
.nav-group { position: relative; }
.nav-head {
    display: block; padding: .55rem .8rem; border-radius: var(--r-sm);
    font-size: .92rem; font-weight: 550; color: var(--text-2); cursor: default;
    white-space: nowrap;
}
.nav-group:hover .nav-head { color: var(--gold); background: var(--surface); }

.nav-drop {
    position: absolute; top: 100%; left: 0; min-width: 268px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: .5rem; box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
/* Dva sloupce u velkych skupin (guides, games, reviews) */
.nav-drop-2col {
    display: grid; grid-template-columns: 1fr 1fr;
    min-width: 420px; gap: 0 .4rem;
}
.nav-drop-2col a:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Dropdowny u praveho okraje zarovnat DOPRAVA, jinak pretečou za viewport
   a zpusobi vodorovny scroll na cele strance (hlavicka je vsude).
   Tyká se poslednich skupin v menu (Games, Reviews). */
.nav-group:nth-last-of-type(-n+2) .nav-drop { left: auto; right: 0; }
/* Pojistka pro maly viewport — dropdown nikdy nesmi byt sirsi nez okno. */
.nav-drop { max-width: calc(100vw - 2rem); }
.nav-drop a {
    display: block; padding: .5rem .65rem; border-radius: var(--r-sm);
    color: var(--text-2); font-size: .9rem; line-height: 1.4; text-decoration: none;
}
.nav-drop a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.nav-cta {
    margin-left: .5rem; padding: .58rem 1.1rem; border-radius: 999px;
    background: linear-gradient(145deg, var(--gold), var(--gold-2));
    color: #10131c !important; font-weight: 700; font-size: .9rem;
    text-decoration: none !important; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(245,196,81,.25);
}
.nav-cta:hover { filter: brightness(1.07); }

/* Mobilni hamburger — ciste CSS, bez JavaScriptu */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: .5rem; }
.nav-burger span {
    display: block; width: 22px; height: 2px; background: var(--text);
    border-radius: 2px; margin: 4px 0; transition: transform .2s;
}

@media (max-width: 940px) {
    .nav-burger { display: block; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--bg-2); border-bottom: 1px solid var(--line);
        padding: .5rem .75rem 1rem;
        max-height: 0; overflow: hidden; transition: max-height .28s ease;
    }
    .nav-toggle:checked ~ .main-nav { max-height: 80vh; overflow-y: auto; }
    .nav-head { color: var(--text-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; padding: .9rem .5rem .3rem; }
    .nav-drop {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; background: transparent; padding: 0;
        min-width: 0;
    }
    .nav-drop a { padding: .5rem; }
    .nav-cta { margin: .9rem .5rem 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   4. LAYOUT SEKCI
   -------------------------------------------------------------------------- */
main { display: block; }

.section { padding: 2.6rem 0; }
.section-tight { padding: 1.6rem 0; }

.hero {
    padding: 3.2rem 0 2.4rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(245,196,81,.045), transparent 70%);
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); background: var(--gold-soft);
    border: 1px solid rgba(245,196,81,.25);
    padding: .32rem .8rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.hero h1 { max-width: 20ch; margin-bottom: .5rem; }
.hero-lead {
    font-size: clamp(1.02rem, 1.7vw, 1.16rem);
    color: var(--text-2); max-width: 62ch; margin-bottom: 1.6rem;
}
.hero-stats {
    display: flex; flex-wrap: wrap; gap: .6rem 2.2rem;
    margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat b { font-size: 1.5rem; color: var(--gold); line-height: 1.1; letter-spacing: -.02em; }
.hero-stat span { font-size: .82rem; color: var(--text-3); }

/* Dvousloupcovy layout clanek + sidebar */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 3rem; align-items: start; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; gap: 2rem; } }

.prose { max-width: 74ch; }
.prose h2 { padding-top: .3em; }
.prose h3 { color: var(--text); }

/* --------------------------------------------------------------------------
   5. SROVNAVACI TABULKA — to nejdulezitejsi na webu
   -------------------------------------------------------------------------- */
.table-title { margin-bottom: 1rem; }

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh);
    -webkit-overflow-scrolling: touch;
}

.cmp-table { width: 100%; border-collapse: collapse; min-width: 880px; }

.cmp-table thead th {
    background: var(--bg-2);
    color: var(--text-3);
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    text-align: left; padding: .85rem .9rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.cmp-table tbody tr { border-bottom: 1px solid var(--line-soft); transition: background .13s; }
.cmp-table tbody tr:last-child { border-bottom: 0; }
.cmp-table tbody tr:hover { background: rgba(245,196,81,.035); }
.cmp-table tbody tr.row-top { background: linear-gradient(90deg, rgba(245,196,81,.075), transparent 55%); }

.cmp-table td { padding: 1rem .9rem; vertical-align: middle; }

.col-rank { width: 46px; }
.col-casino { min-width: 190px; }
.col-bonus { min-width: 165px; }
.col-pay { min-width: 140px; }
.col-time, .col-wag { min-width: 96px; white-space: nowrap; }
.col-rating { min-width: 130px; }
.col-cta { min-width: 150px; }

/* Na uzsich obrazovkach tabulka bez vodorovneho posuvniku:
   skryjeme mene dulezite sloupce (platby, vyplata, wagering) a nechame
   kasino / bonus / hodnoceni / CTA. Hodnoty tech sloupcu jsou popsane
   v textu pod tabulkou a v recenzich. */
@media (max-width: 760px) {
    .cmp-table { min-width: 0; }
    .cmp-table .col-pay,
    .cmp-table .col-time,
    .cmp-table .col-wag { display: none; }
    .cmp-table td { padding: .8rem .6rem; }
    .col-casino { min-width: 150px; }
    .col-bonus { min-width: 130px; }
    .col-rating { min-width: 92px; }
    .col-cta { min-width: 118px; }
}

.rank-badge {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-2);
    font-weight: 700; font-size: .85rem;
}
.row-top .rank-badge { background: linear-gradient(145deg, var(--gold), var(--gold-2)); color: #10131c; }

.casino-cell { display: flex; align-items: center; gap: .7rem; }
.casino-mark {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center;
    font-weight: 800; font-size: .9rem; letter-spacing: -.02em;
    color: #fff;
    /* Barva se odvodi z nazvu kasina (viz components.php) */
    background: linear-gradient(145deg,
        hsl(var(--mark-hue, 40) 62% 46%),
        hsl(var(--mark-hue, 40) 62% 32%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--sh-sm);
}
.casino-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.casino-name { font-weight: 650; color: #fff; }
.casino-lic { font-size: .76rem; color: var(--text-3); }

.ribbon {
    display: inline-block; margin-top: .35rem;
    background: var(--gold-soft); color: var(--gold);
    border: 1px solid rgba(245,196,81,.3);
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .12rem .45rem; border-radius: 4px;
}

.bonus-main { display: block; font-weight: 650; color: var(--gold); line-height: 1.35; }
.bonus-sub  { display: block; font-size: .76rem; color: var(--text-3); }

.payout { color: var(--green); font-weight: 600; font-size: .9rem; }
.wag    { color: var(--text-2); font-size: .9rem; }

.rating-num { display: block; font-weight: 700; font-size: 1.05rem; color: #fff; }
.review-link { display: inline-block; margin-top: .2rem; font-size: .78rem; color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.review-link:hover { color: var(--gold); }

/* Hvezdicky */
.stars { display: inline-flex; gap: 1px; font-size: .82rem; line-height: 1; }
.star { position: relative; display: inline-block; }
.star-bg { color: var(--line); }
.star-fg {
    position: absolute; inset: 0; overflow: hidden;
    color: var(--gold); white-space: nowrap;
}

/* Platebni odznaky */
.pay-row { display: flex; flex-wrap: wrap; gap: .28rem; }
.pay-badge {
    display: inline-grid; place-items: center;
    min-width: 30px; height: 22px; padding: 0 .34rem;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 5px;
    font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    color: var(--text-2); white-space: nowrap;
}
.pay-row-lg .pay-badge { min-width: 42px; height: 30px; font-size: .74rem; }

/* CTA tlacitka */
.cta {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem; text-align: center;
    padding: .62rem 1.15rem; border-radius: 999px;
    background: linear-gradient(145deg, var(--gold), var(--gold-2));
    color: #10131c !important; font-weight: 750; font-size: .92rem;
    text-decoration: none !important; line-height: 1.2;
    box-shadow: 0 5px 18px rgba(245,196,81,.24);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
    border: 0;
}
.cta:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 24px rgba(245,196,81,.34); }
.cta:active { transform: translateY(0); }
.cta-sub { font-size: .64rem; font-weight: 500; opacity: .72; letter-spacing: .01em; }
.cta-sm { padding: .5rem .95rem; font-size: .85rem; }
.cta-block { width: 100%; padding: .85rem 1.2rem; font-size: 1rem; border-radius: var(--r); }
.cta-block .cta-sub { font-size: .7rem; }

/* Kasino, se kterym zatim nemame affiliate dohodu. Neutralni popisek,
   nikdy odkaz do prazdna — viz cta_cell() v inc/functions.php. */
.cta-pending {
    display: inline-block; padding: .45rem .7rem;
    border: 1px dashed var(--line); border-radius: 999px;
    font-size: .76rem; color: var(--text-3); white-space: nowrap;
    cursor: help;
}

/* --------------------------------------------------------------------------
   6. KARTY KASIN
   -------------------------------------------------------------------------- */
/* Mrizka karet kasin. Bez grid-template-columns by vsechny karty byly
   jedna obri kolona pres celou sirku (1180 px) — proto responzivni auto-fill. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.1rem; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

.casino-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.4rem;
    box-shadow: var(--sh);
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.casino-card:hover { border-color: rgba(245,196,81,.35); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.casino-card-top { border-color: rgba(245,196,81,.4); box-shadow: var(--glow); }

.card-rank {
    position: absolute; top: -10px; left: 1.4rem;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text-2); font-size: .72rem; font-weight: 800;
    padding: .18rem .55rem; border-radius: 999px;
}
.casino-card-top .card-rank { background: linear-gradient(145deg, var(--gold), var(--gold-2)); color: #10131c; border-color: transparent; }

.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.card-id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.card-name { margin: 0; font-size: 1.2rem; }
.card-rating { display: flex; align-items: center; gap: .45rem; }
.card-score { font-size: .82rem; color: var(--text-3); font-weight: 600; }

.card-bonus {
    margin-left: auto; text-align: right;
    display: flex; flex-direction: column; gap: .1rem;
    padding-left: 1rem; border-left: 1px solid var(--line);
}
.card-bonus-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.card-bonus-value { font-weight: 700; color: var(--gold); font-size: 1.02rem; line-height: 1.3; }

.card-facts {
    display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
    list-style: none; margin: 1.1rem 0; padding: .9rem 0;
    border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.card-facts li { display: flex; flex-direction: column; margin: 0; }
.card-facts span { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.card-facts strong { font-size: .92rem; }

.card-pay { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card-pay-label { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.card-pros { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .35rem; }
.card-pros li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--text-2); margin: 0; }
.card-pros li::before {
    content: ""; position: absolute; left: 0; top: .58em;
    width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(-45deg);
}

.card-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-review { font-size: .88rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.card-review:hover { color: var(--gold); }

@media (max-width: 620px) {
    .card-bonus { margin-left: 0; text-align: left; padding-left: 0; border-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   7. PLUSY / MINUSY
   -------------------------------------------------------------------------- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.8rem 0; }
@media (max-width: 700px) { .proscons { grid-template-columns: 1fr; } }

.pc-box { border-radius: var(--r); padding: 1.15rem 1.25rem; border: 1px solid var(--line); background: var(--surface); }
.pc-box h3 { margin: 0 0 .7rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .07em; }
.pc-box ul { list-style: none; padding: 0; margin: 0; }
.pc-box li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .93rem; color: var(--text-2); }
.pc-box li:last-child { margin-bottom: 0; }
.pc-box li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pc-pro { border-color: rgba(61,220,151,.28); background: linear-gradient(180deg, rgba(61,220,151,.05), transparent); }
.pc-pro h3 { color: var(--green); }
.pc-pro li::before { content: "✓"; color: var(--green); }
.pc-con { border-color: rgba(255,107,107,.26); background: linear-gradient(180deg, rgba(255,107,107,.05), transparent); }
.pc-con h3 { color: var(--red); }
.pc-con li::before { content: "✕"; color: var(--red); }

/* --------------------------------------------------------------------------
   8. FAQ
   -------------------------------------------------------------------------- */
.faq { margin: 2.6rem 0; }
.faq-item {
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); margin-bottom: .55rem; overflow: hidden;
}
.faq-item[open] { border-color: rgba(245,196,81,.3); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem; cursor: pointer; font-weight: 600;
    list-style: none; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-2); }
.faq-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.faq-icon::before, .faq-icon::after {
    content: ""; position: absolute; background: var(--gold); border-radius: 2px;
    transition: transform .2s;
}
.faq-icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq-icon::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-body { padding: 0 1.2rem 1.2rem; color: var(--text-2); font-size: .95rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. HODNOCENI PO KRITERIICH
   -------------------------------------------------------------------------- */
.scores { display: grid; gap: .55rem; margin: 1.5rem 0; }
.score-row { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: .9rem; }
@media (max-width: 560px) { .score-row { grid-template-columns: 105px 1fr 40px; gap: .6rem; } }
.score-label { font-size: .88rem; color: var(--text-2); }
.score-bar { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.score-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 999px; }
.score-val { font-size: .88rem; font-weight: 700; text-align: right; color: var(--gold); }

/* --------------------------------------------------------------------------
   10. UPOZORNENI
   -------------------------------------------------------------------------- */
.notice {
    border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.5rem 0;
    border: 1px solid var(--line); background: var(--surface);
    font-size: .92rem;
}
.notice p { margin: 0; color: var(--text-2); }
.notice-title { display: block; margin-bottom: .3rem; color: var(--text); }
.notice-info   { border-color: rgba(245,196,81,.28); background: rgba(245,196,81,.045); }
.notice-info .notice-title { color: var(--gold); }
.notice-warn   { border-color: rgba(255,184,77,.32); background: var(--amber-bg); }
.notice-warn .notice-title { color: var(--amber); }
.notice-good   { border-color: rgba(61,220,151,.3); background: var(--green-bg); }
.notice-good .notice-title { color: var(--green); }
.notice-danger { border-color: rgba(255,107,107,.32); background: var(--red-bg); }
.notice-danger .notice-title { color: var(--red); }

/* --------------------------------------------------------------------------
   11. OBSAHOVA NAVIGACE
   -------------------------------------------------------------------------- */
.toc {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1.8rem 0;
}
.toc-title { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .3rem; font-size: .92rem; }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   12. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar { display: grid; gap: 1.1rem; position: sticky; top: 88px; }
@media (max-width: 1000px) { .sidebar { position: static; } }

.side-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.15rem 1.25rem;
}
.side-card h3 { margin: 0 0 .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.side-card ul { list-style: none; padding: 0; margin: 0; }
.side-card li { margin-bottom: .5rem; font-size: .9rem; }
.side-card li:last-child { margin-bottom: 0; }
.side-card a { color: var(--text-2); }
.side-card a:hover { color: var(--gold); }

/* Mini zebricek v sidebaru */
.mini-list { display: grid; gap: .7rem; }
.mini-item { display: flex; align-items: center; gap: .7rem; }
.mini-item .casino-mark { width: 34px; height: 34px; border-radius: 9px; font-size: .78rem; }
.mini-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-name { font-weight: 620; font-size: .92rem; color: var(--text); }
.mini-bonus { font-size: .78rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   13. TABULKY OBSAHU (fakta o kasinu)
   -------------------------------------------------------------------------- */
.facts-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .93rem; }
.facts-table th, .facts-table td { padding: .72rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.facts-table th { color: var(--text-3); font-weight: 600; width: 38%; font-size: .87rem; }
.facts-table td { color: var(--text); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 0; }
.facts-table tbody tr:hover { background: rgba(255,255,255,.015); }

/* Tabulky S HLAVICKOU maji vic sloupcu — pevnych 38 % na prvnim sloupci
   by zmacklo posledni (textovy) sloupec do uzkeho, vysokeho sloupce.
   Nechame sirku na prohlizeci (table-layout: auto). Klic-hodnota tabulky
   hlavicku nemaji, ty si drzi 38 % vyse. */
.facts-table thead th { width: auto; }

/* Na malych obrazovkach zmensit bunky, aby se tabulka vesla bez posuvniku. */
@media (max-width: 760px) {
    .facts-table { font-size: .85rem; }
    .facts-table th, .facts-table td { padding: .5rem .45rem; }
    .facts-table th { width: auto; }
}

/* CTA blok nahore v recenzi (a jeho poznamka s klicovymi cisly) */
.review-cta-top { margin: 1.4rem 0 1.6rem; }
.review-cta-top .cta { width: 100%; }
.review-cta-note {
    margin: .6rem 0 0; text-align: center;
    font-size: .85rem; color: var(--text-3);
}
/* Prokliknute jmeno kasina v tabulce (vede pres /go/<slug>/) */
.casino-name-link { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.casino-name-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Rychle "verdict" kolecko u recenze */
.verdict {
    display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
    background: linear-gradient(135deg, rgba(245,196,81,.09), transparent 65%);
    border: 1px solid rgba(245,196,81,.3); border-radius: var(--r-lg);
    padding: 1.5rem; margin: 1.8rem 0;
}
@media (max-width: 600px) { .verdict { grid-template-columns: 1fr; text-align: center; } }
.verdict-score {
    display: grid; place-items: center;
    width: 92px; height: 92px; border-radius: 50%;
    background: linear-gradient(145deg, var(--gold), var(--gold-2));
    color: #10131c; font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em;
    box-shadow: 0 8px 26px rgba(245,196,81,.3);
}
.verdict-score small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .06em; opacity: .7; }
.verdict h3 { margin: 0 0 .35rem; }
.verdict p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* --------------------------------------------------------------------------
   14. AGE BAR + PATICKA
   -------------------------------------------------------------------------- */
.age-bar {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.05rem 1.25rem; margin: 2.5rem 0;
}
.age-badge {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--red); color: #fff; font-weight: 800; font-size: 1rem;
}
.age-bar p { margin: 0; font-size: .88rem; color: var(--text-2); }

/* Blok "Sources" — primarni zdroje pod clankem (GEO / E-E-A-T) */
.sources {
    margin: 2.5rem 0 0; padding: 1.2rem 1.35rem;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--gold); border-radius: var(--r);
}
.sources-title { font-size: 1rem; margin: 0 0 .35rem; }
.sources-intro { margin: 0 0 .7rem; font-size: .85rem; color: var(--text-3); max-width: 74ch; }
.sources-list { margin: 0; padding-left: 1.1rem; }
.sources-list li { font-size: .88rem; color: var(--text-2); margin-bottom: .3rem; line-height: 1.5; }
.sources-list a { color: var(--gold); }

.site-footer {
    margin-top: 3rem;
    background: #070b16;
    border-top: 1px solid var(--line);
    padding: 2.8rem 0 1.5rem;
}
.footer-inner { display: grid; grid-template-columns: 1.15fr 2fr; gap: 2.5rem; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } }

.logo-footer { margin-bottom: .9rem; }
.footer-about { font-size: .88rem; color: var(--text-3); max-width: 42ch; margin: 0; }

.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem; }
.footer-col h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin: 0 0 .7rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .42rem; }
.footer-col a { font-size: .86rem; color: var(--text-2); }
.footer-col a:hover { color: var(--gold); }

.footer-legal { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); }
.footer-legal .notice { font-size: .82rem; background: transparent; }
.legal-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
    margin-top: 1.2rem; font-size: .82rem; color: var(--text-3);
}
.legal-bottom p { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.legal-links a { color: var(--text-3); }
.legal-links a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   15. BYLINE + DROBECKY
   -------------------------------------------------------------------------- */
.byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
    font-size: .84rem; color: var(--text-3);
    padding-bottom: 1.2rem; margin: 0 0 1.6rem;
    border-bottom: 1px solid var(--line-soft);
}
.byline strong { color: var(--text-2); }

/* --------------------------------------------------------------------------
   16. DALSÍ CTENI / MRIZKA ODKAZU
   -------------------------------------------------------------------------- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: 1.6rem 0; }
.link-tile {
    display: block; padding: 1rem 1.15rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.link-tile:hover { border-color: rgba(245,196,81,.35); transform: translateY(-2px); text-decoration: none; }
.link-tile strong { display: block; color: var(--text); font-size: .96rem; margin-bottom: .2rem; }
.link-tile span { font-size: .84rem; color: var(--text-3); line-height: 1.45; }

/* --------------------------------------------------------------------------
   17. STEPS (cislovane kroky)
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: .9rem; }
.steps li {
    counter-increment: step; position: relative;
    padding: 1rem 1.2rem 1rem 3.4rem; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    font-size: .94rem; color: var(--text-2);
}
.steps li::before {
    content: counter(step);
    position: absolute; left: 1rem; top: 1rem;
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gold-soft); color: var(--gold);
    font-weight: 800; font-size: .8rem;
    border: 1px solid rgba(245,196,81,.3);
}
.steps li strong { display: block; color: var(--text); margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   18. PRISTUPOVA BRANA (jen na testu, nez se web presune na domenu)
   -------------------------------------------------------------------------- */
.gate {
    display: grid; place-items: center; min-height: 100vh; padding: 2rem;
}
.gate-box {
    width: 100%; max-width: 380px; text-align: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 2.4rem 1.8rem; box-shadow: var(--sh-lg);
}
.gate-box h1 { font-size: 1.5rem; margin-bottom: .4rem; }
.gate-box p { color: var(--text-3); font-size: .9rem; }
.gate-box input {
    width: 100%; padding: .8rem 1rem; margin: .9rem 0;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--text); font-size: 1rem; font-family: inherit;
}
.gate-box input:focus { outline: none; border-color: var(--gold); }
.gate-box button {
    width: 100%; padding: .8rem 1rem; border: 0; border-radius: var(--r-sm);
    background: linear-gradient(145deg, var(--gold), var(--gold-2));
    color: #10131c; font-weight: 700; font-size: .98rem; font-family: inherit; cursor: pointer;
}
.gate-err { color: var(--red); font-size: .85rem; margin-top: .6rem; }

/* --------------------------------------------------------------------------
   19. TLACENI / TISK
   -------------------------------------------------------------------------- */
@media print {
    .topbar, .site-header, .site-footer, .sidebar, .cta, .age-bar { display: none !important; }
    body { background: #fff; color: #000; }
}