/* ============================================================
   NAVBAR — lišta, její moduly a rozbalovací panely
   ------------------------------------------------------------
   Co tady stálo: hlavička zdrojového webu. Plovoucí skleněná kapsle
   (.navbar-blur-bg s backdrop-filter), dvouřádkový rail vysoký 116 px,
   sedm mega-panelů (.nav-item-mega / .mega-panel), pilulkové položky
   s gradientním podtržítkem, celoobrazovkový zásuvný drawer s vlastní
   sadou .nav-mobile-* a .nav-discord-mobile-* prvků, zlatá kapsle coinů
   se zářivým drop-shadow, blurple pilulka účtu (#5865f2), červený odznak
   s pulzující září a čtyři zářivé @keyframes.

   Nic z toho se nerenderuje. Lišta se mezitím přepsala na idiom .kt-*
   (značka, navigace, tři účtové moduly) a markup v includes/nav.php ty
   třídy vůbec nevypisuje — zůstala po nich jen mrtvá kaskáda, kterou
   musel karty-parts/50-menu.css přebíjet skrz !important.

   Zbylo to, co má lišta doopravdy v DOM. Podle DESIGN-JLCASINO.md:
   plocha lišty --kt-head, tedy o patro tmavší než stránka, aby bylo
   poznat, kde končí rám a začíná obsah; --kt-sf jen na panelech, které
   nad stránkou opravdu leží; rádius z tokenů (--kt-r-sm na ovládacích
   prvcích, --kt-r na panelech), protože v celém vzorku jednadvaceti
   webů není jediné hranaté CTA; konstrukci drží vlásečnice --kt-line,
   ne rámeček se září; zelená je VÝHRADNĚ výplň tlačítka Přihlásit se
   (pravidlo 2), zůstatek JL Coinů nese --kt-coin (pravidlo 2, tabulka
   „Ostatní barvy mají jeden úkol"); odznak je vysázený text, ne stužka
   přes roh.

   Žádný !important: tohle je zdrojová vrstva, ne záplata navrch.
   ============================================================ */

/* ============================================
   LIŠTA
   ============================================
   Rám, ne plovoucí objekt: plocha --kt-head je o patro tmavší než stránka
   (--kt-pg), takže lišta drží horní hranu i bez skla a bez stínu.
   Sklo, záře i geometrie kapsle (--rail-h, přechod výšky) jsou pryč —
   výšku dnes udává --kt-top-h v karty.css a lišta stojí v toku.
   --nav-height zůstává, protože z něj počítají odsazení heroů po webu. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--kt-head);
    border-bottom: 1px solid var(--kt-line);
    z-index: var(--z-navbar);
}
.navbar::before,
.navbar::after { content: none; }
/* Po odscrollování se nemění průhlednost ani plocha, jen zesílí linka. */
.navbar.scrolled { border-bottom-color: var(--kt-line-2); }

/* Mřížka pro značku, navigaci a účtovou stranu. Šířku i odsazení drží
   .kt-in (karty.css), tady zbývá jen kotva pro absolutně pozicované
   potomky (hledání, panely). */
.nav-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

/* ============================================
   POLOŽKY NAVIGACE
   ============================================
   Normální sazba, ne verzálky s prostrkáním, a žádná pilulka: položka je
   text, stav nese linka na spodní hraně lišty (kreslí ji 50-menu.css).
   Zděděné ::after bylo gradientní pero uprostřed řádku. */
.nav-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--kt-ink-2);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    transition: color 0.16s linear;
}
.nav-link:hover { color: var(--kt-ink); }
.nav-link.active {
    color: var(--kt-ink);
    font-weight: 700;
}

/* Fokus z klávesnice nese bílá linka, ne barevná výplň. Zelená se sem
   nehodí hned dvakrát: je vyhrazená výplni tlačítka Přihlásit se, a právě
   na tom tlačítku by zelený prstenec nebyl vidět vůbec. */
.nav-link:focus-visible,
.nav-search-btn:focus-visible,
.nav-coins-pill:focus-visible,
.nav-checkin-btn:focus-visible,
.nav-bell-btn:focus-visible,
.nav-discord-btn:focus-visible,
.nav-user-pill:focus-visible,
.nav-toggle:focus-visible {
    outline: 2px solid var(--kt-ink);
    outline-offset: 2px;
}

/* Jezdec pod položkami byl gradientní proužek klouzající mezi odkazy.
   Značku aktivní položky dnes nese linka na hraně lišty, takže se
   nekreslí. Prvek musí zůstat v DOM, visí na něm script.js. */
.nav-underline { display: none; }

/* ============================================
   ÚČTOVÁ STRANA
   ============================================ */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Zůstatek ──
   Zděděná kapsle byla gradient se zářivým rámečkem, vnitřním leskem,
   nadzvednutím při najetí a dvěma @keyframes na změnu zůstatku. Záře je
   zakázaná jako konstrukční prvek, zůstala sazba.

   Barva je --kt-coin. Ta má na celém webu jediný úkol — JL Coiny, tedy
   cenu v odměnách a zůstatek v hlavičce — a nikdy z ní není tlačítko. */
.nav-coins-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    color: var(--kt-coin);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.16s linear;
}
.nav-coins-icon {
    color: var(--kt-coin);
    flex: none;
}
.nav-coins-pill:hover { opacity: 0.82; }
.nav-coins-amount {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--kt-coin);
    letter-spacing: 0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Denní odměna je akce, ale ne primární: primární tlačítko má lišta právě
   jedno (Přihlásit se) a jen ono smí být zelené. Tohle je vysázený odkaz
   v hlavní textové barvě, plocha ani rámeček k němu nepatří. */
.nav-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s linear;
}
.nav-checkin-btn:hover:not(:disabled) { color: var(--kt-coin); }
.nav-checkin-btn.nav-checkin-done,
.nav-checkin-btn:disabled {
    color: var(--kt-ink-3);
    cursor: default;
}

/* ── Stav vysílání ──
   Tvar nese sdílená komponenta .jl-live z core/shared.css: pilulka
   s pulzující tečkou. Napříč vzorkem je to skoro identický prvek a
   hodnoty jsou z produkčního CSS jamierewards.gg (dokument, pravidlo 5).
   Vlastní varianta téhož se tady nezakládá — zbývá jen to, co komponenta
   o liště vědět nemůže. */
.nav-live-status {
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Identita ──
   Svislá čárka před blokem tu byla navíc, zóny dělí linka u .kt-actions. */
.nav-discord-area {
    display: flex;
    align-items: center;
    position: relative;
}

/* Jediné primární tlačítko lišty, a tím jediná zelená plocha celého rámu.
   Rádius 6px: v celém vzorku není jediné hranaté CTA. */
.nav-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--kt-green);
    border: 1px solid var(--kt-green);
    border-radius: var(--kt-r-sm);
    color: #08090a;
    font-family: var(--font-body, Montserrat, sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s linear, border-color 0.16s linear;
}
.nav-discord-btn:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
}

/* Účet: plocha, která nad stránkou neleží, drží ji vlásečnice. Zděděná
   verze byla blurple pilulka (#5865f2) se stínovou září. */
.nav-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--kt-sf);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink);
    cursor: pointer;
    transition: border-color 0.16s linear;
}
.nav-user-pill:hover { border-color: var(--kt-line-2); }

.nav-user-name {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kt-ink);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Počet je vysázený štítek, ne stužka se září a tepáním. Zelený být nesmí,
   ta barva patří tlačítku Přihlásit se. Kontrast dělá obrácená polarita —
   světlá plocha, tmavá číslice — ne další odstín navíc. */
.nav-user-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--kt-ink);
    border: 1px solid var(--kt-head);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-display);
    font-size: 11.5px;   /* pod tuhle hranici text na webu nejde */
    font-weight: 800;
    line-height: 1;
    color: var(--kt-head);
}

.nud-chevron {
    color: var(--kt-ink-3);
    transition: transform 0.16s linear;
}
.nav-user-pill:has(+ .nav-user-dropdown.open) .nud-chevron {
    transform: rotate(180deg);
}

/* ============================================
   HLEDÁNÍ
   ============================================ */
.nav-search {
    display: none;
    align-items: center;
    position: relative;
}
.nav-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-2);
    cursor: pointer;
    padding: 0;
    transition: color 0.16s linear;
}
.nav-search-btn:hover { color: var(--kt-ink); }

/* Pole vyjíždí pod tlačítkem jako samostatná plocha nad stránkou. */
.nav-search-form {
    position: absolute;
    right: 0;
    top: calc(100% + 11px);
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: width 0.25s ease, opacity 0.2s ease;
}
.nav-search.open .nav-search-form {
    width: min(300px, 72vw);
    opacity: 1;
    pointer-events: auto;
}
.nav-search-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--kt-sf);
    border: 1px solid var(--kt-line-2);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink);
    font-family: var(--font-body, Montserrat, sans-serif);
    font-size: 14px;
    outline: none;
}
.nav-search-input::placeholder { color: var(--kt-ink-3); }
.nav-search-input:focus { border-color: var(--kt-ink); }

/* ============================================
   OZNÁMENÍ
   ============================================ */
.nav-bell-wrap { position: relative; }

/* Zvoneček byl azurové kolečko se zářivým prstencem. Kruh je vyhrazený
   věcem, které kruh doopravdy jsou — tlačítko mezi ně nepatří. */
.nav-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-2);
    cursor: pointer;
    padding: 0;
    transition: color 0.16s linear;
}
.nav-bell-btn:hover { color: var(--kt-ink); }
.nav-bell-icon {
    color: currentColor;
    pointer-events: none;
}

/* Počítadlo: plný štítek bez gradientu a bez doskočení. Zelený není,
   ta barva je vyhrazená tlačítku Přihlásit se. */
.nav-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--kt-ink);
    border: 1px solid var(--kt-head);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-display);
    font-size: 11.5px;   /* pod tuhle hranici text na webu nejde */
    font-weight: 800;
    color: var(--kt-head);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* ============================================
   ROZBALOVACÍ PANELY
   ============================================
   Panel nad stránkou opravdu leží, takže smí mít --kt-sf. Drží ho
   vlásečnice a 3px hrana, ne dva stíny a rozostřený mrak pod ním. */
.nav-bell-dropdown {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    width: 320px;
    background: var(--kt-sf);
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-line-2);
    border-radius: var(--kt-r);
    z-index: var(--z-nav-dropdown);
    overflow: hidden;
}

.nbd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px 10px;
    border-bottom: 1px solid var(--kt-line);
}

/* Odznak je první vysázený řádek panelu: verzálky, prostrkání, tlumeně.
   Velikost v px, ne v em: root má pod 1440 px 14,5 px, takže relativní
   hodnoty renderovaly o devět procent míň, než vypadaly — a spadly pod
   11,5px, což je spodní hranice čteného textu na celém webu. */
.nbd-title {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--kt-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nbd-clear-all {
    background: none;
    border: 0;
    padding: 0;
    color: var(--kt-ink-3);
    font-family: var(--font-display);
    font-size: 11.5px;
    cursor: pointer;
    transition: color 0.16s linear;
}
.nbd-clear-all:hover { color: var(--kt-ink); }

.nbd-list {
    list-style: none;
    max-height: 270px;
    overflow-y: auto;
    padding: 4px 0;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--kt-line-2) transparent;
}

/* Řádek nese stav 3px hranou vlevo, ne podbarvením. */
.nbd-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 15px;
    border-left: 3px solid transparent;
    transition: background-color 0.16s linear;
}
.nbd-item:hover { background: var(--kt-el); }
.nbd-item--unread { border-left-color: var(--kt-ink); }

.nbd-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-2);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.nbd-item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.nbd-item-text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--kt-ink-2);
}
.nbd-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Druh oznámení se pozná z textu. Barva navíc jen tříští akcent, proto
   jeden tlumený štítek pro všechny — zdroj měl azurový, fialový i zelený. */
.nbd-type,
.nbd-type-giveaway,
.nbd-type-raffle,
.nbd-type-stream {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-2);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nbd-item-date {
    font-size: 11.5px;
    color: var(--kt-ink-3);
}
.nbd-empty {
    padding: 22px 15px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--kt-ink-3);
}

/* Na telefonu se panel roztáhne přes šířku výřezu, 320px by přetékalo. */
@media (max-width: 600px) {
    .nav-bell-dropdown {
        position: fixed;
        top: calc(var(--kt-top-h, 70px) + 8px);
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ============================================
   HAMBURGER
   ============================================
   Bez rámečku a bez záře, zůstávají tři linky. Rám a umístění na konci
   účtové strany řeší 50-menu.css, tady je jen mechanika křížku. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    border-radius: var(--kt-r-sm);
    cursor: pointer;
}

.hamburger {
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger::before,
.hamburger::after,
.hamburger-mid {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--kt-ink-2);
    transition: transform var(--transition-fast), opacity var(--transition-fast), top var(--transition-fast), bottom var(--transition-fast);
}

.hamburger::before { top: 0; }
.hamburger::after { bottom: 0; }
.hamburger-mid {
    top: 50%;
    transform: translateY(-50%);
}

/* Otevřeno = křížek */
.nav-toggle.active .hamburger-mid { opacity: 0; }
.nav-toggle.active .hamburger::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.nav-toggle.active .hamburger::after {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 1000px) {
    .nav-toggle { display: flex; }
}

/* Zatmívací vrstva pod otevřeným panelem. */
.nav-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-nav-backdrop);
    opacity: 0;
    transition: opacity var(--transition-normal);
}
@media (max-width: 1000px) {
    .nav-menu-overlay { display: block; pointer-events: none; }
    .nav-menu-overlay.active { pointer-events: auto; opacity: 1; }
}

/* ============================================
   ZÁMEK SCROLLU POD OTEVŘENÝM PANELEM
   ============================================
   Samotné overflow:hidden na body posune obsah o šířku zmizelé svislé
   lišty a je z toho viditelný skok (a CLS). Šířku proto dopočítá JS do
   --nav-scrollbar-w a vrátí ji jako padding. */
body.nav-open {
    overflow: hidden;
    padding-right: var(--nav-scrollbar-w, 0px);
}
body.nav-open .navbar {
    right: var(--nav-scrollbar-w, 0px);
}

/* Řádek se zůstatkem v účtovém panelu. */
.nud-coins-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px 8px;
    border-bottom: 1px solid var(--kt-line);
    font-size: 0.85rem;
    color: var(--kt-ink-3);
}
/* Zůstatek nese --kt-coin, stejně jako v liště. Zelená sem nepatří. */
.nud-coins-row strong {
    color: var(--kt-coin);
    font-family: var(--font-display);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .nav-link,
    .nav-search-form,
    .nud-chevron,
    .nav-menu-overlay,
    .hamburger::before,
    .hamburger::after,
    .hamburger-mid { transition: none; }
}

/* ============================================
   LOGIN MODAL — základní vrstva formuláře
   --------------------------------------------
   Co tady stálo: doslova okno zdrojového webu. Krabička 400 px vystředěná
   přes celou výšku, rádius 20 px, fialový okraj, dvě záře v box-shadow,
   logo s duhovým gradientem přes background-clip, přepínač jako dvě pilulky
   v poloprůhledné bílé kapse, verzálkové popisky polí, duhové tlačítko
   a hover, který panel nadzvedne. 105 ze 119 deklarací bylo doslova
   shodných s respinnerstv — právě to majitel jmenoval jako první.

   Zbyla kostra bez tvaru. Tvar panelu drží components/modals.css (plocha
   --kt-sf, rádius 0, 3px hrana), rozvržení dvou sloupců
   karty-parts/20-login.css. Tady zůstává jen to, co je společné všem
   formulářům v modálu a co používá i /nastaveni: pole, hláška, tlačítko.
   Mrtvé třídy zdroje (.login-modal-logo, .login-tabs, .login-tab,
   .login-bonus-hint, .login-dev-link, .login-resend-btn) jsou pryč celé —
   žádná šablona ani skript je nerenderoval.
   Žádný !important: tohle je základní vrstva, ne záplata navrch.
   ============================================ */

/* Hláška. Plochá plocha, stav nese 3px hrana vlevo, ne barevná výplň.
   Zdroj měl poloprůhledné červené pozadí, červený rámeček i červený text —
   tři nosiče jedné informace. */
.login-error {
    margin-bottom: 14px;
    padding: 11px 13px;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-live);
    border-radius: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--kt-ink);
}

/* Pole. Popisek je věta, ne verzálky s prostrkáním. */
.login-field { margin-bottom: 14px; }
.login-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kt-ink-2);
}
.login-field input {
    width: 100%;
    padding: 11px 13px;
    background: var(--kt-pg);
    border: 1px solid var(--kt-line);
    border-radius: 0;
    color: var(--kt-ink);
    font-family: var(--font-body, Montserrat, sans-serif);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s linear;
}
.login-field input::placeholder { color: var(--kt-ink-3); }
/* Fokus nese linka, ne prstenec ze tří vrstev stínu. */
.login-field input:focus { border-color: var(--kt-green); }

/* Primární tlačítko. Jediné místo v panelu, kde smí být plná zelená.
   Zdroj měl gradient 135°, hover s posunem nahoru a fialovou záři. */
.login-submit {
    width: 100%;
    margin-top: 4px;
    padding: 12px 16px;
    background: var(--kt-green);
    border: 1px solid var(--kt-green);
    border-radius: 0;
    color: #08090a;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s linear, border-color 0.15s linear;
}
.login-submit:hover {
    background: var(--kt-green-h);
    border-color: var(--kt-green-h);
}
.login-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   ÚČTOVÝ PANEL
   ------------------------------------------------------------
   Panel nad stránkou opravdu leží, takže má --kt-sf. Zděděná verze byla
   fialová krabička s rozostřeným pozadím, dvěma zářivými stíny a zlatým
   zůstatkem; odhlášení svítilo růžově (var(--paper-2)). Zůstala plocha, jedna
   vlásečnice a 3px hrana.
   ============================================================ */
.nav-user-dropdown-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    min-width: 210px;
    background: var(--kt-sf);
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-line-2);
    border-radius: var(--kt-r);
    overflow: hidden;
    display: none;
    z-index: var(--z-nav-dropdown);
}
.nav-user-dropdown.open { display: block; }

/* Jméno účtu bylo zelené. Zelená v tomhle bloku patří zůstatku, hlavička
   je běžný text. */
.nud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px 10px;
    border-bottom: 1px solid var(--kt-line);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--kt-ink);
}
.nud-header span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Křížek dává smysl jen v zásuvce na malé šířce. */
.nud-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-sm);
    color: var(--kt-ink-2);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.16s linear, color 0.16s linear;
}
.nud-close-btn:hover {
    border-color: var(--kt-line-2);
    color: var(--kt-ink);
}

.nud-menu {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

.nud-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--kt-ink-2);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.16s linear, color 0.16s linear;
}
.nud-menu-item:hover {
    background: var(--kt-el);
    color: var(--kt-ink);
}

/* Ikona vlevo ve visutém sloupci jednotné šířky, počet zarovnaný doprava. */
.nud-mi-ico {
    flex: 0 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kt-ink-3);
}
.nud-menu-item:hover .nud-mi-ico { color: var(--kt-ink-2); }

/* Zelená v panelu je jednou u zůstatku a jednou tady u počtu novinek —
   obojí je číslo, ne plocha. */
.nud-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: auto;
    padding: 0 4px;
    background: var(--kt-ink);
    border-radius: var(--kt-r-sm);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--kt-head);
    vertical-align: middle;
}

.nud-logout-btn {
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: 0;
    border-top: 1px solid var(--kt-line);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--kt-ink-3);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.16s linear, color 0.16s linear;
}
.nud-logout-btn:hover {
    background: var(--kt-el);
    color: var(--kt-ink);
}

/* ── Do 1000 px je z panelu boční zásuvka ──
   Stejný zlom, na kterém se odkazy stěhují do panelu pod lištou. Zděděné
   pravidlo ji zapínalo už od 1300 px, tedy i na notebooku, kde je v liště
   místa dost. Prolnutí drží visibility a transform, ne display — proto
   se tu display nastavuje natvrdo a bez !important. */
@media (max-width: 1000px) {
    .nav-user-dropdown {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: auto;
        display: block;
        width: min(300px, 85vw);
        height: 100dvh;
        min-width: 0;
        padding-top: var(--kt-top-h, 70px);
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        border: 0;
        border-left: 3px solid var(--kt-line-2);
        overflow-y: auto;
        overflow-x: hidden;
        visibility: hidden;
        transform: translateX(110%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    }
    .nav-user-dropdown.open {
        visibility: visible;
        transform: translateX(0);
    }
    .nud-close-btn { display: flex; }
    .nud-header {
        padding: 18px 20px 14px;
        font-size: 1.05rem;
    }
    .nud-menu-item {
        padding: 14px 20px;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--kt-line);
    }
    .nud-logout-btn {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-user-dropdown,
    .nud-menu-item,
    .nud-logout-btn,
    .nud-close-btn { transition: none; }
}

/* ============================================================
   ACCOUNT MODAL EXTRAS
   ============================================================ */
.account-modal {
    max-height: 90vh;
    overflow-y: auto;
}
.account-modal::-webkit-scrollbar { width: 4px; }
.account-modal::-webkit-scrollbar-track { background: transparent; }
.account-modal::-webkit-scrollbar-thumb { background: var(--alpha-purple-40); border-radius: 0; }

.acc-info {
    background: var(--alpha-purple-8);
    border: 1px solid var(--alpha-purple-20);
    border-radius: 0;
    padding: 12px 14px;
    margin-bottom: 20px;
}
.acc-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    padding: 4px 0;
    color: var(--alpha-white-70);
}
.acc-info-item:not(:last-child) {
    border-bottom: 1px solid var(--alpha-white-6);
}
.acc-info-item strong {
    color: #fff;
    font-weight: 600;
}

.acc-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--kick-green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}

.login-success {
    background: rgba(var(--go-rgb), 0.12);
    border: 1px solid rgba(var(--go-rgb), 0.3);
    border-radius: 0;
    padding: 10px 14px;
    font-size: 0.83rem;
    color: var(--kt-green);
    margin-bottom: 12px;
}

/* Potvrzovací hláška (ověření e-mailu). Stejný tvar jako .login-error, jen
   zelená hrana: plochá plocha, 3px pruh vlevo, rádius 0. Zděděná verze byla
   azurová krabička s poloprůhlednou výplní a azurovým textem — čtvrtá
   akcentní barva v panelu, kde má být jen jedna.
   .login-dev-link a .login-resend-btn tady stály taky a nic je nerenderovalo;
   odkaz „Odeslat znovu" vkládá skript jako .jlau-link. */
.login-verify-msg {
    margin-bottom: 14px;
    padding: 11px 13px;
    background: var(--kt-el);
    border: 1px solid var(--kt-line);
    border-left: 3px solid var(--kt-green);
    border-radius: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--kt-ink-2);
}
.login-verify-msg strong { color: var(--kt-ink); }

/* Wins list */
.acc-wins-list {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acc-wins-loading,
.acc-wins-empty {
    text-align: center;
    color: var(--alpha-white-45);
    font-size: 0.85rem;
    padding: 24px 0;
}
.acc-win-card {
    background: var(--alpha-purple-6);
    border: 1px solid var(--alpha-purple-20);
    border-radius: 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color 0.2s;
}
.acc-win-card:hover {
    border-color: var(--alpha-purple-40);
}
.acc-win-card.acc-win-unseen {
    border-left: 3px solid var(--coin);
}
.acc-win-info {
    flex: 1;
    min-width: 0;
}
.acc-win-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.acc-win-type {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid;
}
/* Denní, týdenní, měsíční a zvláštní je DRUH soutěže, ne stav. Barva na webu
   nese stav nebo akci, a když ji dostane i kategorie, přestane stav znamenat
   cokoli. Čtyři barevné čipy tady navíc zaváděly čtyři odstíny, které paleta
   nemá. Druh je napsaný v čipu, to stačí; čip je pro všechny stejný. */
.acc-win-type-daily,
.acc-win-type-weekly,
.acc-win-type-monthly,
.acc-win-type-special {
    color: var(--paper-2);
    background: var(--raise);
    border-color: var(--rail);
}
.acc-win-prize {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acc-win-badge-new {
    font-size: 0.55rem;
    font-weight: 800;
    background: var(--coin);
    color: #000;
    padding: 1px 6px;
    border-radius: 0;
    white-space: nowrap;
}
.acc-win-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--alpha-white-45);
    margin-top: 2px;
}
.acc-win-chat-btn {
    flex-shrink: 0;
    background: var(--alpha-purple-15);
    border: 1px solid var(--alpha-purple-35);
    color: #53fc18;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.acc-win-chat-btn:hover {
    background: var(--alpha-purple-30);
    border-color: var(--alpha-purple-60);
}
.acc-win-msg-badge {
    background: var(--kick-green);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 0;
}

/* ── Order cards in account modal ── */
.ord-card {
    background: var(--alpha-purple-6);
    border: 1px solid var(--alpha-purple-20);
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.ord-card:hover { border-color: var(--alpha-purple-40); }
.ord-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.ord-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ord-card-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.ord-card-price {
    font-size: 0.78rem;
    color: var(--alpha-white-50);
}
.ord-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ord-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--alpha-white-45);
}
.ord-card-meta strong { color: var(--alpha-white-70); }
.ord-card-date { margin-left: auto; }

/* ── Status badges ── */
.ord-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 0;
    white-space: nowrap;
}
.ord-status-pending    { background: rgba(var(--coin-rgb),0.15);  color: var(--coin); border: 1px solid rgba(var(--coin-rgb),0.3); }
.ord-status-processing { background: var(--alpha-cyan-10);   color: var(--kt-warn); border: 1px solid var(--alpha-cyan-30); }
.ord-status-done       { background: rgba(var(--go-rgb),0.12);  color: var(--kt-green); border: 1px solid rgba(var(--go-rgb),0.3); }
.ord-status-cancelled  { background: rgba(var(--live-rgb),0.12);   color: var(--error); border: 1px solid rgba(var(--live-rgb),0.3); }

/* ── Chat button ── */
.ord-chat-btn {
    background: var(--alpha-purple-15);
    border: 1px solid var(--alpha-purple-35);
    color: #53fc18;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.ord-chat-btn:hover { background: var(--alpha-purple-30); border-color: var(--alpha-purple-60); }
.ord-chat-btn-reply {
    background: var(--alpha-purple-25);
    border-color: var(--kick-green);
    color: #fff;
}

/* ── Order Chat Modal ── */
.ord-chat-overlay {
    position: fixed;
    inset: 0;
    background: var(--alpha-black-70);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    padding: 16px;
}
.ord-chat-box {
    background: var(--panel);
    border: 1px solid var(--alpha-purple-35);
    border-radius: 0;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px var(--alpha-black-70), 0 0 0 1px var(--alpha-purple-15);
}
.ord-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--alpha-white-6);
    flex-shrink: 0;
}
.ord-chat-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ord-chat-title span:first-child {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}
.ord-chat-close {
    background: none;
    border: none;
    color: var(--alpha-white-40);
    font-size: 1.6rem;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.ord-chat-close:hover { color: #fff; background: var(--alpha-white-8); }
.ord-chat-meta {
    padding: 8px 20px 10px;
    font-size: 0.76rem;
    color: var(--alpha-white-45);
    border-bottom: 1px solid var(--alpha-white-5);
    flex-shrink: 0;
}
.ord-chat-meta strong { color: var(--alpha-white-70); }
.ord-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    max-height: 340px;
}
.ord-chat-messages::-webkit-scrollbar { width: 4px; }
.ord-chat-messages::-webkit-scrollbar-thumb { background: var(--alpha-purple-40); border-radius: 0; }
.ord-msg { display: flex; flex-direction: column; }
.ord-msg-user  { align-items: flex-end; }
.ord-msg-admin { align-items: flex-start; }
.ord-msg-bubble {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: break-word;
}
.ord-msg-user  .ord-msg-bubble { background: var(--alpha-purple-25); color: var(--paper-2); border-bottom-right-radius: 4px; }
.ord-msg-admin .ord-msg-bubble { background: var(--alpha-cyan-10); color: var(--paper); border: 1px solid var(--alpha-cyan-20); border-bottom-left-radius: 4px; }
.ord-msg-time {
    font-size: 0.68rem;
    color: var(--alpha-white-30);
    margin-top: 3px;
    padding: 0 2px;
}
.ord-chat-input-wrap {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--alpha-white-6);
    flex-shrink: 0;
}
.ord-chat-input {
    flex: 1;
    background: var(--alpha-white-5);
    border: 1px solid var(--alpha-purple-30);
    border-radius: 0;
    color: #fff;
    font-size: 0.85rem;
    padding: 9px 12px;
    resize: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.ord-chat-input:focus { outline: none; border-color: var(--kick-green); }
.ord-chat-input::placeholder { color: var(--alpha-white-30); }
.ord-chat-send {
    background: var(--kick-green);
    border: none;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    align-self: flex-end;
}
.ord-chat-send:hover { background: var(--go-hi); }
.ord-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Username change remaining counter */
.acc-section-title { display: flex; align-items: center; gap: 8px; }
.acc-changes-left {
    font-size: 0.72rem;
    color: var(--alpha-white-30);
    font-weight: 400;
    font-family: var(--font-body, 'Montserrat', sans-serif);
}

/* ============================================
   ŠÍŘKY
   ============================================
   Co tady stálo: dvouřádkový rail ve stylu vyhraj.cz. Logo, účet a hledání
   nahoře, dělicí linka přes .nav-container::before, dole vycentrovaných
   sedm skupin s ikonami a kotvení mega-panelů na spodní řádek — plus tři
   stupně sevření (1560px, 1400px, 1120px) pro položky, které se v liště
   přestávaly vejít. Lišta je dnes jednořádková a zóny v ní dělí svislé
   vlásečnice (karty-parts/50-menu.css), takže z celého bloku zbyly dvě
   věci, které na rozvržení lišty nevisí.

   --nav-height NENÍ výška lišty (tu drží --kt-top-h v karty.css). Visí na
   něm odsazení heroů po celém webu, proto si drží hodnoty i zlomy beze
   změny — jinak by při každé změně poskočil obsah na všech stránkách. */
@media (min-width: 1301px) {
    :root { --nav-height: 116px; }
}
@media (max-width: 1300px) {
    :root { --nav-height: 60px; }
}

/* Hledání přes Google dává smysl u klávesnice. Na telefonu je v liště ruch
   navíc, tam ho 50-menu.css schová spolu s odkazy do panelu — proto stejný
   zlom (1000px), ne zděděných 1300. */
@media (min-width: 1001px) {
    .nav-search { display: inline-flex; }
}