/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGACE: PLOVOUCÍ OSTROV NAHOŘE

   Klasická vodorovná lišta, ale ne nalepená na okraje: deska visí kousek pod
   horní hranou, drží šířku obsahové lišty a má vlastní rámeček a stín. Nic
   na stránce nejde úplně po okraj; lišta jde příkladem.

   Načítá se jako poslední vrstva navigace, za components/nav.css, takže
   přebíjí zděděnou vodorovnou lištu.

   TVRDÉ HRANICE:

   1) JS ZAPISUJE `display` INLINE na devět prvků lišty (#navDiscordLoginBtn,
      #navUserDropWrap, #nudAdminItem, #navCheckinBtn, #navBellWrap,
      #navBellBadge, #navUserBadge, #nudDashBadge, #navLiveStatus). Inline styl
      přebíjí stylesheet, takže tady na žádném z nich NESMÍ stát `display`.
      Rozvržení jede přes obaly (.jlk-top__right, .jlk-auth, .jlk-login-wrap),
      na které skript nesahá.

   2) Zrno pozadí leží na z-indexu 90. Každá plocha navigace sedí na
      --z-navbar (1000), tedy bezpečně nad ním.

   3) Jeden zlom: 1100 px. Zděděná kaskáda měla pět různých čísel a mezi
      1001 a 1024 px pás, kde byl panel otevřený bez zatmívací vrstvy.

   4) #navbar je fixní a jeho offsetHeight (výška DESKY, ne okna) se odečítá
      od kotvových skoků ve script.js. Vnější obal je proto pointer-events:
      none pruh, deska .jlk-in je to, co je vidět a co se měří přes
      .nav-container.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --jlk-h:    60px;   /* výška lišty */
    --jlk-gap:  10px;   /* o kolik pilulka po odrolování odskočí od hrany */
}

/* Stránka začíná pod lištou. Lišta je nahoře srostlá s plochou (bez mezery),
   pilulkou se stává až po odrolování, transformem, který místo nebere. */
body.cyber-body {
    padding-left: 0 !important;
    padding-top: calc(var(--jlk-h) + 16px);
}

/* ═══ DESKA ════════════════════════════════════════════════════════════════ */

/* Vnější pruh nebere kliknutí; deska uvnitř ano. */
.jlk-top {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: var(--z-navbar);
    pointer-events: none;
    background: none;
    border: 0;
}

/* Dva stavy (vzor moneygrind). Na začátku stránky je lišta průhledná
   a srostlá s plochou: žádný rám, žádný stín, jen obsah na rastru. Po
   odrolování (práh 10 px, třída .scrolled ze script.js) se promění
   v plovoucí skleněnou pilulku: odskočí od hrany, zaoblí se naplno,
   dostane poloprůhledný podklad s rozostřením, rám a stín. */
.jlk-in {
    position: relative;
    pointer-events: auto;
    width: min(var(--rail-w), calc(100% - 32px));
    margin-inline: auto;
    height: var(--jlk-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 10px 0 18px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: background-color var(--t-base), border-color var(--t-base),
                box-shadow var(--t-base), transform var(--t-slow);
}
.jlk-top.scrolled .jlk-in {
    transform: translateY(var(--jlk-gap));
    background: rgba(14, 16, 15, .95);
    border-color: var(--rail-2);
    box-shadow: var(--lift-hi);
}
/* Sklo jen tam, kde rozostření opravdu je; jinde zůstane hustý podklad,
   aby text neskončil na nečitelné polovině cesty. Blur smí na fixní prvek. */
@supports (backdrop-filter: blur(1px)) {
    .jlk-top.scrolled .jlk-in {
        background: rgba(14, 16, 15, .66);
        backdrop-filter: blur(14px) saturate(1.3);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
    }
}
/* Otevřené mobilní menu potřebuje pod lištou plný podklad. */
body.nav-open .jlk-in {
    background: var(--head);
    border-color: var(--rail-2);
}

/* Klouzavé podsvícení. Vzhled tady, polohu dává skript v nav.php. Nulová
   výška i průhlednost schválně: bez JavaScriptu nikde nevisí obdélníček. */
.jlk-marker {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .07);
    opacity: 0;
    pointer-events: none;
    /* Polohu vede tlumený follower ve skriptu (feel gsap.quickTo ze vzoru);
       CSS přechod zůstává jen na průhlednosti. Šířka a výška se nastavují
       skokem, layout se nepřepočítává. */
    transition: opacity var(--t-fast);
    will-change: transform;
}

/* ── Značka ──────────────────────────────────────────────────────────────── */
.jlk-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    color: var(--paper);
    text-decoration: none;
}
.jlk-brand__mark { width: 24px; height: 20px; color: var(--go); flex: none; }
.jlk-brand__txt {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--paper);
}
.jlk-brand__txt b { color: var(--go); font-weight: 800; }

/* ── Odkazy (desktop: řada záložek) ──────────────────────────────────────── */
.jlk-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 2px;
    min-width: 0;
    margin-left: 6px;
}

.jlk-item {
    position: relative;
    z-index: 1;                 /* text nad klouzavým podsvícením */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    color: var(--paper-2);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.jlk-item:hover { color: var(--paper); }

/* Aktuální stránka: kreslený tah pod odkazem, ne podbarvení. Stejná mírně
   prohnutá linka jako na vzoru, v zelené stavu. Jediné místo v liště, kde
   zelená stojí mimo tlačítko registrace. */
.jlk-item.active {
    color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4.2C14 2.4 30 2 42 2.9c9 .7 15 1 20 .6' fill='none' stroke='%2353fc18' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center calc(100% - 6px);
    background-size: calc(100% - 26px) 5px;
}

/* Ikony a skupinové popisky patří zásuvce, na desktopu nejsou. */
.jlk-item__ico,
.jlk-group,
.jlk-panel-only,
.jlk-drawerhead { display: none; }
/* Blok účtu pro zásuvku. Plní ho header-scripts přes innerHTML (na display
   mu nesahá), takže ho CSS smí na desktopu schovat úplně; jinak by jeho
   „Přihlásit se" vyplavalo doprostřed lišty. */
.jlk-mobile-acc { display: none; }

/* ── Pravá strana ────────────────────────────────────────────────────────── */
.jlk-top__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: none;
}
.jlk-auth   { display: flex; align-items: center; gap: 8px; }
.jlk-wallet { display: flex; align-items: center; gap: 8px; }
.jlk-login-wrap { display: inline-flex; }

/* Registrace: jediné plné zelené tlačítko v liště. */
.jlk-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--go);
    color: var(--go-ink);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    /* Archivo 800 na 13,5 px polyká mezislovní mezeru; „Zaregistrovat se"
       se slévalo v jedno slovo. */
    word-spacing: .08em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), transform var(--t-fast);
}
.jlk-register:hover,
.jlk-register:focus-visible {
    background: var(--go-hi);
    color: var(--go-ink);
    transform: translateY(-1px);
    /* Jediný barevný stín na webu, po vzoru: CTA na tmavém podkladu
       potřebuje odezvu, které si všimne i periferní vidění. */
    box-shadow: 0 6px 18px -6px rgba(var(--go-rgb), .55);
}
.jlk-register:active { transform: translateY(1px); box-shadow: none; }
.jlk-register__arw { transition: transform var(--t-fast); }
.jlk-register:hover .jlk-register__arw { transform: translateX(3px); }

/* Přihlášení: tichý ghost vedle registrace, nikdy druhé barevné tlačítko. */
.jlk-login {
    height: 40px;
    padding: 0 15px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--rail-2);
    color: var(--paper-2);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.jlk-login:hover { color: var(--paper); border-color: var(--paper-3); }

.jlk-icon-btn {
    position: relative;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--paper-2);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.jlk-icon-btn:hover { color: var(--paper); background: var(--raise); }

.jlk-coins {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--coin);
    font-family: var(--font-num);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.jlk-claim {
    height: 40px; padding: 0 14px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--rail-2);
    color: var(--paper-2);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.jlk-user {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px;
    border-radius: var(--r-pill);
    background: var(--raise);
    border: 1px solid var(--rail);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.jlk-bell { position: relative; }
.jlk-burger { display: none; }

/* Tři proužky burgeru. Kříž se skládá ze stavu aria-expanded, který
   script.js stejně píše kvůli čtečkám; třída navíc by se s ním rozešla. */
.jlk-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 17px;
}
.jlk-bars span {
    display: block;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.jlk-burger[aria-expanded="true"] .jlk-bars span:first-child {
    transform: translateY(5.5px) rotate(45deg);
}
.jlk-burger[aria-expanded="true"] .jlk-bars span:nth-child(2) { opacity: 0; }
.jlk-burger[aria-expanded="true"] .jlk-bars span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* ═══ POD 1100 px: ZÁSUVKA ═════════════════════════════════════════════════ */

@media (max-width: 1100px) {

    /* Menu na mobilu je režim, ne vysouvací lísteček (vzor moneygrind):
       panel zabírá celou obrazovku pod lištou, odkazy nahoře, účet dole.
       Zavírá ho tentýž burger, složený v kříž, Escape, nebo odkaz. */
    /* Panel je v DOM potomek desky, takže se s jejími dětmi rovná uvnitř
       jednoho stacking contextu: značka, akce i burger dostávají z-index 2,
       panel 1, jinak panel překryje i burger, kterým se zavírá. */
    .jlk-brand, .jlk-top__right { position: relative; z-index: 2; }

    .jlk-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: calc(var(--jlk-h) + var(--jlk-gap) + 14px) 18px 22px;
        background: rgba(10, 11, 10, .97);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--t-base), transform var(--t-base);
        visibility: hidden;
    }
    @supports (backdrop-filter: blur(1px)) {
        .jlk-nav {
            background: rgba(10, 11, 10, .88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
    }
    /* .active sází script.js přes setMenu(); body.nav-open je jeho druhá půlka. */
    .jlk-nav.active,
    body.nav-open .jlk-nav {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    /* Skupinový popisek: popisek skupiny odkazů, ne oční linka nad nadpisem. */
    .jlk-group {
        display: block;
        margin: 18px 8px 6px;
        font-family: var(--font-display);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--paper-3);
    }
    .jlk-panel-only { display: block; }

    .jlk-item {
        display: flex;
        align-items: center;
        align-self: stretch;
        justify-content: flex-start;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: var(--r-btn);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        background-image: none;   /* kreslený tah je desktopová věc */
        transition: background var(--t-fast), color var(--t-fast);
    }
    .jlk-item.active { background-image: none; }
    .jlk-item:hover { background: var(--panel); }
    .jlk-item.active { background: var(--panel-hi); font-weight: 700; }
    .jlk-item.active::after {
        inset-inline: auto;
        inset: 50% auto auto 0;
        transform: translateY(-50%);
        width: 3px; height: 20px;
        border-radius: 0 2px 2px 0;
    }

    .jlk-item__ico {
        display: inline-flex;
        align-items: center; justify-content: center;
        width: 22px; height: 22px;
        flex: none;
        color: currentColor;
    }
    .jlk-item__lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    .jlk-chan__av {
        flex: none;
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: var(--raise);
        border: 1px solid var(--rail-2);
        font-family: var(--font-display);
        font-size: 11px;
        font-weight: 800;
        color: var(--paper-2);
    }

    .jlk-casino { min-height: 48px; }
    .jlk-casino__mark {
        flex: none;
        width: 26px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--r-chip);
        background: var(--raise);
        border: 1px solid var(--rail);
        overflow: hidden;
    }
    .jlk-casino__mark img { width: 20px; height: 20px; object-fit: contain; }
    .jlk-casino__ini { font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--paper-3); }
    .jlk-casino__body { display: flex; flex-direction: column; gap: 1px; }
    .jlk-casino__name { font-size: 13.5px; line-height: 1.2; }
    .jlk-casino__bonus {
        font-family: var(--font-num);
        font-size: 11px;
        font-weight: 600;
        color: var(--paper-3);
        font-variant-numeric: tabular-nums;
    }

    .jlk-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        border-radius: var(--r-pill);
        background: var(--raise); border: 1px solid var(--rail-2);
        color: var(--paper); cursor: pointer;
    }
    .jlk-burger:hover { border-color: var(--paper-3); }

    /* Přihlášení ustoupí do panelu; v liště zůstává registrace, protože
       je to cíl plochy. Schovává se OBAL, na tlačítku píše display skript. */
    .jlk-login-wrap { display: none; }
    .jlk-mobile-acc { display: block; margin-top: auto; padding-top: 18px; }
    .jlk-mobile-acc:empty { display: none; }

    /* Akce přišpendlené dole jako na vzoru; margin-top: auto je stáhne
       ke dnu panelu. Přihlášenému je schová :has podle naplněného bloku
       účtu; prohlížeč bez :has ukáže obojí, což nic nerozbije. */
    .jlk-auth-panel {
        position: sticky;
        bottom: -22px;                 /* dorovnává spodní padding panelu */
        margin: auto -18px 0;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--rail);
        background: rgba(10, 11, 10, .92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        gap: 10px;
    }
    .jlk-auth-panel .jlk-register { flex: 1 1 auto; justify-content: center; }
    .jlk-auth-panel .jlk-login { display: inline-flex; align-items: center; }
    .jlk-nav:has(.jlk-mobile-acc:not(:empty)) .jlk-auth-panel { display: none; }
}

@media (max-width: 560px) {
    :root { --jlk-gap: 8px; }
    .jlk-in { width: calc(100% - 16px); padding: 0 8px 0 14px; gap: 10px; }
    .jlk-register { padding: 0 12px; font-size: 13px; }
    /* Jen odznak V LIŠTĚ se srazí na tečku; pilulky v obsahu (hrdina)
       si text nechávají, jinak by z nich zbyly dvě němé tečky. */
    .jlk-top .jl-live__txt { display: none; }
}

/* Zatmívací vrstva pod zásuvkou. Stejný zlom jako zásuvka, jinak vznikne pás
   šířek, kde je panel otevřený a nejde zavřít klikem mimo. */
.nav-menu-overlay { display: none; }
@media (max-width: 1100px) {
    .nav-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        /* Pod hlavičkou: <header> má z-index 1000 a stojí v DOM dřív, takže
           clona na stejné hodnotě by překryla i zásuvku uvnitř něj a křížek
           by nešel stisknout. */
        z-index: calc(var(--z-navbar) - 2);
        background: rgba(4, 6, 5, .4);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base);
    }
    .nav-menu-overlay.active { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .jlk-nav, .nav-menu-overlay, .jlk-in, .jlk-register,
    .jlk-marker, .jlk-bars span, .jlk-register__arw { transition: none; }
    .jlk-marker { display: none; }
}

/* Nativní kotvy (bez JS, nebo odkazy přidané za běhu) nesmí zajet pod
   plovoucí desku. Scroll-margin kryje výšku desky, mezeru nad ní i dech. */
section[id], [id="obsah"] {
    scroll-margin-top: calc(var(--jlk-h) + var(--jlk-gap) + 16px);
}

/* Hlava dokumentu je bez rámu, dokud se neodroluje; nadpis stránky proto
   nesmí začínat těsně pod průhlednou lištou. Dech dává body padding-top. */