/* ============================================================
   NEXUS BETS — PRÉMIOVÁ VIZUÁLNÍ VRSTVA  (premium.css)
   ------------------------------------------------------------
   Načítá se AŽ PO css/style.css. Nic v style.css se nemaže ani
   nepřepisuje strukturálně — tenhle soubor jen přidává hloubku,
   sklo, záři a pohyb přes UŽ EXISTUJÍCÍ třídy a ID.

   Pravidla, která to drží bezpečné:
   • Žádné nové ID/třídy na obsah, žádná změna rozvržení mřížek.
   • Barvy jdou přes stávající proměnné (--accent, --bg-card…),
     takže všech 14 motivů z js/ui.js funguje dál a samo se
     přebarví i tahle vrstva (ambient záře, kurzor, náklon).
   • Rozměry (padding, font-size), které si přepisuje
     html.kompaktni, se tu záměrně nešahají — jen vzhled.
   • backdrop-filter jen tam, kde už byl (navbar) nebo kde je
     prvek jen dočasně přes obsah (menu.active, okno) — nikdy
     na stálý sticky pruh (viz incident 0.8.10.8).
   • Vlastní kurzor / náklon / magnet zapíná js/premium-ux.js
     a jen na myších zařízeních; vypne se při html.bez-animaci
     i prefers-reduced-motion (dole v tomhle souboru taky).
   ============================================================ */

/* ============================================================
   1 · PALETA — prohloubení výchozího motivu
   ------------------------------------------------------------
   Obsidián + tmavě fialovo-modrá, zářivé fialové / modré /
   neonové akcenty. Motiv „Fialovočervená" (soucasne) má v
   js/ui.js prázdné css, takže bere přímo tohle. Ostatní motivy
   si --bg-* a --accent přepíšou inline na <html> a tuhle sekci
   u sebe přebijou — což je v pořádku.
   ============================================================ */
:root {
    /* Výchozí schéma od 0.8.48.19: „Ocel a písek". Dvě strany CS2 —
       ocelově modrá CT = akce a výběr, písková T = nexy, kurzy, výhra.
       Grafit s nádechem modré, teplá bílá. Spočítané v OKLCH, kontrast
       proti --bg-card: faint 6,1 : 1, text tlačítka 4,8 : 1. Původní
       fialová je v js/ui.js jako téma „Fialová (původní)". */
    --bg-app:   #080a0d;
    --bg-panel: #101317;
    --bg-card:  #161a1f;
    --bg-input: #0c0f12;

    --text:       #f6f3ed;
    --text-dim:   #b7bfc7;
    --text-faint: #9199a2;

    /* --accent je tmavší (pod světlým textem tlačítka), --accent-solid
       světlejší (fokus, odkazy a okraje na tmavém pozadí). */
    --accent:       linear-gradient(135deg, #2d6eb1, #3258a0);
    --accent-solid: #76b0eb;
    --accent-glow:  rgba(118, 176, 235, 0.28);

    --gold: #ecba74;
    --win:  #5bcc80;
    --lose: #ef6661;

    /* Text na ploše s --accent (tlačítka, avatary s iniciálou, čipy).
       Tady světlý, protože tlačítko je tmavě modré. Témata se světlým
       akcentem si nastavují tmavý #0b0d12 (js/ui.js). */
    --accent-text: #f6f3ed;

    --line: rgba(246, 243, 237, 0.08);

    /* --- nové tokeny jen pro tuhle vrstvu --- */
    --px-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    /* Dřív fialová záře pod tlačítky, avatary a čipy. Od 0.8.48.6 neutrální
       stín — hloubku dává odsazení a rozmazání, ne barevná aura. Jméno
       zůstalo, ať se nemusí přepisovat 14 míst. */
    --px-glow-a:      rgba(0, 0, 0, 0.55);
    --px-glow-b:      rgba(118, 176, 235, 0.16);
    --px-hair:        color-mix(in srgb, #ffffff 8%, transparent);
    --px-shadow:      0 22px 55px -34px rgba(0,0,0,0.85), 0 8px 24px -18px rgba(0,0,0,0.6);
    --px-shadow-lift: 0 42px 90px -42px rgba(0,0,0,0.9), 0 18px 44px -22px rgba(0,0,0,0.62);
}

/* Plynulý scroll — jen když si uživatel nepřeje míň pohybu. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
html.bez-animaci { scroll-behavior: auto; }

/* ============================================================
   2 · ATMOSFÉRA POZADÍ
   ------------------------------------------------------------
   body::before (jemné světlo) už ve style.css je — tady se jen
   zvětší a obarví podle akcentu motivu. body::after přidává
   pomalou auroru a vinětaci. Obojí za obsahem, bez interakce.
   plinko.html si body::before přepisuje samo (zůstane zelené).
   ============================================================ */
body::before {
    background:
        radial-gradient(58% 44% at 12% 8%,  color-mix(in srgb, var(--accent-solid) 16%, transparent), transparent 70%),
        radial-gradient(52% 40% at 92% 12%, var(--px-glow-b), transparent 72%),
        radial-gradient(60% 50% at 78% 96%, color-mix(in srgb, var(--accent-solid) 12%, transparent), transparent 75%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* clip-path drží rotující/zvětšenou vrstvu přesně v okně —
       nikdy nepřidá vodorovné rolování (jinak by na mobilu
       vytlačila obsah do strany). */
    clip-path: inset(0);
    background:
        conic-gradient(from 210deg at 30% 30%,
            color-mix(in srgb, var(--accent-solid) 22%, transparent),
            transparent 45%,
            var(--px-glow-b) 70%,
            transparent 100%);
    opacity: 0.05;
    filter: blur(60px);
    /* Dřív se celoobrazovková rozmazaná vrstva pořád otáčela a zvětšovala (34 s
       dokola). Při 5 % průhlednosti to skoro není vidět, ale prohlížeč ji kvůli
       tomu překresloval neustále a v prohlížečích na Firefoxu (Zen) to žralo
       hodně paměti a výkonu. Teď se rozmaže jednou a stojí. */
    transform: scale(1.6);
}

/* Vinětace — přitáhne oko do středu, prohloubí okraje. */
body {
    background-image: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%);
    background-attachment: fixed;
}

/* ============================================================
   3 · NAVBAR — sklo + zmenšení po scrollu
   ------------------------------------------------------------
   Blur tu už byl (blur(14px), sticky) — tohle je jen jeho
   vyladění. html.px-scrolled přidává js/premium-ux.js.
   ============================================================ */
.navbar {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg-panel) 82%, transparent),
            color-mix(in srgb, var(--bg-panel) 66%, transparent));
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    border-bottom: 1px solid var(--px-hair);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 18px 40px -30px rgba(0,0,0,0.85);
    transition:
        height 0.38s var(--px-ease),
        background 0.38s var(--px-ease),
        box-shadow 0.38s var(--px-ease),
        backdrop-filter 0.38s var(--px-ease);
}

/* Zářivá vlásová linka pod hlavičkou. */
.navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--accent-solid) 55%, transparent) 22%,
        var(--px-glow-b) 50%,
        color-mix(in srgb, var(--accent-solid) 55%, transparent) 78%,
        transparent);
    opacity: 0.55;
    pointer-events: none;
}

html.px-scrolled .navbar {
    height: 58px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg-panel) 93%, transparent),
            color-mix(in srgb, var(--bg-panel) 84%, transparent));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 14px 34px -16px rgba(0,0,0,0.7);
}

/* Sticky prvky přisazené pod hlavičku dorovnají o těch 10 px,
   aby po zmenšení navbaru nevznikla mezera. */
html.px-scrolled .spr-lepive   { top: 74px; }
html.px-scrolled .prehled-bok  { top: 74px; }

@media (min-width: 1024px) {
    /* zachovává clip-path .22s ze style.css (hover roztažení proužku)
       a přidá plynulé dorovnání po zmenšení navbaru — posunem, ne top/height
       (ty by přepočítávaly layout). Výška je pořád ta větší; bez scrollu
       tak spodních 10 px (jen padding seznamu) čouhá pod okraj obrazovky. */
    .side-menu {
        height: calc(100vh - 58px);
        transition: clip-path 0.22s ease, transform 0.38s var(--px-ease);
    }
    html.px-scrolled .side-menu { transform: translateY(-10px); }
}

.nav-znacka img {
    transition: transform 0.4s var(--px-ease), filter 0.4s var(--px-ease);
}
.nav-znacka:hover img {
    transform: rotate(-8deg) scale(1.06);
}

/* DEV štítek se ZÁMĚRNĚ nechává tak, jak je ve style.css
   (sytě červený). Jen se ujistíme, že přes tuhle vrstvu
   nezmizí jeho záře. */
.nav-dev {
    box-shadow: 0 0 12px rgba(225, 29, 29, 0.55), 0 0 0 1px rgba(255,107,107,0.4) inset;
}

/* Zůstatek jako drahokam. */
.balance-chip {
    /* Písková = nexy (DESIGN.md). Z tématu, stín neutrální — bez záře. */
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 5%, transparent));
    border-color: color-mix(in srgb, var(--gold) 28%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 6px 18px -10px rgba(0, 0, 0, 0.5);
}

/* Zavírací tlačítko v rozjetém bočním menu (dočasně přes obsah) —
   blur je tu bezpečný. Hamburger je vidět při scrollu pořád, tam
   blur ZÁMĚRNĚ není (viz incident 0.8.10.8). */
.close-btn {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   4 · KARTY A PANELY — „sklo", hloubka, jemné světlo shora
   ============================================================ */
.card,
.spr-karta,
.kolo-panel,
.cislo-dlazdice,
.hrac-dlazdice-box,
.lp-uzel,
.hrac-karta,
.tema-btn,
.spr-trh,
.spr-hrac,
.moznost,
.otazka {
    transition:
        transform 0.45s var(--px-ease),
        box-shadow 0.45s var(--px-ease),
        border-color 0.35s var(--px-ease),
        background 0.35s var(--px-ease);
}

.card,
.spr-karta,
.kolo-panel {
    /* Sklo = vrstvené pozadí (světlo shora + roh), ne ::before —
       nesahá to na stacking/pozicování obsahu uvnitř karty. */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014) 40%, rgba(255,255,255,0) 68%),
        radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%),
        var(--bg-card);
    border-color: var(--px-hair);
    box-shadow:
        var(--px-shadow),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.cislo-dlazdice,
.hrac-dlazdice-box,
.lp-uzel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
        var(--bg-card);
    border-color: var(--px-hair);
    box-shadow:
        var(--px-shadow),
        inset 0 1px 0 rgba(255,255,255,0.05);
}


/* ============================================================
   5 · TLAČÍTKA — záře, přeleštění
   (magnetický hover a tah za kurzorem odešel v 0.8.41.3)
   ============================================================ */
.btn {
    transition:
        box-shadow 0.3s var(--px-ease),
        background 0.3s var(--px-ease),
        color 0.3s var(--px-ease);
}

.btn-primary,
.btn-login,
.kolo-tlacitko.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 10px 28px -10px var(--px-glow-a),
        0 2px 10px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:hover,
.btn-login:hover {
    filter: saturate(1.16) brightness(1.05);
    box-shadow:
        0 16px 44px -10px var(--px-glow-a),
        0 0 0 1px rgba(255,255,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

/* Světelný přejezd přes tlačítko při najetí. */
.btn-primary::after,
.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.38) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 0.65s var(--px-ease);
    pointer-events: none;
    z-index: 1;
}
.btn-primary:hover::after,
.btn-login:hover::after { transform: translateX(130%); }

/* Sekundární tlačítko — jemné sklo. */
.btn:not(.btn-primary):not(.btn-login):not(.btn-nebezpecne):not(.btn-vybrat):not(.btn-znacka) {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: var(--px-hair);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn:not(.btn-primary):not(.btn-login):not(.btn-nebezpecne):not(.btn-vybrat):not(.btn-znacka):hover {
    border-color: color-mix(in srgb, var(--accent-solid) 30%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 24px -14px var(--px-glow-a);
}

/* Denní odměna a profilovka — kulatá záře. */
.odmena-chip { box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.user-chip   { box-shadow: 0 8px 22px -10px var(--px-glow-a), inset 0 1px 0 rgba(255,255,255,0.2); }
.user-chip:hover { box-shadow: 0 14px 34px -10px var(--px-glow-a); }

/* ============================================================
   7 · SÁZKY — možnosti, otázky, řádky sázejících
   ============================================================ */
.moznost {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border-color: var(--px-hair);
}
button.moznost:hover {   /* jen klikací možnost — zamčená je <div> */
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    box-shadow: 0 12px 30px -20px rgba(0,0,0,0.75);
}
.moznost.vybrana {
    border-color: var(--accent-solid);
    background: color-mix(in srgb, var(--accent-solid) 10%, transparent);
    box-shadow: 0 0 0 1px var(--accent-solid);
}
.moznost.vitez {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--win) 60%, transparent);
}

/* Zámek kola: hráč, co ještě netočil. Kurz pod zámkem je tlumený,
   ne zlatý — nesvítí to jako hodnota, která tam ještě není k mání. */
.moznost-kurz.zamek {
    color: var(--text-faint);
    text-shadow: none;
    font-size: 15px;
}

.otazka {
    /* zůstává průsvitná (jako původní rgba(255,255,255,.022)) — jen
       s jemným přechodem, ať uvnitř karty působí jako vsazený panel */
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
    border-color: var(--px-hair);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Svazek sázek — hlava svítí akcentem. */
.card.udalost > h2,
.card.udalost .udalost-hlava > h2 {
    border-bottom-color: color-mix(in srgb, var(--accent-solid) 22%, transparent);
}

/* ============================================================
   8 · ŽEBŘÍČEK, PROFIL, SPRÁVA — hloubka řádků
   ============================================================ */
.zebricek-radek { border-radius: 12px; transition: background 0.2s var(--px-ease), box-shadow 0.2s var(--px-ease), transform 0.2s var(--px-ease); }
.zebricek-radek:hover {
    box-shadow: 0 10px 30px -22px rgba(0,0,0,0.8);
    transform: translateX(2px);
}
.zebricek-radek.ja {
    background: color-mix(in srgb, var(--accent-solid) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-solid) 35%, transparent);
}
.zebricek-avatar,
.uvod-avatar,
.hrac-avatar,
.spr-hrac-avatar,
.kolo-avatar,
.sazejici-avatar {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 16px -8px var(--px-glow-a);
}

.hrac-karta { box-shadow: var(--px-shadow), inset 0 1px 0 rgba(255,255,255,0.05); }
.hrac-banner { box-shadow: inset 0 -40px 60px -40px rgba(0,0,0,0.6); }
.hrac-avatar { box-shadow: 0 14px 40px -14px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.1); }

.spr-hrac:hover  { box-shadow: 0 8px 22px -16px rgba(0,0,0,0.7); }
.spr-hrac.vybrany,
.spr-otazka.vybrana,
.spr-zapas.vybrany {
    box-shadow: 0 0 0 1px var(--accent-solid);
}
.spr-trh:hover      { box-shadow: 0 12px 30px -22px rgba(0,0,0,0.75); }
.spr-trh.vybrany    { box-shadow: 0 0 0 1px var(--gold); }

/* ============================================================
   9 · PRUH XP — klidná výplň (záře a běžící přejezd pryč v 0.8.48.6)
   ============================================================ */
.xp-pruh {
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    overflow: hidden;
}
.xp-vypln { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }

/* ============================================================
   10 · MENU, NABÍDKY, MODÁLY — sklo jen když překrývají obsah
   ============================================================ */
.user-menu {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)) ,
        color-mix(in srgb, var(--bg-panel) 96%, transparent);
    border-color: var(--px-hair);
    box-shadow:
        0 30px 70px -30px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.user-menu.active {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Boční menu — jen prohloubení stínu a vlásové linky.
   Blur zůstává tam, kde ho style.css má (jen .active / :hover). */
.side-menu {
    box-shadow: 24px 0 60px -20px rgba(0,0,0,0.6);
}
.side-item {
    transition: background 0.25s var(--px-ease), border-color 0.25s var(--px-ease), transform 0.25s var(--px-ease), box-shadow 0.25s var(--px-ease);
}
.side-item:hover,
.side-item.active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px -16px rgba(0,0,0,0.7);
}

.okno-pozadi {
    background: rgba(4, 6, 14, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.okno {
    position: relative;          /* kotví ::before proužek k oknu, ne k overlayi */
    overflow: hidden;            /* ořízne proužek na rádius; okno nic nepřetéká */
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%),
        var(--bg-card);
    border-color: var(--px-hair);
    box-shadow:
        0 40px 100px -30px rgba(0,0,0,0.7),
        0 0 0 1px color-mix(in srgb, var(--accent-solid) 14%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.okno::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-solid), var(--px-glow-b), transparent);
    opacity: 0.75;
}

/* Hlášky a postihy — jemný vnitřní stín, ať „sedí" v ploše. */
.alert, .postih-pruh, .kolo-cena, .nast-navod, .spr-duvod {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 30px -22px rgba(0,0,0,0.8);
}

/* Zámek sázení před zatočením: neutrální, ne chybové — stav, ne chyba. */
.zamek-sazek {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    color: var(--text-dim);
}

/* ============================================================
   11 · VELKÁ TYPOGRAFIE
   ------------------------------------------------------------
   Font-size u .page-title se nešahá (přepisuje ho kompaktní
   režim) — jen prostrk, váha a záře.
   ============================================================ */
.page-title {
    font-weight: 900;
    letter-spacing: -1.4px;
}
.page-subtitle { letter-spacing: 0.1px; }
h1, h2, h3 { letter-spacing: -0.4px; }
.uvod-jmeno { letter-spacing: -0.6px; }

/* ============================================================
   12 · POSUVNÍKY
   ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-solid) 45%, transparent) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--accent);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-clip: padding-box; }

/* 13 · VLASTNÍ KURZOR — odstraněno (0.8.12.1). Terčík ani tečka se
   partě nelíbily, dvakrát. Web teď má nativní kurzor systému, žádné
   překrytí. Kdyby se to někdy zkoušelo potřetí, historie a proč to
   dopadlo takhle je v ROZHODNUTI.md u 0.8.11.1 a 0.8.12.1. */

/* ============================================================
   13 · POJISTKY — méně pohybu / vypnuté animace / dotyk
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
    .btn-primary::after, .btn-login::after { display: none; }
}

html.bez-animaci body::after { animation: none; }
html.bez-animaci .btn-primary::after,
html.bez-animaci .btn-login::after { display: none; }

/* Dotyková zařízení — klidná aurora bez otáčení
   (statická rozmazaná vrstva sama o sobě per-snímek nic nestojí,
   animace ano). */
@media (hover: none), (pointer: coarse) {
    body::after { animation: none; opacity: 0.04; }
}

/* ============================================================
   14 · PŘEHLED (index.html) — první stránka
   ------------------------------------------------------------
   Kořen dev.lorempsum.cz. Vede se tady "klubová kniha" partie:
   uvítání, tři dlaždice statistik a kolo štěstí. Tato pravidla
   zasahují JEN třídy této stránky — ostatní stránky nehýbou.
   Vzhled jen dohlazuje, rozložení vždy drží style.css.
   ============================================================ */

/* Hlavička — level jako klubový odznak. */
/* Level není nexy — neutrální odznak, ne písková se září (DESIGN.md). */
.uvod-odznak {
    background: rgba(255,255,255,.05);
    border-color: var(--line);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.uvod-avatar {
    border-color: var(--line);
    box-shadow: 0 8px 22px -12px var(--px-glow-a), inset 0 0 0 1px rgba(255,255,255,.07);
}

/* Dlaždice statistik — jen informace, nekliká se na ně: bez záře
   a bez zvednutí při najetí (dřív vypadaly jako tlačítka). */
.prehled-cisla .cislo-dlazdice {
    border-radius: 18px;
    padding: 16px 18px 15px;
    border-top-color: color-mix(in srgb, var(--accent-solid) 42%, transparent);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        var(--bg-card);
}
@media (max-width: 700px) {
    .prehled-cisla .cislo-dlazdice { padding: 10px 11px; }
}

/* Nadpisy sloupců — bez zlatého proužku (DESIGN.md: žádné barevné pruhy
   na jedné straně). Odkaz je akce, takže modrý, ne pískový. */
.prehled-nadpis a {
    color: var(--accent-solid);
    display: inline-flex; align-items: center; gap: 4px;
    transition: transform .3s var(--px-ease), color .3s var(--px-ease);
}
.prehled-nadpis a:hover { color: var(--text); transform: translateX(2px); }

/* Kolo štěstí — obsidiánový prsten (zlatý obruč a střed). */
.kolo-panel {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 40%, rgba(255,255,255,0) 68%),
        radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
        var(--bg-card);
}
.kolo-obruc {
    fill: none;
    stroke: color-mix(in srgb, var(--text) 35%, transparent);   /* neutrální, ne zlatá */
    stroke-width: 3.5;
}
.kolo-stred { stroke: color-mix(in srgb, var(--text) 25%, transparent); }

/* Spodní menu z js/app-shell.js — jen na telefonu a tabletu (≤768 px),
   kde se sází. Na počítači ho nahrazuje boční proužek. Od 0.8.48.29. */
.bottom-nav { display: none; }
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
    }
    .bottom-nav-item {
        flex: 1; min-height: 48px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border-radius: 10px;
        color: var(--text-dim); text-decoration: none;
        font-size: 11px; font-weight: 600;
    }
    .bottom-nav-item .bni-ikona { display: flex; font-size: 20px; }
    .bottom-nav-item.active { color: var(--accent-solid); }
    .bottom-nav-item.active .bni-ikona {
        padding: 2px 14px; border-radius: 999px;
        background: color-mix(in srgb, var(--accent-solid) 14%, transparent);
    }
    /* Místo pro lištu, ať nepřekryje konec stránky ani lištu s neuloženými změnami. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* scrollIntoView (sázecí panel, hláška pod Vsadit) počítá s lištou —
       jinak dorolí přesně k dolnímu okraji a konec schová pod ni. */
    html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .nast-lista { bottom: calc(76px + env(safe-area-inset-bottom)); }
}