/* ============================================================================
   PAGE-SAZKOVKY.CSS: Tipsport a Chance ve scénách /partneri
   ----------------------------------------------------------------------------
   Stránka /sazkovky je přesná obdoba /partneri, jen s jinou dvojicí. Základní
   vrstvu .prt-* si nevymýšlí znovu, přebírá ji z page-partneri.css a tady si
   dobírá UŽ JEN značkové téma.

   POŘADÍ: header.php pro /sazkovky nejdřív vypíše page-partneri.css a hned za
   ním tenhle soubor, takže se tu jen přebíjí. Nekopírovat sem layout, jinak
   se obě vrstvy začnou rozjíždět.

   MOTIVY (schválně různé, ať se poloviny nepletou):
     • Tipsport = modrá noční plocha, oranžový akcent z fajfky v logu
     • Chance   = zelená plocha, oranžový akcent z wordmarku

   KRITICKÉ: každý selektor je scopovaný na .prt-page--sazkovky. Žádné :root
   a nic, co by mohlo přetéct na /partneri. Tokyo a Dědek si drží své barvy.
   ============================================================================ */

/* ── Značkové tokeny ────────────────────────────────────────────────────────
   Přepisujeme rovnou --t1/--t2 a --d1/--d2, protože na nich visí celá základní
   vrstva (hlavička, spára, žebříky, důvěryhodnostní pruh). Levá scéna je vždy
   "t", pravá vždy "d", stejně jako na /partneri.
     t = Tipsport, modrá + oranžová fajfka
     d = Chance,   zelená + oranžový wordmark                                  */
.prt-page--sazkovky {
    --t1: #009ee3;  --t1-rgb: 0, 158, 227;    /* Tipsport modrá        */
    --t2: #f5a200;  --t2-rgb: 245, 162, 0;    /* Tipsport oranžová     */
    --d1: #00a566;  --d1-rgb: 0, 165, 102;    /* Chance zelená, světlá */
    --d2: #f5a200;  --d2-rgb: 245, 162, 0;    /* Chance oranžová       */

    /* Tmavší firemní odstíny pro plochy a přechody, ne pro text. */
    --ts-deep: #0071b9;   /* Tipsport modrá, tmavá */
    --ch-deep: #007c4d;   /* Chance zelená, tmavá  */
}

/* ── Hlavička ───────────────────────────────────────────────────────────────
   .prt-badge má v základní vrstvě natvrdo levandulovou barvu textu a .prt-dot
   pulzuje magentou z @keyframes prtPulse. Obojí je potřeba přebít, jinak
   z modré stránky svítí fialový zbytek Tokya. */
.prt-page--sazkovky .prt-badge { color: #bfe6fb; }

/* Přeliv v H1 jede po obou značkách, z Tipsport modré přes cyan do Chance
   zelené. Základní vrstva má uprostřed --t2, tady oranžovou, a ta mezi modrou
   a cyan zežloutne do bláta.
   POZOR: musí to být background-IMAGE. Zkratka `background` resetuje i
   background-clip, takže by z gradientního nápisu byl plný obdélník
   přes text. */
.prt-page--sazkovky .prt-h1 span {
    background-image: linear-gradient(110deg, var(--t1) 0%, var(--neon-cyan, #00f5ff) 50%, var(--d1) 100%);
}

.prt-page--sazkovky .prt-dot {
    background: var(--t2);
    animation-name: prtPulseSaz;
}
@keyframes prtPulseSaz {
    0%   { box-shadow: 0 0 0 0 rgba(245, 162, 0, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(245, 162, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 162, 0, 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCÉNY
   Zrcadlí kompletní sadu pravidel, kterou má page-partneri.css pro
   .prt-scene--tokyo a .prt-scene--dedek: pozadí, .prt-bg, .prt-rank,
   .prt-kind, .prt-figure, .prt-points, .prt-cta, .prt-ghost i focus.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ TIPSPORT: modrá noční plocha ═══ */
.prt-page--sazkovky .prt-scene--tipsport {
    background: linear-gradient(168deg, #04203300 0%, #04121d 100%), #051520;
}
.prt-page--sazkovky .prt-scene--tipsport .prt-bg {
    background:
        radial-gradient(120% 55% at 50% -10%, rgba(var(--t1-rgb), .30), transparent 66%);
}

/* ═══ CHANCE: zelená plocha ═══ */
.prt-page--sazkovky .prt-scene--chance {
    background: linear-gradient(168deg, #04241800 0%, #04150e 100%), #05170f;
}
.prt-page--sazkovky .prt-scene--chance .prt-bg {
    background:
        radial-gradient(120% 55% at 50% -10%, rgba(var(--d1-rgb), .26), transparent 66%);
}

/* ── Štítek v rohu scény ────────────────────────────────────────────────── */
.prt-page--sazkovky .prt-scene--tipsport .prt-rank {
    background: rgba(var(--t1-rgb), .14);
    border: 1px solid rgba(var(--t1-rgb), .42);
    color: #bfe6fb;
}
.prt-page--sazkovky .prt-scene--chance .prt-rank {
    background: rgba(var(--d1-rgb), .14);
    border: 1px solid rgba(var(--d1-rgb), .42);
    color: #b6efd4;
}

/* ── Eyebrow nad názvem značky ──────────────────────────────────────────── */
.prt-page--sazkovky .prt-scene--tipsport .prt-kind { color: var(--t2); }
.prt-page--sazkovky .prt-scene--chance   .prt-kind { color: var(--d1); }

/* ── Nabídka, největší věc ve scéně ─────────────────────────────────────── */
.prt-page--sazkovky .prt-scene--tipsport .prt-figure { color: #fff; }
.prt-page--sazkovky .prt-scene--tipsport .prt-figure span { color: var(--t2); }
.prt-page--sazkovky .prt-scene--chance   .prt-figure { color: #fff; }
.prt-page--sazkovky .prt-scene--chance   .prt-figure span { color: var(--d2); }

/* ── Odrážky uvnitř scény (rezerva, drží idiom kompletní) ───────────────── */
.prt-page--sazkovky .prt-scene--tipsport .prt-points li::before {
    background-color: rgba(var(--t1-rgb), .2);
    border: 1px solid rgba(var(--t1-rgb), .45);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfe6fb' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.prt-page--sazkovky .prt-scene--chance .prt-points li::before {
    background-color: rgba(var(--d1-rgb), .2);
    border: 1px solid rgba(var(--d1-rgb), .45);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6efd4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ── CTA a odkazy scény ─────────────────────────────────────────────────── */
.prt-page--sazkovky .prt-scene--tipsport .prt-cta {
    background: linear-gradient(110deg, var(--t1), var(--ts-deep));
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--t1-rgb), .32);
}
.prt-page--sazkovky .prt-scene--chance .prt-cta {
    background: linear-gradient(110deg, var(--d1), var(--ch-deep));
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--d1-rgb), .32);
}

.prt-page--sazkovky .prt-scene--tipsport .prt-ghost { color: rgba(191, 230, 251, .8); }
.prt-page--sazkovky .prt-scene--chance   .prt-ghost { color: rgba(182, 239, 212, .8); }

/* ── Druhotný odkaz na kurzové sázení ───────────────────────────────────────
   Tokyo a Dědek mají jednu nabídku, tyhle dvě značky mají dvě (kasino Vegas
   a kurzové sázení). Druhá cesta proto potřebuje vlastní tvar: obrys místo
   plochy, ať hlavní CTA zůstane jasně první volbou.                          */
.prt-page--sazkovky .prt-scene-body .prt-alt {
    align-self: stretch;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: var(--radius-btn, 14px);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
    font-family: var(--font-accent, 'Exo 2'), sans-serif;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.prt-page--sazkovky .prt-scene-body .prt-alt:hover { transform: translateY(-1px); }

.prt-page--sazkovky .prt-scene--tipsport .prt-alt {
    color: #d6effc;
    border-color: rgba(var(--t1-rgb), .45);
}
.prt-page--sazkovky .prt-scene--tipsport .prt-alt:hover {
    background: rgba(var(--t1-rgb), .14);
    border-color: rgba(var(--t1-rgb), .7);
}
.prt-page--sazkovky .prt-scene--chance .prt-alt {
    color: #d0f5e4;
    border-color: rgba(var(--d1-rgb), .45);
}
.prt-page--sazkovky .prt-scene--chance .prt-alt:hover {
    background: rgba(var(--d1-rgb), .14);
    border-color: rgba(var(--d1-rgb), .7);
}

/* Ghost odkaz sedí až pod druhotným, ať je pořadí voleb jednoznačné. */
.prt-page--sazkovky .prt-scene-body .prt-ghost { margin-top: 12px; }

/* ── Focus ──────────────────────────────────────────────────────────────── */
.prt-page--sazkovky .prt-scene--chance :focus-visible { outline-color: var(--d1); }

/* ══════════════════════════════════════════════════════════════════════════
   PRUHY POD SCÉNAMI
   Základní vrstva má v .prt-specs, .prt-choose-col a .prt-trust-item natvrdo
   fialové a hnědé podklady po Tokyu a Dědkovi. Přebarvujeme je do modré
   a zelené, jinak by pod modrou scénou svítil fialový pruh.
   ══════════════════════════════════════════════════════════════════════════ */
.prt-page--sazkovky .prt-specs {
    background: linear-gradient(160deg, rgba(8, 24, 36, .72), rgba(4, 12, 18, .92));
}
.prt-page--sazkovky .prt-specs-col--tipsport { --c: var(--t1); --c-rgb: var(--t1-rgb); }
.prt-page--sazkovky .prt-specs-col--chance {
    --c: var(--d1); --c-rgb: var(--d1-rgb);
    border-left: 1px solid var(--hair);
}

.prt-page--sazkovky .prt-choose-col--tipsport {
    --c: var(--t1); --c-rgb: var(--t1-rgb);
    background: linear-gradient(165deg, rgba(9, 28, 42, .92), rgba(4, 12, 19, .97));
}
.prt-page--sazkovky .prt-choose-col--chance {
    --c: var(--d1); --c-rgb: var(--d1-rgb);
    background: linear-gradient(165deg, rgba(8, 32, 22, .92), rgba(4, 15, 10, .97));
}

.prt-page--sazkovky .prt-trust-item {
    background: linear-gradient(160deg, rgba(8, 24, 36, .92), rgba(4, 12, 18, .97));
}

/* ── Responzivita: spára pruhu se stejně jako u /partneri otočí naležato ─── */
@media (max-width: 900px) {
    .prt-page--sazkovky .prt-specs-col--chance {
        border-left: 0;
        border-top: 1px solid var(--hair);
    }
}