/* ==========================================================================
   notgamstop.net — hlavní stylesheet
   --------------------------------------------------------------------------
   Vizuální směr: novinová datová stránka. Teplý papír, inkoust, ostré rohy,
   pravítka místo karet. Čísla v tabulkovém mono, nadpisy patkovým písmem.

   Záměrně jiné než no-gamstop.com:
     nogs        tmavá modrá + zlatá, karty se stíny, radius 8–26 px, centrované
     tento web   světlý papír + inkoust, pravítka, radius 0–2 px, levá kolejnice

   Bez externích fontů a CDN — vše lokální, kvůli rychlosti a CSP.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root {
    /* Podklad — teplý papír, ne šedá */
    --paper:     #f8f6f1;
    --paper-2:   #f1ede4;
    --surface:   #ffffff;
    --surface-2: #fbfaf7;

    /* Inkoust — teplá černá, ne modrošedá */
    --ink:       #16140f;
    --ink-2:     #3d3931;
    --ink-3:     #6b655a;

    /* Pravítka */
    --rule:      #ddd7c9;
    --rule-2:    #c4bcaa;

    /* Akcent — institucionální námořní modř (důvěra, ne kasinová zlatá) */
    --accent:      #16324f;
    --accent-2:    #24507a;
    --accent-soft: #e4ebf2;

    /* Signální barvy — oddělené od akcentu */
    --ok:        #1f6b4a;
    --ok-bg:     #e3efe8;
    --warn:      #8a5a12;
    --warn-bg:   #f6ecd6;
    --bad:       #8c2f2f;
    --bad-bg:    #f7e6e4;

    /* Typografie */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

    /* Rozměry */
    --wrap: 1180px;
    --rail: 232px;
    --gap: 2.4rem;

    /* Ostré rohy — to je podpis tohohle webu */
    --r: 2px;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. ZÁKLAD
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 0.6em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 2.2em 0 0.55em; }
h3 { font-size: 1.18rem; margin: 1.7em 0 0.4em; }
h4 { font-size: 1.02rem; margin: 1.3em 0 0.3em; }

p { margin: 0 0 1.05em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

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

code, kbd, samp {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--paper-2);
    padding: 0.1em 0.35em;
    border-radius: var(--r);
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.2rem 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT — kolejnice vlevo, obsah vpravo
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section { padding: 2.4rem 0; }
.section-tight { padding: 1.4rem 0; }

/* Dvousloupcový layout: sticky kolejnice + text */
.layout {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    padding: 2rem 0 4rem;
}

.rail {
    position: sticky;
    top: 1.2rem;
    font-size: 0.86rem;
}

.rail-block { margin-bottom: 1.5rem; }

.rail-title {
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.rail-list li {
    border-bottom: 1px solid var(--rule);
}

.rail-list a {
    display: block;
    padding: 0.42rem 0;
    color: var(--ink-2);
    line-height: 1.35;
}

.rail-list a:hover {
    color: var(--accent);
    text-decoration: none;
}

.rail-list a.is-current {
    color: var(--accent);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
    padding-left: 0.6rem;
}

.rail-facts {
    border-top: 2px solid var(--ink);
    padding-top: 0.7rem;
}

.rail-fact {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.34rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.82rem;
}

.rail-fact dt { color: var(--ink-3); }
.rail-fact dd { margin: 0; font-family: var(--mono); font-weight: 600; }

@media (max-width: 900px) {
    .layout {
        /* minmax(0, 1fr), ne 1fr: bez toho ma sloupec min-content podlahu
           a siroka tabulka (min-width 520px) ho nafoukne pres celou obrazovku. */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.4rem;
    }
    .rail {
        position: static;
        order: 2;
        border-top: 1px solid var(--rule);
        padding-top: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   4. HLAVIČKA
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.6rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0; }

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.topbar {
    background: var(--ink);
    color: #cfc9bb;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 1.25rem;
    max-width: var(--wrap);
    margin: 0 auto;
}

.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #fff;
}

.topbar-badge::before {
    content: "18+";
    font-family: var(--mono);
    font-size: 0.68rem;
    background: #fff;
    color: var(--ink);
    padding: 0.06rem 0.3rem;
    border-radius: 1px;
    font-weight: 700;
}

.topbar-help { color: #b7b1a3; }
.topbar-help a { color: #fff; text-decoration: underline; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.logo:hover { text-decoration: none; }

.logo-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--r);
}

.logo-text em {
    font-style: normal;
    color: var(--accent);
}

/* navigace */
.main-nav { display: flex; align-items: center; gap: 0.15rem; }

.nav-group { position: relative; }

.nav-head {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    border: 0;
    background: none;
    border-radius: var(--r);
    cursor: pointer;
}

.nav-head:hover {
    background: var(--paper-2);
    color: var(--ink);
    text-decoration: none;
}

.nav-group:hover .nav-head { color: var(--accent); }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: var(--r);
    padding: 0.42rem 0.65rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--ink);
}

@media (max-width: 1100px) {
    .nav-toggle { display: inline-block; }
    .main-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        background: var(--surface);
        border-bottom: 1px solid var(--rule);
        padding: 0.6rem 1.25rem 1rem;
        z-index: 50;
    }
    .main-nav.is-open { display: flex; }
    .header-inner { position: relative; }
    .nav-head { display: block; padding: 0.5rem 0; font-weight: 600; }
    .nav-sub { display: block !important; }
}

.nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-top: 2px solid var(--ink);
    padding: 0.4rem 0;
    z-index: 40;
    box-shadow: 0 12px 28px -18px rgba(22, 20, 15, 0.5);
}

.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub { display: block; }

.nav-group:focus-within .nav-head { color: var(--accent); }

.nav-sub a {
    display: block;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--ink-2);
    line-height: 1.3;
}

.nav-sub a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
    .nav-head { display: block; width: 100%; text-align: left; padding: 0.5rem 0; font-weight: 600; }
    .nav-sub { position: static; border: 0; box-shadow: none; padding: 0 0 0 0.8rem; min-width: 0; }
}

/* --------------------------------------------------------------------------
   5. TYPOGRAFIE OBSAHU
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }

.prose > p:first-of-type { font-size: 1.09rem; color: var(--ink-2); }

.prose h2 { padding-top: 0.6rem; border-top: 1px solid var(--rule); }

.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.05em; }
.prose li { margin-bottom: 0.35em; }

.prose blockquote {
    margin: 1.4rem 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 3px solid var(--accent);
    color: var(--ink-2);
    font-style: italic;
}

.lede {
    font-size: 1.1rem;
    color: var(--ink-2);
    max-width: 64ch;
    margin-bottom: 1.6rem;
}

.eyebrow {
    margin: 0 0 0.7rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0 0 1.8rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 0.78rem;
    color: var(--ink-3);
}

.byline-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.byline-sep { color: var(--rule-2); }

/* --------------------------------------------------------------------------
   6. TABULKY — hlavní prvek webu
   -------------------------------------------------------------------------- */
.table-title {
    margin: 1.8rem 0 0.7rem;
    font-family: var(--serif);
    font-size: 1.25rem;
}

.table-scroll {
    /* min-width: 0 je nutne uvnitr gridu — jinak si sloupec drzi
       min-content sirku tabulky a pretika cely dokument. */
    min-width: 0;
    overflow-x: auto;
    border-top: 2px solid var(--ink);
    margin-bottom: 1.6rem;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--surface);
}

th {
    text-align: left;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--rule-2);
    background: var(--paper-2);
    white-space: nowrap;
}

td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

tbody tr:hover td { background: var(--surface-2); }

.num, .money, .rating-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   SROVNÁVACÍ ŽEBŘÍČEK — není to tabulka
   --------------------------------------------------------------------------
   Nogs má sloupcovou tabulku (Rank / Casino / Bonus / Payments / Payout /
   Wagering / Rating / CTA). Tenhle web má číslované karty: pořadí je
   největší prvek vlevo, každé kasino je samostatná karta s vlastní
   hierarchií — kasino → bonus → fakta → hodnocení + CTA. Na 390 px se
   neskrývá žádný datový údaj a nic se neposouvá, protože žádné sloupce
   nejsou (mizí jen popisek „Welcome bonus" a hvězdičky — číslo hodnocení
   zůstává).

   <ol class="cmp-list">
     <li class="cmp-entry">
       <span class="cmp-rank">01</span>
       <div class="cmp-main">
         <div class="cmp-head"> odkaz na recenzi (logo + název + licence) </div>
         <p class="cmp-bonus"> bonus + minimální vklad </p>
         <dl class="cmp-facts"> wagering / payout / platby </dl>
         <div class="cmp-side"> hodnocení + CTA </div>
       </div>
     </li>
   </ol>

   Široký displej: .cmp-main je dvousloupcová mřížka — vlevo identita,
   bonus a fakta, vpravo .cmp-side s hodnocením a CTA.
   Do 720 px: .cmp-side se rozpadne (display:contents) a jeho děti se
   stanou položkami mřížky .cmp-main — hodnocení se vrátí nahoru k názvu
   kasina, CTA jde pod fakta. DOM pořadí se nemění, nic se neskrývá. */
.cmp-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    /* Karty mají vlastní okraje, takže horní linka není potřeba —
       jinak by se karta dotýkala silné linky a vypadalo to jako tabulka. */
}

.cmp-entry {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0 1rem;
    align-items: start;
    padding: 1.15rem 1rem 1.25rem;
    /* Karta, ne řádek tabulky — musí ladit se zbytkem webu
       (pravítka, ostré rohy, žádné stíny). */
    background: var(--surface);
    border: 1px solid var(--rule);
    border-bottom-width: 1px;
    margin-bottom: 0.6rem;
}

.cmp-entry:hover { border-color: var(--rule-2); }

/* První místo není "karta se stínem" — jen jemný podklad a silná levá
   hrana, aby se odlišilo bez změny rozměrů. */
.cmp-entry.is-top {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Pořadové číslo — dominantní prvek, mono, tabulkové číslice.
   Barva je --ink-3, ne --rule-2: číslo musí být čitelné (kontrast
   k papíru 5,6:1), i když je jen dekorativní (aria-hidden). */
.cmp-rank {
    font-family: var(--mono);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    padding-top: 0.12rem;
}
.cmp-entry.is-top .cmp-rank { color: var(--accent); }

.cmp-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    column-gap: 1.1rem;
    align-items: start;
    min-width: 0;
}

/* Levá část: identita kasina, bonus, fakta. */
.cmp-head,
.cmp-bonus,
.cmp-facts,
.cmp-flag { grid-column: 1; }

.cmp-head { min-width: 0; }

.cmp-id { min-width: 0; }

.cmp-id .casino-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.15;
}

/* Pravý sloupec: hodnocení nahoře, CTA pod ním. */
.cmp-side {
    grid-column: 2;
    grid-row: 1 / span 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-width: 0;
}

.cmp-score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 0.15rem;
    text-align: right;
}

.cmp-score-num {
    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cmp-score-max { font-size: 0.72rem; color: var(--ink-3); }
.cmp-score .stars { flex-basis: 100%; justify-content: flex-end; font-size: 0.72rem; margin-top: 0.2rem; }

/* Bonus — jeden velký řádek, ne buňka ve sloupci. */
.cmp-bonus {
    grid-column: 1;
    margin: 0.55rem 0 0;
}
.cmp-bonus-kicker {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.cmp-bonus-text {
    display: block;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}
.cmp-bonus-sub {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.cmp-flag { margin: 0.45rem 0 0; }

/* Fakta — dvojice popisek/hodnota v <dl>, čte je čtečka i oko.
   Popisek a hodnota jsou na jednom řádku ("Wagering 35x"), takže se
   vejdou i do 350px a blok zůstane krátký. */
.cmp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.35rem;
    margin: 0.65rem 0 0;
    min-width: 0;
}
.cmp-fact {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}
.cmp-fact dt {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.cmp-fact dd {
    margin: 0;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.cmp-fact-pay dd { display: flex; align-items: center; }
.cmp-list .pay-badge { width: 26px; height: 17px; }
.cmp-list .pay-row { gap: 0.2rem; }

/* CTA je součástí pravého sloupce (.cmp-side), ne samostatná buňka. */
.cmp-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* CTA musí zůstat ve svém sloupci — dlouhý podtitul (18+ · T&Cs…) se
   zalamuje, ne roztahuje. Bez toho přetéká celý dokument vpravo. */
.cmp-actions .cta {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    box-sizing: border-box;
}
.cmp-actions .cta-label,
.cmp-actions .cta-sub { display: block; white-space: normal; }

/* Úzké displeje: hodnocení se vrátí k názvu kasina a CTA jde pod fakta.
   .cmp-side se rozpadne (display:contents) a jeho děti se stanou přímými
   položkami mřížky — DOM pořadí zůstává, mění se jen rozvržení. */
@media (max-width: 720px) {
    .cmp-entry {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0 0.7rem;
        padding: 0.95rem 0.8rem 1rem;
    }
    .cmp-rank { font-size: 1.2rem; padding-top: 0.1rem; }

    .cmp-main {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head  score"
            "bonus bonus"
            "facts facts"
            "cta   cta";
        column-gap: 0.6rem;
        row-gap: 0;
    }
    .cmp-head  { grid-area: head; }
    .cmp-bonus { grid-area: bonus; }
    .cmp-facts { grid-area: facts; }
    .cmp-side  { display: contents; }
    .cmp-score { grid-area: score; align-self: start; }
    .cmp-actions { grid-area: cta; margin-top: 0.9rem; }
    .cmp-score .stars { display: none; }

    /* Na mobilu je každý pixel drahý: kicker "Welcome bonus" je jen
       popisek, který nad bonusem nic nepřidá — nadpis karty ho nahradí. */
    .cmp-bonus-kicker { display: none; }
    .cmp-bonus { margin-top: 0.5rem; }

    /* Fakta pod sebou, každé přes celou šířku — popisek a hodnota zůstanou
       na jednom řádku a dlouhé hodnoty (payout) se nemusí lámat do tří řádků. */
    .cmp-facts {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }
    .cmp-fact-pay { grid-column: 1 / -1; }

    .cmp-list .pay-badge { width: 30px; height: 20px; }
}

@media (max-width: 420px) {
    .cmp-entry { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 0.55rem; }
    .cmp-rank { font-size: 1.05rem; }
    .cmp-id .casino-name { font-size: 1.02rem; }
    .cmp-score-num { font-size: 1.1rem; }
}

.casino-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.casino-cell-link { color: inherit; text-decoration: none; }
.casino-cell-link:hover { text-decoration: none; }
.casino-cell-link:hover .casino-name { text-decoration: underline; }

.casino-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule-2);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ink-2);
    border-radius: var(--r);
    overflow: hidden;
}

/* Logo ma siroky pomer 160x64 — ctvercovy box by ho zmackl.
   Box se proto roztahne; fallback s inicialami zustava ctvercovy. */
.casino-mark-logo {
    width: 92px;
    height: 38px;
    padding: 4px 6px;
    /* Bez rámečku bílé logo na bílé kartě zmizí a tmavé nemá hranici.
       Papírový podklad + linka drží obojí čitelné v obou režimech. */
    background: var(--paper-2);
    border: 1px solid var(--rule);
}

/* Tmavá loga (Winner, GoldenBet) potřebují světlejší podklad, aby
   nesplynula s papírovým rámem. Třídu přidává casino_mark(). */
.casino-mark-logo--light { background: #fff; }

.casino-mark-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Tmava loga (Winner, GoldenBet) dostanou jemne sedy podklad, aby
   nesplynula s bilym pozadim bunky. Tridu pridava casino_mark(). */
.casino-mark-logo--light { background: var(--paper-2); }

@media (max-width: 720px) {
    .casino-mark-logo { width: 72px; height: 30px; padding: 2px 3px; }
}

.casino-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.casino-name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.casino-lic { font-size: 0.72rem; color: var(--ink-3); }
.casino-review-hint { font-size: 0.7rem; color: var(--accent); }

/* CTA — ostré, tmavé, žádné zlaté */
.cta {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    padding: 0.5rem 0.95rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--r);
    text-align: center;
    white-space: nowrap;
    transition: background 0.12s;
}

.cta:hover { background: var(--accent); color: #fff; text-decoration: none; }

.cta-sm { padding: 0.38rem 0.7rem; font-size: 0.74rem; }
.cta-ghost {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--rule-2);
}
.cta-ghost:hover { background: var(--paper-2); color: var(--ink); }

.cta-inactive {
    display: inline-block;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
    color: var(--ink-3);
    border: 1px dashed var(--rule-2);
    border-radius: var(--r);
    white-space: nowrap;
}

/* hodnocení */
.stars { display: inline-flex; gap: 0.06em; font-size: 0.82rem; }
.stars .star { position: relative; display: inline-block; line-height: 1; }
.stars .star-bg { color: var(--rule-2); }
.stars .star-fg {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--ink);
}
.stars .on { color: var(--ink); }
.rating-num { font-size: 0.86rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   7. KARTY KASIN (recenze)
   -------------------------------------------------------------------------- */
.casino-card {
    border: 1px solid var(--rule);
    border-top: 2px solid var(--ink);
    background: var(--surface);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.casino-card.is-top { border-top-color: var(--accent); }

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.card-id { display: flex; align-items: center; gap: 0.7rem; }
.card-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.card-rank { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }

.card-score { text-align: right; }
.card-score .rating-num { font-size: 1.3rem; }

.card-bonus {
    padding: 0.65rem 0.8rem;
    background: var(--paper-2);
    border-left: 2px solid var(--accent);
    margin-bottom: 0.8rem;
}

.card-bonus-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.card-bonus-value { font-weight: 600; font-size: 0.95rem; }

.card-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
    font-size: 0.8rem;
}

.card-fact span { display: block; color: var(--ink-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.card-fact strong { font-weight: 600; }

.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   8. PRO/CONS, FAQ, POZNÁMKY
   -------------------------------------------------------------------------- */
.proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.2rem 0;
}

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

.pc-box {
    border: 1px solid var(--rule);
    padding: 0.8rem 0.9rem;
    background: var(--surface);
}

.pc-box h4 {
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pc-pro h4 { color: var(--ok); }
.pc-con h4 { color: var(--bad); }

.pc-box ul { margin: 0; padding-left: 1.05rem; font-size: 0.88rem; }
.pc-box li { margin-bottom: 0.3rem; }

.faq { border-top: 2px solid var(--ink); }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
    flex: 0 0 auto;
    font-family: var(--mono);
    color: var(--accent);
    font-weight: 700;
    line-height: 1.5;
}

.faq-item[open] .faq-icon::after { content: "−"; }
.faq-icon::after { content: "+"; }

.faq-body { padding: 0 0 0.9rem 1.5rem; font-size: 0.92rem; color: var(--ink-2); }
.faq-body p:last-child { margin-bottom: 0; }

.notice {
    border: 1px solid var(--rule-2);
    border-left: 3px solid var(--accent);
    background: var(--surface);
    padding: 0.8rem 1rem;
    margin: 1.3rem 0;
    font-size: 0.9rem;
}

.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice-bad { border-left-color: var(--bad); background: var(--bad-bg); }
.notice-ok { border-left-color: var(--ok); background: var(--ok-bg); }

.notice-title {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

/* zdroje */
.sources {
    margin: 2.2rem 0 0;
    padding: 1rem 1.1rem;
    background: var(--paper-2);
    border-top: 1px solid var(--rule-2);
    font-size: 0.85rem;
}

.sources-title {
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sources-list { list-style: none; margin: 0; padding: 0; }
.sources-list li { padding: 0.25rem 0; border-bottom: 1px solid var(--rule); }
.sources-list li:last-child { border-bottom: 0; }
.sources-list a { font-weight: 500; }
.sources-list .note { color: var(--ink-3); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   9. MŘÍŽKA ODKAZŮ (link-grid)
   -------------------------------------------------------------------------- */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
    margin: 1.4rem 0;
    list-style: none;
    padding: 0;
}

.link-grid a {
    display: block;
    padding: 0.75rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
    color: var(--ink);
    line-height: 1.35;
}

.link-grid a:hover {
    background: var(--surface-2);
    border-left-color: var(--ink);
    text-decoration: none;
}

.link-grid .lg-title { display: block; font-weight: 600; font-size: 0.92rem; }
.link-grid .lg-sub { display: block; font-size: 0.76rem; color: var(--ink-3); margin-top: 0.1rem; }

/* --------------------------------------------------------------------------
   10. STATISTIKY / FAKTA
   -------------------------------------------------------------------------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--rule);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    margin: 1.6rem 0;
}

.stat-cell {
    background: var(--paper);
    padding: 0.85rem 0.9rem;
}

.stat-k {
    display: block;
    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-l {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   11. PATIČKA
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: #b8b2a4;
    margin-top: 3rem;
    font-size: 0.85rem;
}

.footer-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.4rem 1.25rem 1.4rem;
}

.footer-brand { margin-bottom: 1.8rem; max-width: 46ch; }

.logo-footer { color: var(--paper); }
.logo-footer .logo-mark { background: var(--paper); color: var(--ink); }
.logo-footer em { color: #9fbcd8; }

.footer-about { margin: 0.7rem 0 0; color: #9d9789; font-size: 0.83rem; }

.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid #332f27;
}

.footer-col h3 {
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8d8779;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.3rem; }
.footer-col a { color: #cfc9bb; font-size: 0.83rem; }
.footer-col a:hover { color: #fff; }

.footer-legal {
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid #332f27;
    font-size: 0.76rem;
    color: #8d8779;
}

.legal-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.7rem; }
.legal-links a { color: #b8b2a4; }

.legal-bottom { line-height: 1.5; }
.legal-bottom a { color: #d8d3c6; text-decoration: underline; text-underline-offset: 2px; }
.legal-bottom a:hover { color: #fff; }

.age-badge {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #5a5448;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: #cfc9bb;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.age-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 0;
    padding: 0.8rem 1rem;
    background: var(--paper-2);
    border-left: 3px solid var(--bad);
    font-size: 0.82rem;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   12. POMOCNÉ
   -------------------------------------------------------------------------- */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.muted { color: var(--ink-3); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.pay-row { display: flex; flex-wrap: nowrap; gap: 0.18rem; align-items: center; }

.pay-badge {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--ink-2);
    vertical-align: middle;
}

.pay-badge svg { width: 100%; height: 100%; display: block; }

/* V žebříčku jsou ikony menší než v běžném textu (velikost a mezery
   řeší blok .cmp-list výš; tady zůstává jen fallback pro ostatní místa). */

/* Textovy fallback pro neznamou metodu */
.pay-badge-text {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--ink-2);
    white-space: nowrap;
}

/* breadcrumbs */
.crumbs {
    font-size: 0.76rem;
    color: var(--ink-3);
    margin-bottom: 0.9rem;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 0.35rem; color: var(--ink-3); }

/* responzivní doplňky */
@media (max-width: 720px) {
    /* Žebříček nemá sloupce, takže se na mobilu nic neskrývá — jen se
       zúží číslo pořadí a platby se zalomí pod fakta. */
    .layout { padding-top: 1.2rem; }
}

@media (max-width: 480px) {
    body { font-size: 15.5px; }
    .header-inner { padding: 0.75rem 1rem; }
    .topbar-inner { font-size: 0.68rem; }
    .topbar-help { display: none; }
}

/* --------------------------------------------------------------------------
   13. ROZPAD HODNOCENÍ (score_breakdown)
   -------------------------------------------------------------------------- */
.scores {
    border-top: 2px solid var(--ink);
    margin: 1.4rem 0;
}

.score-row {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr 42px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.86rem;
}

.score-label { color: var(--ink-2); }

.score-bar {
    display: block;
    height: 7px;
    background: var(--paper-2);
    border-radius: 1px;
    overflow: hidden;
}

.score-fill {
    display: block;
    height: 100%;
    background: var(--accent);
}

.score-val {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* velké hodnocení v hlavičce recenze */
.verdict {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.9rem 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    margin: 1.2rem 0 1.6rem;
}

.verdict-num {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.verdict-of { color: var(--ink-3); font-size: 0.85rem; }
.verdict-note { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); }

@media (max-width: 520px) {
    .score-row { grid-template-columns: minmax(90px, 1fr) 1fr 36px; gap: 0.5rem; }
    .verdict-note { display: none; }
}

/* Odznak "Our Top Pick" — musí být vzácný, jinak je to reklama, ne názor */
.ribbon {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.12rem 0.42rem;
    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--r);
    white-space: nowrap;
}

.ribbon-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--warn);
}

/* Na úzkých obrazovkách se CTA musí zalomit — název kasina je součástí textu */
@media (max-width: 560px) {
    .cta, .cta-sub, .cta-label { white-space: normal; }
    .cta { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Úvod s bannerem (homepage)
   -------------------------------------------------------------------------- */
.intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.6rem;
}

.intro .lede { margin-bottom: 0; }

.intro-banner {
    margin: 0;
    width: 300px;
    max-width: 100%;
}

.intro-banner img {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: contain;
    border: 1px solid var(--rule);
    background: var(--paper-2);
}

@media (max-width: 900px) {
    .intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.4rem;
    }
    .intro-banner,
    .intro-banner img { width: 100%; max-width: 300px; height: auto; }
}