/* ═══════════════════════════════════════════════════════════════════════════
   JLCasino — navigace

   Lišta je pult, ne panel s ovládáním. Drží tři věci a v tomhle pořadí:
     ZNAČKA  → kam jsem přišel
     CESTA   → kam se dá jít
     STAV    → jede stream, kolik mám coinů, kdo jsem

   Co z lišty odešlo a proč:
     • hledání i jeho obsluha z nav.php — pole nemělo v celém webu jedinou
       obsluhu, takže po odeslání nedělalo nic, a markup už v DOM nebyl.
     • pilulky kolem odkazů — sedm zarámovaných tlačítek vedle sebe vypadá
       jako panel nástrojů. Odkaz je text; aktivní pozici značí zelená linka
       na spodní hraně lišty, tedy tam, kde stránka začíná.

   Typografie podle systému (viz variables.css):
     popisek odkazu    → var(--font-text), je to čtený text
     značka            → var(--font-display)
     oční linky, počítadla, monogramy → var(--font-code)
   Popisky tlačítek jsou taky čtený text: „Přihlásit se" není údaj.

   Stavy, které přepíná assets/js/script.js (musí sedět):
     #navbar.scrolled · #navMenu.active · #navToggle.active
     #navMenuOverlay.active · body.nav-open · #navUserDropdown.open
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Přeskočit na obsah ──────────────────────────────────────────────────── */

.kt-skip { position: absolute; left: -9999px; }
.kt-skip:focus {
    left: 16px; top: 16px; z-index: 3000;
    padding: 10px 18px;
    background: var(--go);
    color: var(--go-ink);
    border-radius: var(--r-btn);
    font-weight: 800;
    text-decoration: none;
}

/* ── Lišta ───────────────────────────────────────────────────────────────── */

/* Lišta je poloprůhledná s rozostřením pozadí, jediné místo na webu, kde se
   rozostření používá: obsah pod ní neustřihne, ale prosvítá jako stín, takže
   je poznat, že stránka pod lištou pokračuje. Panely uvnitř stránky zůstávají
   plné — tam by průhlednost brala textu kontrast. */
.navbar.kt-top {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);
    background: transparent;
    border-bottom: 1px solid var(--rail);
    box-shadow: none;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

/* Plochu i rozostření nese PSEUDOPRVEK, ne sama lišta, a je to nutnost, ne
   ozdoba postupu: prvek s backdrop-filter se podle specifikace stává
   obsahovým blokem pro potomky s position: fixed. Uvnitř hlavičky takoví
   potomci jsou dva — mobilní panel navigace (#navMenu) a rozbalení účtu.
   S rozostřením na hlavičce by se jim `bottom: 0` počítalo od spodní hrany
   lišty, ne od spodní hrany okna, a panel by se srazil na pár pixelů.
   Pseudoprvek žádné potomky nemá, takže ničemu obsahový blok nepodstrčí. */
.navbar.kt-top::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--head) 84%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
/* Prohlížeč bez color-mix by dostal průhlednou lištu bez pozadí. */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .navbar.kt-top::before { background: var(--head); }
}
/* Po odscrollování se lišta jen víc oddělí od obsahu. Zmenšovat ji je pohyb,
   který nikdo nechtěl, a obsah pod ní kvůli tomu poskočí. */
.navbar.kt-top.scrolled {
    border-bottom-color: var(--rail-2);
    box-shadow: var(--lift);
}

.nav-container.kt-in {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--rail-w);
    height: var(--top-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── Značka ──────────────────────────────────────────────────────────────── */

.kt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--paper);
}
/* Značka je kresba, ne obrázek — bere barvu z --go přes currentColor.
 Poměr 42:34 drží tvar; čtverec by zaklesnuté JL roztáhl. */
.kt-brand-mark {
    width: 34px;
    height: auto;
    flex: 0 0 auto;
    color: var(--go);
}
.kt-brand-txt {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    line-height: 1;
    color: var(--go);
}
.kt-brand-txt b { font-weight: 800; color: var(--paper); }
@media (max-width: 340px) { .kt-brand-txt { display: none; } }

/* ── Cesta ───────────────────────────────────────────────────────────────── */

/* Odkazy dosedají k ovládání, ne k značce: mezi značkou a cestou je jedno
   velké prázdno, ne dvě menší po stranách navigace. Lišta se pak čte jako
   dva bloky (kdo jsem / kam můžu + kdo jsi ty), ne jako tři ostrůvky. */
.kt-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
}

.kt-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--top-h);
    padding-inline: 13px;
    /* Popisek navigace je čtený text, ne údaj — proto Inter Tight. Bez téhle
       řádky ho .nav-link v navbar.css dědí jako Archivo a lišta pak křičí
       stejně nahlas jako nadpisy pod ní. */
    font-family: var(--font-text);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--paper-2);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 0;
    transition: color var(--t-fast);
}

/* Podložka hoveru je pseudoprvek, ne pozadí odkazu: odkaz musí být vysoký
   přes celou lištu, aby na jeho spodní hraně mohla sedět aktivní linka,
   ale plocha hoveru přes celou výšku by z položky udělala sloupec. */
.kt-nav .nav-link::before {
    content: '';
    position: absolute;
    inset: 13px 3px;
    border-radius: var(--r-btn);
    background: transparent;
    transition: background var(--t-fast);
}
/* Popisek je nepozicovaný potomek, takže by ho absolutní pseudoprvek překryl. */
.kt-nav .nav-link > .ktn-lb { position: relative; }
.kt-nav .nav-link:hover { color: var(--paper); background: none; }
.kt-nav .nav-link:hover::before { background: var(--panel-hi); }

/* Aktivní položka: zelená linka na spodní hraně lišty, tedy přesně na švu,
   za kterým stránka pokračuje. */
.kt-nav .nav-link.active { color: var(--paper); font-weight: 600; }
.kt-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: -1px;
    height: 2px;
    background: var(--go);
    border-radius: 2px 2px 0 0;
}

/* Šipka a titulky sekcí patří mobilnímu panelu, v liště nemají co dělat. */
.kt-nav .ktn-go,
.kt-nav-title,
.kt-nav-casinos { display: none; }

/* Zbytek staré lišty: podtržítko jezdící pod položkami. Aktivní stav si teď
   kreslí položka sama, takže jezdec zůstává schovaný (JS na něj sahá). */
.nav-underline { display: none !important; }

/* ── Stav vpravo ─────────────────────────────────────────────────────────── */

/* Prázdno v liště patří mezi značku a cestu, takže odsazování odsud musí
   pryč. karty.css ho drží přes `.kt-top .nav-right-group` s !important, což
   jde přebít jen dalším !important; specificita je stejná (0,2,0) a nav.css
   se načítá později, takže vyhrává tenhle řádek. */
.kt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: 12px;
}
.kt-actions.nav-right-group { margin-left: 12px !important; }
.ktn-tools,
.ktn-wallet { display: flex; align-items: center; gap: 8px; }

.kt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    color: var(--paper-2);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.kt-icon-btn:hover { color: var(--paper); border-color: var(--rail-2); }

.nav-bell-wrap { position: relative; }
.nav-bell-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 17px; height: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: 4px;
    border-radius: var(--r-pill);
    background: var(--live);
    /* Odznak je počítadlo, tedy údaj — strojopis, ne nadpisové písmo. */
    font-family: var(--font-code);
    font-size: 10px;
    font-weight: 600;
    color: var(--paper);
}

/* Zůstatek. Jantar nese jen částku, rámeček zůstává neutrální — obarvit
   celou pilulku by z informace udělalo druhé tlačítko. */
.nav-coins-pill.kt-coins {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding-inline: 12px;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    color: var(--coin);
    text-decoration: none;
    transition: border-color var(--t-fast);
}
.nav-coins-pill.kt-coins:hover { border-color: var(--rail-2); }
.nav-coins-amount {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--coin);
}

.nav-checkin-btn.kt-claim {
    height: 36px;
    padding-inline: 13px;
    background: var(--raise);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-chip);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-checkin-btn.kt-claim:hover { background: var(--panel-hi); border-color: var(--rail-2); }

.nav-live-status.jl-live { height: 32px; }

/* Přihlásit se je jediné zelené tlačítko v liště. */
.nav-discord-btn.kt-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 16px;
    background: var(--go);
    border: 0;
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--go-ink);
    cursor: pointer;
    transition: background var(--t-fast);
}
.nav-discord-btn.kt-login:hover { background: var(--go-hi); }

.nav-user-pill.kt-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 13px;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    color: var(--paper);
    cursor: pointer;
    transition: border-color var(--t-fast);
}
.nav-user-pill.kt-user:hover { border-color: var(--rail-2); }
.nav-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nud-chevron { opacity: .6; }

/* ── Rozbalení účtu ──────────────────────────────────────────────────────── */

.nav-user-dropdown-wrap { position: relative; }
.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--z-dropdown);
    width: 258px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift-hi);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav-user-dropdown.open { opacity: 1; visibility: visible; transform: none; }

.nud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--paper);
}
.nud-close-btn {
    display: none;
    background: none; border: 0; padding: 4px;
    color: var(--paper-3); cursor: pointer;
}
.nud-coins-row {
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: var(--r-chip);
    background: var(--raise);
    font-size: 13px;
    color: var(--paper-2);
}
.nud-coins-row strong {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 800;
    color: var(--coin);
}
.nud-menu { list-style: none; margin: 0; padding: 0; }
.nud-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-chip);
    font-size: 14px;
    font-weight: 600;
    color: var(--paper-2);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.nud-menu-item:hover { background: var(--raise); color: var(--paper); }
.nud-mi-ico { display: inline-flex; opacity: .7; }
.nud-menu-badge {
    margin-left: auto;
    min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: 5px;
    border-radius: var(--r-pill);
    background: var(--live);
    font-family: var(--font-code);
    font-size: 10px; font-weight: 600; color: var(--paper);
}
.nud-logout-btn {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    background: none;
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    font-family: var(--font-text);
    font-size: 13px;
    font-weight: 600;
    color: var(--paper-3);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.nud-logout-btn:hover { color: var(--live-hi); border-color: rgba(var(--live-rgb), .4); }

/* ── Oznámení ────────────────────────────────────────────────────────────── */

.nav-bell-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--z-dropdown);
    width: 300px;
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift-hi);
}
.nbd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px 10px;
}
/* Nadpis panelu je oční linka nad výpisem, ne titulek stránky. */
.nbd-title {
    font-family: var(--font-code);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
}
.nbd-clear-all {
    background: none; border: 0; padding: 0;
    font-size: 12px; color: var(--paper-3); cursor: pointer;
}
.nbd-clear-all:hover { color: var(--paper); }
.nbd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nbd-list li {
    padding: 10px;
    border-radius: var(--r-chip);
    background: var(--raise);
    font-size: 13px;
    color: var(--paper-2);
}
.nbd-empty { padding: 16px 10px; font-size: 13px; color: var(--paper-3); text-align: center; }

/* ── Hamburger ───────────────────────────────────────────────────────────── */

.nav-toggle.kt-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    /* Hamburger stojí v DOM až za ovládáním (includes/nav.php), takže mezera
       vzniká na jednom místě a pořadí pro klávesnici sedí s tím, co je vidět.
       Vlastní margin-left: auto by z toho udělal druhé prázdno. */
    margin-left: 0;
    padding: 0;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    cursor: pointer;
}
.nav-toggle.kt-burger .hamburger {
    position: relative;
    display: block;
    width: 17px; height: 2px;
    background: var(--paper);
    border-radius: 2px;
    transition: background var(--t-fast);
}
.nav-toggle.kt-burger .hamburger::before,
.nav-toggle.kt-burger .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 17px; height: 2px;
    background: var(--paper);
    border-radius: 2px;
    transition: transform var(--t-base), top var(--t-base);
}
.nav-toggle.kt-burger .hamburger::before { top: -6px; }
.nav-toggle.kt-burger .hamburger::after  { top: 6px; }
.nav-toggle.kt-burger .hamburger-mid { display: none; }

.nav-toggle.kt-burger.active .hamburger { background: transparent; }
.nav-toggle.kt-burger.active .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle.kt-burger.active .hamburger::after  { top: 0; transform: rotate(-45deg); }

/* ── Mobil ───────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .nav-toggle.kt-burger { display: inline-flex; }

    /* Lišta stoupá do vrstvy panelu, protože panel je její potomek. Sticky
       lišta se z-indexem zakládá vrstvicí kontext, takže z-index: var(--z-menu)
       o pár řádků níž platí jen UVNITŘ lišty a navenek se panel promítne jako
       --z-navbar. Zatmívací vrstva visí přímo na <body> s --z-backdrop, což je
       víc — ležela tedy nad otevřeným panelem: panel byl ztmavený o 68 %
       (plocha rgb(6,7,7) místo --panel, text rgb(77,78,77) místo --paper, tedy
       kontrast 2,4:1) a každý klik na odkaz spolkla vrstva, jejíž obsluha
       panel jen zavřela. Odkazy v panelu tak nešly použít vůbec.
       Ven z cizí vrstvy se potomek dostat nemůže, takže stoupá celá lišta.
       Platí to celému pásu, ne jen otevřenému stavu přes body.nav-open: tu
       třídu skript odebírá hned na začátku zavírání, kdežto panel se vysouvá
       ještě var(--t-slow) a vrstva hasne var(--t-base) — lišta by spadla zpátky
       pod dosud viditelnou vrstvu a panel by při každém zavření ztmavl. */
    .navbar.kt-top { z-index: var(--z-menu); }

    /* Panel jede zprava přes celou výšku pod lištou. --nav-menu-top nastavuje
       skript podle skutečné spodní hrany lišty, takže panel nezačíná pod
       částečně odscrollovaným záhlavím. */
    .kt-nav {
        position: fixed;
        top: var(--nav-menu-top, var(--top-h));
        /* left: auto výslovně — zděděné pravidlo drželo panel u levého okraje
           a right: 0 pak nemělo co posunout. */
        left: auto;
        right: 0;
        bottom: 0;
        z-index: var(--z-menu);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(340px, 88vw);
        margin: 0;
        padding: 14px 16px 26px;
        /* Panel leží NAD stránkou, tak nese plochu panelu. Na --head byl skoro
           k nerozeznání od --bg pod sebou a držela ho jen levá linka. */
        background: var(--panel);
        border-left: 1px solid var(--rail-2);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--t-slow), visibility var(--t-slow);
    }
    .kt-nav.active { transform: none; visibility: visible; }

    /* NAVIGACE / KASINA je klasická oční linka: strojopis, drobné verzálky,
       roztažené. Stejný tvar jako štítky v kartě nabídky. */
    .kt-nav-title {
        display: block;
        margin: 14px 0 6px;
        font-family: var(--font-code);
        font-size: .64rem;
        font-weight: 500;
        letter-spacing: var(--track-wide);
        text-transform: uppercase;
        color: var(--paper-3);
    }
    .kt-nav-title--nav { margin-top: 0; }

    .kt-nav .nav-link {
        height: auto;
        justify-content: flex-start;
        gap: 10px;
        padding: 13px 12px;
        border-radius: var(--r-chip);
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        color: var(--paper);
    }
    .kt-nav .nav-link .ktn-lb { flex: 1 1 auto; text-align: left; }
    /* V panelu je položka celý řádek, podložku tedy nese sám odkaz a
       pseudoprvek z lišty by ji jen zdvojil. */
    .kt-nav .nav-link::before { content: none; }
    .kt-nav .nav-link:hover { background: var(--raise); }
    .kt-nav .nav-link.active { background: var(--raise); }
    .kt-nav .nav-link.active::after {
        left: auto; right: auto; bottom: auto;
        position: static;
        width: 3px; height: 18px;
        border-radius: 3px;
        margin-right: 2px;
        order: -1;
    }
    .kt-nav .ktn-go { display: inline-flex; color: var(--paper-3); }

    /* Kasina v panelu: dvouřádkový odkaz s dlaždicí loga. */
    .kt-nav-casinos { display: block; }
    .kt-nav-casino {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 12px;
        border-radius: var(--r-chip);
        text-decoration: none;
    }
    .kt-nav-casino:hover { background: var(--raise); }
    .kt-nav-casino-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 38x30 bylo tak malé, že loga kasin nešla přečíst. */
        width: 46px; height: 34px;
        flex: 0 0 auto;
        background: var(--raise);
        border: 1px solid var(--rail);
        border-radius: var(--r-chip);
        overflow: hidden;
    }
    .kt-nav-casino-mark img { max-width: 38px; max-height: 26px; object-fit: contain; }
    .kt-nav-casino-ini {
        font-family: var(--font-code);
        font-size: 14px; font-weight: 600; color: var(--paper-2);
    }
    .kt-nav-casino-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .kt-nav-casino-name { font-size: 14px; font-weight: 600; color: var(--paper); }
    /* Vyšší specifičnost schválně: karty.css cílí na .kt-nav-casino b
       (0,1,1) a přebilo by to samotnou třídu. Zelená je vyhrazená akci,
       částka u kasina ji nést nesmí, a margin-left: auto odtud sráželo
       částku doprava místo pod jméno. */
    .kt-nav-casino .kt-nav-casino-bonus {
        margin-left: 0;
        font-family: var(--font-num);
        font-size: 12.5px;
        font-weight: 800;
        color: var(--paper-2);
    }
    .kt-nav-casino .kt-nav-casino-name { color: var(--paper); }

    /* Ovládání zůstává v liště, jen se sráží na to podstatné. Panel je mimo
       tok, takže prázdno musí vytlačit ovládání samo — jinak by značka
       a přihlášení stály nalepené vedle sebe. */
    .kt-actions.nav-right-group { margin-left: auto !important; }
    .ktn-tools { display: none; }
    .nav-user-name { display: none; }
    .nav-discord-text { display: none; }
    .nav-discord-btn.kt-login { padding-inline: 12px; }
    .nav-checkin-btn.kt-claim { display: none !important; }

    .nud-close-btn { display: inline-flex; }
    .nav-user-dropdown {
        position: fixed;
        top: auto; right: 12px; left: 12px; bottom: 12px;
        width: auto;
        z-index: 1101;
    }
}

@media (max-width: 560px) {
    .nav-live-status.jl-live .jl-live__txt { display: none; }
    .nav-live-status.jl-live { padding-inline: 10px; }
}

/* Zámek scrollu při otevřeném panelu. --nav-scrollbar-w dopočítá skript, ať
   obsah po skrytí svislé lišty neposkočí do strany. */
body.nav-open { overflow: hidden; padding-right: var(--nav-scrollbar-w, 0px); }

/* Zatmívací vrstva. Zapnutí i vypnutí si řídí sama, protože navbar.css ji drží
   na display: none a rozsvěcí ji až ve svém @media (max-width: 1000px) —
   jenže panel se vysouvá už od 1024 px. V pásu 1001–1024 px se panel otevíral
   úplně bez vrstvy: pozadí se nezatmilo a klik mimo panel ho nezavřel, takže
   z původních čtyř cest ven zbyly tři. Hranice vrstvy proto musí sedět
   s hranicí panelu; jinak má jedna komponenta na dvou sousedních šířkách dvě
   různé podoby. */
.nav-menu-overlay {
    display: none;
    position: fixed;
    inset: var(--nav-menu-top, var(--top-h)) 0 0 0;
    z-index: var(--z-backdrop);
    /* Zatmívací vrstva je černá bez ohledu na paletu: má ubrat světlo,
       ne přidat odstín. */
    background: rgba(0, 0, 0, .68);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
}
/* Až za základním pravidlem, ne uvnitř bloku pro mobil o pár set řádků výš:
   media dotaz specificitu nezvyšuje, takže pozdější display: none by ho
   přebilo a vrstva by nenaskočila nikdy. */
@media (max-width: 1024px) {
    .nav-menu-overlay { display: block; }
}
.nav-menu-overlay.active { opacity: 1; visibility: visible; }