:root {
    /* Motyw domyślny: fantasy (pergamin, drewno, złoto).
       Nazwy są historyczne, ale pełnią role: --parchment = powierzchnia karty, --ink = tekst na karcie,
       --gold = akcent, --blood = kolor nagłówków i akcji głównej. Motyw sci-fi niżej podmienia wartości. */
    --bg: #1b1410;
    --bg-rgb: 27, 20, 16;
    --bg-soft: #2a1f18;
    --parchment: #efe3c8;
    --parchment-dark: #d9c7a0;
    /* co druga karta długiego spisu (gry w Kolekcji) – odrobinę ciemniejszy pergamin */
    --parchment-alt: #e2d0a8;
    --surface-input: #faf3e2;
    --surface-soft: rgba(255, 255, 255, .35);
    --surface-shade-rgb: 120, 85, 40;
    --ink: #2b2118;
    --ink-muted: #6b5a47;
    --heading: #8e2a22;
    --gold: #c9a24a;
    --gold-bright: #e7c46a;
    --accent-rgb: 201, 162, 74;
    --blood: #8e2a22;
    --moss: #4d6b3c;
    /* strefa gracza B na rysunku misji (generator misji) */
    --mission-b: #2f5d8a;
    --border: #8a6a3b;
    --border-rgb: 138, 106, 59;

    /* powierzchnie „chromu”: górny pasek, panele, przyciski */
    --chrome-from: #3a2a1e;
    --chrome-to: #241a13;
    --panel-bg: #2a1f18;
    --btn-from: #5a4330;
    --btn-to: #3a2a1e;
    --btn-primary-from: #a8352b;
    --btn-primary-to: #6e1f19;
    --on-primary: #fff8e6;
    /* ostrzeżenie / stan „w zawieszeniu” (np. model pauzuje) */
    --warn: #c98a1b;
    --warn-bg: #f3d58a;
    --warn-ink: #5a3a00;
    /* pasek postępu (punkty Battle Group i Strike Teamu, miejsce na pliki) */
    --progress: #3c9a3f;
    /* zegar rundy turniejowej – jasne kolory ostrzeżeń na ciemnym ekranie (czytelne z drugiego końca sali) */
    --clock-screen: #120d0a;
    --clock-ink: #f6ead2;
    --clock-warn: #f2c14e;
    --clock-danger: #ff5a4f;
    /* kostki mocy Vanguarda – kolory jak na prawdziwych kostkach, w obu motywach te same */
    --vg-die-red: #c62f2a;
    --vg-die-white: #f4f1ea;
    --vg-die-blue: #27479b;
    --vg-die-sword-light: #fffaf0;
    --vg-die-sword-dark: #1d1a17;
    --dz-die: #22262b;
    --dz-die-ink: #f2efe6;
    --media-bg: var(--media-bg);
    --scrim: rgba(10, 6, 3, .75);
    --scrim-soft: rgba(20, 12, 6, .6);
    /* nakładka na transmisję – szachownica pod podglądem pokazuje przezroczyste tło (jak w OBS) */
    --overlay-check-a: #4a4a4a;
    --overlay-check-b: #2e2e2e;
    /* podium podsumowania turnieju – medale w obu motywach te same */
    --podium-1: #e7c46a;
    --podium-2: #c4c8cf;
    --podium-3: #b57d48;
    --on-podium: #2b2118;

    --font-display: 'Cinzel', 'Times New Roman', serif;
    --font-body: 'Crimson Text', Georgia, serif;

    --radius: 4px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .55);
    /* Open RPG – dziennik: skórzana okładka, kartka, linie, margines, atrament, taśma, odbitka rysunku */
    --rpg-leather: #5a3a22;
    --rpg-leather-dark: #2e1c10;
    --rpg-paper: #f7eed6;
    --rpg-line: rgba(70, 110, 160, .28);
    --rpg-margin: rgba(170, 40, 40, .45);
    --rpg-ink: #1f2a44;
    --rpg-tape-rgb: 235, 225, 190;
    --rpg-photo: #fffdf6;
}

/* Motyw sci-fi (Warpath, Deadzone): ciemna konsola, cyjan zamiast złota. */
[data-theme="scifi"] {
    --bg: #02070b;
    --bg-rgb: 2, 7, 11;
    --bg-soft: #071722;
    --parchment: #0e222c;
    --parchment-dark: #1d4050;
    --parchment-alt: #143240;
    --surface-input: #081820;
    --surface-soft: rgba(23, 242, 255, .06);
    --surface-shade-rgb: 5, 40, 52;
    --ink: #dff6f9;
    --ink-muted: #7aa3a8;
    --heading: #17f2ff;
    --gold: #1aa9bd;
    --gold-bright: #17f2ff;
    --accent-rgb: 23, 242, 255;
    --blood: #ff3b3b;
    --moss: #2f8f6a;
    --progress: #2fbf71;
    --border: #2b6a78;
    --border-rgb: 43, 106, 120;

    --chrome-from: #0a1c26;
    --chrome-to: #04101a;
    --panel-bg: #071a23;
    --btn-from: #123240;
    --btn-to: #0a212c;
    --btn-primary-from: #0f7c8f;
    --btn-primary-to: #07414f;
    --on-primary: #eaffff;
    --media-bg: radial-gradient(circle, #0d2b38, #02070b);
    --scrim: rgba(1, 8, 12, .8);
    --scrim-soft: rgba(1, 12, 16, .65);

    --font-display: 'Orbitron', 'Segoe UI', sans-serif;
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;

    --radius: 2px;
}

/* delikatne skanlinie tylko w sci-fi */
[data-theme="scifi"] body::after,
body[data-theme="scifi"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: .12;
    mix-blend-mode: screen;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .6) 0 1px, transparent 1px 3px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* miejsce na pionowy pasek przewijania zawsze zarezerwowane – inaczej wyśrodkowana treść przesuwała się w bok
   przy przejściu między krótką i długą stroną (właściciel, 9.10.2026: „menu lata na lewo”) */
html {
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--parchment);
    background:
        radial-gradient(ellipse at top, rgba(var(--accent-rgb), .10), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(0, 0, 0, .6), transparent 60%),
        var(--bg);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 .5em;
}

a {
    color: var(--gold-bright);
}

/* na pergaminowych kartach jasne złoto jest nieczytelne – linki w kolorze nagłówków */
.card a:not(.btn, .campaign-list__link, .skirmish-list__link, .match-list__link, .match-list__cover, .match-duel__players, .panel-log__link, .wizard-progress__link, .setup-steps__title, .recommended__link, .form__error-fix, .game-tile, .ruleset-card, .bg-view-switch__btn, .filter-tabs__tab) {
    color: var(--heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.card a:not(.btn, .campaign-list__link, .skirmish-list__link, .match-list__cover, .match-duel__players, .panel-log__link, .wizard-progress__link, .setup-steps__title, .recommended__link, .form__error-fix, .game-tile, .ruleset-card, .filter-tabs__tab):hover,
.card a:not(.btn, .campaign-list__link, .skirmish-list__link, .match-list__cover, .match-duel__players, .panel-log__link, .wizard-progress__link, .setup-steps__title, .recommended__link, .form__error-fix, .game-tile, .ruleset-card, .filter-tabs__tab):focus-visible {
    text-decoration-thickness: 2px;
}

[hidden] {
    display: none !important;
}

.muted {
    color: var(--ink-muted);
    font-style: italic;
}

/* LAYOUT ------------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 16px;
    flex: 1;
}

@media (min-width: 768px) {
    .container {
        margin: 32px auto;
    }
}

/* GÓRNY PASEK I MENU ------------------------------------------------------
   Mobile first: na telefonie ☰ otwiera menu, podmenu rozwija się jak harmonijka.
   Od 768px menu jest w jednym rzędzie, podmenu wysuwa się pod pozycją.
   ------------------------------------------------------------------------- */

.topbar {
    position: relative;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.topbar__bar {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
}

/* konto i języki: na telefonie na dole rozwiniętego menu, na komputerze w górnej linijce */
.topbar__account {
    order: 3;
    display: none;
}

.topbar.is-open .topbar__account {
    display: flex;
}

.topbar__brand {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--gold-bright);
    text-decoration: none;
    letter-spacing: .08em;
    white-space: nowrap;
}

.topbar__toggle {
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ikonka ☰ z trzech kresek, zamienia się w × po otwarciu */
.topbar__toggle span,
.topbar__toggle span::before,
.topbar__toggle span::after {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: var(--gold-bright);
    transition: transform .2s, background-color .2s;
}

.topbar__toggle span {
    top: 21px;
}

.topbar__toggle span::before,
.topbar__toggle span::after {
    content: "";
    left: 0;
}

.topbar__toggle span::before { top: -7px; }
.topbar__toggle span::after { top: 7px; }

.topbar.is-open .topbar__toggle span { background: transparent; }
.topbar.is-open .topbar__toggle span::before { transform: translateY(7px) rotate(45deg); }
.topbar.is-open .topbar__toggle span::after { transform: translateY(-7px) rotate(-45deg); }

.nav {
    order: 2;
    display: none;
    padding: 0 0 12px;
    border-top: 1px solid rgba(var(--border-rgb), .4);
}

.topbar.is-open .nav {
    display: block;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link,
.nav__sublink {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .06em;
    text-align: left;
    text-decoration: none;
    color: var(--parchment);
    background: none;
    border: 0;
    cursor: pointer;
}

.nav__link:hover,
.nav__sublink:hover,
.nav__item.is-open > .nav__link {
    color: var(--gold-bright);
    background: rgba(var(--accent-rgb), .08);
}

.nav__item.is-active > .nav__link {
    color: var(--gold-bright);
}

.nav__lang-icon {
    flex: none;
    margin-right: 6px;
    color: var(--gold-bright); /* ten sam złoty co nazwa serwisu w lewym górnym rogu */
}

.nav__caret {
    margin-left: auto;
    font-size: .75rem;
    transition: transform .2s;
}

.nav__item.is-open .nav__caret {
    transform: rotate(180deg);
}

.nav__submenu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    background: rgba(0, 0, 0, .2);
}

.nav__item.is-open .nav__submenu {
    display: block;
}

.nav__sublink {
    min-height: 44px;
    padding-left: 32px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    letter-spacing: 0;
}

.nav__sublink.is-current {
    color: var(--gold-bright);
    box-shadow: inset 3px 0 0 var(--gold);
}

.nav__account {
    /* display ustala .topbar__account: na telefonie ukryte, dopóki menu jest zwinięte */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px 0;
    border-top: 1px solid rgba(var(--border-rgb), .3);
}

.nav__user {
    width: 100%;
    color: var(--parchment-dark);
    text-decoration: none;
}

.nav__user:hover,
.nav__user:focus-visible,
.nav__user.is-current {
    color: var(--gold-bright);
    text-decoration: underline;
}

@media (min-width: 768px) {
    /* górna linijka: nazwa serwisu po lewej, język i konto po prawej; menu w osobnym rzędzie pod spodem */
    .topbar {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "brand account"
            "nav   nav";
        align-items: center;
        padding: 0 24px;
    }

    .topbar__bar {
        grid-area: brand;
        min-height: 0;
        padding: 10px 0 6px;
        margin: 0;
    }

    .topbar__account,
    .topbar.is-open .topbar__account {
        grid-area: account;
        /* rozwinięta lista języków musi leżeć nad dolnym rzędem menu, który jest dalej w HTML-u */
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        align-self: center;
        margin: 0;
        padding: 10px 0 6px;
        border: 0;
    }

    .topbar__toggle {
        display: none;
    }

    .nav,
    .topbar.is-open .nav {
        grid-area: nav;
        display: flex;
        align-items: stretch;
        padding: 0;
        border-top: 1px solid rgba(var(--border-rgb), .4);
    }

    .nav__list {
        display: flex;
    }

    .nav__item {
        position: relative;
    }

    .nav__link {
        height: 100%;
        min-height: 46px;
        width: auto;
        gap: 8px;
    }

    .nav__caret {
        margin-left: 0;
    }

    .nav__item.is-active > .nav__link {
        box-shadow: inset 0 -3px 0 var(--gold);
    }

    .nav__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        padding: 6px 0;
        background: var(--panel-bg);
        border: 1px solid var(--border);
        border-top: 2px solid var(--gold);
        box-shadow: var(--shadow);
    }

    .nav__sublink {
        padding-left: 18px;
    }

    .nav__account {
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .nav__user {
        width: auto;
        margin-right: 4px;
    }

    .nav__list--lang {
        align-self: center;
    }

    .topbar__account .nav__link {
        min-height: 36px;
    }

    .nav__contact {
        width: auto;
        padding: 0 10px;
    }

    .nav__item--end .nav__submenu {
        left: auto;
        right: 0;
        min-width: 160px;
    }
}

/* rozwijanie po najechaniu tylko tam, gdzie jest prawdziwa myszka */
@media (min-width: 768px) and (hover: hover) {
    .nav__item--dropdown:hover .nav__submenu {
        display: block;
    }

    .nav__item--dropdown:hover .nav__caret {
        transform: rotate(180deg);
    }
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 14px 24px;
    text-align: center;
    font-size: .85rem;
    color: var(--ink-muted);
    border-top: 1px solid rgba(var(--border-rgb), .3);
}

/* KARTA (pergamin) ------------------------------------------------------- */

.card {
    position: relative;
    padding: 20px 18px;
    color: var(--ink);
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(var(--surface-shade-rgb), .25)),
        var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 0 40px rgba(var(--surface-shade-rgb), .25);
}

/* co druga karta w długim spisie kart tego samego rodzaju (gry w Kolekcji) – inne tło pokazuje, gdzie zaczyna się
   następna (właściciel, 24.10.2026: „nie widzę, gdzie zaczyna się nowa gra… może lekko inne tło co druga?”) */
.card--alt {
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(var(--surface-shade-rgb), .25)),
        var(--parchment-alt);
}

@media (min-width: 768px) {
    .card {
        padding: 28px 32px;
    }
}

.card h1, .card h2 {
    color: var(--heading);
}

.ornament {
    border: 0;
    height: 12px;
    margin: 12px 0 20px;
    background:
        radial-gradient(circle, var(--gold) 3px, transparent 4px) center / 12px 12px no-repeat,
        linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent) center / 100% 1px no-repeat;
}

/* PRZYCISKI -------------------------------------------------------------- */

.btn {
    /* inline-flex, bo w rzędzie flexowym <a class="btn"> rozciągał się do wysokości
       sąsiedniego <button>, a napis zostawał przy górnej krawędzi */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    padding: 6px 16px;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--parchment);
    background: linear-gradient(to bottom, var(--btn-from), var(--btn-to));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter .15s, border-color .15s;
}

.btn:hover {
    filter: brightness(1.15);
    border-color: var(--gold);
}

.btn:disabled {
    opacity: .6;
    cursor: wait;
}

.btn--primary {
    color: var(--on-primary);
    background: linear-gradient(to bottom, var(--btn-primary-from), var(--btn-primary-to));
    border-color: var(--gold);
}

.btn--ghost {
    background: transparent;
}

.card .btn--ghost,
.rpg-book__page .btn--ghost,
.rpg-book__new-form .btn--ghost,
.modal .btn--ghost {
    color: var(--ink);
}

.btn--block {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 1rem;
}

/* FORMULARZE ------------------------------------------------------------- */

.form__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.form__row--inline {
    flex-direction: row;
    align-items: center;
}

/*
  ETYKIETY PÓL – jeden wygląd w całym serwisie (zasada w AGENTS.md): zwykła czcionka tekstu, trochę mniejsza,
  przygaszona; bez wersalików. Wartość obok/pod etykietą ma pełny kolor tekstu. Nowej etykiety nie styluj od zera –
  dopisz jej selektor tutaj.
*/
.form label,
.form__label,
.tournament-match__extend label,
.skirmish-filter label,
.dice__field label,
.vg-dice__field label,
.names__field label,
.clock__field label,
.table-gen__form .form-grid label,
.player-entry__label,
.player-field__label,
.shop-row__label,
.bg-filters__label,
.rpg-stats__name,
.rpg-sheet__label,
.rpg-dice__field,
.rpg-draw__tool {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-muted);
}

/*
  Domyślny wygląd KAŻDEGO pola w serwisie – także poza <form class="form"> (narzędzia, zgłoszenie gracza, filtry).
  :where() ma zerową specyficzność, więc każda reguła z klasą (np. .dice__settings input) i tak wygrywa;
  bez tego pola spoza formularzy były białymi polami przeglądarki i odstawały od reszty.
*/
:where(input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
       input[type=date], input[type=time], input[type=search], input[type=tel], select, textarea, .multi-select__toggle) {
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 6px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

:where(input[type=text], input[type=number], input[type=email], input[type=password], input[type=url],
       input[type=date], input[type=time], input[type=search], input[type=tel], select, textarea, .multi-select__toggle):focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}

.form input[type=text],
.form input[type=password],
.form input[type=email],
.form input[type=number],
.form input[type=url],
.form input[type=date],
.form input[type=search],
.form select,
.form textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}

/*
  Rozwijana lista wielokrotnego wyboru (assets/js/multi-select.js) – przycisk wygląda jak zwykłe pole (reguła :where wyżej),
  panel z wyszukiwarką i checkboxami otwiera się pod nim. Bez JS zostaje zwykły <select multiple>.
*/
.multi-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.multi-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.multi-select__toggle::after {
    content: '▾';
    flex: none;
    color: var(--ink-muted);
}

.multi-select__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select__value.is-empty {
    color: var(--ink-muted);
}

.multi-select__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    padding: 8px;
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.multi-select__search {
    width: 100%;
    margin-bottom: 6px;
}

.multi-select__list {
    max-height: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.multi-select__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--radius);
    cursor: pointer;
}

.multi-select__option:hover {
    background: var(--surface-soft);
}

.multi-select__empty {
    margin: 4px 6px;
    color: var(--ink-muted);
}

/* „＋ Dodaj „…”” – nowa pozycja wpisana w wyszukiwarkę (data-multi-select-add) */
.multi-select__add {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px;
    border: 1px dashed var(--parchment-dark);
    border-radius: var(--radius);
    background: transparent;
    color: var(--heading);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.multi-select__add:hover,
.multi-select__add:focus-visible {
    border-color: var(--gold);
    background: var(--surface-soft);
}

/* lista jednokrotnego wyboru z wyszukiwarką (assets/js/search-select.js) – ten sam panel, bez checkboxów, z grupami */
.search-select__list {
    max-height: 20rem;
}

.search-select__group {
    margin: 8px 6px 2px;
    font-family: var(--font-display);
    font-size: .9rem;
    color: var(--heading);
}

.search-select__group:first-child {
    margin-top: 0;
}

.search-select__option.is-active {
    background: var(--surface-soft);
}

.search-select__option.is-selected {
    font-weight: 700;
}

.search-select__option[hidden],
.search-select__group[hidden] {
    display: none;
}

.alert {
    padding: 8px 12px;
    border-radius: var(--radius);
    margin: 0 0 14px;
}

.alert--error {
    color: var(--on-primary);
    background: var(--blood);
}

.flash {
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.flash--success { border-color: var(--moss); }
.flash--error { border-color: var(--blood); }
.flash--warning { border-color: var(--gold); border-left-width: 4px; }
.flash--info { border-color: var(--gold); }

/* komunikat wewnątrz pergaminowej karty: jasne tło i ciemny tekst (ciemne tło strony było tu nieczytelne) */
.card .flash {
    max-width: none;
    color: var(--ink);
    background: rgba(255, 255, 255, .55);
    border-left-width: 4px;
}

.card .flash--success { background: rgba(47, 143, 106, .12); }
.card .flash--error { background: rgba(142, 42, 34, .1); }

/* LOGOWANIE -------------------------------------------------------------- */

.page-login {
    background:
        radial-gradient(ellipse at center, rgba(var(--accent-rgb), .15), transparent 65%),
        var(--bg);
}

.login {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login__card {
    width: 100%;
    max-width: 420px;
}

.login__header {
    text-align: center;
}

.login__crest {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--heading);
}

.login__title {
    margin: 8px 0 0;
    font-size: 1.7rem;
}

.login__subtitle {
    margin: 4px 0 0;
    font-style: italic;
    color: var(--ink-muted);
}

/* PRZEŁĄCZNIK JĘZYKA (logowanie) --------------------------------------- */

.nav__list--lang {
    width: calc(100% + 32px);
    margin: 0 -16px;
}

@media (min-width: 768px) {
    .nav__list--lang {
        width: auto;
        margin: 0;
    }
}

.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.captcha {
    min-height: 65px;
}

.alert__link {
    display: block;
    margin-top: 4px;
    color: var(--on-primary);
    font-weight: 700;
}

.login__forgot {
    margin: -6px 0 14px;
    text-align: right;
}

.login__forgot a {
    color: var(--blood);
    font-weight: 600;
}

.login__switch {
    margin: 16px 0 0;
    text-align: center;
    color: var(--ink-muted);
}

.login__switch a {
    color: var(--blood);
    font-weight: 600;
}

.login__switch a + a {
    margin-left: 14px;
}

.lang-switch {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 18px;
}

.lang-switch a {
    min-width: 44px;
    padding: 8px 6px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    color: var(--ink-muted);
    border-radius: var(--radius);
}

.lang-switch a:hover {
    color: var(--blood);
}

.lang-switch a.is-current {
    color: var(--blood);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* NAGŁÓWEK STRONY I KROKI KREATORA -------------------------------------- */

.page-head {
    margin-bottom: 20px;
    text-align: center;
}

.page-head__title {
    font-size: 1.5rem;
    color: var(--gold-bright);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.page-head__intro {
    margin: 10px 0 0;
    color: var(--parchment-dark);
    font-style: italic;
}

/* gra i zasady w nagłówku kreatora – wyraźniej niż nazwa kampanii */
.page-head__game {
    /* nazwa gry i plakietki w jednej linii, wyśrodkowane w pionie */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold-bright);
    letter-spacing: .04em;
}

/* na ekranie kampanii baner fazy stoi zaraz pod linią z grą – oddech między nimi */
.page-head__game + .phase-banner {
    margin-top: 22px;
}


.steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--ink-muted);
    counter-increment: step;
}

.steps__item::before {
    content: counter(step);
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 50%;
}

.steps__item + .steps__item {
    margin-left: 10px;
}

.steps__item.is-current {
    color: var(--gold-bright);
}

.steps__item.is-done {
    color: var(--parchment-dark);
}

.steps__item.is-done::before {
    content: "✔";
    color: var(--gold-bright);
    border-color: var(--gold);
}

.steps__item.is-current::before {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
}

@media (min-width: 768px) {
    .page-head__title {
        font-size: 2rem;
    }
}

/* KAFELKI GIER ----------------------------------------------------------- */

.game-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 560px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .game-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.game-tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    font: inherit;
    text-align: left;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none; /* kafelek gry bez podtypów to odnośnik <a> */
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .2s, filter .2s;
}

.game-tile:hover,
.game-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow), 0 0 0 2px var(--gold);
    outline: none;
}

.game-tile__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--media-bg);
    border-bottom: 2px solid var(--gold);
}

/* tło: rozmyta, przyciemniona kopia obrazka – każdy format (okładka, szerokie logo) wygląda spójnie */
.game-tile__media::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--cover, none) center / cover no-repeat;
    filter: blur(16px) brightness(.4) saturate(1.2);
}

.game-tile__media img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6));
    transition: transform .3s;
}

.game-tile:hover .game-tile__media img {
    transform: scale(1.04);
}

.game-tile__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: var(--gold);
}

/* znaczek wyboru: przyciemnienie + ✔ */
.game-tile__check {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: var(--gold-bright);
    background: var(--scrim-soft);
    opacity: 0;
    transition: opacity .2s;
}

.game-tile__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 16px;
}

.game-tile__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--heading);
}

.game-tile__meta {
    font-size: .85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.game-tile__desc {
    font-size: .95rem;
    line-height: 1.4;
}

.game-tile.is-selected {
    box-shadow: var(--shadow), 0 0 0 3px var(--gold-bright);
}

.game-tile.is-selected .game-tile__check {
    opacity: 1;
}

.game-grid.has-selection .game-tile:not(.is-selected) {
    opacity: .55;
    filter: grayscale(.5);
}

.game-grid.has-selection .game-tile:not(.is-selected):hover {
    opacity: .85;
    filter: none;
}

/* grupy gatunków na liście gier */
.game-group + .game-group {
    margin-top: 28px;
}

.game-group__title {
    margin-bottom: 12px;
    font-size: .9rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--parchment-dark);
    border-bottom: 1px solid rgba(var(--border-rgb), .4);
    padding-bottom: 6px;
}

/* gry bez zasad – przyciemnione, z informacją po najechaniu */
.game-tile--soon {
    cursor: default;
    opacity: .5;
    filter: grayscale(.85);
}

.game-tile--soon:hover,
.game-tile--soon:focus-visible {
    transform: none;
    opacity: .85;
    filter: grayscale(.4);
    box-shadow: var(--shadow);
}

.game-tile--soon .game-tile__media img {
    transform: none;
}

.game-tile__soon {
    position: absolute;
    top: 10px;
    left: 0;
    padding: 4px 12px;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-primary);
    background: var(--btn-primary-from);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.game-tile__soon-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
    color: var(--parchment);
    background: var(--scrim);
    opacity: 0;
    transition: opacity .2s;
}

.game-tile--soon:hover .game-tile__soon-hint,
.game-tile--soon:focus-visible .game-tile__soon-hint {
    opacity: 1;
}

/* PANEL ZESTAWÓW ZASAD (krok 2) ------------------------------------------ */

.ruleset-panel {
    grid-column: 1 / -1;
    position: relative;
    padding: 18px 16px 16px;
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 0 30px rgba(0, 0, 0, .4);
    animation: panel-in .25s ease-out;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.ruleset-panel__title {
    margin-bottom: 14px;
    font-size: 1.05rem;
    color: var(--gold-bright);
}

.ruleset-panel__empty,
.ruleset-panel__hint {
    margin: 0;
    color: var(--parchment-dark);
    font-style: italic;
}

.ruleset-panel__hint {
    margin-top: 12px;
    font-size: .9rem;
}

.ruleset-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .ruleset-panel {
        padding: 22px 24px 20px;
    }

    .ruleset-list {
        /* dwie kolumny: w każdym rzędzie jedna edycja – KK obok oficjalnych */
        grid-template-columns: repeat(2, 1fr);
    }
}

.ruleset-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    color: var(--ink);
    text-decoration: none;
    background: var(--parchment);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    transition: transform .15s, box-shadow .15s;
}

.ruleset-card--kk {
    border-left-color: var(--blood);
}

.ruleset-card--official {
    border-left-color: var(--gold);
}

.ruleset-card:hover,
.ruleset-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--gold-bright);
    outline: none;
}

.ruleset-card--soon {
    opacity: .5;
    filter: grayscale(.8);
    cursor: default;
}

.ruleset-card--soon .ruleset-card__cta {
    color: var(--ink-muted);
    font-style: italic;
}

.ruleset-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--heading);
}

.ruleset-card__desc {
    font-size: .95rem;
    line-height: 1.4;
}

.ruleset-card__cta {
    align-self: flex-end;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .06em;
    color: var(--blood);
}

/* jedna wielkość plakietki w całym serwisie – nie nadpisuj jej w pojedynczych miejscach */
.badge {
    display: inline-block;
    padding: 2px 10px;
    font-family: var(--font-display);
    font-size: .7rem;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--parchment);
    background: var(--ink-muted);
    border-radius: 999px;
}

.badge--kk {
    color: var(--on-primary);
    background: var(--blood);
}

.badge--official {
    color: var(--ink);
    background: var(--gold);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* KROK 3 – PODSUMOWANIE WYBORU ------------------------------------------- */

.chosen-rules {
    display: grid;
    gap: 18px;
}

.chosen-rules__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--media-bg);
}

.chosen-rules__media::before {
    content: "";
    position: absolute;
    inset: -24px;
    background: var(--cover, none) center / cover no-repeat;
    filter: blur(16px) brightness(.4);
}

.chosen-rules__media img {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.chosen-rules__label {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.chosen-rules__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media (min-width: 768px) {
    .chosen-rules {
        grid-template-columns: 280px 1fr;
        align-items: start;
    }
}

/* ta sama karta na górze kreatora – mniejsza okładka */
.chosen-rules--compact {
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .chosen-rules--compact {
        grid-template-columns: 180px 1fr;
        align-items: center;
    }

    .chosen-rules.chosen-rules--no-cover {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* START KAMPANII I KREATOR --------------------------------------------- */

.btn--large {
    padding: 12px 28px;
    font-size: 1.15rem;
}

.start-form {
    margin: 4px 0 18px;
}

.start-form .btn--large {
    width: 100%;
}

.start-form__hint {
    margin: 8px 0 0;
    font-size: .9rem;
}

@media (min-width: 768px) {
    .start-form .btn--large {
        width: auto;
    }
}

.badge--status {
    color: var(--parchment);
    background: var(--ink-muted);
}

/* ustawienia zamknięte na czas gry – karta z wyjaśnieniem i przyciskiem cofnięcia fazy */
.setup-locked p {
    margin: 0 0 12px;
}

.setup-steps {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.setup-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 14px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.setup-steps__number {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gold-bright);
    background: linear-gradient(to bottom, var(--btn-from), var(--btn-to));
    border: 1px solid var(--gold);
    border-radius: 50%;
}

.setup-steps__body {
    display: flex;
    flex-direction: column;
}

.setup-steps__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.setup-steps__desc {
    font-size: .95rem;
}

.setup-steps__status {
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

@media (min-width: 768px) {
    .setup-steps__item {
        grid-template-columns: auto 1fr auto;
    }

    .setup-steps__number {
        grid-row: auto;
    }
}

.campaign-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.campaign-list__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    transition: box-shadow .15s;
}

.campaign-list__link:hover,
.campaign-list__link:focus-visible {
    box-shadow: 0 0 0 2px var(--gold-bright);
    outline: none;
}

.campaign-list__name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.campaign-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}


.home__subtitle {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

.campaign-list__date {
    font-size: .85rem;
    color: var(--ink-muted);
}

/* KREATOR KAMPANII – EKRANY -------------------------------------------- */

.wizard-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.wizard-progress__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    text-decoration: none;
    color: var(--parchment-dark);
}

.wizard-progress__dot {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-family: var(--font-display);
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-soft);
}

/* nazwy kroków tylko na większych ekranach – na telefonie same numery */
.wizard-progress__label {
    display: none;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .04em;
    text-align: center;
    max-width: 110px;
    line-height: 1.2;
}

a.wizard-progress__link:hover .wizard-progress__dot {
    border-color: var(--gold-bright);
}

.wizard-progress__item.is-done .wizard-progress__dot {
    color: var(--gold-bright);
    border-color: var(--gold);
}

.wizard-progress__item.is-current .wizard-progress__link {
    color: var(--gold-bright);
}

.wizard-progress__item.is-current .wizard-progress__dot {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}

.wizard-progress__item.is-soon {
    opacity: .45;
}

@media (min-width: 768px) {
    .wizard-progress {
        gap: 18px;
    }

    .wizard-progress__label {
        display: block;
    }
}

.setup-card__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* etykieta pola = tytuł ekranu */
.setup-form .form__row > label,
.setup-form .ob-profiles > legend {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--heading);
}

.setup-form input[type=text],
.setup-form textarea {
    font-size: 1.1rem;
}

.setup-form textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.5;
}

.form__help {
    margin: 0 0 6px;
    font-style: italic;
    color: var(--ink-muted);
}

.form__errors {
    margin: 6px 0 0;
    padding: 6px 10px;
    list-style: none;
    color: var(--on-primary);
    background: var(--blood);
    border-radius: var(--radius);
}

/* odnośnik „tu to poprawisz” przy błędzie (np. zatwierdzenie składu kompanii Vanguarda) – czytelny na czerwonym tle */
.form__error-fix {
    margin-left: 6px;
    white-space: nowrap;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.form__error-fix:hover,
.form__error-fix:focus {
    color: inherit;
    text-decoration-thickness: 2px;
}

.form__row.has-error input,
.form__row.has-error textarea {
    border-color: var(--blood);
}

.form__counter {
    margin: 4px 0 0;
    font-size: .85rem;
    text-align: right;
    color: var(--ink-muted);
}

.form__counter.is-near-limit {
    color: var(--blood);
    font-weight: 600;
}

.setup-card__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 18px;
}

.setup-card__actions .btn {
    text-align: center;
}

@media (min-width: 560px) {
    .setup-card__actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.stepper {
    display: flex;
    align-items: stretch;
    max-width: 240px;
}

.stepper__btn {
    width: 56px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gold-bright);
    background: linear-gradient(to bottom, var(--btn-from), var(--btn-to));
    border: 1px solid var(--border);
    cursor: pointer;
}

.stepper__btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.stepper__btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.stepper__btn:hover {
    filter: brightness(1.2);
}

.form .stepper .stepper__input {
    width: 100%;
    min-height: 56px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0;
    -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* wgrywanie grafiki kampanii */
.image-upload {
    display: grid;
    gap: 12px;
}

.image-upload__preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--media-bg);
}

.image-upload__preview img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.image-upload__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    background: var(--surface-soft);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.setup-form .image-upload__drop,
.setup-form .image-upload__drop span {
    font-family: var(--font-body);
    letter-spacing: 0;
}

.image-upload__drop:hover,
.image-upload__drop.is-dragover,
.image-upload:focus-within .image-upload__drop {
    background: rgba(var(--accent-rgb), .18);
    border-color: var(--gold);
}

.image-upload__icon {
    font-size: 2rem;
    line-height: 1;
}

.setup-form .image-upload__cta {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--blood);
}

.image-upload__rules {
    font-size: .9rem;
    color: var(--ink-muted);
}

/* pole pliku ukryte wizualnie – obsługuje je etykieta (klik) i JS (upuszczenie) */
.image-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.image-upload__client-error {
    margin: 0;
}

.setup-steps__thumb {
    display: block;
    width: 120px;
    aspect-ratio: 16 / 10;
    margin-top: 4px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* nagłówek kreatora z grafiką kampanii w tle */
.page-head--with-cover {
    position: relative;
    isolation: isolate;
    margin-left: -16px;
    margin-right: -16px;
    padding: 24px 16px 18px;
    overflow: hidden;
}

.page-head--with-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(var(--bg-rgb), .55), rgba(var(--bg-rgb), .95)),
        var(--cover) center / cover no-repeat;
}

@media (min-width: 768px) {
    .page-head--with-cover {
        margin-left: 0;
        margin-right: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
}

/* lista kampanii – miniatura */
.campaign-list__link {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
}

.campaign-list__link > :not(.campaign-list__thumb) {
    grid-column: 2;
}

.campaign-list__thumb {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    font-size: 1.6rem;
    color: var(--gold);
    background: var(--media-bg);
    border-radius: var(--radius);
}

.campaign-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* EDYTOR MAPY Z PUNKTAMI ------------------------------------------------- */

.map-editor__canvas {
    position: relative;
    margin: 10px 0 18px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--media-bg);
    cursor: crosshair;
    touch-action: none; /* przeciąganie punktów palcem zamiast przewijania strony */
}

.map-editor__canvas img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
}

.hotspot:active {
    cursor: grabbing;
}

.hotspot__dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--on-primary);
    background: var(--btn-primary-from);
    border: 2px solid var(--gold-bright);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.hotspot__label {
    max-width: 160px;
    padding: 2px 8px;
    font-family: var(--font-display);
    font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--parchment);
    background: rgba(var(--bg-rgb), .8);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot {
    background: var(--gold);
    color: var(--ink);
}

.map-editor__subtitle {
    margin: 0 0 8px;
    font-size: .95rem;
    color: var(--heading);
}

.hotspot-list {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.hotspot-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotspot-list__number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    font-family: var(--font-display);
    font-size: .8rem;
    color: var(--on-primary);
    background: var(--btn-primary-from);
    border-radius: 50%;
}

.form .hotspot-list .hotspot-list__name {
    /* podstawa 140 px: na telefonie przyciski schodzą pod nazwę, zamiast ściskać ją do zera */
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    transition: border-color .2s, box-shadow .2s;
}

.form .hotspot-list .hotspot-list__name.is-saved {
    border-color: var(--moss);
    box-shadow: 0 0 0 2px rgba(77, 107, 60, .35);
}

.btn--small {
    padding: 4px 10px;
    font-size: .75rem;
}

/* ŚCIEŻKI MIĘDZY MIEJSCAMI (Vanguard · KK, moduł „Ścieżki”) – linie od kropki do kropki, strzałka przy jednokierunkowej */
.map-paths {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.map-paths__shade {
    stroke: rgba(var(--bg-rgb), .65);
    stroke-width: 6;
    stroke-linecap: round;
}

.map-paths__line {
    stroke: var(--gold-bright);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 9 6;
}

.map-paths__arrow {
    fill: var(--gold-bright);
    stroke: rgba(var(--bg-rgb), .65);
    stroke-width: 1;
}

.path-editor {
    margin-top: 18px;
}

.path-list {
    display: grid;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.path-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.path-list__direction {
    flex: 1 1 auto;
    min-width: 0;
}

.is-drawing-paths .map-editor__canvas {
    cursor: default;
}

.is-drawing-paths .hotspot {
    cursor: pointer;
}

.hotspot.is-path-start .hotspot__dot {
    color: var(--ink);
    background: var(--gold-bright);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .55), 0 2px 8px rgba(0, 0, 0, .6);
}

[data-path-draw][aria-pressed="true"] {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .45);
}

/* bandy stojące w miejscu (moduł „Przemieszczanie band”) – chorągiewki w kolorach graczy pod kropką punktu */
.hotspot__bands {
    position: absolute;
    top: calc(50% + 16px);
    left: 15px;
    display: flex;
    align-items: center;
    gap: 3px;
    transform: translateX(-50%);
    pointer-events: none;
}

.hotspot__band {
    width: 13px;
    height: 17px;
    background: var(--player-color, var(--gold));
    border: 2px solid #fff;
    border-radius: 2px 2px 50% 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.hotspot__band-more {
    padding: 0 3px;
    font-size: .65rem;
    line-height: 1.3;
    color: var(--parchment);
    background: rgba(var(--bg-rgb), .85);
    border-radius: var(--radius);
}

/* mapy w mapach (Vanguard · KK): miejsce z własną mapą – przerywana obwódka kropki */
.hotspot--has-map .hotspot__dot {
    outline: 2px dashed var(--gold-bright);
    outline-offset: 2px;
}

.map-board__crumb {
    margin: 0 0 8px;
}

.hotspot-owners__item--inner {
    margin-left: 18px;
}

.hotspot-card__bands {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.map-editor__replace {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--parchment-dark);
}

.map-editor__replace summary {
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .06em;
    color: var(--ink-muted);
    cursor: pointer;
}

.map-editor__replace input[type=file] {
    margin-top: 10px;
}

/* przegląd kreatora – statusy kroków */
.setup-steps__title {
    text-decoration: none;
}

a.setup-steps__title:hover {
    text-decoration: underline;
}

.setup-steps__item.is-done {
    border-left: 4px solid var(--gold);
}

.setup-steps__item.is-done .setup-steps__number {
    color: var(--gold-bright);
}

.setup-steps__item.is-todo {
    border-left: 4px solid var(--blood);
}

.setup-steps__item.is-todo .setup-steps__status {
    color: var(--blood);
    font-weight: 700;
}

.setup-steps__item.is-soon {
    opacity: .6;
}

/* ZAKŁADKI KAMPANII, GRACZE, KRONIKA ------------------------------------- */

.campaign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(var(--border-rgb), .5);
}

.campaign-tabs__link {
    padding: 10px 16px;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--parchment-dark);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}

.campaign-tabs__link:hover {
    color: var(--gold-bright);
    background: rgba(var(--accent-rgb), .08);
}

.campaign-tabs__link.is-current {
    color: var(--gold-bright);
    background: var(--panel-bg);
    border-color: var(--border);
    box-shadow: inset 0 -3px 0 var(--gold);
}

.player-list {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.player-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.player-list__faction-name {
    margin-left: auto;
    font-style: italic;
    color: var(--ink-muted);
}

/* lista graczy kampanii: dwie linijki – kto to jest, a pod spodem pola w jednym rzędzie */
.player-list--campaign .player-list__item {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
}

/* 1. linijka: kolor, avatar, nick i małe plakietki roli */
.player-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.player-list__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}


.player-list__join {
    display: flex;
    margin-left: auto;
}

/* 2. linijka: pola w jednym rzędzie – ta sama etykieta, wysokość i czcionka; akcje odejścia po prawej */
.player-list__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
}

.player-list__fields:empty {
    display: none;
}

.player-field {
    display: flex;
    flex-wrap: wrap; /* na telefonie przycisk schodzi pod pole, zamiast wystawać poza ekran */
    align-items: center;
    gap: 8px;
}

/* pole tekstowe w wierszu (np. nazwa gildii) – zajmuje resztę miejsca, ale nie wypycha przycisku */
.player-field input[type=text] {
    flex: 1 1 10rem;
    width: auto;
    min-width: 0;
}

.player-field__label::after {
    content: ':';
}

.player-field select,
.player-field input[type=number] {
    height: 34px;
    padding: 4px 8px;
    font-family: var(--font-body, inherit);
    font-size: .95rem;
}

.player-field select {
    width: auto;
    max-width: 200px;
}

.player-field input[type=number] {
    width: 80px;
    text-align: right;
}

.player-field__value {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.player-list__actions {
    display: flex;
    flex-wrap: wrap;
    /* bez tego formularz z etykietą i polem rozciąga się na pełną wysokość, a samotny przycisk obok wisi u góry */
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.player-list__actions:empty {
    display: none;
}

.faction-callout {
    margin-bottom: 16px;
    border-left: 4px solid var(--blood);
}

.players-gold-reset {
    margin-bottom: 14px;
}

.player-add__row {
    display: flex;
    gap: 8px;
}

.player-add__row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.events-actions {
    margin: 0 0 16px;
}

.chronicle {
    position: relative;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

/* oś czasu łącząca wpisy stosu – od najnowszego do wpisu startowego */
.chronicle::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 24px;
    left: 7px;
    width: 2px;
    background: linear-gradient(var(--parchment-dark), var(--gold));
}

.chronicle__entry {
    position: relative;
}

.chronicle__entry::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -21px;
    width: 12px;
    height: 12px;
    background: var(--parchment);
    border: 2px solid var(--gold);
    border-radius: 50%;
}

.chronicle__entry--start {
    border: 2px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.chronicle__entry--start::before,
.chronicle__entry--epilogue::before {
    width: 16px;
    height: 16px;
    left: -23px;
    background: var(--gold);
}

.chronicle__entry--start .chronicle__title {
    font-size: 1.5rem;
}

.chronicle__entry--epilogue {
    border-left: 4px solid var(--blood);
}

.chronicle__image--start {
    max-height: 520px;
}

.chronicle__date {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .1em;
    color: var(--ink-muted);
}

.chronicle__title {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.chronicle__image {
    display: block;
    width: 100%;
    max-height: 420px;
    margin-bottom: 12px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.chronicle__text {
    margin: 0 0 12px;
}

.chronicle__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--parchment-dark);
}

.launch {
    margin-top: 18px;
    text-align: center;
}

.launch__hint {
    margin: 0 0 12px;
}

.btn--launch {
    width: 100%;
    padding: 16px 32px;
    font-size: 1.25rem;
    color: var(--on-primary);
    background: linear-gradient(to bottom, #c0392b, #7b1a13);
    border: 2px solid var(--gold-bright);
    box-shadow: 0 0 18px rgba(192, 57, 43, .45);
}

.btn--launch:hover:not(:disabled) {
    filter: brightness(1.15);
}

.btn--launch:disabled {
    filter: grayscale(.7);
    opacity: .6;
    cursor: not-allowed;
}

@media (min-width: 560px) {
    .btn--launch {
        width: auto;
    }
}

/* EKRAN KAMPANII: MAPA NA ŚRODKU, PANELE PO BOKACH ------------------------ */

/* wszystkie ekrany kampanii (każdy z paskiem zakładek) mają szerokość i górny odstęp ekranu z mapą – inaczej baner
   fazy i zakładki zwężały się i skakały przy przełączaniu zakładek (decyzja właściciela z 30.09.2026) */
.container:has(> .campaign-tabs),
.container:has(> .phase-banner) {
    max-width: 1500px;
    margin-top: 0;
    padding-top: 16px;
}

/* treść zakładek (wszystko pod paskiem zakładek) zostaje w dawnej szerokości 1100 px – szerokie są tylko nagłówek,
   baner fazy i zakładki; ekran „Kampania” z mapą ma własny układ (.campaign-view) na całą szerokość */
.container:has(> .campaign-tabs) > .campaign-tabs ~ * {
    max-width: 1068px;
    margin-left: auto;
    margin-right: auto;
}

.campaign-view {
    flex: 1;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 16px;
}

.campaign-view__head {
    text-align: center;
    margin-bottom: 14px;
}

.campaign-view__layout {
    display: grid;
    /* minmax(0, …) – szeroka tabela (ranking) nie może rozepchnąć kolumny poza ekran telefonu */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* na telefonie mapa jest najważniejsza – idzie na górę */
.campaign-view__layout .map-board {
    order: -1;
}

@media (min-width: 1100px) {
    .campaign-view__layout {
        grid-template-columns: 280px minmax(0, 1fr) 280px;
        align-items: start;
    }

    .campaign-view__layout .map-board {
        order: 0;
    }
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel-title {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-bright);
    border-bottom: 1px solid rgba(var(--border-rgb), .5);
    padding-bottom: 6px;
}

.panel-box {
    padding: 8px 10px;
    background: rgba(var(--accent-rgb), .06);
    border: 1px solid rgba(var(--border-rgb), .5);
    border-radius: var(--radius);
}

.panel-label {
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--parchment-dark);
}

.panel-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.panel-story {
    margin: 4px 0 0;
    font-size: .95rem;
    color: var(--parchment);
}

.panel-players,
.panel-log {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.panel-players__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(var(--accent-rgb), .06);
    border-radius: var(--radius);
}

.panel-players__name {
    font-family: var(--font-display);
    font-size: .9rem;
    color: var(--parchment);
}

.panel-players__faction {
    font-size: .9rem;
    color: var(--parchment-dark);
    text-align: right;
}

.panel-log__item {
    padding: 0;
    border-left: 3px solid var(--gold);
    background: rgba(var(--accent-rgb), .06);
}

/* wpis prowadzi prosto do siebie w kronice – cały wiersz jest do kliknięcia */
.panel-log__link {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    text-decoration: none;
}

.panel-log__link:hover,
.panel-log__link:focus-visible {
    background: rgba(var(--accent-rgb), .14);
}

.panel-log__date {
    font-size: .75rem;
    color: var(--parchment-dark);
}

.panel-log__title {
    color: var(--parchment);
}

.panel-more {
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--gold-bright);
    text-decoration: none;
}

.panel-more:hover {
    text-decoration: underline;
}

.panel-empty {
    margin: 0;
}

.btn--block {
    display: block;
    text-align: center;
}

.map-board {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-board__canvas {
    position: relative;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: var(--media-bg);
    box-shadow: var(--shadow), 0 0 30px rgba(0, 0, 0, .5);
}

.map-board__canvas img {
    display: block;
    width: 100%;
    height: auto;
}

.map-board__empty {
    text-align: center;
}

/* telefon: mapa ma ~360 px – krótsze nazwy punktów, żeby nie zachodziły na siebie (pełna nazwa w okienku po stuknięciu) */
.map-board__canvas .hotspot__label {
    max-width: 92px;
    padding: 1px 5px;
    font-size: .68rem;
}

@media (min-width: 768px) {
    .map-board__canvas .hotspot__label {
        max-width: 160px;
        padding: 2px 8px;
        font-size: .75rem;
    }
}

/* punkty na mapie w widoku kampanii – kliknięcie pokazuje kartę punktu */
.hotspot--static {
    cursor: pointer;
}

.story {
    max-width: 760px;
    margin: 0 auto;
}

.story__image {
    display: block;
    width: 100%;
    max-height: 320px;
    margin-bottom: 16px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.story__title {
    margin-bottom: 4px;
}

/* dłuższy tekst czyta się lepiej w węższej kolumnie i z większą interlinią */
.story__text {
    font-size: 1.1rem;
    line-height: 1.7;
}

.story__actions {
    margin: 20px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--parchment-dark);
}

/* ARMIA: SKARBIEC, ODDZIAŁY, KATALOG ------------------------------------- */

.army {
    display: grid;
    gap: 16px;
}

.army__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.army__stat {
    display: flex;
    flex-direction: column;
}

.army__stat .panel-label {
    color: var(--ink-muted);
}

.army__value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading);
}

.army__faction {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
}

.army__note {
    flex: 1 0 100%;
    margin: 0;
    font-size: .9rem;
}

.army__summary .alert {
    flex: 1 0 100%;
    margin: 0;
}

.army-list,
.catalogue {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.army-list__item,
.catalogue__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.army-list__name,
.catalogue__name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.army-list__points,
.catalogue__points,
.catalogue__type {
    font-size: .9rem;
    color: var(--ink-muted);
}

.army-list__gold,
.catalogue__price {
    font-family: var(--font-display);
    color: var(--ink);
}

.army-list__item button,
.catalogue__buy {
    grid-row: 1 / span 2;
    grid-column: 2;
}

.catalogue__buy {
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalogue__qty {
    padding: 5px 6px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.army-list__item.is-new {
    animation: army-new 2.5s ease-out;
}

@keyframes army-new {
    from { background: rgba(var(--accent-rgb), .45); }
    to { background: var(--surface-soft); }
}

/* powiadomienia (assets/js/toast.js): mały panel w prawym dolnym rogu, nad paskiem ciasteczek, gdy ten jest widoczny */
.toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    display: grid;
    justify-items: end;
    gap: 8px;
    max-width: min(360px, calc(100% - 32px));
    pointer-events: none;
}

body:has(.cookie-bar:not([hidden])) .toast-stack {
    bottom: 110px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    font-weight: 700;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--moss);
    border-left-width: 5px;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
    pointer-events: auto;
    transition: opacity .3s, transform .3s;
}

.toast--error { border-color: var(--blood); }
.toast--warning { border-color: var(--warn); }
.toast--info { border-color: var(--gold); }

.toast.is-hidden {
    opacity: 0;
    transform: translateY(12px);
}

.toast__close {
    margin-left: auto;
    padding: 0 4px;
    font: inherit;
    line-height: 1;
    color: var(--ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.catalogue__category {
    margin: 18px 0 8px;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--parchment-dark);
    padding-bottom: 4px;
}

.catalogue__category:first-child {
    margin-top: 0;
}

.catalogue__limit {
    margin-left: 6px;
    font-size: .8rem;
    color: var(--blood);
}

.catalogue__item button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (min-width: 700px) {
    .army-list__item,
    .catalogue__item {
        grid-template-columns: 1fr auto auto auto;
    }

    .army-list__item button,
    .catalogue__buy {
        grid-row: auto;
        grid-column: auto;
    }

    .catalogue__type {
        text-align: right;
    }

    .army-list__points,
    .army-list__gold,
    .catalogue__points,
    .catalogue__price {
        min-width: 90px;
        text-align: right;
    }
}

.panel-box--round form {
    margin-top: 8px;
}

.hotspot--owned .hotspot__dot {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--on-primary);
}

.hotspot-owners {
    margin-top: 14px;
}

.hotspot-owners__title {
    font-size: 1rem;
}

.hotspot-owners__list {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.hotspot-owners__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.hotspot-owners__number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    font-family: var(--font-display);
    font-size: .8rem;
    color: var(--on-primary);
    background: var(--btn-primary-from);
    border-radius: 50%;
}

.hotspot-owners__name {
    font-family: var(--font-display);
    color: var(--heading);
}

.hotspot-owners__income {
    color: var(--ink-muted);
}

.hotspot-owners__item form {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.hotspot-owners__item select {
    padding: 6px 8px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.hotspot-owners__owner {
    margin-left: auto;
    font-style: italic;
    color: var(--ink-muted);
}

/* FAZY KAMPANII ---------------------------------------------------------- */

.phase-banner {
    margin-bottom: 12px;
    padding: 12px 14px;
    text-align: center;
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
    border: 1px solid var(--gold);
    border-radius: var(--radius);
}

.phase-banner--finished {
    border-color: var(--border);
    opacity: .9;
}

.phase-banner__now {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

.phase-banner__round {
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--parchment-dark);
}

.phase-banner__name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.phase-banner__name--round {
    font-size: 1.5rem;
}

.phase-banner__hint {
    margin: 4px 0 0;
    color: var(--parchment);
}

.phase-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: phase;
}

.phase-track__step {
    padding: 3px 10px;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--parchment-dark);
    border: 1px solid rgba(var(--border-rgb), .6);
    border-radius: 999px;
    counter-increment: phase;
}

.phase-track__step::before {
    content: counter(phase) ". ";
}

.phase-track__step.is-current {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold-bright);
}

.panel-box--phase form {
    margin-top: 8px;
}

.panel-phase {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-bright);
}

.panel-task {
    margin: 0 0 8px;
    color: var(--parchment);
}

.panel-finish {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--border-rgb), .5);
}

.btn--danger {
    color: #ff8f84;
    border-color: #a8352b;
}

.epilogue {
    margin-bottom: 16px;
}

.epilogue__form {
    margin-top: 14px;
}

/* SZCZEGÓŁY PUNKTÓW NA MAPIE ------------------------------------------------ */

/* punkt, w którym można zacząć – złota obwódka i chorągiewka */
.hotspot--starting .hotspot__dot {
    box-shadow: 0 0 0 3px var(--gold-bright), 0 2px 8px rgba(0, 0, 0, .6);
}

.hotspot--starting .hotspot__dot::after {
    content: "⚑";
    position: absolute;
    transform: translate(12px, -14px);
    font-size: .8rem;
    color: var(--gold-bright);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.hotspot-list__flags {
    display: flex;
    gap: 4px;
}

.hotspot-flag {
    padding: 2px 6px;
    font-family: var(--font-display);
    font-size: .75rem;
    color: var(--ink);
    background: var(--gold);
    border-radius: var(--radius);
}

.hotspot-flag--income {
    background: var(--parchment-dark);
}

.hotspot-list__item {
    flex-wrap: wrap;
}

.hotspot-card__badges:empty {
    display: none;
}

.hotspot-card__description {
    white-space: pre-line;
    line-height: 1.6;
}

.hotspot-card__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--parchment-dark);
}

.hotspot-card__facts dt {
    font-family: var(--font-display);
    font-size: .8rem;
    color: var(--ink-muted);
}

.hotspot-card__facts dd {
    margin: 0;
}

/* wybór pozycji startowych: wolne punkty startowe pulsują */
.is-choosing-start .hotspot--starting:not(.hotspot--owned) .hotspot__dot {
    animation: start-pulse 1.6s ease-in-out infinite;
}

@keyframes start-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 0 rgba(var(--accent-rgb), .6); }
    50% { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 0 10px rgba(var(--accent-rgb), 0); }
}

.panel-task--status {
    font-style: italic;
    color: var(--gold-bright);
}

.hotspot-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

/* WYDARZENIA W PUNKTACH ------------------------------------------------------ */

/* punkt z wydarzeniem w bieżącej rundzie – czerwony wykrzyknik */
.hotspot--event .hotspot__label::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    font-weight: 700;
    font-size: .7rem;
    color: #fff;
    background: var(--blood);
    border-radius: 50%;
    vertical-align: 1px;
}

.chronicle__place {
    margin-left: 8px;
    padding: 1px 8px;
    color: var(--ink);
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.hotspot-card__subtitle {
    margin: 14px 0 6px;
    font-size: .9rem;
    color: var(--heading);
}

.hotspot-card__event {
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--surface-soft);
    border-left: 3px solid var(--blood);
    border-radius: var(--radius);
}

.hotspot-card__event p {
    margin: 0;
}

.hotspot-card__event-meta {
    font-size: .8rem;
    color: var(--ink-muted);
}

.hotspot-card__event-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.hotspot-card__event-text {
    font-size: .95rem;
    white-space: pre-line;
}

/* ROZKAZY: ARMIE, ODWÓD, PODGLĄD PROWADZĄCEGO ------------------------------- */

.orders-help p {
    margin: 0 0 4px;
}

.army-card {
    margin-top: 14px;
    border-left: 4px solid var(--gold);
}

.army-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.army-card__name {
    margin: 0;
    font-size: 1.2rem;
}

.army-card__rename {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}

.army-card__rename input,
.army-card__order select,
.reserve-list__assign select {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.army-card__rename input {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.army-card__points {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--heading);
}

.army-card__units {
    margin: 10px 0;
    padding-left: 18px;
}

.army-card__order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.army-card__order-form {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 220px;
}

.army-card__order .panel-label,
.army-card__location .panel-label {
    color: var(--ink-muted);
}

/* Open Wargame, przemieszczanie armii: gdzie armia stoi (rusza stamtąd) */
.army-card__location {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 10px;
}

.army-card__disband {
    margin-top: 10px;
    text-align: right;
}

.reserve-list {
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.reserve-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.reserve-list__assign {
    display: flex;
    gap: 6px;
}

.reserve-back {
    margin-top: 14px;
}

.reserve-back summary {
    cursor: pointer;
    color: var(--ink-muted);
}

.gm-orders {
    margin-top: 16px;
    border-left: 4px solid var(--blood);
}

.gm-orders__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.gm-orders__table th,
.gm-orders__table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--parchment-dark);
}

.gm-orders__table th {
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--ink-muted);
}

/* MODAL ------------------------------------------------------------------ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--scrim);
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modal__header,
.modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
}

.modal__header {
    border-bottom: 1px solid var(--parchment-dark);
}

.modal__footer {
    justify-content: flex-end;
    border-top: 1px solid var(--parchment-dark);
}

.modal__footer:empty {
    display: none;
}

.modal__title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--heading);
}

.modal__close {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.modal__body {
    padding: 16px 20px;
}


/* BITWY: KARTY BITEW, ROZPISKI, JAWNE RUCHY ---------------------------------- */

.battles-heading {
    margin: 22px 0 4px;
}

.battle-card {
    margin-top: 14px;
    border-left: 4px solid var(--parchment-dark);
}

.battle-card--mine {
    border-left-color: var(--gold);
}

.battle-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.battle-card__place {
    margin: 0;
    font-size: 1.2rem;
}

.battle-card__sides {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.battle-side {
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.battle-side__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.battle-side__points {
    margin-left: auto;
    font-family: var(--font-display);
    color: var(--heading);
}

.battle-side__army {
    margin-top: 6px;
}

.battle-side__army summary {
    cursor: pointer;
}

.battle-side__army ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.battle-side__list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.battle-side__pdf {
    font-weight: 700;
}

.battle-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.battle-upload__label {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.battle-upload__label input {
    max-width: 100%;
    font: inherit;
}

.battle-upload small {
    flex-basis: 100%;
}

.battle-moves {
    margin-top: 14px;
}

.battle-moves__list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.battles-round {
    margin-top: 10px;
}

.battles-round > summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--heading);
}

@media (min-width: 768px) {
    .battle-card__sides {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}


/* ROZKAZY: ZESTAWIENIE RUNDY ------------------------------------------------- */


.orders-map {
    position: relative;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.orders-map img {
    display: block;
    width: 100%;
    height: auto;
}

.orders-map__pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    background: var(--gold);
    border: 2px solid var(--parchment);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
}

.orders-map__pin.is-clash {
    color: #fff;
    background: var(--blood);
}

.orders-place {
    margin-top: 12px;
    border-left: 4px solid var(--gold);
}

.orders-place--clash {
    border-left-color: var(--blood);
}

.orders-place--idle {
    border-left-color: var(--parchment-dark);
}

.orders-place__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.orders-place__name {
    margin: 0;
    font-size: 1.15rem;
}

.orders-place__armies {
    margin: 8px 0 0;
    padding-left: 18px;
}

.orders-place__armies .is-mine {
    font-weight: 700;
}

.orders-cta {
    margin-top: 14px;
}


/* lista kampanii – usuwanie (tylko założyciel, na „Kontynuuj”) */
.campaign-list__item {
    position: relative;
}

.campaign-list__item--deletable .campaign-list__link {
    padding-right: 96px;
}

.campaign-list__delete {
    position: absolute;
    top: 10px;
    right: 10px;
}


/* PROFIL ----------------------------------------------------------------------- */

.profile__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0 0 18px;
}

.profile__facts dt {
    font-weight: 700;
    color: var(--ink-muted);
}

.profile__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-email {
    margin-top: 16px;
}

.profile-email__pending {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
}

.profile-email__pending p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.panel-unit {
    font-size: .55em;
    opacity: .75;
}


/* ROZKAZY Z MAPY I WARUNKI MIEJSC -------------------------------------------- */

/* miejsce zablokowane wydarzeniem (np. potop) – szare dla wszystkich przez całą rundę */
.hotspot--blocked .hotspot__dot {
    color: #fff;
    background: #7f8c8d;
    border-color: #bdc3c7;
    filter: grayscale(1);
}

.hotspot--blocked .hotspot__dot::before {
    content: "⛔";
    position: absolute;
    transform: translate(-13px, -13px);
    font-size: .75rem;
}

.hotspot--blocked .hotspot__label {
    color: #bdc3c7;
    text-decoration: line-through;
    opacity: .85;
}

/* faza rozkazów: miejsca, do których ja nie mogę wysłać armii – przygaszone */
.hotspot--unavailable {
    opacity: .55;
}

.hotspot--unavailable .hotspot__dot {
    filter: grayscale(.7);
}

.hotspot--my-order .hotspot__dot {
    box-shadow: 0 0 0 3px var(--gold-bright);
}

.hotspot-card__conditions {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hotspot-card__conditions .is-blocked {
    font-weight: 700;
    color: var(--blood);
}

.hotspot-card__my-order {
    margin: 12px 0 0;
    font-weight: 700;
}

.hotspot-card__order {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}

.hotspot-order-form select,
.hotspot-order-form input[type=file] {
    width: 100%;
    max-width: 100%;
}

.army-card--sent {
    border-left-color: var(--moss);
}

.army-card__list {
    display: grid;
    gap: 4px;
    flex-basis: 100%;
    font-size: .9rem;
}

.army-card__list input {
    max-width: 100%;
}

.army-card__order-form {
    flex-wrap: wrap;
}

.army-card__pdf {
    font-weight: 700;
}

.army-card__locked {
    flex-basis: 100%;
    font-size: .85rem;
}

.orders-release {
    display: inline;
    margin-left: 6px;
}

.chronicle__conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.chronicle__conditions li {
    padding: 3px 10px;
    font-size: .85rem;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.chronicle__conditions .is-blocked {
    color: #fff;
    background: var(--blood);
    border-color: var(--blood);
}

/* ramka grupy pól: warunki wydarzenia, grupy zagadnień karty pomocy */
.event-conditions,
.reference-group,
.vg-correct__group {
    padding: 12px 14px;
    margin: 0 0 16px;
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
}

.event-conditions legend,
.reference-group legend,
.vg-correct__group legend {
    padding: 0 6px;
    font-family: var(--font-display);
    color: var(--heading);
}

.form__check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
}

.form__check-label input[type=checkbox] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--blood);
}

.footer__link {
    color: inherit;
}

.footer__link:hover,
.footer__link:focus-visible {
    color: var(--gold-bright);
}


/* BITWY: MOJE / POZOSTAŁE, SPOTKANIA W DRODZE --------------------------------- */


.battles-section {
    margin-top: 18px;
}

.battles-section__title {
    margin: 0;
    font-size: 1.1rem;
}

.battles-section--mine {
    padding: 12px 14px 16px;
    background: rgba(var(--accent-rgb), .08);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
}

.battle-card--encounter {
    border-left-style: dashed;
}

.battle-card__hint {
    margin: 8px 0 0;
    font-size: .9rem;
}

.battle-side--won {
    border-color: var(--moss);
    box-shadow: inset 4px 0 0 var(--moss);
}

.battle-side--lost,
.battle-side--withdrew {
    opacity: .7;
}

.battle-side__outcome {
    margin: 6px 0 0;
    font-weight: 700;
}

.battle-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.battle-winner {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.battle-winner select {
    padding: 6px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.battle-waiting {
    margin-top: 14px;
}

.battle-waiting ul {
    margin: 8px 0 0;
    padding-left: 18px;
}


/* ROZLICZENIE BITEW ---------------------------------------------------------- */

.battle-report {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.battle-report__line {
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.battle-report__by,
.battle-report__waiting {
    margin: 6px 0 0;
    font-size: .85rem;
}

.battle-report__warning {
    font-weight: 700;
    color: var(--blood);
}

.battle-report-form {
    margin-top: 10px;
}

.battle-report-form > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
}

.battle-report-form form {
    margin-top: 10px;
}

.battle-report-form fieldset {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.battle-report-form legend {
    padding: 0 4px;
    font-weight: 700;
}

.battle-report-form .form__check-label {
    font-weight: 400;
}

.battle-card__settlement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}


/* LOSOWANIE STRAT ------------------------------------------------------------ */

.battle-casualties {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed var(--parchment-dark);
    border-radius: var(--radius);
}

.battle-casualties__title {
    margin: 0 0 4px;
    font-weight: 700;
}

.battle-casualties ul {
    margin: 0;
    padding-left: 18px;
}

.battle-casualties .is-lost {
    color: var(--blood);
}

.battle-casualties__die {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-family: var(--font-display);
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: 4px;
}


/* ARTEFAKTY I NAGRODY -------------------------------------------------------- */

.items {
    margin-top: 16px;
}

.battle-rewards {
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(var(--accent-rgb), .08);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
}

.battle-rewards__title {
    margin: 0 0 4px;
    font-weight: 700;
}

.battle-rewards ul {
    margin: 0;
    padding-left: 18px;
}

.battle-rewards__revoke {
    display: inline;
    margin-left: 6px;
}

.reward-form {
    margin-top: 12px;
}

.reward-form > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
}

.reward-form form {
    margin-top: 10px;
}

.reward-form fieldset {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.reward-form__kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.reward-form__kinds .form__check-label {
    font-weight: 400;
}

.reward-form__hint {
    margin: 8px 0 0;
    padding: 6px 10px;
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.battle-rewards-general {
    margin-top: 14px;
}


/* PODRĘCZNIK I WSPARCIE ------------------------------------------------------ */

.manual {
    line-height: 1.65;
}

.manual h2 {
    margin: 26px 0 8px;
    scroll-margin-top: 80px;
}

.manual section:first-of-type h2 {
    margin-top: 10px;
}

.manual__toc {
    padding: 12px 16px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.manual__toc-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    color: var(--heading);
}

.manual__toc ol {
    margin: 0;
    padding-left: 22px;
}

.manual__footer {
    margin: 14px 0 0;
}

.support__options {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.support-option__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

/* zachęta do wsparcia (_partials/support_note): jedno zdanie drobniejszym drukiem – na ciemnym tle nagłówka
   jasny pergamin, w karcie przygaszony atrament */
.support-note {
    margin: 10px 0 0;
    font-size: .9rem;
    color: var(--parchment-dark);
}

.card .support-note {
    color: var(--ink-muted);
}

/* koniec kampanii – podziękowanie nad epilogiem */
.support-note[data-support-note="campaign_end"] {
    margin: 0 0 14px;
    font-size: 1rem;
    text-align: center;
}

/* pod artykułem oddzielona kreską, żeby nie wyglądała na część tekstu */
.post__article .support-note {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

/* kafelki obok siebie, ale pojedynczy (dziś jest tylko wpłata) zajmuje całą szerokość – bez pustej połowy */
@media (min-width: 768px) {
    .support__options {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.profile-password {
    margin-top: 16px;
}


/* KRONIKA DO DRUKU / PDF ------------------------------------------------------ */


/* przyciski w pasku bez własnych marginesów (stary .events-actions miał margines dolny) */

.chronicle-print {
    max-width: 820px;
    margin-inline: auto;
    line-height: 1.6;
}

.chronicle-print__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.chronicle-print__toolbar p {
    flex-basis: 100%;
    margin: 0;
}

.chronicle-print__cover {
    margin-bottom: 24px;
    text-align: center;
}

.chronicle-print__brand {
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.chronicle-print__players {
    font-style: italic;
}

.chronicle-print__image {
    display: block;
    max-width: 100%;
    max-height: 480px;
    margin: 12px auto;
    border-radius: var(--radius);
}

.chronicle-print__entry {
    margin-bottom: 22px;
    padding: 16px 18px;
    background: var(--parchment);
    color: var(--ink);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    break-inside: avoid;
}

.chronicle-print__entry h2 {
    margin: 0 0 8px;
}

.chronicle-print__meta {
    margin: 0 0 4px;
    font-size: .85rem;
    color: var(--ink-muted);
}

@media print {
    .topbar,
    .footer,
    .flash,
    [data-print-hide] {
        display: none !important;
    }

    html,
    body,
    .page-print {
        background: #fff !important;
        color: #000 !important;
    }

    .chronicle-print {
        max-width: none;
        padding: 0;
    }

    .chronicle-print__entry {
        background: #fff !important;
        color: #000 !important;
        border: none;
        border-bottom: 1px solid #999;
        border-radius: 0;
        padding: 0 0 14px;
    }

    .chronicle-print__cover {
        break-after: page;
    }

    .chronicle-print h1,
    .chronicle-print h2,
    .chronicle-print__meta {
        color: #000 !important;
    }
}

.manual-rules {
    margin: 0 0 16px;
}

.manual-rules__game h3 {
    margin: 16px 0 6px;
}

.manual-rules__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
}

.manual-rules__list .badge {
    vertical-align: 1px;
}

.manual-rules__list a {
    font-weight: 700;
}

.manual__part {
    margin-top: 0;
}

.manual__crumb {
    margin: 0 0 6px;
}

.setup-group {
    margin: 0 0 16px;
    padding: 10px 14px 4px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.setup-group legend {
    padding: 0 6px;
    font-family: var(--font-display);
    color: var(--heading);
}


/* ZAPROSZENIA ---------------------------------------------------------------- */

.invitations {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--parchment-dark);
}

.invitations__list {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.invitations__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.invitations__cancel {
    margin-left: auto;
}

.invitation-inbox {
    margin-bottom: 16px;
    border: 2px solid var(--gold);
}

.invitation-inbox__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invitation-inbox__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.invitation-inbox__actions {
    display: flex;
    gap: 8px;
}

.nav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--blood);
    border-radius: 999px;
}

.footer p {
    margin: 0;
}

.footer__stats,
.footer__links {
    width: 100%;
}

.footer__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    margin-bottom: 6px !important;
    font-size: .85rem;
    opacity: .85;
}

.army-card__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}

.army-card__item-back {
    display: inline;
}

.battle-side__items {
    margin: 6px 0 0;
    font-size: .9rem;
}

.chronicle__footer {
    flex-wrap: wrap;
}

.chronicle__footer .btn + form,
.chronicle__footer a.btn {
    margin-left: auto;
}

.chronicle__footer a.btn + form {
    margin-left: 0;
}

.event-current-image img {
    max-height: 240px;
}

.grants {
    margin-top: 16px;
}

.grants__forms {
    display: grid;
    gap: 6px;
}

.grants__recipients {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.grants__recipients .form__check-label {
    font-weight: 400;
}


/* LINKI KAMPANII --------------------------------------------------------------- */

.panel-links {
    margin-bottom: 18px;
}

.panel-links__list {
    display: grid;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.panel-links__list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-links__list a {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-links__delete {
    display: inline;
}

.panel-links__add > summary {
    cursor: pointer;
    color: var(--gold-bright);
}

.panel-links__add form {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.panel-links__add input {
    padding: 6px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}


/* KOLORY GRACZY ---------------------------------------------------------------- */

.hotspot--owned .hotspot__dot {
    background: var(--owner-color, var(--gold));
    color: var(--owner-text, var(--ink));
    border: 3px solid #fff;
}

.player-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: none;
    vertical-align: -1px;
    background: var(--player-color, transparent);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.color-picker > summary {
    cursor: pointer;
    font-size: .95rem;
    color: var(--ink);
}

.color-picker__form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.color-picker__swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--player-color);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.color-picker__swatch.is-current {
    box-shadow: 0 0 0 3px var(--heading);
}

.color-picker__swatch:disabled {
    opacity: .25;
    cursor: not-allowed;
}

/* pozycja startowa gracza: obwódka i chorągiewka w jego kolorze */
.hotspot--owned.hotspot--starting .hotspot__dot {
    box-shadow: 0 0 0 3px var(--owner-color, var(--gold-bright)), 0 2px 8px rgba(0, 0, 0, .6);
}

.hotspot--owned.hotspot--starting .hotspot__dot::after {
    color: var(--owner-color, var(--gold-bright));
    text-shadow: 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .9);
    font-size: 1rem;
}

/* etykieta zajętego punktu – pasek w kolorze właściciela */
.hotspot--owned .hotspot__label {
    border-left: 4px solid var(--owner-color, var(--gold));
}

.battle-card__next {
    margin: 10px 0 0;
    padding: 6px 10px;
    font-weight: 700;
    background: var(--surface-soft);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
}

/* NAGŁÓWEK ZAKŁADKI KAMPANII (_tab_head) I PUSTY STAN (_empty_state) -------- */

.tab-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(201, 162, 74, .35);
}

.tab-head__title {
    margin: 0 0 4px;
    color: var(--gold-bright);
}

.tab-head__lead {
    margin: 0 0 4px;
    /* --parchment-dark to kolor powierzchni, nie tekstu: beż na beżu był nieczytelny (1.10.2026) */
    color: var(--ink-muted);
}

.tab-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-head__actions .btn {
    margin: 0;
}

@media (min-width: 768px) {
    .tab-head {
        flex-direction: row;
        /* przyciski, które nie mieszczą się obok tytułu, schodzą pod niego całą grupą
           – bez tego ściskały tytuł do jednego słowa w wierszu i wychodziły poza stronę */
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
    }

    .tab-head__text {
        flex: 1 1 280px;
        min-width: 0;
    }

    /* przyciski zajmują tyle, ile potrzebują – resztę szerokości bierze tytuł z opisem (dawniej dzieliły się
       miejscem po równo i opis łamał się w połowie strony) */
    .tab-head__actions {
        flex: 0 1 auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    /* nagłówek z wieloma przyciskami (turniej): tytuł na całą szerokość,
       przyciski zawsze w rzędzie pod nim */
    .tab-head--stacked {
        flex-direction: column;
        align-items: stretch;
    }

    /* w kolumnie flex-basis z wiersza znaczyłby wysokość – stąd brałaby się dziura pod tytułem */
    .tab-head--stacked > * {
        flex: 0 0 auto;
    }

    /* margin-left: auto z ogólnej reguły w kolumnie spychał przyciski w prawo (i poza ekran) – w turnieju stoją od lewej */
    .tab-head--stacked .tab-head__actions {
        justify-content: flex-start;
        margin-left: 0;
    }
}

.empty-state {
    text-align: center;
}

.empty-state__text {
    margin: 0;
}

.empty-state__action {
    margin: 14px 0 0;
}

.empty-state__action .btn {
    margin: 0;
}

/* nota o prawach: stopka i dół listy wieści – na całą szerokość i wyśrodkowana */
/* informacja o serwisie fanowskim – warunek Mantica: ma być wyraźna, więc nie tak blada jak drobny druk */
.footer__legal.footer__fan {
    font-size: .8rem;
    opacity: .85;
}

/* drobny podpis pod grafiką od Mantica (warunek ich zgody) */
.image-credit {
    margin: 4px 0 12px;
    font-size: .72rem;
    font-style: italic;
    opacity: .75;
}

.footer__legal,
.news-legal {
    width: 100%;
    margin: 8px 0 0;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    opacity: .7;
}

.news-legal {
    margin-top: 16px;
    font-style: italic;
}

/* POTYCZKI ------------------------------------------------------------- */

.skirmish-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skirmish-list__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    transition: box-shadow .15s;
}

.skirmish-list__item--win .skirmish-list__link { border-left-color: var(--moss); }
.skirmish-list__item--loss .skirmish-list__link { border-left-color: var(--blood); }

.skirmish-list__link:hover,
.skirmish-list__link:focus-visible {
    box-shadow: 0 0 0 2px var(--gold-bright);
    outline: none;
}

.skirmish-list__date {
    font-size: .85rem;
    color: var(--ink-muted);
}

.skirmish-list__name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.skirmish-list__teams--players {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.skirmish-list__vs {
    font-style: italic;
}

.skirmish-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/*
  Listy gier i turniejów (Moje potyczki, statystyki, Moje turnieje): na szerokim ekranie każda pozycja to JEDEN wiersz
  – data | gra i nazwa | gracze | wynik i status – z kolumnami równymi w całej liście (subgrid). Dawniej każda gra była
  wysokim panelem z pustą prawą połową. Na telefonie (i bez obsługi subgrid) zostaje układ jedno pod drugim.
*/
@media (min-width: 900px) {
    @supports (grid-template-columns: subgrid) {
        /* data | gra i nazwa | gracze | dymek z wrażeniami (pusta kolumna, gdy ich nie ma) | wynik i status */
        .skirmish-list--rows {
            grid-template-columns: max-content minmax(0, 1.3fr) minmax(0, 1fr) 4rem max-content;
        }

        .skirmish-list--rows > .skirmish-list__item,
        .skirmish-list--rows .skirmish-list__link {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
        }

        .skirmish-list--rows .skirmish-list__link {
            align-items: center;
            column-gap: 20px;
            padding: 10px 16px;
        }

        .skirmish-list--rows .skirmish-list__link {
            grid-row: 1;
        }

        .skirmish-list--rows .skirmish-list__meta {
            grid-column: -2;
            justify-content: flex-end;
        }

        /* dymek leży na swojej kolumnie nad odnośnikiem wiersza */
        .skirmish-list--rows .skirmish-list__impressions {
            position: relative;
            top: auto;
            right: auto;
            z-index: 1;
            grid-column: 4;
            grid-row: 1;
            align-self: center;
            justify-self: center;
        }
    }
}


.skirmish-result {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.skirmish-result--win { color: var(--moss); }
.skirmish-result--draw { color: var(--ink-muted); }
.skirmish-result--loss { color: var(--blood); }

.skirmish-teams {
    display: grid;
    gap: 10px;
}

.skirmish-team {
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.skirmish-team--win {
    border-color: var(--moss);
    box-shadow: inset 4px 0 0 var(--moss);
}

.skirmish-team__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1rem;
}

.skirmish-team__players {
    margin: 0;
    padding: 0;
    list-style: none;
}

.skirmish-team__dispute {
    color: var(--blood);
}

.skirmish-confirm {
    border-left: 4px solid var(--gold);
}

.skirmish-confirm__actions {
    display: grid;
    gap: 12px;
}

.skirmish-confirm__dispute textarea {
    width: 100%;
    margin: 4px 0 8px;
}

.skirmish__footer {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 24px;
}

.skirmish-form fieldset {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.skirmish-player,
.skirmish-link {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0 8px;
    align-items: end;
    padding: 8px 0;
    border-bottom: 1px dashed var(--parchment-dark);
}

.skirmish-player__name,
.skirmish-link__url,
.skirmish-link__label {
    grid-column: 1 / -1;
}

.skirmish-player__remove {
    margin-bottom: 14px;
}

.skirmish-form .form__row {
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .skirmish-teams {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .skirmish-confirm__actions {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    .skirmish-player {
        grid-template-columns: 2fr 1fr 1fr auto;
    }

    .skirmish-link {
        grid-template-columns: 2fr 1fr auto;
    }

    .skirmish-player__name,
    .skirmish-link__url,
    .skirmish-link__label {
        grid-column: auto;
    }
}

.skirmish-impressions__list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.skirmish-impressions__list li {
    padding: 8px 12px;
    background: var(--surface-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

.skirmish-impressions__by {
    margin: 0 0 4px;
    font-size: .9rem;
}

.skirmish-impressions__form textarea {
    width: 100%;
    margin: 4px 0 8px;
}

/* dymek z wrażeniami – przycisk poza odnośnikiem wiersza; na telefonie w prawym górnym rogu pozycji */
.skirmish-list__item {
    position: relative;
}

.skirmish-list__impressions {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 4px 8px;
    font: inherit;
    font-size: .9rem;
    color: var(--ink-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}

.skirmish-list__impressions:hover,
.skirmish-list__impressions:focus-visible {
    color: var(--heading);
    border-color: var(--gold);
    outline: none;
}

.skirmish-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: end;
}

/* etykiety filtra zawsze tak samo – niezależnie od stylu formularza, w którym stoi */
.skirmish-filter label {
}

.skirmish-filter .form__row {
    flex: 1 1 160px;
    margin: 0;
}

/* pola filtra tej samej wysokości – select domyślnie jest niższy niż input */
.skirmish-filter input,
.skirmish-filter select {
    height: 42px;
    line-height: 1.4;
}

/* przyciski w osobnym wierszu pod polami – inaczej nie da się ich zrównać z polami */
.skirmish-filter__actions {
    display: flex;
    flex: 1 0 100%;
    gap: 8px;
    margin-top: 2px;
}

/* „Pokaż” na całą szerokość wiersza pod polami (jak „Rzuć” przy kostkach), „Wyczyść” obok w swojej szerokości */
.skirmish-filter__actions .btn {
    min-height: 42px;
}

.skirmish-filter__actions .btn--primary {
    flex: 1 1 auto;
}

/* „Znaleziono: 12 potyczek” pod filtrami listy i pusty wynik filtrów */
.skirmish-list__found {
    margin: 10px 0 0;
    color: var(--ink-muted);
}

.skirmish-list__none {
    text-align: center;
    color: var(--ink-muted);
}

.skirmish-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.skirmish-tiles li {
    padding: 8px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--ink-muted);
}

.skirmish-tiles__value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--heading);
}

.skirmish-table {
    width: 100%;
    border-collapse: collapse;
}

.skirmish-table th,
.skirmish-table td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid var(--parchment-dark);
}

.skirmish-table th[scope="row"],
.skirmish-table thead th:first-child,
.skirmish-table .skirmish-table__name {
    text-align: left;
}

.skirmish-table [data-stats-row="version"] th[scope="row"] {
    padding-left: 22px;
    font-weight: 400;
    color: var(--ink-muted);
}

.skirmish-table tr.is-me {
    background: rgba(var(--accent-rgb), .14);
}

.ranking-optin {
    border-left: 4px solid var(--gold);
}

.tournament-rules__reset {
    margin-top: 12px;
    text-align: right;
}

/* Formularz w dwóch kolumnach na komputerze; .form-grid__full spina wiersz na całą szerokość.
   Na telefonie wszystko zostaje jedno pod drugim. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 18px;
}

.form-grid > fieldset {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .form-grid__full {
        grid-column: 1 / -1;
    }

    /* trzy równe kolumny tam, gdzie pola są wąskie (punkty W/R/P, kontakt) */
    .tournament-rules-form .form-grid--three,
    .form-grid--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* TURNIEJE: stoły i scenariusze ---------------------------------------- */

.tournament-tables {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tournament-table__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.tournament-table__label {
    font-family: var(--font-display);
    font-weight: 700;
}

.tournament-scenarios {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}

@media (min-width: 768px) {
    .tournament-tables {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.tournament-lists {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    width: 100%;
    font-size: .9rem;
}

.tournament-lists__slot {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tournament-lists__slot form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tournament-lists input[type=file] {
    max-width: 210px;
}

/* TURNIEJE: rundy i pary --------------------------------------------- */

.tournament-round__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.tournament-matches {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tournament-match {
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
}

.tournament-match.is-me {
    border-left-color: var(--gold);
}

.tournament-match.has-conflict {
    border-left-color: var(--blood);
}

.tournament-match__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.tournament-match__table {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.tournament-match__players {
    flex: 1 1 200px;
}

.tournament-match__form,
.tournament-match__reports {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--parchment-dark);
}

.tournament-match__reports p {
    margin: 0 0 4px;
}

.tournament-match__decide {
    display: flex;
    gap: 8px;
    align-items: end;
}

/* WIEŚCI --------------------------------------------------------------- */

/* nagłówek skrzynki moderacji: tytuł z licznikiem, a po prawej sprzątanie starych wpisów */
.news-admin__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    justify-content: space-between;
}

.news-admin__head h2 {
    margin: 0;
}

.news-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-item {
    /* telefon: zdjęcie nad tekstem, żeby tekst miał całą szerokość; obok dopiero od tabletu */
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
}

/* miniatura zostaje u wydawcy – wczytujemy ją z jego adresu, nic nie kopiujemy */
.news-item__thumb {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(140deg, var(--parchment-dark), var(--surface-input));
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.news-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* litera źródła widać tylko wtedy, gdy obrazka nie ma albo się nie wczytał */
.news-item__thumb img ~ .news-item__initial {
    display: none;
}

.news-item__initial {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink-muted);
    opacity: .7;
}

.news-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 4px;
    font-size: .85rem;
    color: var(--ink-muted);
}

.news-item__source {
    font-family: var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.news-item__game {
    font-weight: 700;
}

.news-item__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.news-item__summary {
    margin: 0 0 8px;
}

.news-item__link,
.news-item__actions {
    margin: 0;
}

@media (min-width: 768px) {
    .news-item {
        grid-template-columns: 160px 1fr;
        gap: 16px;
        align-items: start;
    }

    .news-item__thumb {
        aspect-ratio: 1;
    }
}

.news-item__actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.pager__state {
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .04em;
    color: var(--ink-muted);
}

/* karty ułożone jedna pod drugą zawsze z odstępem (panele w siatce mają własny gap) */
.container > .card + .card,
.container > .card + .home__panels,
.container > .home__panels + .card,
.container > .card + .stats-grid,
.container > .stats-grid + .card {
    margin-top: 18px;
}

/* STRONA GŁÓWNA: panele „co się u mnie dzieje” --------------------------- */

.home__panels {
    display: grid;
    gap: 18px;
}

/* panele w rzędzie mają równą wysokość, a przyciski siedzą u dołu – niezależnie od treści */
.home-panel {
    display: flex;
    flex-direction: column;
}

.home-panel__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.05rem;
}


.home-panel__tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
}

.home-panel__tiles li {
    padding: 8px 4px;
    font-size: .75rem;
}

.home-panel__tiles .skirmish-tiles__value {
    font-size: 1.25rem;
}

.home-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

/* przyciski na dole panelu – dzięki temu oba panele kończą się równo */
.home-panel .home-panel__actions {
    margin-top: auto;
    padding-top: 16px;
}

@media (min-width: 768px) {
    .home__panels {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tabele z wieloma kolumnami (tabela turnieju, ranking, statystyki) przewijają się w swojej karcie,
   zamiast rozpychać całą stronę na telefonie. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .skirmish-table {
    min-width: 520px;
}

.skirmish-table th[scope="row"] {
    overflow-wrap: anywhere;
}

/* Zakładki źródeł w moderacji wieści */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.filter-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--font-display);
    font-size: .85rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.filter-tabs__tab.is-current {
    color: var(--on-primary);
    background: linear-gradient(to bottom, var(--btn-from), var(--btn-to));
    border-color: var(--gold);
}

.filter-tabs__count {
    font-size: .75rem;
    opacity: .8;
}

/* filtry nad listą artykułów (gra, rodzaj) – odstęp od wyszukiwarki pod spodem; podwójna klasa, bo ogólna reguła
   .bg-filters (niżej w pliku) zeruje dolny margines */
.bg-filters.blog-filters {
    margin-bottom: 22px;
}

/* zaproszenie do konta pod listą (Wieści, Artykuły, turniej) – .card nie ma marginesu, więc bez tego
   ramka kleiła się do przewijaka stron nad nią */
.news-invite {
    margin-top: 28px;
}

.news-invite p:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

/* przyciski moderacji w jednym rzędzie, wewnątrz kafelka */
.news-item__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
}

/* Pasek z informacją o ciasteczkach – trzyma się dołu ekranu, na telefonie przycisk pod tekstem. */
.cookie-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    color: var(--ink);
    background: var(--parchment);
    border-top: 2px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .45);
}

.cookie-bar[hidden] {
    display: none;
}

.cookie-bar__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.cookie-bar__link {
    white-space: nowrap;
    color: var(--heading);
}

.cookie-bar__accept {
    align-self: stretch;
}

@media (min-width: 768px) {
    .cookie-bar {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 12px 24px;
    }

    .cookie-bar__accept {
        align-self: auto;
        flex: none;
    }
}

/* Tabela ciasteczek na stronie o prywatności */
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.privacy-table th,
.privacy-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--parchment-dark);
}

.privacy-table thead th {
    color: var(--heading);
    white-space: nowrap;
}

.privacy-table code {
    overflow-wrap: anywhere;
}

.table-scroll .privacy-table {
    min-width: 520px;
}

/* Rząd przycisków-ekranów (turniej): bieżący ekran wyróżniony złotą ramką. */
.btn.is-current {
    color: var(--gold-bright);
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .5);
}

/* Akcje strony pod nagłówkiem (np. „Losuj rundę”) – wszędzie tak samo, od lewej. */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

/* Stół przy parze: numer, nazwa i mała miniatura terenu (klik = pełne zdjęcie). */
.tournament-match__table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* nazwa stołu w parze otwiera zdjęcie terenu (assets/js/photo-modal.js) */
.card a.tournament-match__table-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere; /* długa nazwa stołu łamie się – „nowrap” rozpychał Przebieg na telefonie (QA 22.10.2026) */
    text-decoration: none; /* bez podkreślenia – ikonka obrazka mówi, że to się otwiera */
}

.card a.tournament-match__table-link:hover,
.card a.tournament-match__table-link:focus-visible {
    color: var(--blood);
}

.icon-image {
    flex: none;
    opacity: .85;
}

/* okienko ze zdjęciem jest szersze niż zwykłe (480 px to za mało na zdjęcie stołu) */
.modal__dialog:has(.photo-modal__img) {
    max-width: min(1100px, 100%);
}

/* długi tekst (zasady scenariusza) – szersze okienko, żeby dało się to czytać */
.modal__dialog:has(.content-modal) {
    max-width: min(760px, 100%);
}

.photo-modal__img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
    border-radius: var(--radius);
}

/* Kto gra przy stole – na ekranie stołów */
.tournament-table__who {
    margin: 0 0 10px;
}

/* NARZĘDZIA: kostki ----------------------------------------------------- */

.dice__types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.dice__type.is-current {
    color: var(--gold-bright);
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .5);
}

.dice__settings {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.dice__field {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
}

.dice__field label {
    display: block;
    margin: 0;
}

/* wszystkie pola i przyciski przy kostkach mają jedną wysokość i wygląd pól formularzy serwisu –
   wcześniej były domyślne pola przeglądarki (niższe od przycisków −/+) i rząd się rozjeżdżał */
.dice__settings input,
.dice__settings select,
.dice__stepper .btn {
    box-sizing: border-box;
    height: 2.75rem;
}

.dice__settings input,
.dice__settings select {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    font: inherit;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.dice__settings input:focus,
.dice__settings select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35);
}

.dice__stepper {
    display: flex;
    gap: 8px;
}

.dice__stepper .btn {
    flex: 0 0 2.75rem;
    padding: 0;
    font-size: 1.2rem;
}

.dice__stepper input {
    flex: 1 1 auto;
    text-align: center;
}

/* modyfikator: krótka liczba + „do sumy / do każdej kostki” */
.dice__stepper--modifier input {
    flex: 0 0 5.5rem;
}

.dice__stepper--modifier select {
    flex: 1 1 auto;
}

.dice__roll {
    width: 100%;
}

.dice__result {
    margin-top: 18px;
    text-align: center;
}

.dice__total {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--heading);
}

.dice__total .muted {
    font-size: 1rem;
}

.dice__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dice__die {
    min-width: 40px;
    padding: 8px 6px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* liczba sukcesów to najważniejsza liczba w rzucie – ma być widoczna z drugiej strony stołu */
.dice__successes {
    display: inline-block;
    margin: 14px 0 0;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading);
    background: var(--parchment-dark);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
}

.dice__history {
    margin: 0 0 12px;
    padding-left: 20px;
}

.dice__history li {
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .dice__settings {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

/* NARZĘDZIA: kostki mocy Vanguarda ------------------------------------- */

.vg-dice__sheet {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.vg-dice__pool {
    display: grid;
    gap: 14px;
    margin-bottom: 8px;
}

.vg-dice__field {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
}

.vg-dice__field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* pole liczby wygląda jak każde pole serwisu (reguła :where) – tu tylko wysokość przycisków −/+ i środek */
.vg-dice__field input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 2.75rem;
    text-align: center;
}

.vg-dice__field .dice__stepper .btn {
    height: 2.75rem;
}

.vg-dice__field .form__help {
    margin: 0;
}

.vg-dice__swatch {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.vg-dice__swatch--red { background: var(--vg-die-red); }
.vg-dice__swatch--white { background: var(--vg-die-white); }
.vg-dice__swatch--blue { background: var(--vg-die-blue); }

.vg-dice__result {
    margin-top: 18px;
    text-align: center;
}

.vg-dice__round {
    margin: 0 0 4px;
}

.vg-dice__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* kostka: kwadrat w kolorze kostki, miecze jak na ściankach; liczba mieczy obok dla czytelności z daleka */
.vg-dice__die {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
    color: var(--vg-die-sword-light);
    background: var(--vg-die-red);
    border: 2px solid rgba(0, 0, 0, .25);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .35);
}

button.vg-dice__die {
    cursor: pointer;
}

button.vg-dice__die:disabled {
    cursor: default;
}

.vg-dice__die--white {
    color: var(--vg-die-sword-dark);
    background: var(--vg-die-white);
}

.vg-dice__die--blue {
    background: var(--vg-die-blue);
}

.vg-dice__swords {
    width: 46px;
    height: 46px;
    fill: currentColor;
}

.vg-dice__value {
    position: absolute;
    right: 4px;
    bottom: 1px;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    opacity: .8;
}

/* przerzucona kostka: znak ↻ w rogu, druga szansa już wykorzystana */
.vg-dice__die.is-rerolled::after {
    content: '↻';
    position: absolute;
    top: 1px;
    left: 5px;
    font-size: .85rem;
    font-weight: 700;
}

.vg-dice__hint {
    margin: 10px 0 0;
}

.vg-dice__spend {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--parchment-dark);
}

.vg-dice__left {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading);
}

.vg-dice__spend-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.vg-dice__legend {
    display: grid;
    gap: 14px;
}

.vg-dice__legend-name {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 0 0 6px;
}

/* legenda: sześć ścianek w jednym rzędzie także na telefonie */
.vg-dice__list--legend {
    justify-content: flex-start;
    gap: 6px;
}

.vg-dice__list--legend .vg-dice__die {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.vg-dice__list--legend .vg-dice__swords {
    width: 28px;
    height: 28px;
}

@media (min-width: 768px) {
    .vg-dice__pool {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vg-dice__list--legend {
        gap: 10px;
    }

    .vg-dice__list--legend .vg-dice__die {
        width: 48px;
        height: 48px;
        border-radius: 9px;
    }

    .vg-dice__list--legend .vg-dice__swords {
        width: 34px;
        height: 34px;
    }
}

/* NARZĘDZIA: kostki Deadzone 3 ------------------------------------------ */
/* kostka dowodzenia: ciemny kwadrat z jasnym symbolem, zaznaczona – złota obwódka, wydana – przygaszona */
.dz-dice__die {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 8px;
    color: var(--dz-die-ink);
    background: var(--dz-die);
    border: 2px solid rgba(0, 0, 0, .3);
    border-radius: 12px;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .35);
}

button.dz-dice__die {
    cursor: pointer;
}

.dz-dice__die.is-selected {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.dz-dice__die.is-spent {
    opacity: .35;
    cursor: default;
}

.dz-dice__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.dz-dice__name {
    display: block;
    margin-top: 4px;
    font-size: .85rem;
    text-align: center;
}

[data-dz-command-list] li {
    display: grid;
    justify-items: center;
}

.dz-dice__setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 32px;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .dz-dice__setup {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        align-items: start;
    }

    /* na wysokości pola z liczbą kostek */
    .dz-dice__no-reroll {
        margin-top: 2.2rem;
    }
}

.dz-dice__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 6px;
}

.dz-dice__legend {
    display: grid;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.dz-dice__legend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.dz-dice__legend-row .dz-dice__die {
    width: 52px;
    height: 52px;
    padding: 7px;
}

@media (min-width: 768px) {
    .dz-dice__legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* NARZĘDZIA: generator zdarzeń ------------------------------------------ */
/* NARZĘDZIA → GENERATOR MISJI: rysunek stołu (SVG) i trzy części misji */
.mission__result {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .mission__result {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
    }
}

.mission__figure {
    margin: 0;
}

.mission-map {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--border);
    border-radius: var(--radius);
}

.mission-map__table { fill: var(--parchment-dark); }
.mission-map__mid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.mission-map__zone { stroke-width: 2; fill-opacity: .35; }
.mission-map__zone--a { fill: var(--blood); stroke: var(--blood); }
.mission-map__zone--b { fill: var(--mission-b); stroke: var(--mission-b); }
.mission-map__label { font: 700 18px var(--font-display); text-anchor: middle; dominant-baseline: central; }
.mission-map__label--a { fill: var(--blood); }
.mission-map__label--b { fill: var(--mission-b); }
.mission-map__marker { fill: var(--gold-bright); stroke: var(--ink); stroke-width: 2; }
.mission-map__marker-n { font: 700 10px sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }

.mission__legend {
    margin-top: 8px;
    color: var(--ink-muted);
}

.mission__key {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px 0 10px;
    border-radius: 2px;
    vertical-align: -1px;
}

.mission__key:first-child { margin-left: 0; }
.mission__key--a { background: var(--blood); }
.mission__key--b { background: var(--mission-b); }
.mission__key--marker { border-radius: 50%; background: var(--gold-bright); border: 1px solid var(--ink); }

.mission__parts {
    display: grid;
    gap: 12px;
}

.mission__part {
    padding: 10px 14px;
    border: 1px solid rgba(var(--border-rgb), .5);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.mission__part-label {
    margin: 0;
    color: var(--ink-muted);
}

.mission__part-title {
    margin: 2px 0 6px;
    font-size: 1.2rem;
}

.mission__part p {
    margin-bottom: 8px;
}

.mission__part-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.events__list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.events__item {
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.events__item p {
    margin: 4px 0 0;
}

.events__title {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin: 0;
    font-size: 1.15rem;
}

.events__n {
    flex: none;
    min-width: 2rem;
    font-family: var(--font-display);
    color: var(--ink-muted);
}

/* „Proponowane działanie” – innym kolorem niż opis (właściciel, 20.10.2026), punkty z pomysłami do gry */
.events__ideas {
    margin-top: 10px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--moss) 12%, transparent);
    border-left: 4px solid var(--moss);
    border-radius: var(--radius);
}

.events__item .events__ideas-title {
    margin: 0;
    font-weight: bold;
    color: var(--moss);
}

.events__ideas ul {
    margin: 4px 0 0;
    padding-left: 1.2em;
}

.events__ideas li + li {
    margin-top: 2px;
}

/* NARZĘDZIA: karty pomocy --------------------------------------------- */

/* kafelki gier i karty wersji jak w kreatorze kampanii; wybrana wersja dostaje tę samą obwódkę co kafelek */
.ruleset-card.is-selected {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.reference-step h2 {
    margin-bottom: 12px;
}

.reference-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.reference-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

@media (min-width: 768px) {
    .reference-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}

/* nazwa zagadnienia pogrubiona (.form__check-label), podpowiedź pod nią zwykłą czcionką */
.reference-topic__help {
    display: block;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-muted);
}

.reference-generate {
    display: grid;
    justify-items: start;
    gap: 6px;
}

/* NARZĘDZIA: generator nazw -------------------------------------------- */

.names__form {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.names__field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.names__field label {
    margin: 0;
}

.names__list {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.names__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.names__name {
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .names__form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
    }

    .names__roll {
        grid-column: 1 / -1;
    }

    .names__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* TURNIEJE: zegar rundy na duży ekran ----------------------------------- */

.tournament-clock {
    padding: 0;
    overflow: hidden;
}

.tournament-clock__screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 20px 16px;
    text-align: center;
    color: var(--clock-ink);
    background: var(--clock-screen);
}

.tournament-clock__screen:fullscreen {
    justify-content: center;
    padding: 4vh 4vw;
}

.tournament-clock__event,
.tournament-clock__scenario {
    margin: 0;
    opacity: .85;
}

.tournament-clock__round {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    color: var(--gold-bright);
}

.tournament-clock__time {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 20vw, 13rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tournament-clock__screen:fullscreen .tournament-clock__time {
    font-size: clamp(6rem, 26vw, 30rem);
}

.tournament-clock__status {
    min-height: 1.5em;
    margin: 0;
    font-size: clamp(1.1rem, 3vw, 2rem);
}

.tournament-clock.is-warn .tournament-clock__time { color: var(--clock-warn); }
.tournament-clock.is-danger .tournament-clock__time,
.tournament-clock.is-over .tournament-clock__time,
.tournament-clock.is-over .tournament-clock__status { color: var(--clock-danger); }
.tournament-clock.is-paused .tournament-clock__time { opacity: .55; }

/* pary ze stołami – przewijają się same (tournament-clock.js), gdy się nie mieszczą */
.tournament-clock__pairs {
    width: 100%;
    max-width: 900px;
    max-height: 30vh;
    margin-top: 10px;
    overflow: hidden;
    border-top: 1px solid rgba(var(--accent-rgb), .35);
}

.tournament-clock__screen:fullscreen .tournament-clock__pairs {
    max-height: 32vh;
    font-size: clamp(1rem, 2.2vw, 1.8rem);
}

.tournament-clock__pairs-list {
    margin: 0;
    padding: 8px 0;
    list-style: none;
}

.tournament-clock__pairs-list li {
    padding: 3px 0;
}

.tournament-clock__pairs-list .muted {
    color: inherit;
    opacity: .7;
}

.tournament-clock__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* przyciski na ciemnym ekranie – jasny napis i złota ramka (zwykły „ghost” ginął w tle) */
.tournament-clock__screen .btn {
    color: var(--clock-ink);
    background: transparent;
    border-color: rgba(var(--accent-rgb), .6);
}

.tournament-clock__screen .btn:hover,
.tournament-clock__screen .btn:focus-visible {
    color: var(--gold-bright);
    border-color: var(--gold);
}

.tournament-clock__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tournament-clock__hint {
    margin: 0;
    padding: 12px 16px;
}

/* NARZĘDZIA: zegar szachowy --------------------------------------------- */

.clock__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.clock__preset.is-current {
    color: var(--gold-bright);
    border-color: var(--gold);
}

.clock__field {
    margin-bottom: 14px;
}

/* minuty na gracza: pole tej samej wysokości co przyciski czasu, nie wąski pasek */
.clock__field input {
    width: 100%;
    max-width: 12rem;
    height: 2.75rem;
    font-size: 1.05rem;
}

.clock__field label {
    display: block;
    margin-bottom: 4px;
}

.clock__hint {
    margin-top: 12px;
}

/* dwie połowy ekranu: telefon leży między graczami, więc górna jest obrócona */
.clock__board {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
}

.clock__board[hidden] {
    display: none;
}

.clock__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    color: var(--ink);
    background: var(--parchment);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    touch-action: manipulation; /* bez powiększania przy szybkim stukaniu */
    user-select: none;
}

.clock__side--top {
    transform: rotate(180deg);
}

.clock__side.is-active {
    border-color: var(--gold-bright);
    box-shadow: inset 0 0 40px rgba(201, 162, 74, .25);
}

.clock__side.is-out {
    color: var(--parchment);
    background: var(--blood);
    border-color: var(--blood);
}

/* cyfry o stałej szerokości – w foncie ozdobnym „1” jest węższe od „8” i zegar skakał co sekundę */
.clock__time {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(2.6rem, 16vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    min-width: 5.2ch; /* miejsce na 00:00 – blok nie przesuwa się przy zmianie cyfr */
    text-align: center;
}

.clock__label {
    font-size: .85rem;
    color: var(--ink-muted);
    min-height: 1.2em;
}

.clock__side.is-out .clock__label,
.clock__side.is-out .clock__round-note {
    color: var(--parchment);
}

.clock__round-note {
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* pasek między połowami: runda dokładnie na środku, pauza i reset z lewej, ustawienia z prawej */
.clock__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.clock__bar-side {
    display: flex;
    gap: 10px;
}

.clock__bar-side--start {
    justify-content: flex-end;
}

/* strzałki nad i pod numerem rundy – szerokie i wysokie, żeby trafić palcem; pasek leży na ciemnym tle strony */
.clock__round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.clock__round-step {
    min-width: 3.5rem;
    min-height: 1.9rem;
    font-size: .85rem;
    line-height: 1;
}

.clock__round-value {
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--parchment-dark);
    white-space: nowrap;
}

.clock__round-value strong {
    font-size: 1.25rem;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
}

/* po starcie zostaje sam zegar: nagłówek i stopka znikają, w ustawieniach strona wygląda jak każda inna */
.page-clock.is-clock-running .footer,
.page-clock.is-clock-running [data-tab-head] {
    display: none;
}

/* KALENDARZ TURNIEJÓW --------------------------------------------------- */

.calendar {
    display: grid;
    gap: 22px;
}

.calendar__month-name {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: var(--gold-bright);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.calendar__month-name::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(var(--border-rgb), .6);
}

.calendar__events {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar__link {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(var(--surface-shade-rgb), .25)),
        var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .15s, transform .15s;
}

.calendar__link:hover,
.calendar__link:focus-visible {
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* kartka z datą – jak z kalendarza ściennego */
.calendar__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 64px;
    padding: 6px 8px;
    color: var(--parchment);
    background: var(--blood);
    border-radius: var(--radius);
}

.calendar__day {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.calendar__weekday {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
}

.calendar__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.calendar__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
}

.calendar__place,
.calendar__meta {
    font-size: .85rem;
    color: var(--ink-muted);
}

.calendar__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .calendar__badges {
        flex-direction: row;
        align-items: flex-start;
    }

    .calendar__link {
        flex-wrap: wrap;
    }

    .calendar__badges {
        width: 100%;
        justify-content: flex-start;
    }
}

/* znacznik „wkrótce” przy pozycji menu, która jeszcze nie działa */
.nav__badge--soon {
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid rgba(var(--border-rgb), .8);
    text-transform: lowercase;
    letter-spacing: .04em;
}

/* GENERATOR STOŁÓW ------------------------------------------------------ */

.table-gen {
    display: grid;
    gap: 16px;
    align-items: start;
}

/* podpis nad grupą przycisków – wygląda jak etykieta pola */
.form__label {
    display: block;
    margin-bottom: 6px;
}

/* generator stołów: etykiety pól jak „Układ” i pola na całą szerokość kolumny, jednej wysokości */
.table-gen__form .form-grid label {
    display: block;
    margin-bottom: 6px;
}

.table-gen__form .form-grid :is(input, select) {
    width: 100%;
    height: 2.75rem;
}

.table-gen__layouts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.table-gen__layouts .btn.is-current {
    color: var(--gold-bright);
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(var(--border-rgb), .5);
}

.table-gen__kinds {
    margin: 16px 0;
}

/* kategorie obok siebie – ile kolumn, tyle się zmieści */
.table-gen__cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 24px;
}

.table-gen__col {
    min-width: 0;
}

.table-gen__kind {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}

.table-gen__kind input {
    width: auto;
    margin: 0;
}

.table-gen__kind .badge {
    letter-spacing: .04em;
}

/* klasy terenu – ten sam kolor co w legendzie na obrazku */
.badge--blocking { color: var(--on-primary); background: #4a3d30; }
.badge--difficult { color: var(--on-primary); background: #4b6b3a; }
.badge--obstacle { color: var(--on-primary); background: #6f6257; }
.badge--high { color: #2b2118; background: #b99a63; }

.table-gen__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* losowanie nad podglądem – to samo co przycisk pod formularzem */
.table-gen__top {
    display: flex;
    justify-content: flex-end;
}

.table-gen__preview {
    overflow-x: auto;
}

.table-gen__canvas {
    display: block;
    width: 100%;
    height: auto;
    min-width: 320px;
}

/* stół nie pomieścił całego zamówienia – ostrzeżenie nad podglądem */
.table-gen__short {
    margin: 0 0 .6rem;
    color: var(--blood);
    font-size: .92rem;
}

/* podpis kategorii nad grupą rodzajów terenu */
.table-gen__group {
    margin: 0 0 6px;
}

/* udział kategorii terenu */
.table-gen__mix {
    margin: 16px 0;
}

.table-gen__slider {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 10px;
}

.table-gen__slider input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--blood);
}

.table-gen__slider output {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

@media (min-width: 600px) {
    .table-gen__slider {
        grid-template-columns: 180px 1fr 56px;
        align-items: center;
        gap: 12px;
    }

    .table-gen__slider output {
        text-align: right;
    }
}

/* Dolne menu na komputerze: jeden wiersz jak zawsze; gdy pozycje wystają poza ekran (węższe okno, dłuższe
   nazwy po hiszpańsku i niemiecku), nav.js dodaje .is-wrapped i menu zawija się w drugi wiersz.
   Czcionki i odstępów nie zmniejszamy. */
@media (min-width: 768px) {
    .nav > .nav__list.is-wrapped {
        flex-wrap: wrap;
    }
}

/* Wsparcie i Kontakt w górnej linijce, obok wyboru języka; na średnich ekranach same ikonki (podpis w title) */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav__contact .nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Wsparcie i Kontakt – podświetlenie bieżącej strony */
.nav__contact.is-current {
    color: var(--gold-bright);
}

/* BLOG: kafelki artykułów ---------------------------------------------- */

.post-grid {
    display: grid;
    /* auto-fill (nie auto-fit): puste kolumny zostają, więc jeden artykuł na stronie ma
       taki sam kafelek jak dziewięć. Przy auto-fit pojedynczy wpis rozciągał się na pół ekranu. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.post-tile__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--ink);
    text-decoration: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(var(--surface-shade-rgb), .25)),
        var(--parchment);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 0 40px rgba(var(--surface-shade-rgb), .25);
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

.post-tile__link:hover,
.post-tile__link:focus-visible {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.post-tile__cover {
    display: block;
    width: calc(100% - 24px);
    height: 150px;
    margin: 12px 12px 0;
    object-fit: contain; /* grafika w ramce, z oddechem dookoła – nic się nie przycina */
    background: var(--surface-input);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.post-tile__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    font-size: 2.4rem;
    color: var(--ink-muted);
    background: var(--parchment-dark);
}

.post-tile__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    padding: 12px 14px 14px;
}

.post-tile__meta {
    font-size: .8rem;
    color: var(--ink-muted);
}

.post-tile__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.25;
}

.post-tile__lead {
    flex: 1;
    font-size: .92rem;
    color: var(--ink-muted);
}

.post-tile__more {
    font-family: var(--font-display);
    font-size: .85rem;
    color: var(--heading);
}

/* BLOG: artykuł --------------------------------------------------------- */

.post__head {
    margin-bottom: 14px;
}

.post__meta {
    margin: 0 0 6px;
    font-size: .85rem;
    color: var(--ink-muted);
}

.post__title {
    margin: 0 0 8px;
}

.post__lead {
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink-muted);
}

.post__cover {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.post__content {
    line-height: 1.7;
}

.post__content h2 {
    margin: 26px 0 8px;
}

.post__content h3 {
    margin: 20px 0 6px;
}

.post__content img {
    display: block;
    width: 100%;
    height: auto;
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* zdjęcie modelu przy jednostce w tier liście (Markdown: obrazek z tytułem „model”) – mała miniatura w ramce obok
   opisu (zdjęcie Mantica na białym tle); nagłówki zaczynają się pod nią, żeby następna jednostka nie opływała cudzego zdjęcia */
.post__content img.post__model {
    float: right;
    width: 36%;
    max-width: 180px;
    margin: 2px 0 10px 16px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.post__content h2,
.post__content h3 {
    clear: both;
}

/* podpis pod zdjęciem: akapit złożony z samej kursywy zaraz po obrazku (np. „fot. Jan Kowalski”) */
.post__content p > em:only-child {
    display: block;
    margin-top: -8px;
    font-size: .85rem;
    text-align: center;
    color: var(--ink-muted);
}

.post__content blockquote {
    margin: 16px 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--gold);
    font-style: italic;
    color: var(--ink-muted);
}

.post__content pre {
    padding: 12px;
    overflow-x: auto;
    background: var(--parchment-dark);
    border-radius: var(--radius);
}

.post__admin {
    margin: 20px 0 0;
}

/* BLOG: komentarze ------------------------------------------------------ */

.comments {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.comment {
    padding: 12px 0;
    border-top: 1px solid var(--parchment-dark);
}

.comments--replies {
    margin: 10px 0 0 18px;
    padding-left: 14px;
    border-left: 2px solid var(--parchment-dark);
}

.comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
    font-size: .9rem;
}

.comment__author {
    font-family: var(--font-display);
    color: var(--heading);
}

.comment__body {
    line-height: 1.55;
}

.comment__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}

.comment-form {
    margin-top: 12px;
}

/* BLOG: edytor ---------------------------------------------------------- */

.post-form__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.post-form__upload {
    cursor: pointer;
}

.post-form__editor textarea {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .95rem;
    line-height: 1.5;
}

.post-form__cover {
    max-width: 320px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* BLOG: tagi ------------------------------------------------------------ */

/* wyszukiwarka bloga */
.blog-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 560px;
    margin: 0 0 18px;
}

.blog-search input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.post__translation {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--panel-bg, rgba(0, 0, 0, .2));
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
    background: var(--parchment-dark);
    border: 1px solid var(--border);
    border-radius: 999px;
}

a.tag:hover,
a.tag:focus-visible,
.tag.is-current {
    color: var(--heading);
    border-color: var(--gold);
}

.tag__count {
    font-size: .7rem;
    color: var(--ink-muted);
}

.tag--small {
    padding: 1px 9px;
    font-family: var(--font-body);
    font-size: .75rem;
    letter-spacing: 0;
    color: var(--ink-muted);
}

.post-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
}

/* POLECAMY ----------------------------------------------------------------
   Jedna karta: zakładki kategorii z licznikami (filtr w przeglądarce, assets/js/recommended.js) i siatka
   poziomych kafelków na całą szerokość – logo, nazwa, domena, opis, strzałka. Dawniej każda kategoria była
   osobnym wielkim panelem z jednym małym kafelkiem po lewej. */
.recommended {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 12px;
}

.recommended__item[hidden] {
    display: none;
}

.recommended__link {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    transition: box-shadow .15s, transform .15s;
}

.recommended__link:hover,
.recommended__link:focus-visible {
    box-shadow: 0 0 0 2px var(--gold-bright);
    transform: translateY(-1px);
    outline: none;
}

.recommended__thumb {
    display: grid;
    flex: 0 0 88px;
    place-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    background: var(--parchment-dark);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.recommended__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended__icon {
    font-size: 2rem;
    color: var(--ink-muted);
}

.recommended__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.recommended__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading);
}



.recommended__host {
    font-size: .8rem;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

/* opis najwyżej w trzech liniach – kafelki w rzędzie mają podobną wysokość */
.recommended__desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: .95rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.recommended__go {
    flex: none;
    font-size: 1.6rem;
    color: var(--gold);
}

.recommended__item .image-credit {
    margin: 4px 0 0;
}

/* ADMIN → SYSTEM: rząd „opis + przycisk” i lista faktów o środowisku --------- */

.system-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.system-action:first-of-type {
    border-top: 0;
}

.system-action__text p {
    margin: 4px 0 0;
}

/* ADMIN → SYSTEM → LOGOWANIE: dziennik prób logowania */
.login-log th,
.login-log td {
    text-align: left;
    vertical-align: middle;
}

.login-log__result--bad {
    color: var(--blood);
    font-weight: 700;
}

.login-log__result--ok {
    color: var(--moss);
}

/* ADMIN → STATYSTYKI ------------------------------------------------------ */
.stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.stats-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-feed__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--parchment-dark);
}

.stats-feed__when {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.stats-feed__quote {
    display: block;
    color: var(--ink-muted);
    font-style: italic;
    overflow-wrap: anywhere;
}

/* Goście bez logowania: długie adresy stron łamią się zamiast rozpychać tabelę */
.guests-table__path {
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-feed__item {
        grid-template-columns: 9.5em minmax(0, 1fr);
    }
}

.system-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 16px;
    margin: 0;
}

.system-info dt {
    color: var(--ink-muted);
}

.system-info dd {
    margin: 0 0 8px;
    word-break: break-all;
}

@media (min-width: 768px) {
    .system-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .system-info {
        grid-template-columns: max-content 1fr;
    }

    .system-info dd {
        margin: 0;
    }
}

/* nagłówek podsekcji wewnątrz formularza (np. „Skąd grasz” w rejestracji i profilu) */
.form__section {
    margin: 22px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-weight: 600;
}

.form__section .muted {
    font-family: var(--font-body);
    font-weight: 400;
}


/* MAPA GRACZY --------------------------------------------------------------- */

/* Leaflet nadaje swoim warstwom z-index 200–1000 (kafelki, pinezki, dymki, przyciski). Bez własnego kontekstu
   warstwy wychodziły ponad górne menu (z-index 50) i zasłaniały rozwinięte podmenu. isolation zamyka je w mapie. */
.leaflet-container {
    isolation: isolate;
}

.player-map {
    height: 62vh;
    min-height: 340px;
    padding: 0;
    overflow: hidden;
}

/* Ciekawostka dnia (strona główna, archiwum /lore) */
.lore-card__world {
    margin: 0 0 6px;
}

.lore-card__text {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.55;
}

.lore-card__source {
    margin: 0;
}

.lore-card--today {
    border-color: var(--gold);
}

.lore-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Narzędzia → Pomoce do druku: zestawy obok siebie od tabletu */
.prints-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .prints-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.prints-grid .card {
    margin: 0;
}

.prints-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 14px 6px 0;
}

/* Kalendarz hobbystyczny – mapa miast z nadchodzącymi wydarzeniami (niższa niż Mapa graczy, lista jest ważniejsza) */
.calendar-map {
    height: 300px;
    margin: 12px 0 24px;
    padding: 0;
    overflow: hidden;
}

.map-pin__events {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* odstęp między przyciskami Nadchodzące | Minione a filtrami */
[data-calendar-when] + .bg-filters {
    margin-top: 10px;
}

.map-table {
    width: 100%;
    border-collapse: collapse;
}

.map-table th,
.map-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.map-privacy {
    margin-top: 16px;
    font-size: .9rem;
}

/* tabelka pod pinezką – ta sama w dymku (najechanie) i w okienku (stuknięcie) */
.map-tooltip {
    padding: 0;
    border: 1px solid var(--border);
    background: var(--parchment);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.map-pin {
    padding: 8px 10px;
    font-family: var(--font-body);
}

.map-pin__city {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 600;
}

/* liczba graczy w mieście – zamiast listy nicków */
.map-pin__count {
    margin: 0 0 6px;
    font-weight: 600;
}

.map-pin__none {
    margin: 0;
    font-size: .85rem;
}

.map-pin__table {
    border-collapse: collapse;
    font-size: .85rem;
}

.map-pin__table th,
.map-pin__table td {
    padding: 2px 8px 2px 0;
    text-align: left;
    vertical-align: top;
}

.map-pin__table th {
    color: var(--ink-muted);
    font-weight: 400;
}


/* TURNIEJ: potwierdzanie wyniku przeciwnika ------------------------------------ */

.tournament-match__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.tournament-match__confirm p {
    margin: 0;
}

.tournament-match__sent {
    margin: 10px 0 0;
}

.tournament-match__more {
    margin-top: 8px;
}

.tournament-match__more > summary {
    cursor: pointer;
    color: var(--ink-muted);
}


/* ADMIN → MAPA GRACZY */
.map-table tr.is-missing td {
    background: rgba(142, 42, 34, .07);
}

.admin-map__pin {
    display: flex;
    gap: 6px;
    align-items: center;
}

.admin-map__pin input[type=text] {
    min-width: 11em;
}

.admin-map__suspicious {
    display: grid;
    gap: 8px;
    padding-left: 18px;
}

.admin-map__suspicious li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}


/* filtr tabeli na żywo (assets/js/table-filter.js) */
.table-filter {
    margin: 0 0 10px;
}

.table-filter input[type=search] {
    width: 100%;
    max-width: 320px;
}

/* POTYCZKA: wiersz gracza – nick, drużyna, wynik i ✕ w jednej linii, pola tej samej wysokości,
   błędy pod całym wierszem (komunikat pod jednym polem rozpychał wiersz) */
.skirmish-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "name   name   remove"
        "team   result result"
        "errors errors errors";
    gap: 8px 10px;
    align-items: end;
}

.skirmish-player__name { grid-area: name; }
.skirmish-player__team { grid-area: team; }
.skirmish-player__result { grid-area: result; }
.skirmish-player__remove { grid-area: remove; }
.skirmish-player__errors { grid-area: errors; }

.skirmish-player__name,
.skirmish-player__team,
.skirmish-player__result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* pole tekstowe, dwie listy i ✕ – jedna wysokość, więc dolne krawędzie stoją w linii */
.skirmish-player input[type=text],
.skirmish-player select,
.skirmish-player__remove {
    height: 2.6rem;
    margin: 0;
}

.skirmish-player__remove {
    width: 2.6rem;
    padding: 0;
    font-size: 1rem;
}

.skirmish-player__errors .form__errors {
    margin: 0;
}

.skirmish-player.has-error select:invalid,
.skirmish-player.has-error input:invalid {
    border-color: var(--blood);
}

@media (min-width: 768px) {
    .skirmish-player {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "name team result remove"
            "errors errors errors errors";
    }
}


/* AVATARY – małe kółko przy nicku na listach graczy */
.avatar {
    --avatar-size: 24px;
    display: inline-block;
    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
    vertical-align: middle;
    background: var(--surface-soft);
}

.avatar--empty::before {
    content: attr(data-initial);
}

.avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: calc(var(--avatar-size) * .5);
    line-height: 1;
    color: var(--ink-muted);
}

.with-avatar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* linię bazową inline-flex wyznacza pierwsze dziecko, czyli awatar: zdjęcie ma ją na dolnej krawędzi, kółko
       z literą – na literze, więc nicki obok siebie skakały (Tygrys vs gracz_marcin). Środek do środka równa oba. */
    vertical-align: middle;
}

.profile-avatar__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.profile-avatar__forms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.profile-avatar__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* fieldset ma w przeglądarce min-width: min-content – na telefonie wypychał formularze poza ekran */
fieldset {
    min-width: 0;
}

/* pole pliku ma w przeglądarce stałą szerokość – na telefonie nie może wyjść poza kartę */
input[type=file] {
    max-width: 100%;
}


/* KAMPANIA → GRACZE: link do zaproszenia; strona dołączania z linku */
.invite-link {
    margin-top: 16px;
}

.invite-link input {
    width: 100%;
}

.invite-link__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.join__facts {
    margin-bottom: 12px;
}

.join__description {
    color: var(--ink-muted);
}

.join__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* TURNIEJE → kalendarz iCal: przycisk subskrypcji i adres do skopiowania */
.tournament-feed__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.tournament-feed__row input {
    flex: 1 1 260px;
    min-width: 0;
}

/* TURNIEJ → PRZEBIEG: scenariusz rundy i rozpiski przy nickach */
.tournament-round__scenario {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--gold);
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.tournament-round__scenario p {
    margin: 0;
}

.tournament-round__rules-open {
    margin-top: 6px;
}

.tournament-player__army {
    font-size: .9em;
}

/* „.card a” podkreśla wszystkie odnośniki – pod samą ikonką 📄 wyglądało to jak kreska, więc tu bez podkreślenia */
.card a.tournament-player__list {
    margin-left: 4px;
    text-decoration: none;
    white-space: nowrap;
}

.card a.tournament-player__list:hover,
.card a.tournament-player__list:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* w tabeli wyników nick + frakcja + rozpiski zawijają się na telefonie zamiast rozpychać tabelę */
[data-standings] .with-avatar {
    flex-wrap: wrap;
    row-gap: 2px;
}

/* TURNIEJ: blokada zasad, scenariuszy i stołów po ogłoszeniu */
.setup-lock {
    border-left: 3px solid var(--gold);
}

.setup-lock.is-open {
    border-left-color: var(--blood);
}

.setup-lock p {
    margin: 0 0 6px;
}

.setup-lock__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
}

/* fieldset tylko po to, żeby jednym `disabled` wyłączyć cały formularz – bez ramki i odstępów */
.plain-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}


/*
  TURNIEJ → GRACZE: wiersz gracza. Telefon: nick i stan na górze, pod spodem zgłoszenie (frakcja + rozpiski + Zapisz).
  Szeroki ekran: JEDNA linia – nick ze stanem | frakcja, rozpiski i Zapisz | ✕ (dawniej wysoki panel z pustym środkiem).
*/
.player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "who remove"
        "main main";
    gap: 8px 12px;
    align-items: start;
}

.player-row__who {
    grid-area: who;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.player-row > .player-entry,
.player-row__info {
    grid-area: main;
    min-width: 0;
}

.player-row__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.player-row__remove {
    grid-area: remove;
}

/* nick z plakietką (kapitan, „nie gra dalej”) łamie się w swojej kolumnie, zamiast wchodzić pod przycisk obok */
.player-row__who .player-list__name {
    flex-wrap: wrap;
    min-width: 0;
}

@media (min-width: 900px) {
    .player-row {
        grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) auto;
        grid-template-areas: "who main remove";
        align-items: center;
    }
}

.player-entry__todo,
.player-entry__done {
    margin: 0;
    font-size: .88rem;
    line-height: 1.35;
}

.player-entry__todo {
    padding: 4px 8px;
    border-left: 3px solid var(--gold);
    background: rgba(var(--accent-rgb), .12);
}

.player-entry__todo-item:not(:last-of-type)::after {
    content: " ·";
}

.player-entry__todo-link {
    margin-left: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.player-entry__done {
    color: var(--moss);
}

/* frakcja, rozpiski i Zapisz w jednym rzędzie, który zawija się dopiero na wąskim ekranie */
.player-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 14px;
}

.player-entry__field {
    display: grid;
    flex: 1 1 200px;
    gap: 4px;
    min-width: 0;
}

.player-entry__field > label,
.player-entry__label {
}

.player-entry__field input[type=text] {
    width: 100%;
}

.player-entry__field .form__help {
    margin: 0;
    font-size: .8rem;
}

.player-entry__file {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 2.5rem;
}

.player-entry input[type=file] {
    width: 100%; /* pole pliku miało własną szerokość i wychodziło poza wiersz, a na telefonie wchodziło pod „Zapisz” (QA 22.10.2026) */
    max-width: 100%;
    min-width: 0;
}

/* pole, które jeszcze czeka na uzupełnienie */
.player-entry .is-missing {
    outline: 2px dashed rgba(var(--accent-rgb), .8);
    outline-offset: 2px;
}

.player-entry__actions {
    flex: 0 0 auto;
}

.player-entry__actions .btn {
    min-height: 2.5rem;
}

/* komunikat pod polem pliku, gdy plik przekracza limit (assets/js/file-limit.js) */
.file-limit__error {
    margin: 4px 0 0;
    color: var(--blood);
    font-weight: 600;
}


/* TURNIEJ: skrót o graczach na stronie turnieju (reszta na zakładce Gracze) */
.players-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0 12px;
    padding: 0;
    list-style: none;
}

.players-summary__more {
    margin: 0;
}


/* MENU: nowy zapis na turniej – wyróżniony wpis na górze „Turnieje ▾”, znika po wejściu do turnieju */
.nav__sublink--new {
    font-weight: 700;
    color: var(--gold-bright);
    border-left: 3px solid var(--gold);
}

/* ===== Builder rozpisek Vanguarda (/builder/vanguard) =====
   Drzewko jak w podręczniku: trójka WARRIOR/GRUNT (lewo) ▶ odblokowane miejsca COMMAND/SPELLCASTER/SUPPORT (prawo).
   Telefon: wszystko w jednej kolumnie; od 768 px drzewko i karta modelu po lewej, lista jednostek po prawej. */
.vg-builder { display: grid; gap: 1rem; }
.vg-builder__summary { margin-top: .75rem; }
.vg-builder__total { font-size: 1.15rem; margin: 0 0 .25rem; }
.vg-builder__total--tree { margin: -.25rem 0 .25rem; }
.vg-builder__tree .vg-builder__violations { margin: 0 0 .75rem; }
.vg-builder__status { margin-left: .5rem; font-size: .95rem; }
.vg-builder__status.is-valid { color: var(--moss); }
.vg-builder__status.is-invalid { color: var(--blood); }
.vg-builder__small { margin: .25rem 0; font-style: italic; }
.vg-builder__violations { margin: .25rem 0 0; padding-left: 1.2rem; color: var(--blood); }
.vg-builder__main { display: grid; gap: 1rem; }
.vg-builder__about h2 { margin-top: 0; }
.vg-builder__about ul { padding-left: 1.2rem; }
.vg-builder__about li { margin: .25rem 0; }
.vg-builder__pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.vg-builder__share input { flex: 1 1 100%; min-width: 0; }
/* telefon: „Zapisz na koncie” i „Udostępnij linkiem” w jednym rzędzie – ciaśniej; od 768 px zwykłe przyciski */
.vg-builder__share .btn { padding: 5px 7px; font-size: .72rem; letter-spacing: 0; }
@media (min-width: 768px) { .vg-builder__share .btn { padding: 6px 16px; font-size: .85rem; letter-spacing: .06em; } }
.vg-saved__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .75rem; }
.vg-saved__current { margin: .5rem 0 0; font-weight: 700; }
.vg-saved__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vg-saved__item { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .5rem .75rem; border: 1px solid rgba(var(--border-rgb), .5); border-radius: var(--radius); }
.vg-saved__item.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.vg-saved__name { font-weight: 700; }
.vg-saved__buttons { display: flex; gap: .4rem; margin-left: auto; }
.vg-builder__main h2 { margin-top: 0; }
.vg-builder__classes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.vg-builder__abilities { margin-top: 1rem; }
.vg-builder__abilities ul { padding-left: 1.2rem; }

.vg-triad {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .35rem .5rem;
    margin-bottom: .75rem;
}
.vg-triad__title { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-size: .85rem; color: var(--ink-muted); }
.vg-triad__members, .vg-triad__unlocks { display: grid; gap: .3rem; }
.vg-triad__arrow { color: var(--border); }
.vg-group { margin-top: .75rem; display: grid; gap: .3rem; }
.vg-group__title { margin: 0; font-family: var(--font-display); font-size: .85rem; color: var(--ink-muted); }
.vg-group--overflow .vg-group__title { color: var(--blood); }

.vg-slot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 .4rem;
    width: 100%;
    padding: .3rem .5rem;
    border: 1px solid rgba(var(--border-rgb), .6);
    border-left: 4px solid var(--blood);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.vg-triad__unlocks .vg-slot, .vg-group .vg-slot { border-left-color: var(--gold); }
.vg-slot__class { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.vg-slot__name { overflow-wrap: anywhere; }
.vg-slot__pts { font-weight: 600; }
/* drugie miejsce tego samego modelu (kilka klas) – bez punktów, żeby nie wyglądało na liczone dwa razy */
/* drugie (i dalsze) miejsce tego samego modelu – wyszarzone, żeby było widać, że slot zajmuje już model z innego miejsca;
   klik nadal otwiera kartę i podświetla oba miejsca */
.vg-slot.is-repeat { border-style: dashed; background: transparent; opacity: .55; }
.vg-slot.is-repeat.is-current { opacity: .8; }
/* kosz w prawym górnym rogu zajętego miejsca */
.vg-slot-wrap { position: relative; }
.vg-slot-wrap .vg-slot__class { padding-right: 1.6rem; }
.vg-slot__remove { position: absolute; top: .2rem; right: .25rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-muted); cursor: pointer; }
.vg-slot__remove:hover, .vg-slot__remove:focus-visible { color: var(--blood); background: rgba(var(--border-rgb), .25); }
.vg-slot__same { font-size: .8em; font-style: italic; color: var(--ink-muted); white-space: nowrap; }
.vg-slot--empty { border-style: dashed; background: transparent; color: var(--ink-muted); }
.vg-slot.is-locked { opacity: .45; cursor: default; }
.vg-slot.is-current { outline: 2px solid var(--gold); }
.vg-slot.has-error { border-color: var(--blood); box-shadow: inset 0 0 0 1px var(--blood); }

.vg-builder__unit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vg-unit {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid rgba(var(--border-rgb), .35);
}
.vg-unit__text { display: grid; }
.vg-unit__meta, .vg-unit__stats { font-size: .85rem; color: var(--ink-muted); }
.vg-unit__reason { font-size: .85rem; color: var(--blood); }
.vg-unit__hint { font-size: .85rem; color: var(--ink-muted); font-style: italic; }
.vg-unit__pts { font-weight: 600; }
.vg-unit.is-blocked .vg-unit__text strong { opacity: .6; }
/* miniatura zdjęcia z karty (Mantic) – stała ramka, więc lista nie skacze przy wczytywaniu */
.vg-builder__unit-list.has-images .vg-unit { grid-template-columns: 3rem 1fr auto auto; }
.vg-unit__img { width: 3rem; height: 3rem; object-fit: contain; }
.vg-unit.is-blocked .vg-unit__img { opacity: .6; }
.vg-model__figure { margin: .25rem 0 .5rem; text-align: center; }
.vg-model__figure img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: 11rem; object-fit: contain; }
.vg-model__figure .image-credit { margin: .25rem 0 0; }

.vg-model__pts { float: right; font-size: 1rem; }
.vg-model__section { margin: .75rem 0; padding: .5rem .75rem; border: 1px solid rgba(var(--border-rgb), .45); border-radius: var(--radius); }
.vg-model__section legend { font-family: var(--font-display); padding: 0 .3rem; }
.vg-model__items { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .25rem; }
.vg-model__items li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vg-model__spell-swap { display: grid; gap: .4rem; margin: .25rem 0 .5rem 1.6rem; }
.vg-check { display: flex; gap: .5rem; align-items: flex-start; margin: .3rem 0; cursor: pointer; }
.vg-check input { margin-top: .3rem; }
.vg-model__meta { color: var(--ink-muted); }
.vg-rule { border-bottom: 1px dotted var(--ink-muted); cursor: help; }
.vg-rule:hover, .vg-rule:focus-visible { color: var(--heading); border-bottom-color: var(--heading); outline: none; }
/* dymek z opisem zasady specjalnej (tekst z podręcznika) */
.vg-tip {
    position: absolute;
    z-index: 300;
    max-width: min(26rem, calc(100vw - 16px));
    padding: .5rem .7rem;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    pointer-events: none;
    white-space: pre-line; /* czar: działanie i wersja wzmocniona w osobnych linijkach */
}
.vg-builder__translated { margin-top: .75rem; }
.vg-model__nick { display: grid; gap: .2rem; margin: .25rem 0 .5rem; max-width: 22rem; font-size: .9rem; color: var(--ink-muted); }
.vg-slot__nick { color: var(--heading); font-style: italic; }
.vg-model__ability { margin: .35rem 0; }
.vg-stats { border-collapse: collapse; margin: .5rem 0; }
.vg-stats th, .vg-stats td { padding: .15rem .5rem; border: 1px solid rgba(var(--border-rgb), .5); text-align: center; }

/* zakładki prawego panelu: „Lista jednostek” / „Wybrana jednostka” – jak przekładki w segregatorze:
   aktywna ma kolor karty i łączy się z panelem pod spodem, nieaktywna jest przyciemniona i stoi „za” nią */
.vg-panel-tabs {
    display: flex;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: 0 .5rem;
    border-bottom: 2px solid var(--border);
}
.vg-panel-tab {
    position: relative;
    margin-bottom: -2px;
    padding: .45rem 1rem .4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: var(--ink-muted);
    background: rgba(var(--surface-shade-rgb), .18);
    border: 2px solid rgba(var(--border-rgb), .55);
    border-bottom-color: var(--border);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.vg-panel-tab:hover,
.vg-panel-tab:focus-visible {
    color: var(--heading);
    background: rgba(var(--surface-shade-rgb), .08);
}
.vg-panel-tab.is-current {
    color: var(--heading);
    background: var(--parchment);
    border-color: var(--border);
    border-bottom-color: var(--parchment); /* „otwarta” zakładka zlewa się z kartą */
    box-shadow: inset 0 3px 0 var(--gold);
    z-index: 1;
}

/* ikonka przy nazwie zakładki (kompania Vanguarda – arkusz campaign/vanguard/_tab_icons.html.twig) */
.vg-panel-tab__icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: .35em;
    vertical-align: -.2em;
    fill: currentColor;
}

/* trzy zakładki z długimi nazwami („Tabór (Supply Caravan)”) – na telefonie przechodzą do drugiego wiersza,
   ale żadna nie łamie się w środku */
.vg-panel-tabs--wrap {
    flex-wrap: wrap;
    row-gap: .35rem;
}

.vg-panel-tabs--wrap {
    padding: 0;
}

/* telefon: ciaśniej, żeby dwie zakładki zmieściły się w wierszu; od 768 px – jak w builderze */
.vg-panel-tabs--wrap .vg-panel-tab {
    padding: .4rem .65rem .35rem;
    font-size: .95rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .vg-panel-tabs--wrap {
        padding: 0 .5rem;
    }

    .vg-panel-tabs--wrap .vg-panel-tab {
        padding: .45rem 1rem .4rem;
        font-size: 1.05rem;
    }
}

.vg-tab-icons-sheet {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .vg-builder__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tree units";
        align-items: start;
    }
    .vg-builder__tree { grid-area: tree; }
    .vg-builder__units { grid-area: units; position: sticky; top: 1rem; }
    .vg-builder__unit-list, .vg-builder__model { max-height: 75vh; overflow-y: auto; }
}

/* zachęta do konta dla gościa – pod menu (_partials/guest_banner.html.twig) */
.guest-banner { display: block; width: 100%; max-width: 1100px; margin: 20px auto 0; padding: 0 16px; box-sizing: border-box; text-decoration: none; }
.guest-banner img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.guest-banner:hover img { filter: brightness(1.05); }


/* KARTA BATTLE GROUP – kampania Deadzone (templates/campaign/deadzone/battle_group/) -------------------------------- */
.bg-founding__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 12px 0;
}

.bg-founding__form label {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 4px;
}

/* PASEK POSTĘPU – jeden wygląd w całym serwisie: <div class="progress-meter"><span class="progress-meter__fill"
   style="width: X%"></span></div> (partial _partials/progress.html.twig). Zwykłe divy, nie <meter> – ten każda przeglądarka
   rysuje po swojemu (w Firefoksie wypełniał się tylko pół wysokości). Zielony; .is-over – czerwony. */
/* wiersz katalogu ekwipunku: każdy ma własny formularz (ilość należy do swojego wiersza), więc to on znika z siatki */
.vg-catalog__buy {
    display: contents;
}

/* nazwa | rzadkość i cena | ilość | ＋ – bez kolumny na statystyki, których przedmioty nie mają */
.vg-catalog__row--item {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

/*
  Zgłoszenie bandy w kampanii Vanguarda – układ jak w builderze (właściciel, 10.10.2026): po lewej skład bandy
  z ekwipunkiem i najemnikiem, po prawej modele kompanii z „+”. Telefon: jedna kolumna (najpierw banda),
  od 768 px dwie, a lista kompanii stoi przyklejona i przewija się sama, jak lista jednostek w builderze.
  Wiersz modelu jest jeden – assets/js/vanguard-warband.js przenosi go między listami.
*/
.warband-builder {
    display: grid;
    gap: 1rem;
    align-items: start;
}

/* odstęp od kart nad i pod formularzem jak między kartami; same kolumny bez odstępów reguły .form */
.container > .card + .warband-builder,
.container > .warband-builder + .card {
    margin-top: 18px;
}

.warband-builder > .card {
    margin: 0;
}

@media (min-width: 768px) {
    .warband-builder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .warband-builder__pool {
        position: sticky;
        top: 1rem;
    }

    .warband-builder__pool-list {
        max-height: 75vh;
        overflow-y: auto;
    }
}

.warband-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.warband-group .bg-type-divider {
    margin: 6px 0;
}

/* zdjęcie | nazwa, klasa, cechy i zasady | punkty | „+” albo kosz; ekwipunek pod spodem */
.warband-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .25rem .5rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid rgba(var(--border-rgb), .35);
}

.warband-row.has-image {
    grid-template-columns: 3rem minmax(0, 1fr) auto auto;
}

.warband-row__who {
    display: grid;
    gap: .1rem;
}

.warband-row__rank {
    color: var(--gold);
    letter-spacing: .05em;
}

/* lista ekwipunku zajmuje resztę wiersza, a na wąskim ekranie schodzi pod etykietę (inaczej zostawało z niej „bez…”) */
.warband-row__items {
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.warband-row__items [data-multi-select-box],
.warband-row__items select {
    flex: 1 1 12rem;
    min-width: 0;
}

.warband-row.has-image .warband-row__items {
    grid-column: 2 / -1;
}

/* etykieta ekwipunku w jednej linii, lista zaraz za nią */
.warband-row__items .player-field__label {
    white-space: nowrap;
}

/* kosz stoi w wierszu, nie w rogu kafelka jak w drzewku buildera */
.warband-row__remove {
    position: static;
}

/* z JS model przenosi „+” i kosz – checkbox zostaje w formularzu, ale go nie widać; w kompanii nie wybiera się ekwipunku */
.warband-builder.is-enhanced .warband-row__check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.warband-builder.is-enhanced [data-pool-list] .warband-row__items {
    display: none;
}

/* najemnicy w katalogu kompanii (company/_catalog.html.twig) – tylko do podejrzenia, wiersz bez „+” */
.vg-catalog__row.vg-catalog__row--merc {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .vg-catalog__row.vg-catalog__row--merc {
        grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
    }
}

/* „Kto nie gra w tej rundzie” u prowadzącego – gracz i przycisk w jednym wierszu */
.gm-sit-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.gm-sit-out select {
    flex: 1 1 12rem;
    min-width: 0;
}

/*
  Ice & Iron: drzewko gier jak w książce (campaign/vanguard/_tree.html.twig) – pola gier ze strzałkami,
  rozgałęzienie i pary (4 graczy) jako dwa pola obok siebie. Bieżący krok złoty, rozegrane z zielonym paskiem,
  niewybrana ścieżka przygaszona.
*/
.tree-flow {
    display: grid;
    gap: 4px;
    margin-top: 12px;
}

.tree-flow__row {
    display: grid;
    gap: 10px;
    justify-content: center;
}

.tree-flow__row--1 {
    grid-template-columns: minmax(0, 26rem);
}

.tree-flow__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tree-flow__arrows {
    display: grid;
    justify-items: center;
    color: var(--gold);
    font-size: 1.2rem;
    line-height: 1.2;
}

.tree-flow__arrows--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tree-box {
    padding: 8px 12px;
    text-align: center;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-top: 4px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.tree-box p {
    margin: 2px 0;
}

.tree-box.is-current {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.tree-box.is-played {
    border-top-color: var(--moss);
}

.tree-box.is-not-taken {
    opacity: .45;
    border-style: dashed;
}

.tree-box__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--heading);
}

.tree-box__scenario {
    font-weight: 600;
}

/* nazwa misji w drzewku to przycisk z okienkiem opisu – kropkowane podkreślenie mówi, że da się kliknąć */
.tree-box__scenario .scenario-tip {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.tree-box__condition {
    font-size: .85rem;
    font-style: italic;
    color: var(--ink-muted);
}

.tree-box__effect,
.tree-box__who {
    font-size: .9rem;
}

.tree-box__effect {
    color: var(--ink-muted);
}

.tree-box__result {
    font-size: .95rem;
}

.tree-notes {
    margin: 0 0 14px;
    padding-left: 1.2rem;
}

/* Ice & Iron: pogoda meczu pod scenariuszem (campaign/vanguard/_weather.html.twig) */
.match-weather {
    margin: 0 0 14px;
}

.match-weather p {
    margin: 0 0 4px;
}

.match-weather__roll {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/*
  Strony meczu Vanguarda (ekran meczu): każda w osobnym panelu – gracz i kompania, wynik, fakty jako plakietki,
  skład bandy (model | punkty, ekwipunek pod nazwą) i rozpiska PDF na dole. Od 768 px dwa panele obok siebie.
*/
.match-sides {
    display: grid;
    gap: 14px;
}

@media (min-width: 768px) {
    .match-sides {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    }
}

.match-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-top: 4px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.match-side--won {
    border-top-color: var(--moss);
}

.match-side--lost,
.match-side--surrendered,
.match-side--withdrew {
    border-top-color: var(--blood);
}

.match-side--draw {
    border-top-color: var(--gold);
}

.match-side__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-side__who {
    display: grid;
    min-width: 0;
}

.match-side__who strong {
    font-size: 1.1rem;
}

.match-side__who .muted {
    font-style: italic;
}

.match-side__outcome {
    margin: 0;
    font-size: 1.05rem;
}

.match-side__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.match-side__note {
    margin: 0;
}

.match-side__models {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-side__model {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(var(--border-rgb), .3);
}

.match-side__model:last-child {
    border-bottom: 0;
}

.match-side__name {
    display: grid;
    gap: 2px;
}

.match-side__items {
    font-size: .9rem;
    color: var(--ink-muted);
}

.match-side__pts {
    font-weight: 600;
    white-space: nowrap;
}

/* rozpiska zawsze na dole panelu – przy krótszej bandzie przycisk nie wisi w połowie */
.match-side__actions {
    margin: auto 0 0;
    padding-top: 4px;
}

/* ile czego zostało w taborze przy zgłaszaniu bandy; wyłączone pole modelu, który nie wchodzi do gry */
.warband-stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 12px;
}

.player-field.is-off {
    opacity: .5;
}

/* model, na którego nie starcza już punktów bandy – nie da się go zaznaczyć (assets/js/vanguard-warband.js) */
/* klasyfikacja Vanguarda: plakietka stanu gracza w rundzie przyklejona do prawej */
.standings-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.standings-row__status {
    margin-left: auto;
}

.warband-row.is-unaffordable {
    opacity: .5;
}

/* tabor i zakupy w rozliczeniu Vanguarda: po lewej to, co kompania ma, po prawej sklep z zakładkami rzadkości */
.supplies {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
}

@media (min-width: 768px) {
    .supplies {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* „Kończę rozliczenie” na dole karty taboru – oddzielone od listy zakupów */
.supplies__finish {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--parchment-dark);
}

/* z zakładkami śródtytuł grupy jest zbędny – pokazuje się tylko bez JS (pasek zakładek ukryty) */
.supplies__shop:has([data-panel-tabs-bar]:not([hidden])) .supplies__group {
    display: none;
}

/* rekrutacja Vanguarda: zwolnienia schowane pod przyciskiem, z odstępem od „Kończę rozliczenie” */
.recruit-dismiss {
    margin: 1rem 0;
}

/* wynik meczu Vanguarda: „Kto wygrał?” w jednym rzędzie, przy każdej stronie VP i „poddał mecz” */
.result-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.result-winner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 6px 0 4px;
}

.result-summary {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.result-side input[type=number] {
    max-width: 8rem;
}

.result-other {
    margin-top: 14px;
}

@media (min-width: 768px) {
    .result-side {
        display: grid;
        grid-template-columns: minmax(0, 16rem) 8rem minmax(0, 1fr);
        align-items: center;
        gap: 0 16px;
    }
}

/* zasady specjalne pod nazwą modelu – drobnym drukiem, z dymkiem na każdej */
.vg-catalog__rules {
    font-size: .85rem;
    color: var(--ink-muted);
}

.vg-catalog__qty input {
    width: 4.5rem;
}

/* pasek punktów kompanii Vanguarda – odstęp od nagłówka karty i od formularza pod spodem */
.company-points {
    margin: 4px 0 16px;
}

.progress-meter {
    display: block;
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: rgba(var(--border-rgb), .3);
    border-radius: 999px;
}

.progress-meter__fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--progress);
    border-radius: inherit;
    transition: width .2s;
}

.progress-meter.is-over .progress-meter__fill {
    background: var(--blood);
}

.match-team__meter {
    display: block;
    margin: -4px 0 12px;
}

.bg-models {
    display: grid;
    gap: 14px;
    margin: 14px 0;
}

@media (min-width: 768px) {
    .bg-models:not(.bg-models--rows) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* karta modelu Battle Group: imię na środku, fakty (ranga gwiazdkami, punkty, VP), obramowana tabelka statystyk,
   sekcje „Cechy” i „Wyposażenie”; zdjęcie w rogu, kosz („Usuń”) w drugim rogu przy zakładaniu */
.bg-model {
    position: relative;
    display: grid;
    gap: 12px;
}

.bg-model__head {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.bg-model__title {
    min-width: 0;
}

.bg-model__name {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
}

.bg-model__unit {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

.bg-model__unit[hidden] {
    display: none;
}

.bg-model__types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 0;
}

.bg-type-tag {
    padding: 1px 10px;
    font-family: var(--font-display);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-bright);
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
    border-radius: 999px;
}

.bg-model__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    margin: 0;
}

.bg-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    font-size: .95rem;
    color: var(--ink);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.bg-fact__stars {
    color: var(--gold);
    letter-spacing: 1px;
}

.bg-fact--legend {
    font-weight: 700;
    border-color: var(--gold);
}

/* statystyki: obramowana tabelka z ciemnym nagłówkiem */
.bg-model__stats {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 1.15rem;
}

.bg-model__stats th {
    padding: 4px 6px;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .08em;
    color: var(--gold-bright);
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
}

.bg-model__stats td {
    padding: 8px 6px;
    font-weight: 700;
    text-align: center;
    background: var(--surface-soft);
}

.bg-model__stats th + th,
.bg-model__stats td + td {
    border-left: 1px solid var(--parchment-dark);
}

/* sekcje „Cechy” i „Wyposażenie” */
.bg-model__section {
    margin: 0;
}

.bg-model__section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blood);
}

.bg-model__section-title::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--parchment-dark);
}

.bg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.bg-chip {
    padding: 2px 10px;
    font-size: .95rem;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.bg-chip--gained {
    font-weight: 700;
    border-color: var(--gold);
}

.bg-weapons {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.bg-weapons th {
    padding: 4px 8px;
    font-size: .8rem;
    font-weight: 400;
    text-align: left;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--parchment-dark);
}

.bg-weapons td {
    padding: 6px 8px;
    border-bottom: 1px dashed var(--parchment-dark);
}

.bg-weapons__name {
    font-weight: 700;
}

.bg-weapons__range {
    white-space: nowrap;
}

.bg-model__order {
    margin: 0;
}

.bg-model__order-text {
    margin: 0;
    padding: 8px 12px;
    line-height: 1.45;
    background: var(--surface-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

/* trzy kolumny karty – w widoku kart niewidoczne (ich dzieci są zwykłymi wierszami karty) */
.bg-model__col {
    display: contents;
}

/* WIDOK LISTY: zwarta karta „jak z książki” – z lewej imię, typ, ranga i stan, w środku statystyki, z prawej cechy
   i broń; bez zdjęcia, mniejsze czcionki. Na telefonie kolumny idą jedna pod drugą. */
.bg-models--compact {
    gap: 8px;
}

.bg-models--compact .bg-model {
    gap: 8px 18px;
    padding: 12px 16px;
}

.bg-models--compact .bg-model__col {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.bg-models--compact .bg-model__photo {
    display: none;
}

.bg-models--compact .bg-model__head {
    justify-items: start;
    text-align: left;
}

.bg-models--compact .bg-model__name {
    font-size: 1.15rem;
}

.bg-models--compact .bg-model__unit {
    font-size: 1rem;
}

.bg-models--compact .bg-model__types,
.bg-models--compact .bg-model__facts,
.bg-models--compact .bg-model > .bg-status,
.bg-models--compact .bg-model__col > .bg-status {
    justify-content: flex-start;
}

.bg-models--compact .bg-model__col > .bg-status__hint {
    display: none;
}

.bg-models--compact .bg-fact {
    padding: 0 8px;
    font-size: .85rem;
}

.bg-models--compact .bg-model__stats {
    max-width: none;
    font-size: .95rem;
}

.bg-models--compact .bg-model__stats td {
    padding: 4px;
}

.bg-models--compact .bg-model__section-title {
    margin-bottom: 4px;
    font-size: .72rem;
}

.bg-models--compact .bg-chip {
    padding: 0 6px;
    font-size: .82rem;
}

.bg-models--compact .bg-weapons {
    font-size: .85rem;
}

.bg-models--compact .bg-weapons th,
.bg-models--compact .bg-weapons td {
    padding: 2px 6px;
}

.bg-models--compact .bg-model__order,
.bg-models--compact .bg-model__rename,
.bg-models--compact .bg-model__correct {
    font-size: .9rem;
}

@media (min-width: 768px) {
    .bg-models--compact .bg-model {
        grid-template-columns: minmax(170px, 1fr) minmax(250px, 1.3fr) minmax(0, 1.6fr);
        align-items: start;
    }

    .bg-models--compact .bg-model__order,
    .bg-models--compact .bg-model__rename,
    .bg-models--compact .bg-model__correct {
        grid-column: 1 / -1;
    }

    /* nagłówek w liście: jedna kolumna od lewej (w kartach ma miejsce na zdjęcie po bokach) */
    .bg-models--compact .bg-model__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .bg-models--compact .bg-model__title {
        grid-column: auto;
    }

    /* w zakładaniu „Usuń” stoi w rogu – kolumna cech schodzi pod niego */
    .bg-models--compact .bg-model:has(.bg-model__delete) .bg-model__col--gear {
        padding-top: 34px;
    }
}

/* ostrzeżenie pod wyborem nacji (Deadzone: zmiana czyści Battle Group) */
.player-field:has(.player-field__warning) {
    flex-wrap: wrap;
}

.player-field__warning {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: .9rem;
    color: var(--warn-ink);
}

/*
  KATALOG MODELI przy składaniu drużyny – wspólny wygląd dla Deadzone (.bg-catalog) i Vanguarda (.vg-catalog):
  filtry typu, szukajka, pole imienia i wiersze z „＋”. Lista rozwijana odpadła, bo znikała po każdym wyborze
  (właściciel: Deadzone 8.10.2026, Vanguard 8.10.2026). Zmieniasz wygląd – zmieniasz dla obu gier.
*/
.bg-catalog,
.vg-catalog {
    display: grid;
    gap: 10px;
    margin: 12px 0 16px;
}

.bg-catalog__tools,
.vg-catalog__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 10px 16px;
}

.bg-catalog__types,
.vg-catalog__types {
    margin: 0;
}

.bg-catalog__search,
.bg-catalog__name,
.vg-catalog__search,
.vg-catalog__name {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bg-catalog__search input,
.bg-catalog__name input,
.vg-catalog__search input,
.vg-catalog__name input {
    width: 100%;
}

@media (min-width: 768px) {
    .bg-catalog__tools,
    .vg-catalog__tools {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bg-catalog__types,
    .vg-catalog__types {
        grid-column: 1 / -1;
    }
}

.bg-catalog__list,
.vg-catalog__list {
    display: grid;
    max-height: 60vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.bg-catalog__row,
.vg-catalog__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 12px;
    border-bottom: 1px dashed var(--parchment-dark);
}

.bg-catalog__row:last-child,
.vg-catalog__row:last-child {
    border-bottom: 0;
}

.bg-catalog__row[hidden],
.vg-catalog__row[hidden] {
    display: none;
}

.bg-catalog__row:hover,
.vg-catalog__row:hover {
    background: var(--surface-soft);
}

.bg-catalog__who,
/* płatne opcje z karty w katalogu kompanii i przy rekrutacji (włócznia, Dary Korgaana) */
.vg-catalog__options {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: .9rem;
}

.vg-catalog__option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.recruit-options {
    margin-top: 10px;
}

.vg-catalog__who {
    display: grid;
    min-width: 0;
}

.bg-catalog__gear,
.bg-catalog__stats,
.vg-catalog__gear,
.vg-catalog__stats {
    font-size: .88rem;
    color: var(--ink-muted);
}

.bg-catalog__stats,
.vg-catalog__stats {
    grid-column: 1;
    white-space: nowrap;
}

.bg-catalog__stats b,
.vg-catalog__stats b {
    margin-left: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--blood);
}

.bg-catalog__stats b:first-child,
.vg-catalog__stats b:first-child {
    margin-left: 0;
}

.bg-catalog__meta,
.vg-catalog__meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.bg-catalog__meta .bg-fact,
.vg-catalog__meta .bg-fact {
    padding: 0 8px;
    font-size: .85rem;
}

.bg-catalog__add,
.vg-catalog__add {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 44px;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.bg-catalog__add:disabled,
.vg-catalog__add:disabled {
    opacity: .35;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .bg-catalog__row,
    .vg-catalog__row {
        grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
    }

    /* przedmioty nie mają statystyk – ich wiersz ma własny komplet kolumn */
    .vg-catalog__row--item {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }

    .bg-catalog__stats,
    .bg-catalog__meta,
    .bg-catalog__add,
    .vg-catalog__stats,
    .vg-catalog__meta,
    .vg-catalog__add {
        grid-column: auto;
        grid-row: auto;
    }

    .bg-catalog__meta,
    .vg-catalog__meta {
        justify-content: flex-end;
    }
}

/* przełącznik widoku w pasku filtrów */
.bg-view-switch {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    overflow: hidden;
}

.bg-view-switch__btn {
    padding: 4px 12px;
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bg-view-switch__btn + .bg-view-switch__btn {
    border-left: 1px solid var(--parchment-dark);
}

.bg-view-switch__btn.is-current {
    color: var(--gold-bright);
    background: linear-gradient(to bottom, var(--chrome-from), var(--chrome-to));
}

/* separator rodzaju między grupami modeli: —— Leader —— */
.bg-type-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.bg-type-divider::before,
.bg-type-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--gold);
    opacity: .6;
}

.bg-type-divider[hidden] {
    display: none;
}

.bg-model__delete {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.bg-model__delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bg-model__delete-btn span {
    font-size: 1.25rem;
    line-height: 1;
}

/* zdjęcie modelu (produkt Mantica) – na telefonie nad imieniem, na szerszym ekranie w lewym górnym rogu karty */
.bg-model__photo {
    padding: 3px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: zoom-in;
}

.bg-model__photo img {
    display: block;
    max-width: 110px;
    max-height: 90px;
    width: auto;
    height: auto;
}

@media (min-width: 768px) {
    .bg-model__head {
        grid-template-columns: 130px minmax(0, 1fr) 130px;
        align-items: start;
    }

    .bg-model__photo {
        grid-column: 1;
        justify-self: start;
    }

    .bg-model__title {
        grid-column: 2;
    }

    .bg-model__stats {
        font-size: 1.25rem;
    }
}

/* plakietki stanu (zginął, pauzuje, uraz) pod faktami – wyśrodkowane jak reszta nagłówka */
.bg-model > .bg-status {
    justify-content: center;
    margin: 0;
}

.bg-model > .bg-status__hint {
    margin: 0;
    text-align: center;
}

.bg-model.is-dead .bg-model__photo img {
    filter: grayscale(1);
}

.bg-model.is-dead {
    opacity: .6;
    border-left: 6px solid var(--ink-muted);
}

.bg-model.is-out {
    border-left: 6px solid var(--warn);
}

/* statusy modelu z tabeli ofiar (zginął, pauzuje, uraz) */
.bg-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.bg-status__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: .9rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid transparent;
}

.bg-status__badge--dead {
    color: var(--parchment);
    background: var(--ink);
}

.bg-status__badge--out {
    color: var(--warn-ink);
    background: var(--warn-bg);
    border-color: var(--warn);
}

.bg-status__badge--injury {
    color: var(--on-primary);
    background: var(--blood);
}

/* „uraz na plus” (Straszliwe i Imponujące blizny) – trwały wpis z tabeli obrażeń, który pomaga modelowi */
.bg-status__badge--boon {
    color: var(--on-primary);
    background: var(--moss);
}

.bg-status__hint {
    margin: 0 0 6px;
    font-size: .9rem;
    color: var(--ink-muted);
}

.bg-model__stats td.is-worse {
    color: var(--blood);
    font-weight: 700;
}

.bg-model__stats td.is-better {
    color: var(--moss);
    font-weight: 700;
}


.bg-model__weapons {
    margin: 8px 0;
    padding-left: 18px;
}

.bg-keyword[title] {
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.bg-model__correct {
    margin-top: 10px;
}

/* VANGUARD → POPRAWKA PROWADZĄCEGO: pola w kolumnach (urazy, cechy) i jawny log zmian na stronie kompanii */
.vg-correct__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 0 16px;
}

.vg-correct__group .form__check-label {
    margin-bottom: 8px;
    font-weight: 400;
}

.vg-correct-log {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.vg-correct-log ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.vg-correct-log__added,
.vg-correct-log__removed {
    margin-right: 10px;
    white-space: nowrap;
}

.vg-correct-log__added {
    color: var(--moss);
}

.vg-correct-log__removed {
    color: var(--blood);
}

.bg-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bg-stores li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bg-log {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* wynik kroku rozliczenia: wiersz jak w liście, bez kropek */
.bg-log > li {
    padding: 6px 10px;
    background: var(--surface-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

/* MECZE – kampania Deadzone (templates/campaign/deadzone/matches/) */
/* lista bitew Deadzone (runda, poprzednie rundy, rozliczenia) – wiersze jak listy potyczek */
.match-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
}

.match-list__link:hover,
.match-list__link:focus-visible {
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--gold-bright);
    outline: none;
}

.match-list__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.match-list__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
}

.match-list__meta {
    font-size: .9rem;
    color: var(--ink-muted);
}

.match-list__badge {
    flex: none;
}

/* mecz Deadzone jako pojedynek: z lewej punkty i scenariusz, na środku gracze po bokach VS, z prawej stan.
   Odnośnik do meczu (gracze) rozciąga się na cały wiersz (::after), przycisk scenariusza leży nad nim. */
.match-list__link.match-duel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "players" "info" "badge";
    justify-items: center;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
}

.match-duel:focus-within {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.match-duel__players {
    grid-area: players;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    color: var(--ink);
    text-decoration: none;
}

.match-duel__players::after {
    content: '';
    position: absolute;
    inset: 0;
}

.match-duel__players:focus-visible {
    outline: none;
}

.match-duel__side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

.match-duel__side--a {
    justify-content: flex-end;
    text-align: right;
}

.match-duel__side--b {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.match-duel__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.match-duel__crown {
    font-size: 1.1em;
}

.match-duel__dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--owner-color);
    box-shadow: 0 0 0 2px var(--surface-soft), 0 0 0 3px var(--parchment-dark);
}

.match-duel__vs {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--on-primary);
    background: var(--blood);
    border: 2px solid var(--gold);
    border-radius: 50%;
}

.match-duel__info {
    grid-area: info;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
}

.match-duel__chip {
    position: relative;
    z-index: 1;
    padding: 2px 12px;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.match-duel__badge {
    grid-area: badge;
}

@media (min-width: 768px) {
    .match-list__link.match-duel {
        grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) minmax(120px, 1fr);
        grid-template-areas: "info players badge";
    }

    .match-duel__info {
        justify-content: flex-start;
        justify-self: start;
    }

    .match-duel__badge {
        justify-self: end;
    }
}

/* wiersz meczu z przyciskiem w środku (Vanguard): odnośnik rozciąga się na cały wiersz (::after),
   a przycisk scenariusza leży nad nim – przycisku nie wolno wkładać w <a> */
.match-list__link--cover {
    position: relative;
    flex-wrap: wrap;
}

.match-list__link--cover:focus-within {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.match-list__cover {
    color: var(--ink);
    text-decoration: none;
}

.match-list__cover::after {
    content: '';
    position: absolute;
    inset: 0;
}

.match-list__cover:focus-visible {
    outline: none;
}

.match-list__link--cover .scenario-tip {
    position: relative;
    z-index: 1;
}

/* nazwa scenariusza (Deadzone, Vanguard) – przycisk otwierający okienko z planszą rozstawienia i opisem */
.scenario-tip {
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.scenario-tip:hover,
.scenario-tip:focus-visible {
    color: var(--blood);
}

.scenario-modal__image {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--parchment-dark);
}

.scenario-modal .image-credit {
    display: block;
    text-align: center;
}

.scenario-modal__text {
    display: block;
    margin: 10px 0 0;
}


/* poprzednie rundy – każda zwijana */
.match-round + .match-round {
    margin-top: 8px;
}

.match-round__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    cursor: pointer;
}

.match-round__summary::-webkit-details-marker {
    display: none;
}

/* strzałka zwijania – flex na <summary> chowa zwykły znacznik */
.match-round__summary::before {
    content: '▸';
    transition: transform .15s;
}

.match-round[open] > .match-round__summary::before {
    transform: rotate(90deg);
}

.match-round__count {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    font-size: .9rem;
    color: var(--ink-muted);
}

.match-round[open] > .match-round__summary {
    margin-bottom: 8px;
}

.match-team__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

/* żółta ramka ostrzeżenia (np. „serwis nie pilnuje zasad składu”) */
.warn-note {
    margin: 8px 0 12px;
    padding: 8px 12px;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-left-width: 4px;
    border-radius: var(--radius);
}

.warn-note__icon {
    font-size: 1.1em;
}

/* wiersz modelu przy składaniu Strike Teamu: pole, nazwa z bronią, z prawej typy, koszt i ranga */
.match-team__pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
    width: 100%;
    cursor: pointer;
}

.match-team__pick input[type=checkbox] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.match-team__who {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.match-team__gear {
    font-size: .9rem;
    color: var(--ink-muted);
}

.match-team__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.match-team__meta .bg-fact {
    padding: 0 8px;
    font-size: .85rem;
}

@media (min-width: 768px) {
    .match-team__pick {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .match-team__meta {
        grid-column: 3;
        justify-content: flex-end;
    }
}

/* separator rodzaju w jasnej karcie (formularz Strike Teamu) */
.bg-type-divider--in-card {
    margin: 14px 0 2px;
    font-size: .85rem;
    color: var(--blood);
}

.bg-type-divider--in-card::before,
.bg-type-divider--in-card::after {
    border-top-color: var(--parchment-dark);
    opacity: 1;
}

.match-report fieldset {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.match-report__label {
    margin: 10px 0 4px;
    font-weight: 700;
}

.match-report__summary {
    margin: 0 0 10px;
    padding-left: 18px;
}

/* MAPA STRATEGIC ASSETS – kampania Deadzone (templates/campaign/deadzone/_asset_map.html.twig) */
.asset-map__canvas {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.asset-map__canvas img {
    display: block;
    width: 100%;
    height: auto;
}

.asset-pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translate(-9px, -50%);
    --owner-color: #8a8a8a;
    --owner-text: #ffffff;
}

.asset-pin--left {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 9px), -50%);
}

.asset-pin--left .asset-pin__label {
    border-right: 4px solid var(--owner-color);
    border-left: 0;
    text-align: right;
}

.asset-pin__dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--owner-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .45), 0 0 14px var(--owner-color);
}

.asset-pin__label {
    /* telefon: mapa ma ~360 px i etykiety nachodziły na siebie – pokazujemy je po stuknięciu w pinezkę,
       a wszystkie assety z właścicielami są w legendzie pod mapą */
    display: none;
    flex-direction: column;
    padding: 3px 8px;
    font-size: .72rem;
    line-height: 1.25;
    color: #fff;
    background: rgba(12, 10, 8, .78);
    border-left: 4px solid var(--owner-color);
    border-radius: 4px;
    white-space: nowrap;
}

.asset-pin:focus,
.asset-pin:hover {
    z-index: 2;
}

.asset-pin:focus .asset-pin__label,
.asset-pin:hover .asset-pin__label {
    display: flex;
}

@media (min-width: 768px) {
    .asset-pin__label {
        display: flex;
    }
}

.asset-pin.is-held .asset-pin__holder {
    color: var(--owner-color);
    font-weight: 700;
}

.asset-map__legend {
    margin: 12px 0 0;
    padding-left: 18px;
}

@media (min-width: 768px) {
    .asset-pin__label {
        font-size: .85rem;
    }
}

.bg-founding__qty {
    flex: 0 0 110px !important;
}


/* zakładki typów nad listą modeli – na jasnym pasku (styl .filter-tabs jest robiony do wnętrza karty) */
.bg-type-tabs {
    margin: 16px 0 0;
    padding: 12px 14px;
}

.bg-type-tabs .filter-tabs__tab {
    cursor: pointer;
}

/* karty na stronie Battle Group nie stykają się ze sobą */
.bg-section {
    margin-top: 16px;
}

.bg-confirm {
    text-align: center;
}

.bg-confirm__warning {
    max-width: 70ch;
    margin: 0 auto 12px;
    font-style: italic;
}

/* pasek kroków rozliczenia Deadzone – odstęp od kart pod nim */
/* „Historia rozliczenia” – pod bieżącym krokiem karty kroków już zrobionych */
.resolution-history__title {
    margin: 28px 0 12px;
    padding-top: 14px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .06em;
    color: var(--gold-bright);
    border-top: 1px solid var(--border);
}

.resolution-steps {
    margin: 12px 0 20px;
    row-gap: 10px;
}

/* Strike Team: Equipment dla całej drużyny i zwinięta lista wyłączonych z walki */
.match-team__items {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.match-team__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: normal;
    color: var(--ink);
}

/* małe pole na liczbę sztuk – ogólna reguła .form input rozciąga pola na całą szerokość */
.form .match-team__item input[type=number] {
    flex: 0 0 auto;
    width: 4.5em;
    text-align: center;
}

.match-team__benched {
    margin-top: 14px;
}

.match-team__benched ul {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 20px;
}

/* koniec kampanii: checkbox „rozumiem” nad przyciskiem */
.panel-finish__unlock {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: .9rem;
}

/* klasyfikacja Deadzone: wąska kolumna miejsca, gracz od lewej, liczby równo pod nagłówkami */
.standings-table th:first-child,
.standings-table td:first-child {
    width: 3em;
    text-align: center;
}

.standings-table th[scope="row"] {
    font-weight: 400;
}

/* kolumny z liczbami tak wąskie, jak ich treść – gracz bierze resztę szerokości (tabela stoi też w wąskiej kolumnie
   pod mapą assetów, więc stałe szerokości ściskały nicki) */
.standings-table th:nth-child(n+3),
.standings-table td:nth-child(n+3) {
    width: 1%;
    white-space: nowrap;
}

.standings-table th[scope="row"] {
    min-width: 9em;
}

/* rozliczenia: „Twoje rozliczenie” nad „Pozostali gracze” */
.match-list__group {
    margin-top: 14px;
}

/* przycisk-rozwijacz: <summary class="btn btn--ghost summary-btn">… <span class="summary-btn__arrow">▾</span></summary>
   – „Wpisz lub edytuj wyniki”, „Złóż Strike Team”; strzałka obraca się po rozwinięciu */
.summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.summary-btn::-webkit-details-marker {
    display: none;
}

.summary-btn__arrow {
    transition: transform .15s;
}

details[open] > .summary-btn .summary-btn__arrow {
    transform: rotate(180deg);
}

details[open] > .summary-btn {
    margin-bottom: 12px;
}

/* ramka strony w raporcie (wspólne ramki – reguła .match-report fieldset): grubszy obrys i nick na środku;
   „Wynik meczu” też na środku */
.match-report fieldset.match-report__side {
    border: 2px solid var(--gold);
}

.match-report__winner > legend,
.match-report__side > legend {
    margin: 0 auto;
    padding: 0 12px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
}

/* raport z bitwy: wiersz „znaleziony przedmiot + ilość” */
.match-report__found {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.match-report__found select {
    width: auto;
    max-width: 280px;
}

.form .match-report__found input[type=number] {
    width: 4.5em;
    text-align: center;
}

/* raport z bitwy: „Zabite modele” i „Zabiły wroga albo zdobyły VP” obok siebie */
.match-report__columns {
    display: grid;
    gap: 4px 24px;
}

.match-report__columns > div {
    display: grid;
    align-content: start;
    gap: 4px;
}

@media (min-width: 600px) {
    .match-report__columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* rozliczenie, krok 6: bloki Rekrut / Zakupy / Sprzedaż – w każdym jedna linia: pole · (drugie pole) · przycisk */
.shop-wallet {
    margin: 10px 0 4px;
}

.shop-block {
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--border-rgb), .4);
}

/* śródtytuł w karcie (pod .panel-title): jeden wygląd dla bloków sklepu, grup rozliczeń itd. */
.shop-block__title,
.match-list__group,
.match-side__title {
    margin: 0 0 8px;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.shop-row {
    display: grid;
    gap: 8px 12px;
    align-items: end;
}

.shop-row + .shop-row {
    margin-top: 10px;
}

.shop-row__main,
.shop-row__extra,
.shop-row__qty {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.shop-row select,
.shop-row input {
    width: 100%;
}

.shop-row .btn {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .shop-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-row:has(.shop-row__extra) {
        grid-template-columns: minmax(0, 1fr) 16em auto;
    }

    .shop-row:has(.shop-row__qty) {
        grid-template-columns: minmax(0, 1fr) 6em auto;
    }
}

.shop-finish {
    margin-top: 16px;
    text-align: right;
}


/* krok 6: po lewej „Kup przedmiot”, po prawej „Twoje Stores” */
.shop-columns {
    display: grid;
    gap: 0 28px;
}

@media (min-width: 900px) {
    .shop-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.shop-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* długie listy przewijają się we własnym okienku – krok nie rozciąga się na kilka ekranów */
.shop-column .shop-list {
    max-height: 22rem;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.shop-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 3px 8px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .35);
}

.shop-list__row.is-unaffordable {
    opacity: .55;
}

.shop-list__name {
    flex: 1;
    min-width: 10em;
}

.shop-list__price {
    color: var(--ink-muted);
    white-space: nowrap;
}

.shop-list__form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.shop-list__form input[type=number] {
    width: 3.5em;
    height: 30px;
    padding: 2px 4px;
    font-size: .95rem;
    text-align: center;
}

.shop-tag {
    margin-left: 6px;
    padding: 1px 8px;
    font-size: .75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.shop-tag--used {
    color: var(--blood);
    background: rgba(142, 42, 34, .1);
}

.shop-tag--found {
    color: var(--moss);
    background: rgba(47, 143, 106, .14);
}

.shop-gone {
    margin: 8px 0 0;
    font-size: .9rem;
}

/* licznik punktów Strike Teamu – na czerwono, gdy przekracza wielkość bitwy */
.match-team__points [data-team-points] {
    font-weight: 700;
}

.match-team__points.is-over [data-team-points] {
    color: var(--blood);
}


/* zakładka „Drużyny”: gracze jako harmonijka, w środku modele ze stanem */
.team + .team {
    margin-top: 8px;
}

.team__name {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

.team__models {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team__model {
    display: grid;
    gap: 2px 12px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .35);
}

.team__model.is-dead {
    opacity: .6;
}

.team__model-meta {
    font-size: .85rem;
    color: var(--ink-muted);
}

.team__model-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

@media (min-width: 768px) {
    .team__model {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 2fr);
        align-items: center;
    }
}

.team__more {
    margin: 8px 0 4px;
    text-align: right;
}

.bg-filter-empty {
    margin: 12px 0;
}

/* filtr modeli na karcie Battle Group: „Stan” i „Typ” obok siebie */
.bg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    margin: 16px 0 0;
    padding: 10px 16px;
}

.bg-filters__field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

/* lista szeroka jak najdłuższa opcja (np. pełne nazwy gier w Wieściach) wyjeżdżała na telefonie w prawo – teraz
   mieści się w karcie, a dłuższy tekst skraca sama przeglądarka (22.10.2026). Bez minimalnej szerokości w procentach:
   liczyła się od całego pola razem z etykietą, więc lista wjeżdżała na etykietę obok („Stan” i „Klasa” w kompanii
   Vanguarda, 25.10.2026) */
.bg-filters__field select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

/* ranking Deadzone pod mapą assetów */
.standings-card {
    margin-top: 16px;
}

/* eksploracja: dodatkowe pola dla wyniku (Chemist, pułapka) */
.explore-extra {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.explore-extra[hidden] {
    display: none;
}

/* wyjaśnienie wyniku z tabeli ofiar */
.effect-why {
    font-size: .9rem;
}

/* komunikaty z serwera zamienia na powiadomienia toast.js – ukryte od razu, żeby stary pasek nie mignął u góry
   przed wczytaniem skryptu; bez JS pokazuje je <noscript> w base.html.twig */
.flash[data-toast] {
    display: none;
}

/* ============================================================
  OPEN RPG – karta postaci, mapy w mapach, dziennik z rysunkami, kości z boku ekranu
  (docs/open-rpg/01-opis.md). Kolory tylko ze zmiennych; kolor gracza – --player-color.
============================================================ */

/* kreator: statystyki od MG */
.rpg-stats-setup {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.rpg-stats-setup__rows {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
}

.rpg-stats-setup__row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rpg-stats-setup__row input {
    flex: 1;
}

/* plansza mapy */
.rpg-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}

.rpg-board-head .panel-title {
    margin: 0;
}

.rpg-board.is-placing {
    cursor: crosshair;
}

.rpg-pin {
    text-decoration: none;
}

.rpg-pin--locked .hotspot__dot {
    background: var(--ink-muted);
}

/* ukryty hotspot widzi tylko MG – przygaszony */
.rpg-pin--hidden {
    opacity: .55;
}

.rpg-pin--hidden .hotspot__dot {
    border-style: dashed;
}

.rpg-pin--door .hotspot__dot {
    box-shadow: 0 0 0 3px var(--gold-bright), 0 2px 8px rgba(0, 0, 0, .6);
}

.rpg-pin__tokens {
    display: flex;
    margin-left: -2px;
}

/* żetony postaci w drodze – przygaszone i przerywany obrys, żeby nie myliły się ze stojącymi na miejscu */
.rpg-pin__tokens--travel {
    opacity: .65;
}

.rpg-pin__tokens--travel .rpg-token {
    border-style: dashed;
}

.rpg-board__marker {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid var(--gold-bright);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rpg-map {
    margin: 0 0 16px;
}

.rpg-entrances {
    flex-wrap: wrap;
}

/* żeton postaci – portret albo litera w kolorze gracza */
.rpg-token {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--on-primary);
    background: var(--player-color, var(--btn-primary-from));
    border: 2px solid var(--player-color, var(--gold));
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    vertical-align: middle;
}

.rpg-pin__tokens .rpg-token + .rpg-token {
    margin-left: -8px;
}

.rpg-token img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rpg-token--more {
    background: var(--bg-soft);
    color: var(--parchment);
    border-color: var(--border);
}

.rpg-mine {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.rpg-mine .rpg-token {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

.rpg-mine__text {
    display: grid;
    gap: 2px;
}

.rpg-mine__name {
    font-family: var(--font-display);
    font-weight: 700;
}

/* lista hotspotów pod mapą */
.rpg-hotspot__number {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--on-primary);
    background: var(--btn-primary-from);
    border-radius: 50%;
    letter-spacing: normal;
}

.rpg-hotspot--locked .rpg-hotspot__number {
    background: var(--ink-muted);
}

.rpg-hotspot--hidden > .match-round__summary {
    opacity: .7;
    border-style: dashed;
}

.rpg-hotspot__body {
    display: grid;
    gap: 10px;
    padding: 0 4px 8px;
}

.rpg-hotspot__description,
.rpg-hotspot__door {
    margin: 0;
}

.rpg-here {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* „w drodze” – kto idzie do tego miejsca i przyciski wymarszu; dwa przyciski obok siebie */
.rpg-card__travel {
    margin: 0;
    font-size: .9rem;
}

.rpg-card__travel-label {
    font-family: var(--font-display);
    letter-spacing: .04em;
    color: var(--ink-muted);
}

.rpg-move {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rpg-travel-now {
    margin: 0;
    font-size: .95rem;
}

.rpg-travel-now__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rpg-event {
    padding: 10px 12px;
    border-left: 4px solid var(--gold);
    background: var(--surface-soft);
    border-radius: var(--radius);
}

.rpg-event p {
    margin: 0 0 8px;
}

.rpg-event--secret {
    border-left-color: var(--ink-muted);
    border-left-style: dashed;
}

.rpg-event__actions,
.rpg-gm-tools,
.rpg-states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.rpg-gm-tools {
    padding-top: 8px;
    border-top: 1px dashed var(--parchment-dark);
}

.rpg-states .btn.is-current {
    color: var(--on-primary);
    background: linear-gradient(to bottom, var(--btn-from), var(--btn-to));
    opacity: 1;
}

/* rozwijane formularze MG (edycja, nowe wydarzenie) – przycisk jako <summary> */
.rpg-edit > summary {
    list-style: none;
}

.rpg-edit > summary::-webkit-details-marker {
    display: none;
}

.rpg-edit[open] {
    flex-basis: 100%;
}

.rpg-edit[open] > .form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.rpg-xy__inputs {
    display: flex;
    gap: 8px;
}

.form .rpg-xy__inputs input {
    width: 7rem;
}

/* lista map */
.rpg-map-tree {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* poziom niżej – wcięcie z kreską prowadzącą od mapy nadrzędnej */
.rpg-map-tree--nested {
    margin: 8px 0 0 22px;
    padding-left: 14px;
    border-left: 2px solid var(--parchment-dark);
}

.rpg-map-tree__loose-title {
    margin-top: 20px;
}

.rpg-map-list__text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.rpg-map-list__via {
    font-size: .9rem;
    color: var(--ink-muted);
}

.rpg-map-list__link {
    justify-content: flex-start;
}

.rpg-map-list__name {
    font-family: var(--font-display);
    font-weight: 700;
}

.rpg-map-list__thumb {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 44px;
    flex: none;
    object-fit: cover;
    background: var(--media-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* zakładka Postacie */
.rpg-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

.rpg-roster__card {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    border-top: 4px solid var(--player-color, var(--gold));
}

.rpg-roster__card:hover,
.rpg-roster__card:focus-visible {
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.rpg-roster__portrait {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--on-primary);
    background: var(--player-color, var(--btn-primary-from));
    border: 2px solid var(--gold);
    border-radius: 50%;
}

.rpg-roster__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rpg-roster__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.rpg-roster__meta {
    font-size: .9rem;
    color: var(--ink-muted);
}

.rpg-missing {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rpg-missing li,
.rpg-missing__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rpg-missing li {
    justify-content: space-between;
}

/* ------------------------------------------------------------
  KARTA POSTACI – pergamin w podwójnej złotej ramce, wstęga z imieniem, portret w łuku z pieczęcią poziomu,
  statystyki jako medaliony. Telefon: portret na górze, statystyki pod nim; szeroko – po obu stronach portretu.
------------------------------------------------------------ */
.rpg-sheet {
    padding-top: 28px;
}

/* wewnętrzna ramka z narożnikami */
.rpg-sheet::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(var(--accent-rgb), .55);
    outline: 1px solid rgba(var(--accent-rgb), .3);
    outline-offset: 3px;
    border-radius: calc(var(--radius) - 2px);
    pointer-events: none;
}

.rpg-sheet::after {
    content: '';
    position: absolute;
    inset: 4px;
    pointer-events: none;
    background:
        radial-gradient(circle at 0 0, var(--gold) 0 5px, transparent 6px) top left / 16px 16px no-repeat,
        radial-gradient(circle at 100% 0, var(--gold) 0 5px, transparent 6px) top right / 16px 16px no-repeat,
        radial-gradient(circle at 0 100%, var(--gold) 0 5px, transparent 6px) bottom left / 16px 16px no-repeat,
        radial-gradient(circle at 100% 100%, var(--gold) 0 5px, transparent 6px) bottom right / 16px 16px no-repeat;
}

.rpg-sheet > * {
    position: relative;
}

/* wstęga z imieniem w kolorze gracza */
.rpg-sheet__banner {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 0 0 18px;
    text-align: center;
}

.rpg-sheet .rpg-sheet__name {
    margin: 0;
    padding: 8px 48px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: .06em;
    color: var(--on-primary);
    background: linear-gradient(to bottom, var(--player-color, var(--btn-primary-from)), color-mix(in srgb, var(--player-color, var(--btn-primary-from)) 70%, black));
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.rpg-sheet__meta {
    margin: 0;
    font-style: italic;
    color: var(--ink-muted);
}

.rpg-sheet__locked {
    margin: 0 0 16px;
    text-align: center;
}

.rpg-sheet__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    margin: 0 0 20px;
}

.rpg-sheet__identity .form__row {
    flex: 0 1 320px;
    margin: 0;
}

.rpg-sheet__top {
    display: grid;
    gap: 16px;
}

.rpg-sheet__center {
    order: -1;
    display: grid;
    justify-items: center;
    gap: 14px;
}

/* portret w łukowej ramce */
.rpg-sheet__portrait {
    position: relative;
    display: grid;
    place-items: center;
    width: min(250px, 100%);
    aspect-ratio: 3 / 4;
    background: var(--player-color, var(--btn-primary-from));
    border: 4px double var(--gold);
    border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius);
    box-shadow: 0 0 0 3px var(--parchment), 0 0 0 5px rgba(var(--accent-rgb), .6), var(--shadow);
}

.rpg-sheet__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.rpg-sheet__initial {
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--on-primary);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* pieczęć woskowa z poziomem */
.rpg-sheet__seal {
    position: absolute;
    right: -18px;
    bottom: -18px;
    display: grid;
    place-items: center;
    align-content: center;
    width: 74px;
    height: 74px;
    color: var(--on-primary);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--blood) 70%, white), var(--blood) 55%, color-mix(in srgb, var(--blood) 60%, black));
    border-radius: 48% 52% 50% 46% / 50% 46% 54% 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(0, 0, 0, .15);
    line-height: 1;
}

.rpg-sheet__seal-label {
    font-family: var(--font-display);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rpg-sheet__seal strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
}

.rpg-sheet__xp {
    margin: 8px 0 0;
    padding: 4px 20px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
}

.rpg-sheet__xp strong {
    font-family: var(--font-display);
    color: var(--ink);
}

.rpg-sheet__gm {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
}

.rpg-sheet__gm-field {
    display: grid;
    gap: 4px;
    font-size: .9rem;
    color: var(--ink-muted);
}

.form .rpg-sheet__gm-field input {
    width: 6.5rem;
}

/* ikonki wydarzeń: arkusz symboli siedzi w stronie, ale nic nie zajmuje */
.rpg-icons-sheet {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* znaczki wydarzeń przy pinezce – po lewej, bo żetony postaci stoją po prawej */
.rpg-pin__icons {
    position: absolute;
    top: 50%;
    right: 100%;
    display: flex;
    flex-direction: row-reverse;
    gap: 2px;
    margin-right: 4px;
    transform: translateY(-50%);
}

.rpg-event-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--icon-color, var(--gold));
    background: rgba(0, 0, 0, .45);
    border: 1px solid currentColor;
    border-radius: 50%;
}

.rpg-event-icon svg {
    width: 14px;
    height: 14px;
}

/* ten sam znaczek w nagłówku wydarzenia na liście – bez tła, w jednej linii z tytułem */
.rpg-event-icon--inline {
    display: inline-grid;
    width: 1.3em;
    height: 1.3em;
    margin-right: 2px;
    vertical-align: -.25em;
    background: none;
    border: 0;
}

.rpg-event-icon--inline svg {
    width: 100%;
    height: 100%;
}

/* wybór ikonki i koloru w formularzu wydarzenia */
.rpg-icon-pick__icons,
.rpg-icon-pick__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.rpg-icon-pick__icon input,
.rpg-icon-pick__color input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rpg-icon-pick__icon span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--ink);
    background: var(--surface-input, var(--parchment));
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    cursor: pointer;
}

.rpg-icon-pick__icon svg {
    width: 24px;
    height: 24px;
}

/* zaznaczenie samym złotym obrysem – kolor ikonki wybiera się niżej, więc tu go nie udajemy */
.rpg-icon-pick__icon input:checked + span {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 2px var(--gold);
}

.rpg-icon-pick__icon input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.rpg-icon-pick__color span {
    display: block;
    width: 26px;
    height: 26px;
    background: var(--pick-color);
    border: 2px solid var(--parchment-dark);
    border-radius: 50%;
    cursor: pointer;
}

.rpg-icon-pick__color input:checked + span {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--gold);
}

.rpg-icon-pick__color input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.rpg-icon-pick__credit {
    margin-top: 4px;
    font-size: .8rem;
}

/* statystyki – nazwa na pasku, wartość w medalionie */
.rpg-stats {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rpg-stats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 0 6px 0 14px;
    background: linear-gradient(to right, var(--surface-soft), transparent);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--player-color, var(--gold));
    border-radius: var(--radius);
}

.rpg-stats__name {
    font-family: var(--font-display);
    letter-spacing: .05em;
}

/*
  Mocniej niż `.form input[type=number] { width: 100% }` – inaczej pole wychodzi poza wiersz statystyki.
  Medalionu NIE ustawiamy na `display: grid`: na polu tekstowym chowa to kursor (widać wpisany tekst,
  ale nie widać, gdzie się pisze – 7.10.2026). Liczbę w kółku wyśrodkowuje `text-align` w poziomie
  i samo pole w pionie; `place-items` zostaje tylko dla wersji do odczytu (`<span>` niżej).
*/
.rpg-stats .rpg-stats__row .rpg-stats__input {
    flex: none;
    width: 52px;
    height: 52px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    background: radial-gradient(circle at 35% 30%, var(--parchment), var(--parchment-dark));
    border: 2px solid var(--gold);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--parchment), 0 1px 3px rgba(0, 0, 0, .25);
    -moz-appearance: textfield;
}

/* wersja do odczytu (gracz bez prawa zmiany) – zwykły <span>, więc centrowanie siatką jest tu bezpieczne */
.rpg-stats .rpg-stats__row .rpg-stats__value {
    display: grid;
    place-items: center;
}

.rpg-stats .rpg-stats__row .rpg-stats__input::-webkit-inner-spin-button,
.rpg-stats .rpg-stats__row .rpg-stats__input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* zakładki karty – kartki wystające znad pola tekstu */
.rpg-sections {
    margin-top: 28px;
}

.rpg-sections__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 10px;
}

.rpg-sections__tab {
    position: relative;
    top: 1px;
    padding: 7px 16px 6px;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .06em;
    color: var(--ink-muted);
    background: var(--parchment-dark);
    border: 1px solid var(--parchment-dark);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.rpg-sections__tab.is-current {
    color: var(--ink);
    background: var(--surface-input, var(--parchment));
    border-color: var(--gold);
    box-shadow: inset 0 3px 0 var(--player-color, var(--gold));
}

.rpg-sections.is-tabbed .rpg-sections__title {
    display: none;
}

.rpg-sections__panel + .rpg-sections__panel {
    margin-top: 12px;
}

.rpg-sections.is-tabbed .rpg-sections__panel + .rpg-sections__panel {
    margin-top: 0;
}

.rpg-sections__panel textarea {
    width: 100%;
}

.rpg-sections.is-tabbed .rpg-sections__panel textarea,
.rpg-sections.is-tabbed .rpg-sections__text {
    border: 1px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
}

.rpg-sections__text {
    margin: 0;
    padding: 10px 12px;
    white-space: normal;
}

.rpg-side-tools {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.rpg-inline-form {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.rpg-inline-form .form__row {
    width: 100%;
}

@media (min-width: 768px) {
    .rpg-sheet__top {
        grid-template-columns: 1fr minmax(240px, 280px) 1fr;
        align-items: start;
    }

    .rpg-sheet__center {
        order: 0;
    }
}

/* ------------------------------------------------------------
  DZIENNIK – książka: skórzana okładka z przeszyciem, zakładki-wstążki, kartka w linie z marginesem,
  pismo odręczne (Caveat), rysunki przyklejone taśmą.
------------------------------------------------------------ */
.rpg-book {
    position: relative;
    margin: 0 0 16px;
}

.rpg-book__ribbons {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    padding: 0 28px;
}

.rpg-book__ribbon {
    display: inline-block;
    padding: 8px 14px 14px;
    font-family: 'Caveat', var(--font-body);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--on-primary);
    text-decoration: none;
    background: hsl(calc(var(--ribbon-index, 0) * 47 + 350) 45% 32%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    opacity: .85;
    transform: translateY(8px);
    transition: transform .15s, opacity .15s;
    cursor: pointer;
    list-style: none;
}

.rpg-book__ribbon::-webkit-details-marker {
    display: none;
}

.rpg-book__ribbon:hover,
.rpg-book__ribbon:focus-visible,
.rpg-book__ribbon.is-current {
    opacity: 1;
    transform: translateY(0);
    color: var(--on-primary);
    text-decoration: none;
}

.rpg-book__ribbon--new {
    background: var(--ink-muted);
}

/* telefon: okienko nowej zakładki liczy się od lewej krawędzi dziennika (przy wstążce wychodziło poza ekran) */
.rpg-book__new-form {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    width: min(340px, 100%);
    padding: 10px;
    background: var(--parchment);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* okładka */
.rpg-book__cover {
    padding: 18px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .08), transparent 60%),
        linear-gradient(135deg, var(--rpg-leather), var(--rpg-leather-dark));
    border-radius: 10px;
    box-shadow: var(--shadow), inset 0 0 0 2px rgba(0, 0, 0, .3);
    outline: 2px dashed rgba(var(--accent-rgb), .45);
    outline-offset: -9px;
}

/* kartka w linie */
.rpg-book__page {
    --line: 34px;
    position: relative;
    padding: 20px 24px 28px 64px;
    color: var(--rpg-ink);
    background:
        linear-gradient(to right, transparent 46px, var(--rpg-margin) 46px, var(--rpg-margin) 48px, transparent 48px),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rpg-line) calc(var(--line) - 1px), var(--rpg-line) var(--line)),
        var(--rpg-paper);
    background-position: 0 0, 0 18px, 0 0;
    border-radius: 4px;
    box-shadow: inset 14px 0 18px -12px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .3);
    min-height: 520px;
}

.rpg-book__form {
    display: grid;
    gap: 0;
}

.rpg-book__title,
.rpg-book__text,
.rpg-book__hand {
    font-family: 'Caveat', var(--font-body);
    color: var(--rpg-ink);
}

.rpg-book__title {
    width: 100%;
    margin: 0;
    min-height: 0;
    height: calc(var(--line) * 1.5);
    padding: 0;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: calc(var(--line) * 1.5);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.rpg-book__text {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.45rem;
    line-height: var(--line);
    background: transparent;
    border: 0;
    box-shadow: none;
    resize: vertical;
}

.rpg-book__title:focus,
.rpg-book__text:focus {
    outline: 1px dashed rgba(var(--accent-rgb), .6);
    outline-offset: 4px;
    box-shadow: none;
}

.rpg-book__hand {
    margin: 0;
    font-size: 1.45rem;
    line-height: var(--line);
}

.rpg-book__hand--muted {
    opacity: .6;
}

.rpg-book__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.rpg-book__drawings {
    margin-top: var(--line);
}

.rpg-book__subtitle {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
    font-family: 'Caveat', var(--font-body);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--rpg-ink);
}

.rpg-book__count {
    font-size: 1.2rem;
    opacity: .6;
}

/* rysunki przyklejone taśmą, lekko przekrzywione */
.rpg-drawings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px;
    margin: 0 0 18px;
    padding: 10px 0 0;
    list-style: none;
}

.rpg-drawings__item {
    position: relative;
    display: grid;
    gap: 6px;
    justify-items: start;
    transform: rotate(var(--tilt, 0deg));
}

.rpg-drawings__item::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: 1;
    width: 70px;
    height: 20px;
    background: rgba(var(--rpg-tape-rgb), .55);
    transform: translateX(-50%) rotate(-3deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.rpg-drawings__open {
    display: block;
    width: 100%;
    padding: 6px;
    line-height: 0;
    background: var(--rpg-photo);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

.rpg-drawings__open img {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .rpg-book__cover {
        padding: 8px;
        outline-offset: -5px;
    }

    .rpg-book__page {
        padding: 16px 14px 24px 38px;
        background-image:
            linear-gradient(to right, transparent 26px, var(--rpg-margin) 26px, var(--rpg-margin) 28px, transparent 28px),
            repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rpg-line) calc(var(--line) - 1px), var(--rpg-line) var(--line));
    }

    .rpg-book__ribbons {
        padding: 0 10px;
    }
}

.rpg-draw__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
}

.rpg-draw__colors {
    display: flex;
    gap: 4px;
}

.rpg-draw__swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--swatch);
    border: 2px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.rpg-draw__swatch.is-current {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 2px var(--gold);
}

.rpg-draw__tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rpg-draw .btn.is-current {
    box-shadow: 0 0 0 2px var(--gold-bright);
}

/* notka „poprawiasz szkic” nad płótnem */
.rpg-draw__editing {
    margin: 8px 0 0;
    padding: 6px 10px;
    font-size: .9rem;
    color: var(--ink-muted);
    background: var(--surface-soft);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}

/* płótno z obrysem narzędzia – obrys chodzi nad kartką, więc liczy się od tego pudełka */
.rpg-draw__stage {
    position: relative;
}

.rpg-draw__ring {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--ring-color, #2b1d0e);
    border-radius: 50%;
    /* biała obwódka, żeby obrys było widać i na ciemnej kresce, i na jasnej kartce */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .9);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* panel „Gracze”: miejsce postaci obok nicku; u MG klikalne i prowadzi na tę mapę */
.panel-players__place {
    font-size: .85rem;
}

/* w panelu nie podkreślamy – klikalność niesie kolor i rozjaśnienie po najechaniu */
.panel-players__link {
    color: var(--parchment);
    text-decoration: none;
}

.panel-players__link:hover,
.panel-players__link:focus-visible,
.panel-players__place--link:hover,
.panel-players__place--link:focus-visible {
    color: var(--gold-bright);
}

.panel-players__go {
    display: inline;
}

/* cel podróży obok miejsca – przygaszony, bo żeton stoi jeszcze gdzie indziej */
.panel-players__travel {
    font-size: .8rem;
    color: var(--parchment-dark);
}

.panel-players__place--link {
    padding: 0;
    font-family: inherit;
    color: var(--gold);
    background: none;
    border: 0;
    cursor: pointer;
}

.panel-players__place--link:hover,
.panel-players__place--link:focus-visible {
    color: var(--gold-bright);
}

/* „Pokaż na ekranie kampanii” przy mapie w drzewku i nad planszą */
.rpg-map-list__watch,
.rpg-board-head__watch {
    margin: 4px 0 0;
}

/* pole napisu nie rozpycha paska narzędzi na całą szerokość */
.rpg-draw__tools [data-rpg-text] {
    width: 16rem;
    max-width: 100%;
}

/* podgląd napisu zamiast obrysu – pokazuje, co i jak duże wyjdzie z kliknięcia */
.rpg-draw__ring--text {
    display: grid;
    place-items: center;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .65;
}

.rpg-draw__canvas {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    touch-action: none;
    /* czarny krzyżyk z białą obwódką – systemowy „crosshair” ginął na jasnej kartce */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2v20M2 12h20' stroke='white' stroke-width='4'/%3E%3Cpath d='M12 2v20M2 12h20' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 12 12, crosshair;
}

/* kości z boku ekranu – przycisk przy prawej krawędzi, panel wysuwany */
.rpg-dice {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 1500;
}

.rpg-dice__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-family: var(--font-display);
    font-size: .9rem;
    color: var(--on-primary);
    background: linear-gradient(to bottom, var(--btn-primary-from), var(--btn-primary-to));
    border: 1px solid var(--gold);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.rpg-dice__toggle-label {
    display: none;
}

@media (min-width: 768px) {
    .rpg-dice__toggle-label {
        display: inline;
    }
}

.rpg-dice.is-open .rpg-dice__toggle {
    display: none;
}

.rpg-dice__panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(340px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    overflow-y: auto;
    color: var(--ink);
    background: var(--parchment);
    border-left: 2px solid var(--gold);
    box-shadow: var(--shadow);
}

.rpg-dice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rpg-dice__head .panel-title {
    margin: 0;
}

.rpg-dice__form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.rpg-dice__field {
    display: grid;
    gap: 4px;
    font-size: .9rem;
}

.rpg-dice__field input,
.rpg-dice__field select {
    width: 100%;
}

.rpg-dice__hidden,
.rpg-dice__form .btn {
    grid-column: 1 / -1;
}

.rpg-dice__log {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rpg-dice__entry {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 6px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.rpg-dice__entry.is-new {
    border-color: var(--gold-bright);
}

.rpg-dice__entry.is-hidden-roll {
    border-style: dashed;
}

.rpg-dice__who,
.rpg-dice__results {
    font-size: .85rem;
    color: var(--ink-muted);
}

.rpg-dice__total {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink);
}

/* miejsce na pliki kampanii (CampaignStorageQuota) – panel prowadzącego */
.storage-box .progress-meter {
    margin-top: 6px;
}

/* zasady plików przed startem kampanii */
.campaign-rules__list {
    margin: 10px 0;
    padding-left: 20px;
}

.campaign-rules__list li + li {
    margin-top: 6px;
}

.campaign-rules__terms {
    margin: 0;
}

.launch__form {
    display: grid;
    justify-items: center;
    gap: 12px;
}

/* Pliki kampanii (prowadzący) */
.files-summary {
    width: min(360px, 100%);
    margin: 0 auto 16px 0;
}

.files__all {
    margin: 0 0 8px;
    font-size: .95rem;
}

.files__list {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.files__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
}

.files__thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 40px;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: .75rem;
    color: var(--ink-muted);
    background: var(--media-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.files__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.files__thumb--doc {
    background: var(--parchment-dark);
}

.files__text {
    display: grid;
    min-width: 0;
}

.files__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files__meta {
    font-size: .9rem;
    color: var(--ink-muted);
}

/* Open RPG: okienko hotspotu (po kliknięciu pinezki) */
.rpg-board-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rpg-card {
    display: grid;
    gap: 12px;
}

.rpg-card__description {
    margin: 0;
}

.rpg-card__event {
    padding: 8px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
}

.rpg-card__event > summary {
    font-family: var(--font-display);
    cursor: pointer;
}

.rpg-card__event p {
    margin: 8px 0;
}

.rpg-card__event.rpg-event--secret {
    border-left-style: dashed;
    border-left-color: var(--ink-muted);
}

.rpg-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rpg-card__actions p {
    margin: 0;
}

.rpg-card__new-event[open] > .form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

/* Open RPG: postać gracza w lewym panelu ekranu kampanii */
.rpg-panel-hero__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rpg-panel-hero .rpg-token {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

.rpg-panel-hero__place {
    margin: 8px 0;
    font-size: .95rem;
}

.rpg-panel-hero__travel {
    margin: 0 0 8px;
    font-size: .9rem;
    color: var(--parchment-dark);
}

.rpg-panel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

.rpg-panel-stats li {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px dotted rgba(var(--border-rgb), .5);
}

/* dziennik RPG: nazwa zakładki do zmiany – ołówek i przerywane podkreślenie */
.rpg-book__rename {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rpg-book__rename .rpg-book__title {
    flex: 1;
    border-bottom: 1px dashed transparent;
}

.rpg-book__rename .rpg-book__title:hover,
.rpg-book__rename .rpg-book__title:focus {
    border-bottom-color: var(--rpg-ink);
}

.rpg-book__rename-icon {
    flex: none;
    font-family: 'Caveat', var(--font-body);
    font-size: 1.2rem;
    color: var(--rpg-ink);
    opacity: .7;
    cursor: pointer;
}

.rpg-book__rename-icon:hover {
    opacity: 1;
}

/* dziennik RPG: strony zakładki – ‹ strona 3 / 20 › */
.rpg-book__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: var(--line);
    font-family: 'Caveat', var(--font-body);
    color: var(--rpg-ink);
}

.rpg-book__arrow {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--rpg-ink);
    text-decoration: none;
    border: 1px solid rgba(var(--border-rgb), .6);
    border-radius: 50%;
}

.rpg-book__arrow:hover,
.rpg-book__arrow:focus-visible {
    color: var(--rpg-ink);
    background: rgba(var(--rpg-tape-rgb), .6);
    text-decoration: none;
}

.rpg-book__arrow.is-disabled {
    opacity: .3;
}

.rpg-book__page-no {
    font-size: 1.5rem;
}

.rpg-book__new-page {
    margin: 0;
}

.rpg-book__new-form input {
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .rpg-book__new {
        position: relative;
    }

    .rpg-book__new-form {
        width: auto;
        min-width: 280px;
    }
}

/* Open RPG: wydarzenia hotspotu – data, zakończone, starsze zwinięte */
.rpg-events {
    display: grid;
    gap: 8px;
}

.rpg-event__date {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--ink-muted);
}

.rpg-event--ended {
    opacity: .75;
}

.rpg-event--ended > summary {
    text-decoration: line-through;
    text-decoration-color: rgba(var(--border-rgb), .8);
}

.rpg-event__end-note {
    font-style: italic;
}

.rpg-event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.rpg-events__older > summary {
    color: var(--ink-muted);
    cursor: pointer;
}

.rpg-events__older[open] {
    display: grid;
    gap: 8px;
}

/* Open RPG: Limbo – postacie bez miejsca w panelu MG */
.rpg-limbo__list {
    display: grid;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.rpg-limbo__list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Zakładka „Zasady” kampanii (Vanguard, Deadzone, KoW, KK) – ściąga z mechanizmów kampanii: pojęcie i opis, punktory,
   tabele. Odstępy i cienkie linie między pojęciami, punktami i podrozdziałami – bez nich opisy zlewały się w jeden blok
   i nie było wiadomo, co czego dotyczy (właściciel, 23.10.2026: „dodać jakieś entery czy linie”). */
.rules__list {
    display: grid;
    gap: 0 16px;
    margin: 0 0 18px;
}

.rules__list dt {
    padding-top: 10px;
    font-family: var(--font-display);
    color: var(--ink);
}

.rules__list dd {
    margin: 0;
    padding: 2px 0 10px;
    border-bottom: 1px solid var(--parchment-dark);
}

@media (min-width: 768px) {
    .rules__list {
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    }

    /* pojęcie i opis w jednym wierszu – linia pod całym wierszem */
    .rules__list dt,
    .rules__list dd {
        padding: 10px 0;
        border-bottom: 1px solid var(--parchment-dark);
    }
}

.rules__bullets,
.rules [role="tabpanel"] > ul,
.rules [role="tabpanel"] > ol,
section.rules > ul,
section.rules > ol {
    margin: 0 0 18px;
    padding-left: 1.4rem;
}

/* zwykłe punkty: oddech między nimi */
.rules__bullets li + li,
.rules [role="tabpanel"] > ul > li + li,
section.rules > ul > li + li {
    margin-top: 8px;
}

/* listy numerowane (fazy rundy z warunkiem przejścia pod spodem) – każdy krok oddzielony linią */
.rules [role="tabpanel"] > ol > li + li,
section.rules > ol > li + li,
ol.rules__bullets > li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--parchment-dark);
}

/* podrozdział w dziale („Pauza”, „Odejście gracza”, „Zdobywanie CR”…) – wyraźny odstęp i linia nad tytułem;
   w kampaniach KK każdy dział to osobna karta `.rules`, więc tam podrozdział jest bezpośrednio w karcie */
.rules [role="tabpanel"] > .shop-block__title,
section.rules > .shop-block__title {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.rules [role="tabpanel"] > p,
section.rules > p {
    margin: 0 0 12px;
}

.rules__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
}

.rules__table th,
.rules__table td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--parchment-dark);
}

.rules__table thead th {
    font-family: var(--font-display);
    font-size: .9rem;
    color: var(--ink-muted);
}

.rules__range {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rules__scenarios {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rules__scenarios li {
    display: grid;
    gap: 2px;
}

/* wielkość bitew tej kampanii w tabeli CR (Deadzone) */
.rules__table tr.is-current {
    background: rgba(var(--accent-rgb), .14);
}

/* Open Wargame – kreator „Zasoby”: wiersze zasobów dodatkowych i tabelki nagród oraz dochodu miejsc (pole na liczbę w komórce) */
.ow-extra__rows {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.ow-extra__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--parchment-dark);
    border-radius: 6px;
}

.ow-extra__row .form__row {
    margin: 0;
}

@media (min-width: 768px) {
    .ow-extra__row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    }
}

.ow-resource-table th,
.ow-resource-table td {
    text-align: left;
}

.ow-resource-table td input {
    width: 100%;
    min-width: 4.5em;
}

/* Open Wargame – zakładka „Oddziały”: stan zasobów gracza w jednym rzędzie */
.ow-balances {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* KALKULATORY (Narzędzia → Kalkulatory) – kalkulator walki Vanguard 1.5 ------------------------------------------ */
.calc [hidden] {
    display: none !important;
}

.calc-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.calc-mode__legend {
    float: left;
    margin-right: 6px;
    color: var(--ink-muted);
}

.calc-mode__option {
    position: relative;
}

.calc-mode__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.calc-mode__option > span {
    display: inline-block;
    padding: 6px 16px;
    font-family: var(--font-display);
    color: var(--ink);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
    cursor: pointer;
}

.calc-mode__option input:checked + span {
    color: var(--on-primary);
    background: var(--blood);
    border-color: var(--blood);
}

.calc-mode__option input:focus-visible + span {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* rodzaj ataku na górze strony, nad kartami – duże przyciski, na telefonie dwa w rzędzie */
.calc-modes {
    margin-bottom: 16px;
}

.calc-mode--top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.calc-mode--top .calc-mode__legend {
    grid-column: 1 / -1;
    float: none;
    margin: 0 0 4px;
    padding: 0;
}

.calc-mode--top .calc-mode__option > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 3rem;
    padding: 8px 12px;
    font-size: 1.1rem;
    text-align: center;
    border-width: 2px;
    border-radius: var(--radius);
}

.calc-mode__icon {
    font-size: 1.3rem;
    line-height: 1;
}

.calc-check__needs {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: .9rem;
    color: var(--warn-ink);
}

.calc-plan__inactive {
    margin: 10px 0;
    padding: 8px 12px;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border-radius: var(--radius);
}

.calc-plan__inactive p,
.calc-plan__inactive ul {
    margin: 0;
}

.calc-results__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    color: var(--heading);
}

.calc-results--pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.calc-results--pair .calc-dists {
    grid-template-columns: minmax(0, 1fr);
}

.calc-grid,
.calc-situation__cols,
.calc-dists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.calc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 12px;
}

.calc-field select,
.calc-field input {
    width: 100%;
}

.calc-model {
    display: flex;
    gap: 8px;
    align-items: center;
}

.calc-model select,
.calc-model .search-select {
    flex: 1;
    min-width: 0;
}

.calc-rules {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.calc-rules legend {
    margin-bottom: 6px;
    font-family: var(--font-display);
    color: var(--heading);
}

.calc-check__help {
    display: block;
    font-weight: 400;
    font-size: .9rem;
    color: var(--ink-muted);
}

.calc-submit {
    margin: 16px 0 0;
}

.calc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.calc-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.calc-tile__value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--heading);
}

.calc-tile--removed .calc-tile__value {
    color: var(--blood);
}

.calc-tile__label {
    color: var(--ink-muted);
}

.calc-summary {
    margin: 12px 0 18px;
}

.calc-dist {
    margin: 0;
}

.calc-dist__title {
    margin-bottom: 8px;
    font-family: var(--font-display);
    color: var(--heading);
}

.calc-dist__rows {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calc-dist__row {
    display: grid;
    grid-template-columns: 2ch minmax(0, 1fr) 6.5ch;
    gap: 8px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.calc-dist__k {
    text-align: right;
    color: var(--ink-muted);
}

.calc-dist__track {
    height: 14px;
}

.calc-dist__bar {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--blood);
    border-radius: 0 4px 4px 0;
}

.calc-dist__p {
    text-align: right;
}

.calc-plan {
    margin-top: 18px;
}

.calc-plan ul {
    margin: 0 0 10px;
    padding-left: 20px;
}

.calc-plan__applied {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (min-width: 768px) {
    .calc-grid,
    .calc-dists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* jedna widoczna kolumna (wręcz albo strzał) bierze całą szerokość, dwie – po połowie */
    .calc-situation__cols {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    /* kolumna bez nagłówka (Brace, kości za moc) zaczyna się na wysokości pól sąsiednich kolumn */
    .calc-situation__cols > .calc-rules--plain {
        padding-top: 2.1rem;
    }

    .calc-mode--top {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* dwa rodzaje ataku (Deadzone: strzał, szturm) */
    .calc-mode--top.calc-mode--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calc-results--pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* trzy rozkłady obok siebie (Deadzone: sukcesy obu stron i obrażenia) */
@media (min-width: 1024px) {
    .calc-dists--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Kolekcja (/collection) – spis oddziałów gracza; telefon: wszystko pod sobą, od 768 px wiersz w trzech kolumnach ===== */
.collection-filter {
    margin-top: 14px;
}

/* formularz oddziału: rzędy pól po 2 albo 3, pomoc pod polem – pola w rzędzie zaczynają się na tej samej wysokości */
.collection-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
}

@media (min-width: 768px) {
    .collection-form__grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-form__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.collection-field .form__help {
    margin: 4px 0 0;
    font-size: .9rem;
}

/* pole wyboru w rzędzie z polami: pusty wiersz na etykietę, kwadracik na wysokości pól */
.collection-field__spacer {
    display: none;
}

.collection-field__check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

@media (min-width: 768px) {
    .collection-field__spacer {
        display: block;
    }
}

/* „Już nie mam: Sprzedany – modele: 5 · …” pod kafelkami (dawne Zestawienie) */
/* KOLEKCJA → import z CSV */
.collection-import__rules {
    margin: 0 0 12px;
    padding-left: 18px;
}

.collection-import__table th,
.collection-import__table td {
    text-align: left;
}

.collection-import__table tr.is-bad td {
    background: rgba(var(--surface-shade-rgb), .12);
}

.collection-import__table .form__error {
    display: block;
}

.collection-import__warning {
    padding: 8px 12px;
    border-left: 4px solid var(--warn);
    background: rgba(var(--accent-rgb), .12);
}

.collection-import__skip {
    font-weight: 400;
}

/* KOLEKCJA → cel malowania i „kupka wstydu” */
.collection-goal__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 16px;
}

.collection-goal__form .form__row {
    flex: 1 1 160px;
    min-width: 0;
}

.collection-goal__form .btn {
    margin-bottom: 16px;
}

.collection-goal__body {
    margin-top: 12px;
}

.collection-goal__status {
    margin: 8px 0 12px;
}

.collection-goal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.collection-goal__change[open] {
    flex: 1 1 100%;
    order: 2;
}

.collection-goal__change[open] .collection-goal__form {
    margin-top: 12px;
}

.collection-goal__pile {
    margin: 12px 0 0;
    color: var(--ink-muted);
}

.collection-goal__history {
    margin: 8px 0 0;
    padding-left: 18px;
}

.collection-gone {
    margin: 10px 0 0;
    color: var(--ink-muted);
}

.collection-game__head {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

/* nazwa gry na środku i większa niż zwykły tytuł panelu (właściciel, 19.10.2026), a po obu stronach złota gwiazdka
   i kreska do brzegu karty zamiast kreski pod spodem – mocno widać, gdzie zaczyna się gra (właściciel, 24.10.2026: „ikonkę
   przed nazwą… gwiazdę? A może hr po prawej i lewej napisu”); w widoku pełnym i skróconym */
.collection-game__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 1.15rem;
    letter-spacing: .1em;
    text-align: center;
    border-bottom: 0;
}

.collection-game__title::before,
.collection-game__title::after {
    content: "✦";
    /* przy długiej nazwie na telefonie kreska nie może się skurczyć do kreseczki */
    flex: 1 1 3em;
    min-width: 3em;
    color: var(--gold);
    font-size: .85em;
    letter-spacing: 0;
}

.collection-game__title::before {
    text-align: right;
    background: linear-gradient(to right, transparent, var(--border) 60%) left center / calc(100% - 1.5em) 2px no-repeat;
}

.collection-game__title::after {
    text-align: left;
    background: linear-gradient(to left, transparent, var(--border) 60%) right center / calc(100% - 1.5em) 2px no-repeat;
}

.collection-compact .collection-game__title {
    margin-bottom: 10px;
}

.collection-game__sums,
.collection-faction__sums,
.collection-item__meta {
    margin: 0;
    color: var(--ink-muted);
}

.collection-faction {
    margin-top: 10px;
}

/* grupa w grze: nazwa pogrubiona, a liczby pod nią (właściciel, 19.10.2026) – od lewej, żeby odróżniała się od nazwy
   gry na środku (właściciel, 24.10.2026: „nazwy wyrównaj do lewej… odróżni się nazwa gry od frakcji”); strzałka stoi
   na marginesie, więc liczby zaczynają się równo z nazwą */
.collection-faction__summary {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 8px 12px 8px 34px;
    text-align: left;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

.collection-faction__summary::-webkit-details-marker {
    display: none;
}

.collection-faction__summary:hover,
.collection-faction__summary:focus-visible {
    border-color: var(--gold);
    outline: none;
}

.collection-faction__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* nazwa grupy ma się wyróżniać – pełny kolor tekstu, pogrubiona (właściciel, 19.10.2026) */
    color: var(--ink);
}

.collection-faction__arrow {
    position: absolute;
    left: 14px;
    display: inline-block;
    transition: transform .15s;
}

.collection-faction[open] .collection-faction__arrow {
    transform: rotate(90deg);
}

.collection-faction__sums {
    font-size: .9rem;
}

.collection-faction[open] > .collection-faction__summary {
    margin-bottom: 8px;
}

.collection-list {
    display: grid;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.collection-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--parchment-dark);
    border-radius: var(--radius);
    scroll-margin-top: 90px;
}

.collection-item.is-painted {
    border-left-color: var(--moss);
}

.collection-item.is-gone {
    opacity: .75;
}

.collection-item:target {
    border-color: var(--gold);
}

.collection-item__name,
.collection-item__notes {
    margin: 0;
}

.collection-item__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.collection-item__notes {
    margin-top: 4px;
    font-size: .9rem;
    font-style: italic;
    white-space: pre-line;
}

.collection-paint {
    display: grid;
    gap: 4px;
}

.collection-paint__text {
    font-size: .9rem;
    color: var(--ink-muted);
}

.collection-paint__text strong {
    color: var(--ink);
}

.collection-item__steps,
.collection-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.collection-item__steps form,
.collection-item__actions form {
    margin: 0;
}

.collection-item__actions {
    margin-top: 0;
}

/* Kolekcja – skrócony widok: wiersz na oddział (nazwa, modele, malowanie) */
.collection-compact__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* te same kolumny w każdej grze */
}

.collection-compact__table thead th:nth-child(2) {
    width: 4.5em;
}

.collection-compact__table thead th:nth-child(3) {
    width: 6.5em;
}

@media (min-width: 768px) {
    .collection-compact__table thead th:nth-child(2) {
        width: 6em;
    }

    .collection-compact__table thead th:nth-child(3) {
        width: 12em;
    }
}

/* słowo przy malowaniu („pomalowany”) tylko na szerszym ekranie – na telefonie wystarczą kropka i liczby */
.collection-compact__word {
    display: none;
}

@media (min-width: 768px) {
    .collection-compact__word {
        display: inline;
    }
}

.collection-compact__table td:first-child {
    overflow-wrap: anywhere;
}

.collection-compact__table th,
.collection-compact__table td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--border-rgb), .35);
}

.collection-compact__table thead th {
    font-weight: normal;
    color: var(--ink-muted);
}

.collection-compact__group th {
    padding-top: 12px;
    font-family: var(--font-display);
    color: var(--heading);
}

.collection-compact__num {
    text-align: right;
    white-space: nowrap;
}

.collection-compact__table td.collection-compact__num {
    text-align: right;
}

.collection-compact__table tr.is-gone td {
    color: var(--ink-muted);
    text-decoration: line-through;
}

.collection-compact__paint::before {
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-right: 6px;
    content: "";
    border: 1px solid var(--border);
    border-radius: 50%;
}

.collection-compact__paint--painted::before {
    background: var(--moss);
}

.collection-compact__paint--partial::before {
    background: linear-gradient(90deg, var(--moss) 50%, transparent 50%);
}

/* przełącznik widoku w karcie filtrów – po prawej; na telefonie przyciski łamią się do drugiego wiersza */
.collection-filter .skirmish-filter__actions {
    flex-wrap: wrap;
}

.collection-filter .bg-view-switch {
    flex: 0 0 auto;
    margin-left: auto;
}

.collection-filter .bg-view-switch__btn {
    text-decoration: none;
}

/* „Pokazano 8 z 10 oddziałów” nad listą */
.collection__shown {
    margin: 0 0 10px;
    color: var(--ink-muted);
}

.collection__none {
    text-align: center;
    color: var(--ink-muted);
}

.collection-danger {
    border-left: 4px solid var(--blood);
}

@media (min-width: 768px) {
    .collection-item {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .collection-item__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* „Usuń” i „Przywróć” siedzą w osobnych formularzach – ta sama szerokość co odnośniki obok */
    .collection-item__actions form,
    .collection-item__actions form .btn {
        width: 100%;
    }
}

/* ===== Licznik punktów i celów (/tools/score) – dwaj gracze obok siebie także na telefonie ===== */
.score__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.score__turn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score__turn-label {
    font-family: var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.score__turn-value {
    min-width: 2ch;
    font-family: var(--font-display);
    font-size: 1.6rem;
    text-align: center;
}

.score__players {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.score__player {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    border-top: 4px solid var(--gold);
}

.score__player--1 {
    border-top-color: var(--blood);
}

.score__name {
    width: 100%;
    text-align: center;
    font-weight: 700;
}

.score__total {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--heading);
}

.score__breakdown {
    margin: 0;
    font-size: .9rem;
    color: var(--ink-muted);
}

.score__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.score__add {
    min-width: 3rem;
}

.score__list {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

.score__objective {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem auto;
    gap: 6px;
    align-items: center;
}

.score__objective-name {
    grid-column: 1 / -1;
}

.score__holder {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    grid-column: 1 / 3;
}

.score__holder .btn {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .score__objective {
        grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1.4fr) auto;
    }

    .score__objective-name,
    .score__holder {
        grid-column: auto;
    }
}

/* wybrany właściciel celu – pełny kolor, żeby od razu było widać, kto trzyma cel */
.score__holder .btn.is-current {
    color: var(--on-primary);
    background: var(--blood);
    border-color: var(--blood);
}

/* OPEN BATTLE 3D ----------------------------------------------------------
   Stół 3D w przeglądarce (prototyp dla admina, 20.10.2026). Ekran stołu jest szerszy niż reszta serwisu (jak ekran
   kampanii z mapą) – stół potrzebuje miejsca; po prawej panel z armiami, kartą figurki, kośćmi i terenem.
   ------------------------------------------------------------------------- */

.container:has(> .ob) {
    max-width: 1500px;
}

.open-battles__steps {
    margin: 0 0 12px;
    padding-left: 1.4em;
}

/* kreator: profile gry jako kafelki z opisem */
.ob-profiles {
    border: 0;
    margin: 0;
    padding: 0;
}

.ob-profiles__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

@media (min-width: 768px) {
    .ob-profiles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ob-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--parchment-dark);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    cursor: pointer;
}

.ob-profile:has(input:checked) {
    border-left-color: var(--blood);
    box-shadow: 0 0 0 2px var(--gold-bright);
}

.ob-profile input {
    grid-row: 1 / 3;
    align-self: center;
}

.ob-profile__name {
    font-weight: bold;
    color: var(--ink);
}

.ob-profile__help {
    font-size: .9rem;
    color: var(--ink-muted);
}

/* stół */
.ob {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 1024px) {
    .ob {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }
}

.ob__stage {
    min-width: 0;
}

.ob__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ob__group {
    display: inline-flex;
    flex-wrap: wrap; /* na telefonie grupa przycisków łamie się, zamiast wychodzić poza ekran */
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.ob__tool {
    padding: 6px 10px;
    font: inherit;
    color: var(--parchment);
    background: linear-gradient(var(--btn-from), var(--btn-to));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.ob__tool.is-current {
    color: var(--on-primary);
    background: linear-gradient(var(--btn-primary-from), var(--btn-primary-to));
    border-color: var(--gold);
}

.ob__round strong {
    min-width: 5.5em;
    color: var(--parchment);
    text-align: center;
}

.ob__range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--parchment);
}

.ob__range input {
    width: 4.5em;
}

.ob__canvas {
    position: relative;
    height: 62vh;
    min-height: 320px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    touch-action: none;
}

@media (min-width: 1024px) {
    .ob__canvas {
        height: calc(100vh - 230px);
        min-height: 520px;
    }
}

.ob__canvas canvas {
    display: block;
}

.ob__canvas.is-measuring canvas {
    cursor: crosshair;
}

.ob__loading {
    padding: 24px;
    color: var(--parchment);
}

.ob__measure {
    position: absolute;
    padding: 2px 8px;
    font-weight: bold;
    color: var(--ink);
    white-space: nowrap;
    pointer-events: none;
    background: var(--gold-bright);
    border-radius: var(--radius);
    transform: translate(-50%, -140%);
}

.ob__hint {
    margin-top: 6px;
    color: var(--parchment-dark);
}

.ob__side {
    min-width: 0;
}

.ob__army {
    padding: 8px 0;
    border-bottom: 1px solid var(--parchment-dark);
}

.ob__army-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.ob__army-dot {
    width: 14px;
    height: 14px;
    background: var(--army-color);
    border: 2px solid var(--parchment);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ink-muted);
}

.ob__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.ob__units {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ob__unit {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 3px 4px;
    font: inherit;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.ob__unit:hover,
.ob__unit:focus-visible {
    background: var(--surface-soft);
}

.ob__unit.is-dead {
    color: var(--ink-muted);
    text-decoration: line-through;
}

.ob__symbol {
    flex: none;
}

.ob__add {
    margin-top: 12px;
}

.ob__add .btn {
    margin: 0 6px 6px 0;
}

.ob__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}

.ob__stats {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
}

.ob__stats th,
.ob__stats td {
    padding: 3px 4px;
    text-align: center;
    border: 1px solid var(--parchment-dark);
}

.ob__stats th {
    font-size: .85rem;
    color: var(--ink-muted);
}

.ob__symbol-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 6px;
    margin-top: 8px;
}

.ob__symbol-form input {
    width: 4em;
}

.ob__dice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.ob__dice-row label {
    display: grid;
    gap: 2px;
    flex: 1 1 80px;
}

.ob__log {
    max-height: 320px;
    margin: 0;
    padding-left: 1.6em;
    overflow-y: auto;
}

.ob__log li {
    padding: 2px 0;
}

.ob__terrain-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.ob__terrain-selected {
    margin: 8px 0;
    padding: 8px;
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
}

/* Open Battle – odległość miarki stoi obok linii (położenie liczy table.js), więc środek napisu = punkt */
.ob__measure--tape {
    transform: translate(-50%, -50%);
}

/* najbliższa odległość między oddziałami – inny kolor niż miarka (linia na stole jest błękitna) */
.ob__measure--gap {
    color: var(--ink);
    background: var(--parchment);
    border: 2px solid var(--gold);
}

/* karta scenariusza w panelu armii i w okienku (plansza rozstawienia Mantica) */
.ob__scenario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}

.ob__scenario-card {
    margin: 0;
}

.ob__scenario-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* dymek po najechaniu na figurkę: nazwa, armia i gracz, stan; pasek w kolorze gracza */
.ob__hover {
    position: absolute;
    z-index: 15;
    display: grid;
    gap: 2px;
    max-width: 280px;
    padding: 6px 10px;
    color: var(--parchment);
    pointer-events: none;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-left: 5px solid var(--army-color, var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.ob__hover span {
    color: var(--parchment-dark);
}

/* kolor gracza w legendzie armii */
.ob__colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}

.ob__swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--swatch);
    border: 2px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.ob__swatch.is-current {
    outline: 3px solid var(--gold-bright);
    outline-offset: 1px;
}

.ob__swatch:disabled {
    cursor: not-allowed;
    opacity: .25;
}

/* przycisk „Teren”, gdy teren jest zablokowany */
.ob__tool.is-locked::after {
    content: " 🔒";
}

/* linia wzroku – napis z wynikiem obok linii */
.ob__measure--los {
    color: var(--parchment);
    background: var(--bg-soft);
    border: 2px solid var(--moss);
}

/* okienko skrótów klawiszowych */
.ob__keys {
    width: 100%;
    border-collapse: collapse;
}

.ob__keys th,
.ob__keys td {
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(var(--border-rgb), .4);
}

.ob__keys th {
    white-space: nowrap;
}

.ob__keys kbd {
    padding: 1px 6px;
    font-family: inherit;
    background: var(--surface-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Open Battle – odległość przy przeciąganiu figurki (nad figurką, inny kolor niż miarka) */
.ob__measure--drag {
    color: var(--on-primary);
    background: var(--moss);
}

/* menu pod prawym przyciskiem myszy / po przytrzymaniu palca i pod przyciskiem „Kamera” (assets/js/open-battle/menu.js) */
.ob-menu {
    position: absolute;
    z-index: 20;
    min-width: 200px;
    max-width: min(280px, calc(100% - 8px));
    max-height: calc(100% - 8px);
    padding: 4px;
    overflow-y: auto;
    color: var(--parchment);
    background: var(--panel-bg);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.ob-menu__title {
    margin: 0;
    padding: 4px 8px;
    font-family: var(--font-display);
    color: var(--gold-bright);
    border-bottom: 1px solid var(--border);
}

.ob-menu__item {
    display: block;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.ob-menu__item:hover,
.ob-menu__item:focus-visible {
    color: var(--ink);
    background: var(--gold-bright);
    outline: none;
}

.ob-menu__item:disabled {
    opacity: .5;
    cursor: default;
}

.ob-menu__sub {
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.ob-menu__line {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* pole stołu: przytrzymanie palca nie zaznacza tekstu ani nie otwiera podpowiedzi przeglądarki */
.ob__canvas {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}


/* treść okienek stołu – układ */
.ob__modal {
    display: grid;
    gap: 12px;
}

.ob__modal .form,
.ob__sample {
    display: grid;
    gap: 8px;
}

.ob__modal label {
    display: grid;
    gap: 2px;
}

.ob__modal .form__check-label {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ukryte części okienek (formularz innego rodzaju kości, pola własnej tacki) – po regułach układu, żeby je przebić */
.ob__modal [hidden] {
    display: none;
}

.ob__dice-result {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ob__dice-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
}

.ob__die {
    display: inline-grid;
    place-items: center;
    min-width: 2.2em;
    height: 2.2em;
    padding: 0 4px;
    font-weight: bold;
    color: var(--ink);
    background: var(--surface-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

button.ob__die {
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

/* kość wybrana do przerzutu */
.ob__die.is-picked {
    outline: 3px solid var(--blood);
    outline-offset: 2px;
}

/* kości mocy Vanguarda (liczba mieczy) i kości dowodzenia Deadzone (symbol) */
.ob__die--red {
    color: var(--on-primary);
    background: var(--vg-die-red);
}

.ob__die--white {
    color: var(--vg-die-sword-dark);
    background: var(--vg-die-white);
}

.ob__die--blue {
    color: var(--on-primary);
    background: var(--vg-die-blue);
}

.ob__die--command {
    padding: 0 8px;
    color: var(--dz-die-ink);
    background: var(--dz-die);
}

/* znaczniki na karcie figurki: włączony stan to wciśnięty przycisk */
.ob__marks .btn[aria-pressed="true"] {
    color: var(--on-primary);
    background: var(--moss);
    border-color: var(--moss);
}

.ob__die.is-success {
    color: var(--on-primary);
    background: var(--moss);
    border-color: var(--moss);
}

.ob__players {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ob__players li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ob__inline-form {
    margin-left: auto;
}

.ob__link {
    flex: 1 1 200px;
    min-width: 0;
}

.ob__wounds strong {
    min-width: 6em;
    text-align: center;
}

/* lista partii: wiersz-karta i obok „Wróć do gry” oraz usunięcie / opuszczenie */
.ob-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.ob-list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (min-width: 768px) {
    .ob-list__item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

/* Archiwum modeli Mantica (podgląd admina): kafelki modeli – zdjęcie (Vanguard, Deadzone), nazwa, rodzaj, punkty, „Do kolekcji” */
.models-archive__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

.models-archive__model {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    background: var(--surface-soft);
    border: 1px solid rgba(var(--border-rgb), .45);
    border-radius: var(--radius);
}

.models-archive__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-bottom: 4px;
    background: rgba(var(--surface-shade-rgb), .1);
    border-radius: var(--radius);
    overflow: hidden;
}

.models-archive__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.models-archive__no-image {
    font-size: 2rem;
    opacity: .35;
}

.models-archive__name {
    margin: 0;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.models-archive__meta,
.models-archive__points {
    margin: 0;
    color: var(--ink-muted);
}

.models-archive__points strong {
    color: var(--ink);
}

.models-archive__add {
    align-self: flex-start;
    margin-top: auto;
}

@media (min-width: 768px) {
    .models-archive__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .models-archive__grid--images {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* menu admina: kreska i pod nią rzeczy jeszcze niepokazane graczom (właściciel, 22.10.2026) */
.nav__subhead {
    margin-top: 6px;
    padding: 8px 16px 2px 32px;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--parchment-dark);
    border-top: 1px solid rgba(var(--accent-rgb), .35);
}

@media (min-width: 768px) {
    .nav__subhead {
        padding-left: 18px;
    }
}

/* builder Deadzone: tabela broni na karcie modelu (te same klocki co builder Vanguarda) */
.dz-weapons { width: 100%; }
.dz-weapons th, .dz-weapons td { text-align: left; }

/* turniej drużynowy: mecz drużyn w rundzie – nagłówek z wynikiem, gry jak zwykłe pary, formularz par kapitanów */
.team-match {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(var(--border-rgb), .45);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.team-match.is-me {
    border-color: var(--gold);
}

.team-match__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.team-match__score {
    font-weight: 700;
}

.team-match__tables {
    margin: 0 0 6px;
}

.team-match__pairs {
    margin-top: 8px;
}

.team-pairs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0 0 8px;
}

@media (min-width: 768px) {
    .team-pairs__row {
        grid-template-columns: 6rem minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }
}

/* tabele turnieju na telefonie: kolumna z nickiem / nazwą drużyny nie zwęża się do kilku liter (nicki łamały się w środku);
   reszta kolumn przewija się wewnątrz karty (.table-scroll) */
[data-standings] th[scope=row],
[data-team-standings] th[scope=row] {
    min-width: 9rem;
}

/* turniej drużynowy: formularz organizatora w karcie drużyny – z wcięciem i podpisem, oddzielony od wierszy graczy */
.team-edit {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-top: 1px dashed rgba(var(--border-rgb), .5);
}

.team-edit__title {
    margin: 0 0 6px;
    color: var(--ink-muted);
}

/* Nakładka na transmisję – ekran organizatora: podgląd 16:9 na szachownicy (przezroczyste tło jak w OBS); nakładka
   liczy rozmiary od szerokości okna, więc w ramce wygląda jak zmniejszony obraz transmisji */
.overlay-preview {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px solid var(--border);
    background: repeating-conic-gradient(var(--overlay-check-a) 0 25%, var(--overlay-check-b) 0 50%) 0 0 / 24px 24px;
}

.overlay-preview iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.overlay-steps {
    margin: 0 0 16px;
    padding-left: 1.4em;
}

.overlay-steps li + li {
    margin-top: 4px;
}

/* wynik meczu drużyn w plakietce: długa nazwa drużyny łamie się, zamiast rozpychać ekran telefonu (QA 23.10.2026) */
.badge[data-team-outcome] {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Podsumowanie turnieju: podium – drugie miejsce z lewej, pierwsze na środku i wyżej, trzecie z prawej */
.tournament-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tournament-podium__place {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 6px;
    text-align: center;
    overflow-wrap: break-word;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* każdy element karty mieści się w jej szerokości – długi nick z jednego słowa łamie się, zamiast wchodzić na kartę obok
   (QA 23.10.2026: „ind_gracz4”, „Wojciech Brzęczyszczykiewicz”) */
.tournament-podium__place > * {
    min-width: 0;
    max-width: 100%;
}

.tournament-podium__name {
    overflow-wrap: anywhere;
    font-size: .85rem;
}

@media (min-width: 768px) {
    .tournament-podium__name {
        font-size: 1rem;
    }
}

.tournament-podium__place--1 {
    order: 2;
    padding-top: 24px;
}

.tournament-podium__place--2 {
    order: 1;
}

.tournament-podium__place--3 {
    order: 3;
}

.tournament-podium__medal {
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--on-podium);
    background: var(--podium-3);
}

.tournament-podium__place--1 .tournament-podium__medal {
    width: 3em;
    height: 3em;
    background: var(--podium-1);
}

.tournament-podium__place--2 .tournament-podium__medal {
    background: var(--podium-2);
}

.tournament-podium__name {
    font-family: var(--font-display);
    color: var(--heading);
}

.tournament-podium__points {
    font-weight: 600;
}

/* na telefonie trzy wąskie kolumny – długa nazwa frakcji („Bazyliańczycy”) łamała się w środku słowa */
.tournament-podium__detail {
    font-size: .85rem;
}

@media (min-width: 768px) {
    .tournament-podium__detail {
        font-size: 1rem;
    }
}

/* ciekawostki podsumowania – każda w osobnym wierszu */
.tournament-facts {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tournament-summary__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 8px 0 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Liga sezonowa: termin pary w miejscu stołu, zaległy na czerwono; formularze terminu (data + przycisk) w jednym rzędzie */
.tournament-match__deadline {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink-muted);
    white-space: nowrap;
}

.tournament-match__deadline.is-overdue {
    color: var(--blood);
    font-weight: 700;
}

.tournament-round__deadline {
    margin: 4px 0 10px;
}

.tournament-round__deadline p {
    margin: 0 0 6px;
}

.tournament-match__league {
    margin: 0 0 12px;
}

.tournament-match__league[open] {
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}

.tournament-match__extend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
}

.tournament-match__extend input[type="date"] {
    width: auto;
    max-width: 100%;
}