/* ═══════════════════════════════════════════════════════════════════════════
   SOUTĚŽE — stránka /souteze
   ───────────────────────────────────────────────────────────────────────────
   CO TENHLE SOUBOR NEŘEŠÍ
   Kartu soutěže ani mřížku soutěží. Karta jede na kostře .nb-* z
   components/nabidka.css a doplňuje ji components/souteze.css, který se
   načítá jako poslední. Mřížka je tam taky, na jednom místě pro /souteze
   i pro homepage — dřív byla definovaná dvakrát a rozhodovalo jen pořadí
   souborů v hlavičce.

   Zbylo jen to, co ví jenom tahle stránka: hlavičky sekcí a kategorií,
   návod „jak se zapojit", tabulka výherců a obsah dvou modálů (plášť sází
   components/modals.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1) STRÁNKA
   ───────────────────────────────────────────────────────────────────────── */
.page-giveaways {
    width: 100%;
    align-self: stretch;
}

/* .gw-eyebrow { odešel: oční linky nad nadpisy jsou zakázané a markup je pryč. */

/* Poznámka o 24 hodinách vedle nadpisu sekce. Je to poznámka, ne akce,
   takže je v tlumené barvě a bez plochy. */
.gw-24h-notice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--paper-2);
    font-size: 12.5px;
    white-space: nowrap;
}
.gw-24h-notice svg { color: var(--paper-3); flex: none; }
.gw-24h-notice strong { color: var(--paper); font-weight: 700; }

/* Drobná poznámka v modálu („nepovinné", vysvětlivka pod polem). Byla třikrát
   zapsaná inline jako rgba(255,255,255,.45), takže ji nešlo přeladit z tokenů. */
.gw-note-soft { color: var(--paper-3); font-weight: 400; }
.gw-note-fine { font-size: .8rem; }

/* ─────────────────────────────────────────────────────────────────────────
   2) HLAVIČKA KATEGORIE
   Rozdíl mezi sekcemi nese jejich název, ne barva nadpisu. Hlavička je
   podřízená nadpisu sekce nad ní, takže je menší a linka pod ní odděluje
   kategorii od té předchozí.
   ───────────────────────────────────────────────────────────────────────── */
.gw-cat { margin-bottom: 40px; }
.gw-cat:last-child { margin-bottom: 0; }

.gw-cat-head {
    display: flex;
    align-items: baseline;
    gap: 1.2ch;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rail);
}
.gw-cat-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    text-transform: none;
    color: var(--paper);
}

/* ─────────────────────────────────────────────────────────────────────────
   3) JAK SE ZAPOJIT
   Vlasová mřížka ve stejném idiomu jako parametry na kartě: mezera 1 px nad
   barvou linky, buňky na ploše panelu. Kroky tak stojí vedle sebe jako tři
   sloupce jednoho výpisu, ne pod sebou jako číslovaný seznam — a čtou se
   stejným pohybem oka jako karty nad nimi.
   ───────────────────────────────────────────────────────────────────────── */
.gw-howto {
    margin: 44px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--rail);
}
.gw-howto-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: var(--track-tight);
    text-transform: none;
    color: var(--paper);
}

.gw-method {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    margin: 0 0 18px;
    background: var(--rail);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    overflow: hidden;
}
.gw-method > div { background: var(--panel); padding: 16px 18px; }
.gw-method dt {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--paper);
}
/* Pořadí kroku je údaj, ne nadpis — proto strojopis a tlumená barva. Zelená
   by tu byla třetí zelenou věcí vedle tlačítek na kartách. */
.gw-method-num {
    flex: none;
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .09em;
    color: var(--paper-3);
}
.gw-method dd {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--paper-2);
}

.gw-howto-note {
    max-width: 68ch;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--paper-2);
}
.gw-howto-note strong { color: var(--paper); font-weight: 700; }
.gw-howto-note a, .gw-method a { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gw-howto-note a:hover, .gw-method a:hover { color: var(--go); }

/* ─────────────────────────────────────────────────────────────────────────
   4) VÝHERCI
   Tabulka je výpis, ne dlaždice: plocha hlavičky, strojopisné popisky
   sloupců, vlasová linka mezi řádky. Výhra si bere stejné dvě barvy jako
   karta — peníze zelenou, free spiny jantarem — takže se sloupec dá projet
   očima a hned je vidět, co se kde vyhrálo.
   ───────────────────────────────────────────────────────────────────────── */
.gw-winners-wrap {
    width: 100%;
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
}

.gw-winners-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
}
.gw-winners-table th {
    padding: 10px 14px;
    background: var(--panel-hi);
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--paper-3);
}
.gw-winners-table td {
    padding: 12px 14px;
    border-top: 1px solid var(--rail);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--paper);
    vertical-align: baseline;
}
.gw-winner-hidden { display: none; }

.gw-wt-user { display: inline-flex; align-items: baseline; gap: 8px; }
.gw-avatar {
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--raise);
    /* Kruh, ne karta — rádius se proto nebere z tokenů. */
    border-radius: 50%;
    font-family: var(--font-code);
    font-size: 11px;
    font-weight: 600;
    color: var(--paper-2);
}
/* Barvu buňky drží pravidlo `.gw-winners-table td`, které má vyšší váhu než
   holá třída. Sloupcové třídy proto musí být psané přes tabulku, jinak by
   zelená ani jantar v tabulce vůbec nenaskočily. */
.gw-wt-name { font-weight: 700; }
.gw-winners-table td.gw-wt-giveaway { color: var(--paper-2); }
.gw-winners-table td.gw-wt-prize { font-weight: 700; }
/* Hodnota výhry je údaj a údaj nese hlavní textová barva. Zelená znamená
   „klikni sem" a jantar patří jen JL Coinům; sloupec výher není ani jedno. */
.gw-winners-table td.gw-wt-prize--money,
.gw-winners-table td.gw-wt-prize--spin  { color: var(--paper); }
.gw-winners-table td.gw-wt-date {
    font-family: var(--font-code);
    font-size: .78rem;
    color: var(--paper-3);
    white-space: nowrap;
}

.gw-winners-table .gw-badge {
    font-family: var(--font-code);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Tlačítko „Zobrazit další" je druhotná akce — bere si sdílenou .btn-secondary
   ze skin.css, aby se vedle zelených tlačítek na kartách nepralo o pozornost. */
.gw-winners-more-wrap { margin-top: 18px; }

/* ─────────────────────────────────────────────────────────────────────────
   5) MODÁLY
   Clonu, panel, křížek a nadpis sází components/modals.css. Tady je jen
   obsah, který jinde není: pole přihlášky a seznam účastníků.
   ───────────────────────────────────────────────────────────────────────── */
.gw-discord-box,
.gw-participants-box { padding: 30px 28px 26px; }

.gw-discord-header,
.gw-participants-header { margin-bottom: 14px; }
.gw-discord-header h3,
.gw-participants-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    /* core/base.css sází nadpisy verzálkami. Nadpis panelu je věta. */
    text-transform: none;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
.gw-participants-count {
    font-family: var(--font-code);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.gw-discord-hint {
    margin: 0 0 6px;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--paper-2);
}
.gw-discord-hint strong { color: var(--paper); }

.gw-discord-cost-hint {
    margin-bottom: 14px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--coin);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--paper-2);
}

.gw-discord-input {
    width: 100%;
    padding: 11px 13px;
    background: var(--raise);
    border: 1px solid var(--rail-2);
    border-radius: var(--r-btn);
    color: var(--paper);
    font-family: var(--font-text);
    font-size: 14px;
    transition: border-color var(--t-fast);
}
.gw-discord-input:focus { border-color: var(--go); outline: none; }
.gw-discord-input::placeholder { color: var(--paper-3); }

.gw-discord-error {
    margin-top: 12px;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--error);
    font-size: 13.5px;
    color: var(--error);
}

.gw-discord-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.gw-discord-cancel,
.gw-discord-confirm {
    flex: 1 1 0;
    min-height: 46px;
    padding: 0 16px;
    border-radius: var(--r-btn);
    font-family: var(--font-text);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
/* Vedle primárního tlačítka nikdy nestojí druhé barevné, jen tiché zrušení. */
.gw-discord-cancel {
    background: var(--raise);
    border: 1px solid var(--rail-2);
    color: var(--paper-2);
}
.gw-discord-cancel:hover { background: var(--panel-hi); color: var(--paper); }
/* Potvrzení je táž akce jako „Přihlásit se" na kartě, tak vypadá stejně
   jako .nb-go — bez verzálek a bez druhého řezu. */
.gw-discord-confirm {
    background: var(--go);
    border: 1px solid transparent;
    color: var(--go-ink);
}
.gw-discord-confirm:hover { background: var(--go-hi); color: var(--go-ink); }

/* Seznam účastníků skládá script.js. Pořadí stojí ve visutém sloupci. */
.gw-participants-list { max-height: 52vh; overflow-y: auto; }
.gw-participants-empty { margin: 0; font-size: 13.5px; color: var(--paper-2); }
.gw-participant-row {
    display: grid;
    grid-template-columns: 2.6ch 22px minmax(0, 1fr) auto;
    column-gap: 0.9ch;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--rail);
}
.gw-participant-row:first-child { border-top: 0; }
/* Pořadí je údaj, ne nadpis — strojopis s tabulkovými číslicemi, ať sloupec
   nekmitá mezi jednocifernými a dvoucifernými čísly. */
.gw-participant-num {
    font-family: var(--font-code);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}
.gw-participant-avatar {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--raise);
    border-radius: 50%;
    font-family: var(--font-code);
    font-size: 11px;
    font-weight: 600;
    color: var(--paper-2);
}
.gw-participant-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--paper);
    overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────
   6) MENŠÍ OBRAZOVKY
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .gw-cat { margin-bottom: 32px; }
}

@media (max-width: 640px) {
    .gw-cat-head { flex-wrap: wrap; gap: 8px; }
    .gw-cat-title { font-size: 18px; }
    /* Poznámka o 24 hodinách je jeden nezalomitelný řádek, na mobilu by
       roztlačila hlavičku sekce do strany. */
    .gw-24h-notice { display: none; }
    .gw-hide-sm { display: none; }
    .gw-winners-table { min-width: 0; }
    .gw-discord-actions { flex-direction: column; }
}