/* ═══════════════════════════════════════════════════════════════════════════
   MODÁLY — společný plášť
   ───────────────────────────────────────────────────────────────────────────
   PROČ SE TENHLE SOUBOR PŘEPSAL CELÝ
   Do téhle chvíle v něm stálo okno streamera ze zdrojového webu: rádius 28 px,
   backdrop-filter blur(30px), fialový gradient 145°, dvě záře v box-shadow,
   kruhový avatar v gradientním prstenci, mřížka statistik v poloprůhledných
   fialových dlaždicích. 188 ze 192 deklarací bylo doslova shodných se zdrojem.
   Přitom ani jednu z těch tříd (.streamer-modal, .modal-avatar, .modal-stat,
   .platform-card …) žádná šablona ani skript tohohle webu nerenderoval —
   byl to mrtvý kód, který nesl podpis cizího webu.

   Místo něj tady stojí plášť modálů, které web opravdu má: přihlášení,
   soutěžní vstup, seznam účastníků, chat objednávky a Tokyo nabídka.
   Modál je jediná věc, která DOOPRAVDY leží nad stránkou, takže smí mít
   plochu --panel. Sklo a záře jsou pryč. Žádný !important — tohle je základní
   vrstva, ne záplata navrch.

   ZMĚNA PROTI PŘEDCHOZÍ VERZI: stálo tu „rádius je 0, hranu nese 3px pruh
   vlevo". To byl starý systém. Nový drží kartu rádiusem --r-card 20px a
   vlasovou linkou --rail-2 (viz variables.css a core/skin.css), a přihlašovací
   okno tak už vypadalo — .login-modal.au v ucet-modal.css si nulu přebíjelo
   zpátky. Hranaté zůstávaly jen soutěže, chat objednávky a Tokyo, tedy tři
   panely, které se od zbytku webu lišily bez důvodu. Teď je plášť jeden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1) ZÁSTĚNA
   Plochá tmavá clona, ne rozostřené sklo. Rozostření pozadí bylo nejsilnější
   poznávací znak zdroje a nejdražší efekt na slabších strojích zároveň.
   Panel visí u horní hrany, ne na středu: dlouhý formulář pak neroste do
   obou směrů a při otevření klávesnice na mobilu neuteče nad ohyb.
   ───────────────────────────────────────────────────────────────────────── */
.jl-modal-overlay,
.login-modal-overlay,
.gw-discord-overlay,
.gw-participants-overlay,
.ord-chat-overlay,
.tokyo-intercept-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--bg-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 7vh, 76px) 20px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ─────────────────────────────────────────────────────────────────────────
   2) PANEL
   Linka drží konstrukci, barva linky nese stav. Zelená se na lince objeví jen
   tam, kde panel něco nabízí (vstup do soutěže, Tokyo); ostatní panely mají
   linku neutrální, aby zelená v jednom bloku zůstala jedna.
   ───────────────────────────────────────────────────────────────────────── */
.jl-modal,
.login-modal,
.gw-discord-box,
.gw-participants-box,
.ord-chat-box,
.tokyo-intercept-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--panel);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift-hi);
    color: var(--paper);
    animation: jlModalIn var(--t-base) both;
}

/* Zelenou linku má jen panel, který nabízí, ne panel, který se ptá.
   Přihlašovací panel ji nemá schválně: uvnitř už jednu zelenou má, a to
   primární tlačítko. Nádech na ploše je stejný jako u první nabídky
   v soupisu (.nb--top v nabidka.css), takže to web zná.

   NÁDECH JDE JEN DO background-image, PLOCHU DRŽÍ background-color.
   Souhrnný zápis `background: linear-gradient(…)` totiž zároveň srazí
   background-color na transparent — a první zarážka toho přechodu je
   4,5% zelené, tedy prakticky průhledná. U karty v soupisu to nevadí,
   ta leží na neprůhledné stránce; modál ale visí nad obsahem, takže
   levou horní polovinou okna prosvítal text stránky pod ním (na /souteze
   se skrz nadpis „Přihlášení do soutěže" četl hero „o free spiny").
   Druhá zarážka je proto `transparent`, ne `var(--panel)`: plocha je
   pod přechodem, ne v něm. */
.gw-discord-box,
.tokyo-intercept-box {
    border-color: rgba(var(--go-rgb), .34);
    background-color: var(--panel);
    background-image: linear-gradient(140deg, rgba(var(--go-rgb), .045), transparent 55%);
}

@keyframes jlModalIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3) ZAVÍRÁNÍ
   Čtvercová plocha bez výplně. Zděděná verze byla kruh s poloprůhlednou
   bílou výplní, který se při hoveru otáčel o 90° a červenal — dekorace bez
   informace. Tady stav nese jen barva linky a textu.
   ───────────────────────────────────────────────────────────────────────── */
.jl-modal .modal-close,
.login-modal-close,
.gw-discord-close,
.ord-chat-close,
.tokyo-intercept-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--raise);
    border: 1px solid var(--rail);
    border-radius: var(--r-chip);
    color: var(--paper-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.jl-modal .modal-close:hover,
.login-modal-close:hover,
.gw-discord-close:hover,
.ord-chat-close:hover,
.tokyo-intercept-close:hover {
    color: var(--paper);
    border-color: var(--rail-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   4) SAZBA UVNITŘ PANELU
   Hierarchii nese velikost a váha, ne barva. Odznak („exkluzivní", „počkej")
   je první vysázený řádek obsahu, ne stužka přes roh.
   ───────────────────────────────────────────────────────────────────────── */
.modal-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    /* core/base.css:203 dává všem nadpisům verzálky a prostrkání 0.02em.
       Nadpis modálu je věta („50 free spinů, Tokyo"), ne štítek, takže se
       verzálky ruší tady, ve zdrojovém pravidle, ne o vrstvu výš. */
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--paper);
}
.modal-subtitle {
    margin: 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--paper-2);
}

/* Odznak = první vysázený řádek, ne plovoucí stužka. Je to štítek, tedy údaj,
   tedy strojopis — stejný tvar jako oční linka na kartě nabídky. Fallback na
   'Exo 2' tu byl mrtvý, web to písmo dávno nenačítá. */
.jl-badge {
    position: static;
    order: -1;
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-code);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--paper-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   5) VISUTÝ SLOUPEC
   Značky, čísla a ikony nestojí v řádku textu, stojí ve sloupci 2.6ch vlevo
   od textu. Je to nosný znak celého jazyka; zdroj nic takového nemá.
   ───────────────────────────────────────────────────────────────────────── */
.jl-hang {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
}
.jl-hang > :first-child {
    justify-self: start;
    color: var(--paper-3);
    font-variant-numeric: tabular-nums;
}

/* Seznam kroků nebo důvodů uvnitř modálu: každá položka je visutý sloupec. */
ul.jl-hang-list,
ol.jl-hang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 68ch;
}
.jl-hang-list > li {
    display: grid;
    grid-template-columns: 2.6ch 1fr;
    column-gap: 0.9ch;
    align-items: baseline;
    font-size: 13px;
    line-height: 1.5;
    color: var(--paper-2);
}
ol.jl-hang-list { counter-reset: jlstep; }
ol.jl-hang-list > li { counter-increment: jlstep; }
ol.jl-hang-list > li::before {
    content: counter(jlstep);
    font-family: var(--font-code);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}

/* ─────────────────────────────────────────────────────────────────────────
   6) DO 640 px
   Panel jde přes celou šířku, clona se zúží. Rádius zůstává — panel plave nad
   stránkou, takže má být vidět, kde končí; fullscreen s vlastním rádiusem se
   tu nepřepíná.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .jl-modal-overlay,
    .login-modal-overlay,
    .gw-discord-overlay,
    .gw-participants-overlay,
    .ord-chat-overlay,
    .tokyo-intercept-overlay {
        padding: 12px 10px 24px;
    }
    .jl-modal,
    .login-modal,
    .gw-discord-box,
    .gw-participants-box,
    .ord-chat-box,
    .tokyo-intercept-box {
        max-width: none;
    }
}

/* Nájezd panelu je jediná animace, kterou si plášť dovolí; při omezeném
   pohybu odchází. */
@media (prefers-reduced-motion: reduce) {
    .jl-modal,
    .login-modal,
    .gw-discord-box,
    .gw-participants-box,
    .ord-chat-box,
    .tokyo-intercept-box { animation: none; }
}