/* Fonty: Alegreya, Alegreya SC, Alegreya Sans (SIL OFL 1.1, @fontsource). Tylko latin i latin-ext. */
@font-face {
  font-family: 'Alegreya SC';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/alegreya-sc-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya SC';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/alegreya-sc-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya SC';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-sc-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya SC';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-sc-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-sans-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-sans-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/alegreya-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/alegreya-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alegreya-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alegreya-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* styles/base.css */
/* ==========================================================================
   Proch i Korona / Powder & Crown: podstawa arkusza
   Tokeny (kolory, kroje, skala pisma, odstępy), reset, typografia bazowa,
   kontener, fokus, link „przejdź do treści”, ruch ograniczony, .sr-only.
   @font-face generuje build (tools/build.mjs) — tu go nie dodajemy.
   Katalog komponentów i zasady: docs/KOMPONENTY.md
   ========================================================================== */

:root {
  /* --- Paleta: jasne tło (pergamin) --- */
  --pergamin: #F2E8D0;          /* tło strony */
  --plansza: #E8DAB8;           /* pas „plansza” (ciemniejszy pergamin) */
  --karta: #F8F1E0;             /* tło karty */
  --tlo-obrazu: #EFE3C6;        /* tło pod portretem / sprite'em */
  --atrament: #22170C;          /* tekst główny */
  --tekst-2: #3B2C18;           /* tekst akapitów w kartach */
  --tekst-3: #5E4A2E;           /* tekst przygaszony, dopiski */
  --linia: #B79C6A;             /* linie działowe */
  --obrys: #CDB892;             /* obrys kart */
  --mosiadz: #74530F;           /* mosiężny tekst (małe kapitaliki) */
  --mosiadz-ozdoba: #B08A3A;    /* tylko ozdoby (ornament, szewrony) — nie na tekst */
  --karmin: #9E1426;            /* akcent: przyciski, etykiety sekcji, linki */
  --karmin-ciemny: #6E0C1A;     /* hover akcentu */
  --kremowy: #FBF3E2;           /* tekst na karminie i na przyciskach */

  /* --- Paleta: ciemne drewno --- */
  --drewno: #1E150D;            /* pas ciemny, nagłówek, stopka */
  --drewno-karta: #2B1F14;      /* karta na drewnie */
  --drewno-obrys: #5C4630;      /* obrys karty na drewnie, oś czasu */
  --drewno-linia: #3F3020;      /* linie działowe na drewnie */
  --na-ciemnym: #F2E8D0;        /* tekst główny na drewnie */
  --na-ciemnym-2: #E9DCBD;      /* akapity na drewnie */
  --na-ciemnym-3: #CDB892;      /* przygaszony tekst na drewnie */
  --na-ciemnym-4: #B9A47E;      /* najdrobniejszy tekst na drewnie (stopka) */
  --mosiadz-jasny: #D9AE55;     /* mosiądz na drewnie, bieżąca pozycja menu */
  --separator-ciemny: #6E5A3C;  /* ukośnik PL / EN (ozdoba) */

  /* --- Paleta: pas karminowy (zapisy, kontakt) --- */
  --karmin-pas: #7E0F1F;
  --karmin-pas-etykieta: #F0C9A0;
  --karmin-pas-tekst: #F6E4CF;
  --karmin-pas-dopisek: #F0D6BE;
  --karmin-pas-linia: #A8424F;

  /* --- Kolory nacji --- */
  --n-koalicja: #B21F2E;
  --n-dyktat: #2E5A3C;
  --n-protektorat: #27406E;
  --n-marchia: #C9A227;
  --n-porta: #7A2E8C;
  --n-arcyksiestwo: #D9822B;
  --n-familia: #1E7F7A;

  /* --- Kolory kontekstowe (komponenty czytają tylko te; .ciemne i .pas--karmin je przestawiają) --- */
  --c-tlo: var(--pergamin);
  --c-tekst: var(--atrament);
  --c-tekst-2: var(--tekst-2);
  --c-tekst-3: var(--tekst-3);
  --c-etykieta: var(--karmin);       /* „I. Rozgrywka” */
  --c-mosiadz: var(--mosiadz);       /* małe kapitaliki w kartach, daty */
  --c-akcent: var(--karmin);         /* cyfry, „Tab. I”, linki tekstowe */
  --c-linia: var(--linia);
  --c-obrys: var(--obrys);
  --c-karta: var(--karta);
  --c-tlo-obrazu: var(--tlo-obrazu);
  --c-link: var(--karmin);
  --c-link-hover: var(--karmin-ciemny);
  --c-fokus: var(--karmin);

  /* --- Kroje (pliki @font-face dokłada build) --- */
  --font-sc: 'Alegreya SC', Georgia, 'Times New Roman', serif;   /* tytuły, etykiety, cyfry */
  --font-serif: 'Alegreya', Georgia, 'Times New Roman', serif;   /* kursywa: leady, motta, cytaty */
  --font-sans: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif; /* tekst, przyciski, menu */

  /* --- Skala pisma: wartość przy 390 px → przy 1440 px (projekt Telefon → Main) --- */
  --fs-hero: clamp(3.25rem, 2.6929rem + 2.2857vw, 4.75rem);          /* 52 → 76  h1 na stronie głównej */
  --fs-h1: clamp(2.625rem, 2.1143rem + 2.0952vw, 4rem);              /* 42 → 64  h1 podstron */
  --fs-h2: clamp(2.375rem, 2.0036rem + 1.5238vw, 3.375rem);          /* 38 → 54  h2 sekcji */
  --fs-h2-cta: clamp(2.75rem, 2.3786rem + 1.5238vw, 3.75rem);        /* 44 → 60  h2 w pasie karminowym */
  --fs-h3-duzy: clamp(1.625rem, 1.4857rem + 0.5714vw, 2rem);         /* 26 → 32  „Kto kogo bije”, „Wojsko Koalicji” */
  --fs-h3: clamp(1.4375rem, 1.3214rem + 0.4762vw, 1.75rem);          /* 23 → 28  nazwa nacji w karcie */
  --fs-h3-maly: clamp(1.3125rem, 1.2429rem + 0.2857vw, 1.5rem);      /* 21 → 24  tytuł cechy / ciemnej karty */
  --fs-h4: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);         /* 19 → 22  nazwa jednostki, tytuł małej karty */
  --fs-liczba: clamp(2.5rem, 2.2214rem + 1.1429vw, 3.25rem);         /* 40 → 52  liczby w pasie liczb */
  --fs-lead: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);       /* 19 → 22  kursywa pod h1 */
  --fs-wstep: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);        /* 18 → 20  pierwszy akapit sekcji */
  --fs-duzy: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);      /* 17 → 19  akapit obok tytułu sekcji */
  --fs-tekst: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);          /* 16 → 17  tekst w kartach */
  --fs-maly: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);           /* 15 → 16  dopiski, listy w kartach */
  --fs-drobny: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);     /* 14 → 15  uwagi, stopka */
  --fs-etykieta: clamp(0.9375rem, 0.8911rem + 0.1905vw, 1.0625rem);  /* 15 → 17  „I. Rozgrywka” */
  --fs-etykieta-mala: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem); /* 13 → 14  „Superbroń”, klasa jednostki */
  --fs-nadtytul: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem);        /* 14 → 16  nadtytuł nad h1 */
  --fs-menu: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem);         /* 26 → 30  pozycje menu mobilnego */

  /* --- Odstępy --- */
  --sekcja-y: clamp(4rem, 2.7rem + 5.3333vw, 7.5rem);                /* 64 → 120 pionowy margines pasa */
  --sekcja-odstep: clamp(1.75rem, 1.1rem + 2.6667vw, 3.5rem);        /* 28 → 56  nagłówek sekcji → treść */
  --sekcja-odstep-duzy: clamp(2.5rem, 1.7571rem + 3.0476vw, 4.5rem); /* 40 → 72  między blokami w sekcji */
  --siatka-odstep: clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);        /* 16 → 24  odstęp w siatkach kart */
  --karta-pad: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem);        /* 20 → 28  wewnętrzny margines kart */
  --margines: 20px;                                                  /* boczny margines: 20 telefon, 40 tablet */
  --kontener-max: 1200px;
  --naglowek-h: 64px;                                                /* 64 telefon, 84 komputer */
  --promien: 4px;
  --cien-karty: 0 0 0 1px var(--c-obrys);                            /* obrys kart (box-shadow, nie border); powtórzony w .ciemne i .pas--karmin */
}

@media (min-width: 600px) {
  :root { --margines: 40px; }
}
@media (min-width: 960px) {
  :root { --naglowek-h: 84px; }
}

/* Kontekst ciemny: pas drewna, ciemne karty, nagłówek, stopka */
.ciemne,
.pas--drewno,
.karta--ciemna,
.karta-nacji--ciemna,
.karta-superbroni {
  --c-tlo: var(--drewno);
  --c-tekst: var(--na-ciemnym);
  --c-tekst-2: var(--na-ciemnym-2);
  --c-tekst-3: var(--na-ciemnym-3);
  --c-etykieta: var(--mosiadz-jasny);
  --c-mosiadz: var(--mosiadz-jasny);
  --c-akcent: var(--mosiadz-jasny);
  --c-linia: var(--drewno-obrys);
  --c-obrys: var(--drewno-obrys);
  --c-karta: var(--drewno-karta);
  --c-tlo-obrazu: var(--drewno-karta);
  --c-link: var(--na-ciemnym);
  --c-link-hover: var(--mosiadz-jasny);
  --c-fokus: var(--mosiadz-jasny);
  --cien-karty: 0 0 0 1px var(--c-obrys); /* var() w zmiennej liczy się tam, gdzie ją zadeklarowano, więc powtórka tutaj */
  color: var(--c-tekst);
}

/* Kontekst karminowy: pas zapisów i kontaktu */
.pas--karmin {
  --c-tlo: var(--karmin-pas);
  --c-tekst: var(--kremowy);
  --c-tekst-2: var(--karmin-pas-tekst);
  --c-tekst-3: var(--karmin-pas-dopisek);
  --c-etykieta: var(--karmin-pas-etykieta);
  --c-mosiadz: var(--karmin-pas-etykieta);
  --c-akcent: var(--kremowy);
  --c-linia: var(--karmin-pas-linia);
  --c-obrys: var(--karmin-pas-linia);
  --c-link: var(--kremowy);
  --c-link-hover: var(--karmin-pas-etykieta);
  --c-fokus: var(--kremowy);
  --cien-karty: 0 0 0 1px var(--c-obrys);
  color: var(--c-tekst);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
/* :where() = specyficzność 0, więc padding z klasy komponentu (np. .nacje-lista--przewijana) zawsze wygrywa */
:where(ol[role="list"], ul[role="list"]) { list-style: none; padding: 0; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

body {
  min-height: 100vh;
  background: var(--pergamin);
  color: var(--atrament);
  font-family: var(--font-sans);
  font-size: var(--fs-tekst);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sc);
  font-weight: 700;
  line-height: 1.05;
  color: inherit;
  text-wrap: balance;
}

/* Niemieckie, hiszpańskie i tureckie słowa bywają dłuższe niż kolumna nagłówka ("Flankenattacke"): przeglądarka dzieli je
   z łącznikiem według słownika języka strony, zamiast łamać w przypadkowym miejscu przez overflow-wrap */
:lang(de) :is(h1, h2, h3, h4, h5, h6),
:lang(es) :is(h1, h2, h3, h4, h5, h6),
:lang(tr) :is(h1, h2, h3, h4, h5, h6) { -webkit-hyphens: auto; hyphens: auto; }
p { text-wrap: pretty; }

a { color: var(--c-link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-link-hover); }

b, strong { font-weight: 700; }

/* ==========================================================================
   Dostępność: fokus, pomiń, sr-only, ruch
   ========================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--c-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* „Przejdź do treści”: widoczny dopiero po fokusie klawiaturą */
.pomin {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--atrament);
  color: var(--pergamin);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--promien);
  transform: translateY(-200%);
}
.pomin:focus,
.pomin:focus-visible {
  transform: none;
  color: var(--pergamin);
  outline: 3px solid var(--mosiadz-jasny);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Kontener i widoczność zależna od szerokości
   ========================================================================== */
.kontener {
  width: min(100% - 2 * var(--margines), var(--kontener-max));
  margin-inline: auto;
}

/* Bez łamania wiersza: słowa z łącznikiem („Wi-Fi”, „XVIII-wiecznych”), które nie mogą się rozdzielić */
.bez-lamania { white-space: nowrap; }

/* Treść tylko na telefonie (< 600 px) albo tylko od tabletu (≥ 600 px) */
@media (min-width: 600px) { .tylko-telefon { display: none !important; } }
@media (max-width: 599.98px) { .od-tabletu { display: none !important; } }

/* styles/components.css */
/* ==========================================================================
   Proch i Korona / Powder & Crown: wspólne komponenty
   Każdy komponent czyta kolory kontekstowe --c-* z base.css, więc ten sam
   znacznik działa na pergaminie, na drewnie (.ciemne / .pas--drewno)
   i na karminie (.pas--karmin). Opis, przykłady i zasady: docs/KOMPONENTY.md

   Punkty przełamania (min-width):
     600  tablet: margines 40 px, siatki 2-kolumnowe, przyciski w rzędzie
     768  duży tablet: hero z kartą na obrazie, pas liczb w 4 kolumnach
     960  komputer: pełny nagłówek zamiast menu mobilnego
     1024 siatka 12 kolumn (.siatka + .kol-N/.od-N), siatki 3–4 kolumnowe

   Spis:
     1. Układ: .pas, .stos, .siatka, .siatka-kart
     2. Typografia sekcji: .etykieta, .tytul-sekcji, .ornament, .lead, .glowka
     3. Przyciski i linki: .przycisk, .przyciski, .link-strzalka
     4. Nagłówek strony i menu mobilne: .naglowek, .marka, .menu, .wybor-jezyka
     5. Stopka: .stopka
     6. Hero strony głównej: .hero, .plakietka
     7. Wstęp podstrony: .wstep-strony, .tytul-strony
     8. Karty: .karta, .etykieta-mala, .kto-kogo
     9. Pas liczb: .liczby
    10. Lista cech z ikonami: .cechy, .cecha
    11. Rycina z podpisem „Tab.”: .rycina
    12. Nacje: .nacja--*, .probka, .karta-nacji, .nacje-lista
    13. Jednostki: .siatka-jednostek, .karta-jednostki, .znacznik-cechy, .karta-superbroni, .naglowek-listy
    14. Oś czasu: .os-czasu
    15. Tabela faktów: .fakty, .tabela, .klawisz
    16. FAQ: .pytania, .pytanie
    17. Znaczniki i chipy: .znacznik, .znaczniki, .chipy, .chip, .pasek-nacji
    18. Poprzednia / następna: .sasiedzi, .karta-sasiada
    19. Etapy wydania: .etapy
    20. Pas wezwania i formularz zapisów: .wezwanie, .formularz
    21. Drobne: .uwaga, .pole-zastepcze
    22. Powiększenie zrzutu (okno z main.js): .powieksz, .powiekszenie
   ========================================================================== */

[hidden] { display: none !important; }

/* ==========================================================================
   1. Układ
   ========================================================================== */

/* Pas sekcji na całą szerokość; treść w środku zawsze w .kontener */
.pas {
  padding-block: var(--sekcja-y);
  background: var(--pergamin);
  color: var(--c-tekst);
}
.pas--plansza { background: var(--plansza); border-top: 1px solid var(--linia); }
.pas--drewno { background: var(--drewno); }
.pas--karmin { background: var(--karmin-pas); padding-block: clamp(4rem, 3.2571rem + 3.0476vw, 6rem); } /* 64 → 96 */
.pas--linia { border-top: 1px solid var(--linia); }         /* pergamin z linią u góry */
.pas--bez-gory { padding-top: 0; }
.pas--bez-dolu { padding-bottom: 0; }

/* Pionowy stos bloków w sekcji */
.stos { display: flex; flex-direction: column; gap: var(--sekcja-odstep); }
.stos--duzy { gap: var(--sekcja-odstep-duzy); }
.stos--maly { gap: clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem); } /* 16 → 24 */
.stos > * { min-width: 0; }

/* Siatka 12 kolumn od 1024 px; niżej wszystko w jednej kolumnie */
.siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 24px;
}
.siatka > * { min-width: 0; }
@media (min-width: 1024px) {
  .siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .siatka--dol { align-items: end; }
  .siatka--srodek { align-items: center; }
  .siatka--gora { align-items: start; }
  .kol-3 { grid-column-end: span 3; }
  .kol-4 { grid-column-end: span 4; }
  .kol-5 { grid-column-end: span 5; }
  .kol-6 { grid-column-end: span 6; }
  .kol-7 { grid-column-end: span 7; }
  .kol-8 { grid-column-end: span 8; }
  .kol-12 { grid-column: 1 / -1; }
  .od-5 { grid-column-start: 5; }
  .od-6 { grid-column-start: 6; }
  .od-7 { grid-column-start: 7; }
  .od-8 { grid-column-start: 8; }
  .od-9 { grid-column-start: 9; }
  .od-10 { grid-column-start: 10; }
}

/* Siatka równych kart: --2 (1 → 2 od 768), --3 (1 → 3 od 1024), --4 (1 → 2 od 600 → 4 od 1024) */
.siatka-kart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--siatka-odstep);
}
.siatka-kart > * { min-width: 0; }
ul.siatka-kart, ol.siatka-kart { list-style: none; padding: 0; }
@media (min-width: 600px) {
  .siatka-kart--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .siatka-kart--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .siatka-kart { gap: 24px; }
  .siatka-kart--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .siatka-kart--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   2. Typografia sekcji
   ========================================================================== */

/* Etykieta sekcji w kapitalikach: „I. Rozgrywka”, „Zamknięte testy” */
.etykieta {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-etykieta);
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--c-etykieta);
}

.tytul-sekcji { font-size: var(--fs-h2); line-height: 1.02; }
.tytul-podsekcji { font-size: var(--fs-h3-duzy); line-height: 1.1; }

/* Ozdobnik pod tytułem: dwie kreski i romb (SVG w znaczniku, kolor tutaj) */
.ornament { width: 140px; height: 14px; color: var(--mosiadz-ozdoba); flex-shrink: 0; }

/* Kursywa pod tytułem strony / w hero */
.lead { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.45; }
/* Wyróżnione zdanie kursywą (np. „W grze armia koronna i Sasi stają do walki.”) */
.wyroznienie { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3-maly); line-height: 1.5; color: var(--c-tekst); }
/* Pierwszy akapit sekcji (20 px) i akapit obok tytułu (19 px) */
.wstep { font-size: var(--fs-wstep); line-height: 1.55; }
.opis-sekcji { font-size: var(--fs-duzy); line-height: 1.55; }
.przygaszony { color: var(--c-tekst-3); }
.tekst-2 { color: var(--c-tekst-2); }

/* Nagłówek sekcji: etykieta, h2, ornament, akapit, link — w pionie */
.glowka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.25rem); /* 14 → 20 */
}
.glowka > * { max-width: 100%; }

/* Nagłówek dzielony: tytuł po lewej (6 kol.), opis po prawej (5 kol., od 8.), wyrównane do dołu */
.glowka-dzielona {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.25rem);
}
.glowka-dzielona__opis { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 1024px) {
  .glowka-dzielona { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .glowka-dzielona > .glowka { grid-column: 1 / span 6; }
  .glowka-dzielona__opis { grid-column: 8 / span 5; }
}

/* ==========================================================================
   3. Przyciski i linki
   ========================================================================== */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--promien);
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.1018rem + 0.0952vw, 1.1875rem); /* 18 → 19 */
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.przycisk svg { flex-shrink: 0; width: 18px; height: 18px; }

/* Główny: karmin, kremowy tekst */
.przycisk--glowny { background: var(--karmin); border-color: var(--karmin); color: var(--kremowy); }
.przycisk--glowny:hover { background: var(--karmin-ciemny); border-color: var(--karmin-ciemny); color: var(--kremowy); }
/* Obrys w kolorze tekstu: na pergaminie atrament, na drewnie jasny (sam się przestawia w .ciemne) */
.przycisk--obrys { border-color: var(--c-tekst); color: var(--c-tekst); padding-inline: 24px; }
.przycisk--obrys:hover { background: var(--c-tekst); color: var(--c-tlo); }
/* Ciemny z jasnym obrysem: na pasie karminowym („Zapisz mnie”, „Przejdź do zapisów”) */
.przycisk--ciemny { background: var(--drewno); border-color: var(--kremowy); color: var(--kremowy); }
.przycisk--ciemny:hover { background: var(--kremowy); color: var(--drewno); }
/* Rozmiary */
.przycisk--maly { min-height: 44px; padding: 6px 22px; font-size: 1.0625rem; }   /* nagłówek: 44 px, 17 px */
.przycisk--sredni { min-height: 48px; padding: 6px 22px; font-size: 1.0625rem; } /* „Zobacz wojsko”: 48 px */
.przycisk--duzy { min-height: 56px; padding: 8px 26px; font-size: 1.125rem; }    /* pas karminowy: 56 px */
.przycisk--pelny { width: 100%; }
/* Niedostępne jeszcze (np. „Pobierz paczkę [wkrótce]”): <span>, nie link */
.przycisk--nieaktywny,
.przycisk--nieaktywny:hover {
  background: transparent;
  border: 1.5px dashed var(--c-linia);
  color: var(--c-tekst-3);
  cursor: default;
}

/* Grupa przycisków: na telefonie jeden pod drugim na całą szerokość */
.przyciski { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
@media (min-width: 600px) {
  .przyciski { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
}

/* Link tekstowy ze strzałką. Domyślnie: atrament z kreską (na drewnie: jasny z mosiężną kreską) */
.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  align-self: flex-start;
  border-bottom: 1.5px solid currentColor;
  color: var(--c-tekst);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.3;
  text-decoration: none;
}
.link-strzalka svg { flex-shrink: 0; width: 18px; height: 18px; }
.link-strzalka:hover { color: var(--c-link-hover); }
.ciemne .link-strzalka, .pas--drewno .link-strzalka { border-bottom-color: var(--mosiadz-jasny); }
/* Bez kreski, w kolorze akcentu: „Czytaj wpis”, „Więcej o rozgrywce” */
.link-strzalka--akcent { border-bottom: 0; color: var(--c-akcent); }
/* Bez kreski, w kolorze tekstu: „Wszystkie nacje” (strzałka w lewo przed tekstem) */
.link-strzalka--bez-kreski { border-bottom: 0; }
/* Jeszcze niedostępne: <span class="link-strzalka link-strzalka--nieaktywny">Czytaj dalej [wkrótce]</span> */
.link-strzalka--nieaktywny,
.link-strzalka--nieaktywny:hover { border-bottom: 0; color: var(--c-tekst-3); font-weight: 500; cursor: default; }

/* ==========================================================================
   4. Nagłówek strony i menu mobilne
   Telefon/tablet (< 960): pasek 64 px (marka, język, przycisk menu); menu
   otwiera się na cały ekran (.naglowek--otwarte). Bez JS menu jest zwykłym
   rzędem linków pod paskiem. Komputer (≥ 960): marka | menu | język + CTA.
   ========================================================================== */
.naglowek {
  position: relative;
  z-index: 50;
  background: var(--drewno);
  color: var(--na-ciemnym);
}
.naglowek__wnetrze {
  width: min(100% - 2 * var(--margines), var(--kontener-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marka mobilne" "menu menu";
  align-items: center;
  column-gap: 12px;
}

.marka {
  grid-area: marka;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--naglowek-h);
  color: var(--na-ciemnym);
  text-decoration: none;
}
.marka:hover { color: var(--na-ciemnym); }
.marka__ikona { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.marka__nazwy { display: flex; flex-direction: column; gap: 2px; }
.marka__nazwa { font-family: var(--font-sc); font-weight: 700; font-size: 1.3125rem; line-height: 1; white-space: nowrap; }
/* „Powder & Crown” obok wyboru języka i menu: na 360 px pełny rozmiar dochodził do ikony globu */
@media (max-width: 374.98px) { .marka__nazwa { font-size: 1.125rem; } }
@media (max-width: 339.98px) { .marka__nazwa { font-size: 0.9375rem; } }
.marka__podtytul {
  display: none;
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--na-ciemnym-3);
  white-space: nowrap;
}

.naglowek__mobilne {
  grid-area: mobilne;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: -10px; /* ikona menu w projekcie stoi 22 px od krawędzi */
}
.naglowek__menu {
  display: none; /* bez JS niepotrzebny: menu jest widoczne jako rząd linków */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--promien);
  background: transparent;
  color: var(--na-ciemnym);
}
.js .naglowek__menu { display: inline-flex; }
.naglowek__menu .ikona-zamknij { display: none; }
.naglowek__menu[aria-expanded="true"] .ikona-otworz { display: none; }
.naglowek__menu[aria-expanded="true"] .ikona-zamknij { display: block; }

.menu { grid-area: menu; min-width: 0; }
.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}
.menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--na-ciemnym);
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
}
.menu__link:hover { color: var(--mosiadz-jasny); }
.menu__link[aria-current] { color: var(--mosiadz-jasny); }
.menu__szewron { display: none; flex-shrink: 0; color: var(--mosiadz-ozdoba); }
.menu__link[aria-current] .menu__szewron { color: currentColor; }
.menu__dlugo { display: none; }           /* „FAQ” w rzędzie linków, „Pytania i odpowiedzi” w otwartym menu */
.menu__dodatkowe, .menu__stopka { display: none; }
.menu__dodatkowe { margin: 0; padding: 18px 0 0; list-style: none; flex-direction: column; }
.menu__link-dodatkowy {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.125rem;
  color: var(--na-ciemnym-2);
  text-decoration: none;
}
.menu__link-dodatkowy:hover, .menu__link-dodatkowy[aria-current] { color: var(--mosiadz-jasny); }
.menu__stopka { flex-direction: column; gap: 16px; margin-top: auto; padding-top: 20px; }
.menu__jezyki {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--drewno-obrys);
  border: 1px solid var(--drewno-obrys);
  border-radius: var(--promien);
  overflow: hidden;
}
.menu__jezyki a {
  display: flex;
  flex: 1 1 30%;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--drewno);
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: 1rem;
  color: var(--na-ciemnym-3);
  text-decoration: none;
}
.menu__jezyki a[aria-current] { background: var(--drewno-karta); color: var(--mosiadz-jasny); font-weight: 700; }
.menu__jezyki a:hover { color: var(--mosiadz-jasny); }
.menu__jezyki a:focus-visible { outline-offset: -3px; }
.menu__dopisek { font-size: 0.875rem; text-align: center; color: var(--na-ciemnym-4); }

.naglowek__akcje { display: none; }

/* Z JS: menu schowane za przyciskiem, dopóki się go nie otworzy (tylko < 960 px) */
@media (max-width: 959.98px) {
  .js .menu { display: none; }
  .js .naglowek--otwarte .menu { display: flex; }

  .naglowek--otwarte {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .naglowek--otwarte .naglowek__mobilne .wybor-jezyka { visibility: hidden; }
  .naglowek--otwarte .menu {
    flex-direction: column;
    min-height: calc(100vh - var(--naglowek-h));
    min-height: calc(100dvh - var(--naglowek-h));
    margin-inline: calc(-1 * var(--margines));
    padding: 16px var(--margines) 32px;
    border-top: 1px solid var(--drewno-linia);
  }
  .naglowek--otwarte .menu__lista { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; }
  .naglowek--otwarte .menu__link {
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    border-bottom: 1px solid var(--drewno-linia);
    font-family: var(--font-sc);
    font-weight: 700;
    font-size: var(--fs-menu);
    line-height: 1.1;
  }
  .naglowek--otwarte .menu__szewron { display: block; }
  .naglowek--otwarte .menu__krotko { display: none; }
  .naglowek--otwarte .menu__dlugo { display: inline; }
  .naglowek--otwarte .menu__dodatkowe,
  .naglowek--otwarte .menu__stopka { display: flex; }
  .naglowek--otwarte .menu__link:focus-visible,
  .naglowek--otwarte .menu__link-dodatkowy:focus-visible { outline-offset: -3px; }
  html.menu-otwarte { overflow: hidden; }
}

/* Komputer */
@media (min-width: 960px) {
  .naglowek__wnetrze {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marka menu akcje";
    column-gap: clamp(1rem, -1.4rem + 4vw, 1.5rem); /* 16 → 24 */
  }
  .marka { gap: 14px; }
  .marka__ikona { width: 48px; height: 48px; border-radius: 10px; }
  .marka__nazwa { font-size: 1.625rem; }
  .marka__podtytul { display: block; }
  .naglowek__mobilne { display: none; }
  .menu { justify-self: center; }
  .menu__lista { flex-wrap: nowrap; gap: 0 clamp(1.125rem, -0.675rem + 3vw, 2.25rem); padding: 0; } /* 18 → 36 */
  .menu__link { font-size: 1.125rem; white-space: nowrap; }
  .naglowek__akcje { grid-area: akcje; display: flex; align-items: center; gap: clamp(0.75rem, -1.05rem + 3vw, 1.5rem); }
}
/* 960-1199 px: menu ma szesc pozycji (z Galeria), wiec marka i linki sa nieco mniejsze, zeby sie nie stykaly */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .marka__nazwa { font-size: 1.375rem; }
  .menu__lista { gap: 0 clamp(0.75rem, -0.95rem + 2.6vw, 1.25rem); }
  .menu__link { font-size: 1rem; }
}

/* Wybór języka (nagłówek, pasek telefonu i komputer): <details> z kodem bieżącego języka i listą pełnych nazw.
   Działa bez JS; main.js zamyka listę klikiem obok i klawiszem Esc. Generuje go build (tools/build.mjs: wyborJezyka). */
.wybor-jezyka { position: relative; }
.wybor-jezyka__przycisk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: var(--promien);
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: 1rem;
  color: var(--mosiadz-jasny);
  list-style: none;
  cursor: pointer;
}
.wybor-jezyka__przycisk::-webkit-details-marker { display: none; }
.wybor-jezyka__przycisk:hover { color: var(--na-ciemnym); }
.wybor-jezyka__przycisk svg { flex-shrink: 0; }
.wybor-jezyka__szewron { transition: transform 0.15s ease; }
.wybor-jezyka[open] .wybor-jezyka__szewron { transform: rotate(180deg); }
.wybor-jezyka__lista {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 120;
  min-width: 176px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--drewno-karta);
  border: 1px solid var(--drewno-obrys);
  border-radius: var(--promien);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.wybor-jezyka__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 1rem;
  color: var(--na-ciemnym-2);
  text-decoration: none;
}
.wybor-jezyka__lista a:hover { color: var(--mosiadz-jasny); background: rgba(255, 255, 255, 0.04); }
.wybor-jezyka__lista a[aria-current] { color: var(--mosiadz-jasny); font-weight: 700; }
.wybor-jezyka__lista a:focus-visible { outline-offset: -3px; }
.wybor-jezyka__kod { font-family: var(--font-sc); font-size: 0.875rem; color: var(--na-ciemnym-4); }
.naglowek__mobilne .wybor-jezyka__przycisk { padding: 0 6px; font-size: 0.9375rem; }

/* ==========================================================================
   5. Stopka
   ========================================================================== */
.stopka {
  background: var(--drewno);
  color: var(--na-ciemnym-2);
  padding-block: clamp(2.75rem, 2.4714rem + 1.1429vw, 3.5rem) clamp(2.25rem, 1.9714rem + 1.1429vw, 3rem); /* 44 → 56, 36 → 48 */
}
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.stopka__marka { display: flex; align-items: flex-start; gap: 14px; }
.stopka__ikona { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.stopka__opis-marki { display: flex; flex-direction: column; gap: 4px; }
.stopka__nazwa { font-family: var(--font-sc); font-weight: 700; font-size: clamp(1.3125rem, 1.2429rem + 0.2857vw, 1.5rem); line-height: 1.2; color: var(--na-ciemnym); }
.stopka__opis { font-size: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem); line-height: 1.5; color: var(--na-ciemnym-3); max-width: 42ch; }
.stopka__kolumny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stopka__kolumna { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stopka__tytul { font-family: var(--font-sc); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.1em; color: var(--mosiadz-jasny); }
.stopka__linki { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.stopka__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--na-ciemnym-2);
  font-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);
  line-height: 1.3;
  text-decoration: none;
}
.stopka__link:hover, .stopka__link[aria-current] { color: var(--mosiadz-jasny); }
.stopka__link--email { overflow-wrap: anywhere; }
/* adres lamie sie po "@" (<wbr> z {{site.emailWbr}}); ponizej 340 px domena miesci sie dopiero w mniejszym stopniu */
@media (max-width: 339px) { .stopka__link--email { font-size: 0.875rem; } }
.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--drewno-linia);
  font-size: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);
  color: var(--na-ciemnym-4);
}
@media (min-width: 960px) {
  .stopka__kolumna { gap: 10px; }
  .stopka__linki { gap: 10px; }
  .stopka__link { min-height: 0; }
}
@media (min-width: 1024px) {
  .stopka__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .stopka__marka { grid-column: 1 / span 5; gap: 16px; }
  .stopka__ikona { width: 56px; height: 56px; border-radius: 12px; }
  .stopka__opis-marki { gap: 6px; }
  .stopka__kolumny { grid-column: 7 / span 6; column-gap: 24px; }
  .stopka__dol { grid-column: 1 / -1; padding-top: 24px; }
}

/* ==========================================================================
   6. Hero strony głównej
   Telefon: obraz 3:2 nad kartą. Od 768: obraz na całą sekcję, karta na nim.
   ========================================================================== */
.hero { position: relative; background: var(--pergamin); }
.hero__tlo { position: relative; background: var(--drewno-karta); }
.hero__obraz {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 52% 45%;
}
.hero__karta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px var(--margines) 36px;
  background: var(--pergamin);
  border-top: 6px solid var(--karmin);
}
.hero__nadtytul {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-nadtytul);
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--mosiadz);
}
.hero__tytul { font-size: var(--fs-hero); line-height: 0.95; color: var(--karmin); }
.hero__lead { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.45; }
.hero__karta .przyciski { padding-top: 4px; }
.hero__dopisek { font-size: var(--fs-maly); color: var(--tekst-3); text-align: center; }

@media (min-width: 600px) {
  .hero__dopisek { text-align: left; }
}
@media (min-width: 768px) {
  .hero {
    display: grid;
    align-items: end;
    min-height: clamp(35rem, 2.5rem + 50vw, 47.5rem); /* 560 (≤ 1040 px) → 760 przy 1440 */
    background: var(--drewno-karta);
    overflow: hidden;
  }
  .hero__tlo { position: absolute; inset: 0; }
  .hero__obraz { height: 100%; aspect-ratio: auto; object-position: 55% 50%; }
  .hero__wnetrze {
    position: relative;
    width: min(100% - 2 * var(--margines), var(--kontener-max));
    margin-inline: auto;
    padding-block: 96px clamp(3.5rem, 2.3rem + 2.5vw, 4.5rem); /* dół 56 → 72 */
  }
  .hero__karta {
    width: min(600px, 100%);
    gap: 20px;
    padding: 44px 48px 40px;
    box-shadow: 0 0 0 1px var(--mosiadz), 0 24px 60px rgba(20, 12, 6, 0.45);
  }
  .hero__nadtytul { letter-spacing: 0.12em; }
}

/* Plakietka na zdjęciu: „Zrzut z gry · Pola pod Kalinowem, Korona, lato” */
.plakietka {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(30, 21, 13, 0.85);
  color: var(--na-ciemnym-2);
  font-size: 0.8125rem;
  line-height: 1.35;
}
@media (min-width: 768px) {
  .plakietka { right: 24px; bottom: 24px; max-width: calc(100% - 48px); padding: 8px 14px; font-size: 0.875rem; }
}

/* ==========================================================================
   7. Wstęp podstrony (pas „plansza” z h1)
   ========================================================================== */
.wstep-strony {
  padding-block: clamp(3rem, 1.9786rem + 4.1905vw, 5.5rem) clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem); /* 48 → 88, 40 → 64 */
  background: var(--plansza);
  border-bottom: 1px solid var(--linia);
}
.tytul-strony { font-size: var(--fs-h1); line-height: 1; }
/* Boczna notka obok tytułu: kreska z lewej od 1024, kreska u góry niżej */
.wstep-strony__bok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--linia);
}
@media (min-width: 1024px) {
  .wstep-strony__bok { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--linia); }
}

/* ==========================================================================
   8. Karty
   ========================================================================== */
.karta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--c-karta);
  box-shadow: var(--cien-karty);
  color: var(--c-tekst);
}
@media (min-width: 600px) { .karta { padding: 24px; } }
.karta--duza { gap: 12px; padding: 22px; }
@media (min-width: 600px) { .karta--duza { padding: 32px; } }
/* Ciemna karta na jasnym pasie (np. Familia, superbroń) */
.karta--ciemna { background: var(--drewno); box-shadow: 0 0 0 1px var(--drewno-obrys); }
.karta__ikona { width: 30px; height: 30px; color: var(--c-mosiadz); flex-shrink: 0; }
.karta__tytul { font-size: var(--fs-h4); line-height: 1.15; }
.karta--duza .karta__tytul { font-size: var(--fs-h3-maly); }
.karta__tekst { font-size: var(--fs-tekst); line-height: 1.55; color: var(--c-tekst-2); }

/* Mała etykieta w kapitalikach: „Superbroń”, klasa jednostki, dt w tabelach */
.etykieta-mala {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-etykieta-mala);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--c-mosiadz);
}

/* „Kto kogo bije”: telefon = wiersze z kreską, od 600 = karty 2 × 2, od 1024 = 4 w rzędzie */
.kto-kogo { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.kto-kogo > .karta { gap: 4px; padding: 14px 0; background: none; box-shadow: none; border-top: 1px solid var(--c-obrys); }
.kto-kogo > .karta:last-child { border-bottom: 1px solid var(--c-obrys); }
@media (min-width: 600px) {
  .kto-kogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--siatka-odstep); }
  .kto-kogo > .karta,
  .kto-kogo > .karta:last-child { gap: 8px; padding: 24px; background: var(--c-karta); box-shadow: var(--cien-karty); border: 0; }
}
@media (min-width: 1024px) {
  .kto-kogo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* ==========================================================================
   9. Pas liczb
   ========================================================================== */
.liczby {
  padding-block: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem); /* 32 → 44 */
  background: var(--plansza);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}
.liczby__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.liczby__pozycja { display: flex; flex-direction: column; gap: 4px; }
.liczby__wartosc { font-family: var(--font-sc); font-weight: 700; font-size: var(--fs-liczba); line-height: 1; color: var(--karmin); }
.liczby__opis { font-weight: 700; font-size: var(--fs-duzy); line-height: 1.3; }
.liczby__dopisek { font-size: var(--fs-drobny); line-height: 1.4; color: var(--tekst-3); }
@media (min-width: 768px) {
  .liczby { border-top: 0; }
  .liczby__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .liczby__pozycja { gap: 6px; padding: 0 clamp(1rem, 0.2rem + 1.6vw, 1.75rem); }
  .liczby__pozycja:first-child { padding-left: 0; }
  .liczby__pozycja:last-child { padding-right: 0; }
  .liczby__pozycja + .liczby__pozycja { border-left: 1px solid var(--linia); }
  .liczby__dopisek { font-size: var(--fs-maly); }
}

/* ==========================================================================
   10. Lista cech z ikonami (2 × 2 od 600; na telefonie ikona z lewej)
   ========================================================================== */
.cechy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.cecha {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-content: start;
}
.cecha__ikona { grid-row: span 2; width: 30px; height: 30px; color: var(--c-tekst); }
.cecha__tytul { font-size: var(--fs-h3-maly); line-height: 1.15; }
.cecha__tekst { font-size: var(--fs-tekst); line-height: 1.5; color: var(--c-tekst-2); }
@media (min-width: 600px) {
  .cechy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .cecha { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .cecha__ikona { grid-row: auto; width: 32px; height: 32px; }
}

/* ==========================================================================
   11. Rycina: zrzut ekranu z podpisem „Tab. I”
   ========================================================================== */
.rycina { display: flex; flex-direction: column; gap: 10px; }
.rycina__obraz {
  width: 100%;
  height: auto;
  background: var(--c-tlo-obrazu);
  box-shadow: 0 0 0 1px var(--c-linia);
}
.rycina__podpis { font-size: var(--fs-drobny); line-height: 1.5; color: var(--c-tekst-2); }
.rycina__nr { font-family: var(--font-sc); font-weight: 700; color: var(--c-akcent); white-space: nowrap; }
.rycina__nr::after { content: "\00a0·"; font-family: var(--font-sans); font-weight: 400; color: var(--c-tekst-2); }
@media (max-width: 599.98px) {
  /* na telefonie kadr jak w projekcie Telefon: 7 : 4 */
  .rycina--kadr .rycina__obraz { aspect-ratio: 7 / 4; object-fit: cover; }
}
@media (min-width: 600px) {
  .rycina { gap: 14px; }
  .rycina__podpis { display: flex; align-items: baseline; gap: 16px; font-size: var(--fs-tekst); }
  .rycina__nr::after { content: none; }
  .rycina--mala .rycina__podpis { gap: 14px; font-size: var(--fs-maly); }
}

/* ==========================================================================
   12. Nacje
   ========================================================================== */
.nacja--koalicja { --nacja: var(--n-koalicja); }
.nacja--dyktat { --nacja: var(--n-dyktat); }
.nacja--protektorat { --nacja: var(--n-protektorat); }
.nacja--marchia { --nacja: var(--n-marchia); }
.nacja--porta { --nacja: var(--n-porta); }
.nacja--arcyksiestwo { --nacja: var(--n-arcyksiestwo); }
.nacja--familia { --nacja: var(--n-familia); }

/* Kwadracik w kolorze nacji (w chipach, listach, legendach) */
.probka { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; background: var(--nacja, var(--linia)); }
.probka--duza { width: 16px; height: 16px; box-shadow: 0 0 0 1px var(--atrament); }
/* Pasek w kolorze nacji pod tytułem (96 × 8) */
.pasek-koloru { width: 96px; height: 8px; background: var(--nacja, var(--linia)); }

/* Karta nacji: kolorowy pas u góry, plansza z portretem, treść, stopka z superbronią */
.karta-nacji {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-karta);
  border-top: 8px solid var(--nacja, var(--linia));
  box-shadow: var(--cien-karty);
  color: var(--c-tekst);
}
.karta-nacji__portret {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--portret-h, 240px);
  background: var(--c-tlo-obrazu);
  overflow: hidden;
}
.karta-nacji__portret img { max-width: 100%; height: auto; object-fit: contain; object-position: bottom; }
.karta-nacji__tresc {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: clamp(0.625rem, 0.5321rem + 0.381vw, 0.875rem); /* 10 → 14 */
  padding: 18px 20px 22px;
}
@media (min-width: 600px) { .karta-nacji__tresc { padding: 24px 28px 28px; } }
.karta-nacji__naglowek { display: flex; flex-direction: column; gap: 4px; }
.karta-nacji__nazwa { font-size: var(--fs-h3); line-height: 1.1; }
.karta-nacji__motto { font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem); line-height: 1.4; color: var(--c-tekst-3); }
.karta-nacji__lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font-size: var(--fs-maly); line-height: 1.5; }
.karta-nacji__tekst { font-size: clamp(0.9375rem, 0.8196rem + 0.4833vw, 1.125rem); line-height: 1.55; color: var(--c-tekst-2); }
.karta-nacji__superbron {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--c-linia);
}
.karta-nacji__bron { font-weight: 700; font-size: var(--fs-tekst); line-height: 1.35; }
.karta-nacji__opis-broni { font-size: var(--fs-maly); line-height: 1.45; color: var(--c-tekst-2); }
.karta-nacji .przycisk { margin-top: 6px; }

/* Wariant ciemny (Familia) i szeroki (portret z lewej, treść z prawej od 768) */
.karta-nacji--ciemna { background: var(--drewno); box-shadow: 0 0 0 1px var(--drewno-obrys); }
.karta-nacji--szeroka .karta-nacji__nazwa { font-size: clamp(1.4375rem, 1.1821rem + 1.0476vw, 2.125rem); } /* 23 → 34 */
@media (min-width: 768px) {
  .karta-nacji--szeroka {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.5rem, -1.5rem + 6vw, 3rem);
    align-items: center;
  }
  .karta-nacji--szeroka .karta-nacji__portret { --portret-h: 280px; align-self: stretch; height: auto; min-height: 280px; }
  .karta-nacji--szeroka.karta-nacji--ciemna { box-shadow: none; } /* szeroka karta Familii w projekcie ma tylko pas u góry, bez obrysu */
  .karta-nacji--szeroka .karta-nacji__tresc { padding: 36px 28px 36px 0; }
}
@media (min-width: 1024px) {
  .karta-nacji--szeroka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .karta-nacji--szeroka .karta-nacji__portret { grid-column: 1 / span 4; }
  .karta-nacji--szeroka .karta-nacji__tresc { grid-column: 6 / span 6; padding: 36px 0; }
}

/* Lista kart nacji: 1 → 2 (600) → 3 (1024); .nacje-lista__szeroka zajmuje cały rząd.
   --przewijana: na telefonie poziomy pasek z przyciąganiem; element listy MUSI mieć data-przewijane */
.nacje-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--siatka-odstep);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nacje-lista > li { display: flex; min-width: 0; }
.nacje-lista__szeroka { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .nacje-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .nacje-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 599.98px) {
  .nacje-lista--przewijana {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--margines));
    padding: 2px var(--margines) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margines);
    scrollbar-width: thin;
    scrollbar-color: var(--linia) transparent;
  }
  .nacje-lista--przewijana > li { flex: 0 0 min(290px, 80vw); scroll-snap-align: start; }
  .nacje-lista--przewijana .karta-nacji__portret { --portret-h: 196px; }
  .nacje-lista--przewijana .karta-nacji__portret img { max-width: 92%; }
  .nacje-lista--przewijana:focus-visible { outline-offset: -3px; }
}

/* ==========================================================================
   13. Jednostki i superbroń (strony nacji)
   ========================================================================== */
/* Nagłówek listy: „Wojsko Koalicji” ... „10 rodzajów wojska” */
.naglowek-listy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-linia);
}
.naglowek-listy__licznik { font-family: var(--font-sc); font-weight: 500; font-size: var(--fs-maly); letter-spacing: 0.08em; color: var(--c-mosiadz); }

/* Siatka kart jednostek: 2 (telefon) → 3 (768) → 4 (1024) */
.siatka-jednostek {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.siatka-jednostek > * { min-width: 0; }
@media (min-width: 768px) { .siatka-jednostek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--siatka-odstep); } }
@media (min-width: 1024px) { .siatka-jednostek { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.karta-jednostki {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-karta);
  box-shadow: var(--cien-karty);
  color: var(--c-tekst);
}
/* Plansza ze sprite'em: img ma width/height = 0,62 × naturalny rozmiar.
   Na telefonie (2 kolumny) plansza zwęża się z kartą: najwyższy sprite (jazda, 172 × 208 po skali 0,62) nigdy nie jest przycięty. */
.karta-jednostki__sprite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(220px, calc(61vw - 39px));
  padding: 0 8px 12px;
  background: var(--c-tlo-obrazu);
  overflow: hidden;
}
@media (min-width: 600px) { .karta-jednostki__sprite { height: 220px; } }
.ciemne .karta-jednostki__sprite,
.pas--drewno .karta-jednostki__sprite,
.karta-jednostki--ciemna .karta-jednostki__sprite { border-bottom: 1px solid var(--c-obrys); }
.karta-jednostki__sprite img { max-width: 100%; height: auto; }
.karta-jednostki__tresc { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; padding: 14px 14px 16px; }
@media (min-width: 600px) { .karta-jednostki__tresc { padding: 18px 20px 20px; } }
.karta-jednostki__wiersz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 22px; }
/* Na telefonie nazwa zwęża się z kartą, żeby długie słowa („Szybkostrzelne”, „Szwoleżerowie”) nie łamały się w środku */
.karta-jednostki__nazwa { font-size: clamp(0.9375rem, 6.5vw - 7px, var(--fs-h4)); line-height: 1.15; }
@media (min-width: 600px) { .karta-jednostki__nazwa { font-size: var(--fs-h4); } }
.karta-jednostki__rola { font-size: var(--fs-maly); line-height: 1.5; color: var(--c-tekst-2); }
.karta-jednostki__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--c-linia);
  font-size: var(--fs-drobny);
  line-height: 1.4;
  color: var(--c-tekst-3);
}
.karta-jednostki__koszt { font-weight: 700; font-size: var(--fs-maly); color: var(--c-tekst); }

/* Mały znacznik cechy jednostki: „Z Miśni”, „Trzyma szyk”. Zawija się (na spacjach) tylko, gdy nie mieści się w karcie:
   „Mantiene la formación” na 360 px w wąskiej karcie wychodził poza ekran */
.znacznik-cechy {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--c-obrys);
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--c-mosiadz);
}

/* Szeroki element siatki jednostek (li z kartą superbroni): telefon cały rząd, od 768 px 2 kolumny, --3: 3 kolumny */
.siatka-jednostek__szeroka { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .siatka-jednostek__szeroka { grid-column: span 2; }
  .siatka-jednostek__szeroka--3 { grid-column: span 3; }
}

/* Karta superbroni: ciemna (kontekst ciemny ustawia base.css) */
.karta-superbroni {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--drewno);
  box-shadow: 0 0 0 1px var(--drewno-obrys);
  color: var(--c-tekst);
}
.karta-superbroni__rycina { display: flex; flex-direction: column; }
.karta-superbroni__rycina img { width: 100%; height: auto; }
.karta-superbroni__rycina figcaption { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px 0; font-size: var(--fs-drobny); line-height: 1.45; color: var(--c-tekst-3); }
.karta-superbroni__tresc { display: flex; flex-direction: column; flex-grow: 1; gap: 8px; padding: 16px 20px 24px; }
@media (min-width: 600px) {
  .karta-superbroni__rycina figcaption { padding-inline: 24px; }
  .karta-superbroni__tresc { padding: 16px 24px 26px; }
}
.karta-superbroni__wiersz { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.karta-superbroni__czas { font-size: var(--fs-drobny); color: var(--c-tekst-3); }
.karta-superbroni__nazwa { font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); line-height: 1.1; } /* 22 → 26 */
.karta-superbroni__opis { font-size: var(--fs-maly); line-height: 1.5; color: var(--c-tekst-2); }

/* ==========================================================================
   14. Oś czasu (pionowa)
   ========================================================================== */
.os-czasu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--c-linia);
}
.os-czasu > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 22px 20px;
}
.os-czasu > li:last-child { padding-bottom: 0; }
@media (min-width: 600px) {
  .os-czasu > li { gap: 6px; padding: 0 0 28px 28px; }
}
.os-czasu__data { font-family: var(--font-sc); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; color: var(--c-akcent); }
.os-czasu__tekst { font-size: var(--fs-tekst); line-height: 1.5; color: var(--c-tekst-2); }
.os-czasu__uwaga { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-duzy); line-height: 1.45; color: var(--c-akcent); }
/* Wariant ze znacznikami na osi: kropka, a dla ważnego punktu romb w karminie */
.os-czasu--znaczniki > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-linia);
}
.os-czasu--znaczniki > li.os-czasu__wazny::before {
  left: -7px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--karmin);
  transform: rotate(45deg);
}

/* ==========================================================================
   15. Tabela faktów (dl), tabela danych, klawisz
   ========================================================================== */
/* <dl class="fakty"><div><dt>…</dt><dd>…</dd></div>…</dl>; szerokość etykiet: --fakty-kol */
.fakty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--c-linia);
}
.fakty > div { display: contents; }
.fakty dt {
  padding: 12px 0 2px;
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-drobny);
  letter-spacing: 0.1em;
  line-height: 1.45;
  color: var(--c-mosiadz);
}
.fakty dd {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--c-obrys);
  font-size: var(--fs-tekst);
  line-height: 1.45;
  color: var(--c-tekst-2);
}
.ciemne .fakty dd, .pas--drewno .fakty dd { border-bottom-color: var(--drewno-linia); }
@media (min-width: 480px) {
  .fakty { grid-template-columns: var(--fakty-kol, 110px) minmax(0, 1fr); }
  .fakty dt { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--c-obrys); }
  .fakty dd { padding: 12px 0; }
  .ciemne .fakty dt, .pas--drewno .fakty dt { border-bottom-color: var(--drewno-linia); }
}
/* W karcie (Prasa): tło karty, kreski między wierszami, bez kreski u góry */
.fakty--karta { padding: 6px 20px; background: var(--c-karta); box-shadow: var(--cien-karty); border-top: 0; --fakty-kol: 150px; }
.fakty--karta dt, .fakty--karta dd { border-bottom: 0; }
.fakty--karta > div + div > dt { border-top: 1px solid var(--c-obrys); }
@media (min-width: 480px) {
  .fakty--karta { padding: 6px 28px; }
  .fakty--karta dt, .fakty--karta dd { padding-block: 14px; }
  .fakty--karta > div + div > dd { border-top: 1px solid var(--c-obrys); }
}
/* Zwarta, bez kresek (karta aktu w Kampanii) */
.fakty--zwarte { grid-template-columns: var(--fakty-kol, 84px) minmax(0, 1fr); gap: 6px 12px; border-top: 0; }
.fakty--zwarte dt, .fakty--zwarte dd { padding: 0; border: 0; }
.fakty--zwarte dt { font-size: var(--fs-etykieta-mala); line-height: 1.65; }
.fakty--zwarte dd { font-size: var(--fs-maly); color: var(--c-tekst); }

/* Tabela danych (FAQ: języki, muzyka): kreski przerywane */
.tabela { width: 100%; font-size: var(--fs-maly); line-height: 1.45; }
.tabela th, .tabela td { padding: 10px 0; border-top: 1px dashed var(--c-linia); text-align: left; vertical-align: top; }
.tabela th { padding-right: 16px; font-weight: 700; color: var(--c-tekst); }
.tabela tr:last-child > * { border-bottom: 1px dashed var(--c-linia); }

/* Klawisz (FAQ: sterowanie) */
.klawisz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--promien);
  background: var(--pergamin);
  box-shadow: 0 0 0 1px var(--linia), 0 2px 0 var(--linia);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--atrament);
}

/* ==========================================================================
   16. FAQ: <details class="pytanie"> w karcie .pytania
   ========================================================================== */
.pytania { padding: 0 20px; background: var(--c-karta); box-shadow: var(--cien-karty); }
@media (min-width: 600px) { .pytania { padding: 0 36px; } }
.pytanie + .pytanie { border-top: 1px solid var(--c-obrys); }
.pytanie__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(1.125rem, 1.0554rem + 0.2857vw, 1.3125rem); /* 18 → 21 */
  line-height: 1.35;
  color: var(--c-tekst);
}
.pytanie__pytanie::-webkit-details-marker { display: none; }
.pytanie__pytanie::marker { content: ""; }
.pytanie__pytanie:hover { color: var(--c-link-hover); }
.pytanie__szewron { flex-shrink: 0; width: 24px; height: 24px; color: var(--c-mosiadz); transition: transform 0.2s ease; }
.pytanie[open] > .pytanie__pytanie .pytanie__szewron { transform: rotate(180deg); }
.pytanie__odpowiedz {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 24px;
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.6;
  color: var(--c-tekst-2);
}
@media (min-width: 768px) {
  .pytanie__pytanie { gap: 24px; padding: 22px 0; }
  .pytanie__odpowiedz { padding: 0 64px 32px 0; }
}

/* ==========================================================================
   17. Znaczniki tematów, chipy, pasek nacji
   ========================================================================== */
/* Data + kreska + znaczniki tematu nad wpisem */
.znaczniki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.znaczniki__data { font-family: var(--font-sc); font-weight: 700; font-size: var(--fs-tekst); letter-spacing: 0.08em; color: var(--c-mosiadz); }
.znaczniki__kreska { width: 1px; height: 16px; background: var(--c-linia); }
.znacznik {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-linia);
  border-radius: var(--promien);
  background: var(--pergamin);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tekst-3);
}

/* Chipy: nawigacja po nacjach z próbką koloru (.chip + .probka) i filtry tematów (.chip--temat) */
.chipy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) { .chipy--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* 1024–1279 px: kolumna ma ok. 128 px, więc „Arcyksięstwo” (17 px) nie mieściło się w chipie */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .chipy--7 .chip { gap: 8px; padding-inline: 10px; font-size: 1rem; }
  .chipy--7 .chip .probka { width: 12px; height: 12px; }
}
.chipy--rzad { display: flex; flex-wrap: wrap; }
.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  background: var(--karta);
  box-shadow: 0 0 0 1px var(--obrys);
  color: var(--atrament);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.chip:hover { color: var(--atrament); box-shadow: 0 0 0 1px var(--atrament); }
.chip[aria-current] { background: var(--atrament); box-shadow: 0 0 0 1px var(--atrament); color: var(--pergamin); }
.chip .probka { width: 14px; height: 14px; }
.chip--maly { gap: 8px; min-height: 44px; padding: 0 12px; font-size: 0.9375rem; }
.chip--maly .probka { width: 12px; height: 12px; }
.chip--temat { gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: none; }
.chip--temat:hover { box-shadow: none; border-color: var(--atrament); }
.chip--temat[aria-current] { border-color: var(--atrament); }
/* Chip bez działania (<span>, np. tematy w Dzienniku): bez efektu najechania, żeby nie udawał przycisku */
span.chip { cursor: default; }
span.chip:not([aria-current]):hover { box-shadow: 0 0 0 1px var(--obrys); }
span.chip--temat:not([aria-current]):hover { box-shadow: none; border-color: var(--linia); }
.chip__licznik { font-weight: 500; color: var(--mosiadz); }
.chip[aria-current] .chip__licznik { color: var(--obrys); }
/* Chipy przewijane w poziomie na telefonie: element MUSI mieć data-przewijane */
@media (max-width: 599.98px) {
  .chipy--przewijane {
    display: flex;
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--margines));
    padding: 2px var(--margines) 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .chipy--przewijane > * { flex: 0 0 auto; }
}

/* Pasek nawigacji na stronach nacji: „Wszystkie nacje” + chipy */
.pasek-nacji { padding-block: 12px; background: var(--plansza); border-bottom: 1px solid var(--linia); }
.pasek-nacji__wnetrze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
@media (min-width: 1024px) { .pasek-nacji { padding-block: 16px; } }

/* ==========================================================================
   18. Poprzednia / następna (nacje)
   ========================================================================== */
.sasiedzi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .sasiedzi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.karta-sasiada {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--karta);
  border-top: 6px solid var(--nacja, var(--linia));
  box-shadow: 0 0 0 1px var(--obrys);
  color: var(--atrament);
  text-decoration: none;
}
@media (min-width: 600px) { .karta-sasiada { padding: 24px 28px; } }
.karta-sasiada:hover { color: var(--atrament); box-shadow: 0 0 0 1px var(--atrament); }
.karta-sasiada__kierunek { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sc); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.1em; color: var(--mosiadz); }
.karta-sasiada__kierunek svg { width: 18px; height: 18px; flex-shrink: 0; }
.karta-sasiada__nazwa { font-family: var(--font-sc); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; }
.karta-sasiada__motto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-tekst); color: var(--tekst-3); }
.karta-sasiada--nastepna { align-items: flex-end; text-align: right; }

/* ==========================================================================
   19. Etapy wydania („Najpierw telefon, potem PC”)
   ========================================================================== */
.etapy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px var(--siatka-odstep);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapy > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 3px solid var(--c-linia);
}
.etapy > li.etapy__biezacy { border-top-color: var(--karmin); }
.etapy__data { font-family: var(--font-sc); font-weight: 500; font-size: var(--fs-nadtytul); letter-spacing: 0.08em; color: var(--c-mosiadz); }
.etapy__tytul { font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); line-height: 1.15; } /* 22 → 26 */
.etapy__tekst { font-size: var(--fs-tekst); line-height: 1.5; color: var(--c-tekst-2); }
@media (min-width: 600px) {
  .etapy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (min-width: 1024px) {
  .etapy { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .etapy > li { gap: 10px; padding-top: 28px; }
}

/* ==========================================================================
   20. Pas wezwania (karminowy) i formularz zapisów
   ========================================================================== */
.wezwanie { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.75rem, 0.5857rem + 0.5714vw, 1.125rem); } /* 12 → 18 */
.wezwanie__tytul { font-size: var(--fs-h2-cta); line-height: 1; }
.wezwanie__tekst { font-size: clamp(1.0625rem, 0.9929rem + 0.2857vw, 1.25rem); line-height: 1.55; color: var(--c-tekst-2); } /* 17 → 20 */
.wezwanie__dopisek { font-size: var(--fs-drobny); line-height: 1.5; color: var(--c-tekst-3); }
.wezwanie__akcje { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.formularz { position: relative; display: flex; flex-direction: column; gap: 10px; }
.formularz__etykieta { font-weight: 700; font-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem); }
.formularz__wiersz { display: flex; flex-direction: column; gap: 10px; }
.formularz__pole {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--promien);
  background: var(--kremowy);
  color: var(--atrament);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
}
.formularz__pole::placeholder { color: var(--tekst-3); opacity: 1; }
.formularz__przycisk { min-height: 54px; }
/* Zgoda: cały wiersz (pole + tekst) to jedna etykieta, więc cel dotyku jest większy niż samo pole 22 × 22 */
.formularz__zgoda {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 44px;
  padding-top: 4px;
  cursor: pointer;
  font-size: var(--fs-drobny);
  line-height: 1.5;
  color: var(--c-tekst-2);
}
.formularz__zgoda input { width: 22px; height: 22px; margin: 0; accent-color: var(--drewno); cursor: pointer; }
.formularz__uwaga { font-size: var(--fs-drobny); line-height: 1.5; color: var(--c-tekst-3); }
.formularz__uwaga a { color: var(--kremowy); }
/* Pułapka na boty: niewidoczna, poza kolejnością Tab, ale w obrębie strony (nic nie wystaje poza ekran) */
.formularz__miodek { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.formularz__status { font-weight: 700; font-size: var(--fs-maly); line-height: 1.45; color: var(--c-tekst); }
.formularz__status[data-stan="blad"] { color: var(--karmin-pas-etykieta); }
.formularz[aria-busy="true"] .formularz__przycisk { opacity: 0.7; cursor: progress; }
/* Bez formEndpoint w site.config.json build wyłącza pola i wpisuje do statusu „Zapisy uruchomimy przed testami” */
.formularz__pole:disabled { background: var(--na-ciemnym-2); cursor: not-allowed; }
.formularz__przycisk:disabled { opacity: 0.65; cursor: not-allowed; }
.formularz__zgoda:has(input:disabled),
.formularz__zgoda input:disabled { cursor: not-allowed; }
@media (min-width: 600px) {
  .formularz { gap: 12px; }
  .formularz__wiersz { flex-direction: row; gap: 12px; }
  .formularz__pole { flex: 1 1 auto; width: auto; height: 56px; padding: 0 18px; font-size: 1.125rem; }
  .formularz__przycisk { min-height: 56px; flex-shrink: 0; }
}

/* ==========================================================================
   21. Drobne
   ========================================================================== */
/* Uwaga pod listą: „Terminy są orientacyjne i mogą się przesunąć.” */
.uwaga { font-size: var(--fs-drobny); line-height: 1.5; color: var(--c-tekst-3); }
/* Miejsce na brakującą grafikę / treść: „[PORTRET — w przygotowaniu]” */
.pole-zastepcze {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--c-linia);
  text-align: center;
  color: var(--c-tekst-3);
}

/* ==========================================================================
   22. Powiększenie zrzutu: przycisk na obrazie ryciny i okno <dialog> (oba tworzy main.js)
   ========================================================================== */
.powieksz { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.powieksz:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.powiekszenie {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #140d07;
  color: var(--na-ciemnym);
}
.powiekszenie[open] { display: flex; align-items: center; justify-content: center; }
.powiekszenie::backdrop { background: rgba(20, 13, 7, 0.6); }
.powiekszenie__rycina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 16px 24px;
}
.powiekszenie__obraz {
  display: block;
  max-width: min(100%, 1920px);
  max-height: calc(100% - 64px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--drewno-obrys);
}
.powiekszenie__podpis { max-width: 72ch; text-align: center; font-size: var(--fs-maly); line-height: 1.5; color: var(--na-ciemnym-2); }
.powiekszenie__licznik {
  position: absolute;
  top: 24px;
  left: 20px;
  margin: 0;
  font-family: var(--font-sc);
  font-size: var(--fs-etykieta-mala);
  letter-spacing: 0.1em;
  color: var(--na-ciemnym-3);
}
.powiekszenie__przycisk {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--drewno-obrys);
  border-radius: 50%;
  background: var(--drewno-karta);
  color: var(--na-ciemnym);
  cursor: pointer;
}
.powiekszenie__przycisk:hover { border-color: var(--mosiadz-jasny); color: var(--mosiadz-jasny); }
.powiekszenie__przycisk:focus-visible { outline: 3px solid var(--mosiadz-jasny); outline-offset: 2px; }
.powiekszenie__zamknij { top: 12px; right: 12px; }
.powiekszenie__poprz, .powiekszenie__nast { top: 50%; transform: translateY(-50%); }
.powiekszenie__poprz { left: 12px; }
.powiekszenie__nast { right: 12px; }
html.powiekszenie-otwarte { overflow: hidden; }
@media (max-width: 767.98px) {
  /* telefon: strzałki na dole, żeby nie zasłaniały obrazu */
  .powiekszenie__poprz, .powiekszenie__nast { top: auto; bottom: 12px; transform: none; }
  .powiekszenie__rycina { padding-bottom: 76px; }
}
@media (min-width: 768px) {
  .powiekszenie__rycina { padding-inline: 80px; }
}

/* styles/pages/dziennik.css */
/* ==========================================================================
   Dziennik (/dziennik/): nagłówek z liczbą wpisów, wpis wyróżniony,
   archiwum (tematy + karty wpisów), pas „Poczta polowa”.
   Każdy selektor zaczyna się od .strona-dziennik (bodyClass tej strony).
   ========================================================================== */


/* --- Nagłówek strony: h1 68 px, lead 23 px, dół pasa 72 px jak w projekcie --- */
.strona-dziennik .wstep-strony { padding-bottom: clamp(2.5rem, 1.7571rem + 3.0476vw, 4.5rem); } /* 40 → 72 */
.strona-dziennik .tytul-strony { font-size: clamp(2.625rem, 2.0214rem + 2.4762vw, 4.25rem); } /* 42 → 68 */
.strona-dziennik .wstep-strony .glowka { gap: clamp(0.875rem, 0.7821rem + 0.381vw, 1.125rem); } /* 14 → 18 */
.strona-dziennik .wstep-strony .lead { max-width: 700px; font-size: clamp(1.1875rem, 1.0946rem + 0.381vw, 1.4375rem); } /* 19 → 23 */

/* Stan dziennika obok tytułu: telefon i tablet dwie pozycje obok siebie, od 1024 jedna pod drugą */
.strona-dziennik .stan-dziennika {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.strona-dziennik .stan-dziennika > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.strona-dziennik .stan-dziennika dt {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-drobny);
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--mosiadz);
}
.strona-dziennik .stan-dziennika dd {
  margin: 0;
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); /* 22 → 26 */
  line-height: 1.15;
}
/* Telefon: kolumny na szerokość treści, żeby „Wpisów w dzienniku” mieściło się w jednym wierszu od 360 px */
@media (max-width: 599.98px) {
  .strona-dziennik .stan-dziennika { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 32px; }
}
@media (min-width: 1024px) {
  .strona-dziennik .stan-dziennika { display: flex; flex-direction: column; gap: 14px; padding-left: 24px; }
}

/* ==========================================================================
   I. Najnowszy wpis: plansza z ikoną gry + treść
   Telefon i tablet: plansza nad treścią. Od 1024: 7 kolumn plansza, 5 treść.
   ========================================================================== */
.strona-dziennik .najnowszy { padding-top: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem); } /* 56 → 96 */

.strona-dziennik .wpis-glowny {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--karta);
  box-shadow: var(--cien-karty);
}
.strona-dziennik .wpis-glowny > * { min-width: 0; }

.strona-dziennik .wpis-glowny__znak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 0.8786rem + 1.5238vw, 1.875rem); /* 20 → 30 */
  padding: 40px 20px;
  background: var(--drewno);
  text-align: center;
}
.strona-dziennik .wpis-glowny__ikona {
  width: clamp(9rem, 7.3286rem + 6.8571vw, 13.5rem); /* 144 → 216 */
  height: auto;
  border-radius: 21%;
  box-shadow: 0 0 0 1px var(--drewno-obrys), 0 20px 44px rgba(0, 0, 0, 0.5);
}
.strona-dziennik .wpis-glowny__nazwy { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.strona-dziennik .wpis-glowny__nazwa {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(2rem, 1.6286rem + 1.5238vw, 3rem); /* 32 → 48 */
  line-height: 1;
  color: var(--na-ciemnym);
}
.strona-dziennik .wpis-glowny__podtytul {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: clamp(1rem, 0.9304rem + 0.2857vw, 1.1875rem); /* 16 → 19 */
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--na-ciemnym-3);
}

.strona-dziennik .wpis-glowny__tresc {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.125rem); /* 14 → 18 */
  padding: 24px 20px 16px;
}
.strona-dziennik .wpis-glowny__tytul { font-size: clamp(1.875rem, 1.5964rem + 1.1429vw, 2.625rem); line-height: 1.05; } /* 30 → 42 */
.strona-dziennik .wpis-glowny__tekst { font-size: var(--fs-duzy); line-height: 1.55; }
.strona-dziennik .wpis-glowny .znaczniki__data { font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem); } /* 16 → 18 */
.strona-dziennik .wpis-glowny .znaczniki__kreska { height: 18px; }
.strona-dziennik .wpis-glowny .znacznik { min-height: 28px; padding: 0 11px; font-size: 0.9375rem; }
.strona-dziennik .wpis-glowny .link-strzalka { margin-top: auto; font-size: var(--fs-duzy); }

@media (min-width: 600px) {
  .strona-dziennik .wpis-glowny__znak { padding: 48px 32px; }
  .strona-dziennik .wpis-glowny__tresc { padding: 32px 32px 24px; }
}
@media (min-width: 1024px) {
  .strona-dziennik .wpis-glowny { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .strona-dziennik .wpis-glowny__znak { grid-column: 1 / span 7; min-height: 540px; padding: 48px; }
  .strona-dziennik .wpis-glowny__tresc { grid-column: 8 / span 5; padding: 48px 48px 40px 4px; }
}

/* ==========================================================================
   II. Archiwum: tematy i karty wpisów (1 kolumna → 2 od 768)
   ========================================================================== */
.strona-dziennik .archiwum { padding-top: clamp(4rem, 3.0714rem + 3.8095vw, 6.5rem); } /* 64 → 104; dół 64 → 120 z .pas */
.strona-dziennik .archiwum__stos {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem); /* 28 → 40 */
}
.strona-dziennik .archiwum__stos > * { min-width: 0; }

/* Tematy wpisów: na razie etykiety z liczbą wpisów, nie filtry (bez linków i bez efektu najechania) */
.strona-dziennik .tematy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-block: 14px;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}
.strona-dziennik .tematy__etykieta {
  padding-right: 8px;
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-nadtytul);
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--mosiadz);
}
.strona-dziennik .tematy__lista { gap: 10px; }
@media (max-width: 599.98px) {
  .strona-dziennik .tematy .chip--temat { padding: 0 14px; } /* sześć tematów mieści się w dwóch rzędach */
}
@media (max-width: 379.98px) {
  .strona-dziennik .tematy__lista { gap: 8px; }
  .strona-dziennik .tematy .chip--temat { padding: 0 10px; } /* także na 360 px: dwa rzędy, bez samotnej „Techniki” */
}
@media (min-width: 600px) {
  .strona-dziennik .tematy { padding-block: 18px; }
}

/* Karta wpisu: (pasek nacji) + plansza z obrazem + treść; wszystkie plansze razem z paskiem mają 248 px */
.strona-dziennik .wpisy > li { display: flex; }
.strona-dziennik .wpisy__szeroki { grid-column: 1 / -1; }
/* --plansza-h: wysokość paska i planszy razem; --pasek-h: 8 px w kartach z paskiem (.wpis--pasek) */
.strona-dziennik .wpis {
  --plansza-h: 248px;
  --pasek-h: 0px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--karta);
  box-shadow: var(--cien-karty);
  color: var(--atrament);
}
.strona-dziennik .wpis--pasek { --pasek-h: 8px; }

.strona-dziennik .wpis__pasek { flex-shrink: 0; height: var(--pasek-h); background: var(--nacja, var(--karta)); }
.strona-dziennik .wpis__pasek--dwa { display: flex; }
.strona-dziennik .wpis__pasek--dwa > span { flex: 1 1 0; background: var(--nacja); }

.strona-dziennik .wpis__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  min-height: calc(var(--plansza-h) - var(--pasek-h));
  margin: 0;
  background: var(--tlo-obrazu);
  overflow: hidden;
}
.strona-dziennik .wpis__media img { flex: 0 1 auto; min-width: 0; max-width: 100%; height: auto; }
/* Sprite'y postaci stoją na planszy, trochę nad dolną krawędzią */
.strona-dziennik .wpis__media--sprite { gap: clamp(0.75rem, 0.3214rem + 1.7582vw, 1.5rem); padding: 0 12px 22px; } /* odstęp 12 → 24 */
.strona-dziennik .wpis__media--szeroko { gap: clamp(0.75rem, 0.2082rem + 2.2231vw, 1.75rem); padding-bottom: 20px; } /* odstęp 12 → 28 */
.strona-dziennik .wpis__media--para { padding: 0 12px; }

/* Plansza ciemna: kompozytorzy */
.strona-dziennik .wpis__media--muzyka {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 20px;
  background: var(--drewno);
  text-align: center;
}
.strona-dziennik .wpis__ikona { flex-shrink: 0; color: var(--c-mosiadz); }
.strona-dziennik .wpis__kompozytorzy {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.1875rem, 1.025rem + 0.6667vw, 1.625rem); /* 19 → 26 */
  line-height: 1.35;
  color: var(--na-ciemnym);
}

/* Plansza z cytatem: „A ja czym? Batem?” */
.strona-dziennik .wpis__media--cytat {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 20px;
  text-align: center;
}
.strona-dziennik .wpis__media--cytat .wpis__ikona { color: var(--mosiadz); }
.strona-dziennik .wpis__cytat {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 1.7679rem + 0.9524vw, 2.625rem); /* 32 → 42 */
  line-height: 1.1;
  color: var(--atrament);
}
.strona-dziennik .wpis__podpis { font-size: var(--fs-maly); line-height: 1.4; color: var(--tekst-3); text-wrap: balance; }

/* Treść karty */
.strona-dziennik .wpis__tresc {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: clamp(0.75rem, 0.7036rem + 0.1905vw, 0.875rem); /* 12 → 14 */
  padding: 20px 20px 16px;
}
.strona-dziennik .wpis__tytul { font-size: var(--fs-h3); line-height: 1.1; }
.strona-dziennik .wpis__tekst { font-size: var(--fs-tekst); line-height: 1.55; color: var(--tekst-2); }
.strona-dziennik .wpis__dopisek {
  padding-top: 14px;
  border-top: 1px dashed var(--linia);
  font-size: var(--fs-maly);
  line-height: 1.45;
  color: var(--tekst-3);
}
.strona-dziennik .wpis .link-strzalka { margin-top: auto; }

/* Zestawienie pod tekstem: dwie kolumny (superbroń i przeciwnik, rozmiary atlasów) */
.strona-dziennik .wpis__zestawienie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--linia);
}
.strona-dziennik .wpis__zestawienie > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strona-dziennik .wpis__zestawienie dd { margin: 0; }
.strona-dziennik .wpis__nazwa { font-weight: 700; font-size: var(--fs-tekst); line-height: 1.35; }
.strona-dziennik .wpis__liczba {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem); /* 26 → 30 */
  line-height: 1;
}
.strona-dziennik .wpis__liczba--akcent { color: var(--karmin); }
.strona-dziennik .wpis__opis { font-size: var(--fs-maly); line-height: 1.45; color: var(--tekst-2); }
/* Dłuższe opisy w wąskiej karcie (telefon, dwie karty obok siebie na tablecie): jeden pod drugim */
@media (max-width: 479.98px), (min-width: 768px) and (max-width: 1023.98px) {
  .strona-dziennik .wpis__zestawienie--opisy { grid-template-columns: minmax(0, 1fr); }
}

/* Karta szeroka („Pierwsza wersja w repozytorium”): zrzut nad treścią, od 1024 zrzut z lewej */
.strona-dziennik .wpis__kadr { position: relative; background: var(--drewno-karta); overflow: hidden; }
.strona-dziennik .wpis__zrzut { width: 100%; height: auto; }

/* Pusty pasek wyrównuje plansze w rzędzie dwóch kart; w jednej kolumnie (< 768) niepotrzebny */
@media (max-width: 767.98px) {
  .strona-dziennik .wpis--pasek-pusty { --pasek-h: 0px; }
  .strona-dziennik .wpis__pasek--pusty { display: none; }
}
@media (max-width: 599.98px) {
  .strona-dziennik .wpis__zrzut { aspect-ratio: 7 / 4; object-fit: cover; }
  /* Jedna kolumna: plansze nie muszą się wyrównywać, więc są niższe; drobne postacie stoją ciaśniej */
  .strona-dziennik .wpis { --plansza-h: 208px; }
  .strona-dziennik .wpis__media--sprite { --plansza-h: 176px; gap: 8px; padding: 0 8px 18px; }
  .strona-dziennik .wpis__media--szeroko { gap: 12px; padding-bottom: 18px; }
  .strona-dziennik .wpis__media--para { min-height: 0; gap: 4px; padding: 20px 0 0; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .strona-dziennik .wpis__media--para { gap: 4px; padding: 0 4px; }
}
@media (min-width: 600px) {
  .strona-dziennik .wpis__tresc { padding: 24px 28px 24px; }
  .strona-dziennik .wpis__media--cytat { padding: 32px 40px; }
  .strona-dziennik .wpis__media--muzyka { padding: 32px; }
}
/* Dwie karty obok siebie na tablecie: kompozytorzy mieszczą się w dwóch wierszach,
   a cytat w jednym, więc plansza z cytatem nie przerasta sąsiedniej (treść kart zaczyna się na tej samej wysokości) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .strona-dziennik .wpis__media--muzyka { padding-inline: 16px; }
  .strona-dziennik .wpis__kompozytorzy { font-size: 1.25rem; }
  .strona-dziennik .wpis__media--cytat { padding: 24px 16px; }
  .strona-dziennik .wpis__cytat { font-size: clamp(1.875rem, 0.7457rem + 2.353vw, 2.25rem); } /* 30 przy 768 → 36 przy 1023 */
}
/* Plakietka na zrzucie w karcie: 16 px od rogu jak w projekcie (wspólna ma 24 px, dobraną do hero) */
@media (min-width: 768px) {
  .strona-dziennik .wpis__kadr .plakietka { right: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 12px; }
}
@media (min-width: 1024px) {
  .strona-dziennik .wpis--szeroki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strona-dziennik .wpis__kadr { min-height: 360px; }
  .strona-dziennik .wpis__zrzut { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .strona-dziennik .wpis--szeroki .wpis__tresc { padding: 32px 40px 28px; }
}

/* ==========================================================================
   III. Poczta polowa (pas karminowy): tytuł 56 px jak w projekcie, przycisk na szerokość kolumny
   ========================================================================== */
.strona-dziennik .wezwanie__tytul { font-size: clamp(2.75rem, 2.4714rem + 1.1429vw, 3.5rem); } /* 44 → 56 */
@media (max-width: 599.98px), (min-width: 1024px) {
  .strona-dziennik .wezwanie__akcje { align-items: stretch; }
}

/* styles/pages/faq.css */
/* ==========================================================================
   FAQ (/faq/, body.strona-faq)
   Telefon i tablet: lista działów nad pytaniami. Od 1024 px: działy w lewej
   kolumnie, przyklejone przy przewijaniu (jak w projekcie FAQ.dc.html).
   Wstawki w odpowiedziach (karty, wiersze, tabele) układają się według
   szerokości samej odpowiedzi (container query), bo ta zmienia się skokowo
   przy pojawieniu się kolumny działów.
   ========================================================================== */

/* --- Wstęp: notka „Stan odpowiedzi” --- */
.strona-faq .faq-stan { gap: 6px; }
.strona-faq .faq-stan .etykieta-mala { font-size: var(--fs-drobny); }
.strona-faq .faq-stan__data {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); /* 22 → 26 */
  line-height: 1.1;
}
.strona-faq .faq-stan__uwaga { font-size: var(--fs-maly); line-height: 1.45; color: var(--tekst-3); }

/* --- Układ: działy + grupy pytań --- */
.strona-faq .faq-tresc {
  padding-top: clamp(3rem, 2.0714rem + 3.8095vw, 5.5rem); /* 48 → 88 */
}
.strona-faq .faq-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 2.6286rem + 1.5238vw, 4rem) 24px; /* 48 → 64 */
}
.strona-faq .faq-uklad > * { min-width: 0; }

/* --- Działy (nawigacja po grupach) --- */
.strona-faq .faq-dzialy { display: flex; flex-direction: column; }
.strona-faq .faq-dzialy__tytul { padding-bottom: 12px; font-size: var(--fs-drobny); }
.strona-faq .faq-dzialy__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--obrys);
}
.strona-faq .faq-dzial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding-block: 6px;
  border-top: 1px solid var(--obrys);
  color: var(--atrament);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  text-decoration: none;
}
.strona-faq .faq-dzial:hover { color: var(--karmin-ciemny); }
.strona-faq .faq-dzial:focus-visible { outline-offset: -3px; }
.strona-faq .faq-dzial__nazwa { display: flex; align-items: baseline; gap: 12px; }
.strona-faq .faq-dzial__nr {
  flex-shrink: 0;
  width: 30px;
  font-family: var(--font-sc);
  font-weight: 700;
  color: var(--karmin);
}
.strona-faq .faq-dzial__licznik {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--tekst-3);
  white-space: nowrap;
}
.strona-faq .faq-dzialy__dopisek {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tekst-3);
}
.strona-faq .faq-dzialy__dopisek a { white-space: nowrap; }

/* Tablet: działy w dwóch kolumnach, żeby lista nie spychała pytań w dół */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .strona-faq .faq-dzialy__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Komputer: działy w lewej kolumnie, przyklejone; pytania od 5. kolumny */
@media (min-width: 1024px) {
  .strona-faq .faq-uklad {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .strona-faq .faq-dzialy {
    grid-column: 1 / span 4;
    position: sticky;
    top: 24px;
  }
  .strona-faq .faq-grupy { grid-column: 5 / span 8; }
}
@media (min-width: 1280px) {
  .strona-faq .faq-dzialy { grid-column: 1 / span 3; }
}

/* --- Grupy pytań --- */
.strona-faq .faq-grupy {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 2.9429rem + 2.2857vw, 5rem); /* 56 → 80 */
}
.strona-faq .faq-grupa {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem); /* 20 → 28 */
  scroll-margin-top: 24px;
}
.strona-faq .faq-grupa__glowka { display: flex; flex-direction: column; gap: 10px; }
.strona-faq .faq-grupa__tytul {
  font-size: clamp(1.875rem, 1.6429rem + 0.9524vw, 2.5rem); /* 30 → 40 */
  line-height: 1.05;
}

/* --- Odpowiedzi: wstawki --- */
.strona-faq .pytanie__odpowiedz { container: faq-odpowiedz / inline-size; }
/* 1024–1279: kolumna pytań jest najwęższa, więc mniejszy margines z prawej (projekt: 64 px) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .strona-faq .pytanie__odpowiedz { padding-right: 24px; }
}

/* Fakty pod pierwszą odpowiedzią: Gatunek / Miejsce i czas / Studio */
.strona-faq .faq-fakty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 20px;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--linia);
}
.strona-faq .faq-fakty > div { display: flex; flex-direction: column; gap: 4px; }
.strona-faq .faq-fakty dt,
.strona-faq .faq-karta__etykieta {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--mosiadz);
}
.strona-faq .faq-fakty dd {
  margin: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--atrament);
}

/* Nacje i ich pierwowzory, z próbką koloru */
.strona-faq .faq-nacje {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-maly);
  line-height: 1.4;
}
.strona-faq .faq-nacje > li { display: flex; align-items: flex-start; gap: 10px; }
.strona-faq .faq-nacje .probka { margin-top: 0.3em; }
.strona-faq .faq-nacje b { color: var(--atrament); }

/* Karty: platformy, ceny, wymagania */
.strona-faq .faq-karty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strona-faq .faq-karty--platformy { margin-top: 4px; }
.strona-faq .faq-karta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--pergamin);
  box-shadow: 0 0 0 1px var(--obrys);
}
.strona-faq .faq-karty--platformy .faq-karta { gap: 6px; padding-bottom: 20px; }
.strona-faq .faq-karta__tytul {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem); /* 20 → 24 */
  line-height: 1.1;
  color: var(--atrament);
}
.strona-faq .faq-karta__tekst { font-size: 1rem; line-height: 1.45; }
.strona-faq .faq-karta__wartosc {
  margin: 0;
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); /* 22 → 26 */
  line-height: 1.15;
  color: var(--karmin);
}
/* wartość na końcu karty (wymagania) stoi przy dolnej krawędzi: równo w rzędzie, gdy etykieta się zawinie */
.strona-faq .faq-karta__wartosc:last-child { margin-top: auto; }
.strona-faq .faq-karta__dopisek { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--tekst-3); }

/* Wiersze „klucz | wartość”: terminy premiery, ustawienia bitwy */
.strona-faq .faq-wiersze {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-tekst);
  line-height: 1.45;
}
.strona-faq .faq-wiersze > li,
.strona-faq .faq-wiersze > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px dashed var(--linia);
}
.strona-faq .faq-wiersze > :last-child { border-bottom: 1px dashed var(--linia); }
.strona-faq .faq-wiersze__klucz { font-family: var(--font-sc); font-weight: 700; color: var(--mosiadz); }
.strona-faq .faq-wiersze dd { margin: 0; }

/* Klawisze */
.strona-faq .faq-klawisze {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 32px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed var(--linia);
  font-size: var(--fs-maly);
  line-height: 1.4;
}
.strona-faq .faq-klawisze > div { display: flex; align-items: center; gap: 14px; }
.strona-faq .faq-klawisze dt { display: flex; flex-shrink: 0; gap: 6px; width: 150px; }
.strona-faq .faq-klawisze dd { margin: 0; }

/* Tabele: języki głosów, muzyka */
.strona-faq .faq-tabela--jezyki th { width: 46%; }
.strona-faq .faq-tabela--muzyka th { width: 30%; }

.strona-faq .faq-dopisek { font-size: var(--fs-maly); color: var(--c-tekst-3); }

/* Wąska odpowiedź (telefon): tabele jako wiersze jeden pod drugim */
@container faq-odpowiedz (max-width: 439.98px) {
  .strona-faq .faq-tabela,
  .strona-faq .faq-tabela tbody,
  .strona-faq .faq-tabela tr,
  .strona-faq .faq-tabela th,
  .strona-faq .faq-tabela td { display: block; width: auto; }
  .strona-faq .faq-tabela tr { padding: 10px 0; border-top: 1px dashed var(--c-linia); }
  .strona-faq .faq-tabela tr:last-child { border-bottom: 1px dashed var(--c-linia); }
  .strona-faq .faq-tabela th,
  .strona-faq .faq-tabela td,
  .strona-faq .faq-tabela tr:last-child > * { padding: 0; border: 0; }
  .strona-faq .faq-tabela th { padding-bottom: 2px; }
}
/* Od 440 px szerokości odpowiedzi: fakty w trzech kolumnach, nacje w dwóch, wiersze z kolumną klucza */
@container faq-odpowiedz (min-width: 440px) {
  .strona-faq .faq-fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strona-faq .faq-nacje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strona-faq .faq-nacje__szeroka { grid-column: 1 / -1; }
  .strona-faq .faq-wiersze > li,
  .strona-faq .faq-wiersze > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
  }
}
/* Od 480 px: karty w trzech kolumnach (wartość rośnie z szerokością odpowiedzi: 18 → 26 px,
   żeby „Pion i poziom”, „Android 7.0+” i ceny mieściły się w jednej linii wąskiej karty).
   480–599 px (iPad poziomo, okno 1024 px z paskiem przewijania, tablet 640–720): karty ciaśniej. */
@container faq-odpowiedz (min-width: 480px) {
  .strona-faq .faq-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strona-faq .faq-karta__wartosc { font-size: clamp(1.125rem, 4cqi, 1.625rem); }
}
@container faq-odpowiedz (min-width: 480px) and (max-width: 599.98px) {
  .strona-faq .faq-karty { column-gap: 12px; }
  .strona-faq .faq-karta { padding-inline: 16px; }
}
/* Od 600 px: klawisze w dwóch kolumnach */
@container faq-odpowiedz (min-width: 600px) {
  .strona-faq .faq-klawisze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Pas „Nie ma tu Twojego pytania?” --- */
.strona-faq .faq-kontakt .wezwanie__tytul {
  font-size: clamp(2.375rem, 2.1429rem + 0.9524vw, 3rem); /* 38 → 48 */
  line-height: 1.02;
}
.strona-faq .faq-kontakt .wezwanie__akcje { gap: 8px; }
.strona-faq .faq-kontakt__przycisk { max-width: 100%; gap: 12px; overflow-wrap: anywhere; }
.strona-faq .faq-kontakt__przycisk svg { width: 20px; height: 20px; }
.strona-faq .faq-kontakt__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.0625rem;
}
@media (max-width: 599.98px) {
  .strona-faq .faq-kontakt .wezwanie__akcje { align-items: stretch; }
  .strona-faq .faq-kontakt__link { align-self: flex-start; }
}

/* styles/pages/galeria.css */
/* ==========================================================================
   Strona "Galeria" (/pl/galeria/, /gallery/; generuje ja tools/galeria.mjs): spis dzialow obok tytulu.
   Ryciny, siatka i powiekszenie to wspolne komponenty (.rycina, .siatka-kart--3, main.js).
   ========================================================================== */

.strona-galeria .galeria-dzialy { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.strona-galeria .galeria-dzialy__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px dashed var(--c-linia);
  font-weight: 500;
  color: var(--c-tekst);
  text-decoration: none;
}
.strona-galeria .galeria-dzialy__link:hover { color: var(--c-akcent); }
.strona-galeria .galeria-dzialy__licznik { font-family: var(--font-sc); font-size: var(--fs-etykieta-mala); color: var(--c-mosiadz); }

/* rowne rzedy: kazdy kadr w siatce 16 : 9 (panoramy z hero przycinaja sie po bokach; w powiekszeniu widac calosc) */
.strona-galeria .rycina__obraz { aspect-ratio: 16 / 9; object-fit: cover; }

/* styles/pages/graj.css */
/* ==========================================================================
   Strona "Zagraj w demo" (/pl/graj/, /play/): fakty obok tytulu, karty "w demo" i "w pelnej grze",
   lista z rombami, klawisze, wskazowki obok ryciny
   ========================================================================== */

.strona-graj .graj-fakty { --fakty-kol: 104px; }
.strona-graj .graj-fakty dd { font-size: var(--fs-maly); line-height: 1.55; }

/* lista z rombami jak w ornamencie; --tak: pelne romby (to jest w demo) */
.strona-graj .graj-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-maly);
  line-height: 1.5;
  color: var(--c-tekst-2);
}
.strona-graj .graj-lista > li { position: relative; padding-left: 24px; }
.strona-graj .graj-lista > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-mosiadz);
  transform: rotate(45deg);
}
.strona-graj .graj-lista--tak > li::before { background: var(--karmin); border-color: var(--karmin); }
.strona-graj .graj-lista b { color: var(--c-tekst); font-weight: 700; }

.strona-graj .graj-klawisze {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 32px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed var(--linia);
  font-size: var(--fs-maly);
  line-height: 1.4;
}
.strona-graj .graj-klawisze > div { display: flex; align-items: center; gap: 14px; }
.strona-graj .graj-klawisze dt { display: flex; flex-shrink: 0; gap: 6px; width: 132px; }
.strona-graj .graj-klawisze dd { margin: 0; }

@media (min-width: 600px) {
  .strona-graj .graj-klawisze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .strona-graj .graj-klawisze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strona-graj .graj-klawisze dt { width: auto; }
}

/* styles/pages/kampania.css */
/* ==========================================================================
   Kampania (/kampania/), projekt Kampania.dc.html
   Hero ze zrzutem i kartą, „Punkt rozbieżności” (historia / gra), siedem misji aktu I,
   bohater, filmy i ekran kampanii. Każdy selektor zaczyna się od .strona-kampania.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero na drewnie.
   Telefon (< 768): zrzut 3 : 2 od krawędzi do krawędzi, pod nim karta, niżej „Gdzie zagrasz”.
   Od 768: zrzut w kontenerze, karta nachodzi na jego dolną część (--zakladka),
   „Gdzie zagrasz” pod spodem; od 1024 jak w projekcie: karta 6 kolumn, „Gdzie zagrasz” od 8. kolumny.
   -------------------------------------------------------------------------- */
.strona-kampania .kampania-hero {
  background: var(--drewno);
  border-top: 1px solid var(--drewno-linia);
}
.strona-kampania .kampania-hero__rycina { position: relative; }
.strona-kampania .kampania-hero__obraz {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--drewno-karta);
}
.strona-kampania .kampania-hero__karta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px var(--margines) 36px;
  background: var(--pergamin);
  border-top: 6px solid var(--karmin);
  color: var(--atrament);
}
.strona-kampania .kampania-hero__karta .przyciski { padding-top: 4px; }
.strona-kampania .kampania-hero__tytul {
  font-size: clamp(2.625rem, 2.2536rem + 1.5238vw, 3.625rem); /* 42 → 58 */
  line-height: 0.98;
  color: var(--karmin);
}

/* Nadtytuł w kapitalikach: „Kampania · Akt I · 1764” (mosiądz), „Gdzie zagrasz” (jasny mosiądz na drewnie) */
.strona-kampania .kampania-nadtytul {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-nadtytul);
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: var(--c-mosiadz);
}

.strona-kampania .kampania-hero__stan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(100% - 2 * var(--margines), var(--kontener-max));
  margin-inline: auto;
  padding-block: 40px var(--sekcja-y);
}
/* Tabela „Gdzie zagrasz”: .fakty z typografią z projektu (etykieta 16, wartość 18, kreski #3F3020) */
.strona-kampania .kampania-stan { --fakty-kol: 120px; border-top-color: var(--drewno-linia); }
.strona-kampania .kampania-stan dt {
  font-size: var(--fs-nadtytul);
  letter-spacing: 0.08em;
  color: var(--c-tekst-3);
}
.strona-kampania .kampania-stan dd {
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  color: var(--c-tekst);
}
@media (min-width: 480px) {
  .strona-kampania .kampania-stan dt,
  .strona-kampania .kampania-stan dd { padding-block: 14px; }
}

@media (min-width: 768px) {
  .strona-kampania .kampania-hero {
    --zakladka: 96px;
    padding-block: clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem) clamp(4rem, 3.2571rem + 3.0476vw, 6rem); /* 48 → 72, 64 → 96 */
  }
  .strona-kampania .kampania-hero__wnetrze {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--zakladka) auto auto;
    width: min(100% - 2 * var(--margines), var(--kontener-max));
    margin-inline: auto;
  }
  .strona-kampania .kampania-hero__rycina { grid-column: 1; grid-row: 1 / 3; }
  .strona-kampania .kampania-hero__obraz {
    height: auto;
    aspect-ratio: auto;
    box-shadow: 0 0 0 1px var(--drewno-obrys);
  }
  /* karta zasłania dół zrzutu, więc do 1024 plakietka stoi w prawym górnym rogu */
  .strona-kampania .kampania-hero__rycina .plakietka { top: 24px; bottom: auto; }
  .strona-kampania .kampania-hero__karta {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: start;
    width: min(600px, 100% - 48px);
    gap: 20px;
    padding: 44px 44px 40px;
    box-shadow: 0 0 0 1px var(--mosiadz), 0 24px 60px rgba(20, 12, 6, 0.45);
  }
  .strona-kampania .kampania-hero__stan {
    grid-column: 1;
    grid-row: 4;
    width: auto;
    margin: 0;
    padding: 48px 0 0;
  }
}
@media (min-width: 1024px) {
  .strona-kampania .kampania-hero { --zakladka: clamp(8rem, 12.5vw, 11.25rem); } /* 128 → 180 */
  .strona-kampania .kampania-hero__wnetrze {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto var(--zakladka) auto;
    column-gap: 24px;
  }
  .strona-kampania .kampania-hero__rycina { grid-column: 1 / -1; }
  .strona-kampania .kampania-hero__rycina .plakietka { top: auto; bottom: 24px; }
  /* 1024–1279: karta na 7 kolumn, żeby tytuł i przyciski mieściły się jak w projekcie */
  .strona-kampania .kampania-hero__karta { grid-column: 1 / span 7; width: auto; }
  .strona-kampania .kampania-hero__stan { grid-column: 9 / span 4; grid-row: 3; }
}
@media (min-width: 1280px) {
  .strona-kampania .kampania-hero__karta { grid-column: 1 / span 6; }
  .strona-kampania .kampania-hero__stan { grid-column: 8 / span 5; }
}

/* --------------------------------------------------------------------------
   I. Punkt rozbieżności: „W historii” (oś czasu) i „W grze” (karta ze stronami konfliktu)
   -------------------------------------------------------------------------- */
.strona-kampania .kampania-rozbieznosc { gap: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem); } /* 40 → 64 */
.strona-kampania .kampania-kolumna {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem); /* 20 → 28 */
}
.strona-kampania .kampania-dopisek {
  padding-top: 4px;
  font-size: var(--fs-maly);
  line-height: 1.5;
  color: var(--c-tekst-3);
}

.strona-kampania .kampania-strony {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 22px;
  background: var(--karta);
  border-top: 6px solid var(--karmin);
  box-shadow: var(--cien-karty);
}
.strona-kampania .kampania-strony__wiersz {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  padding: 18px 0;
}
.strona-kampania .kampania-strony__wiersz + .kampania-strony__wiersz { border-top: 1px dashed var(--linia); }
.strona-kampania .kampania-strony__probki { display: flex; gap: 4px; padding-top: 5px; }
.strona-kampania .kampania-strony__tresc { display: flex; flex-direction: column; gap: 4px; }
.strona-kampania .kampania-strony__nazwa {
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.35;
}
.strona-kampania .kampania-strony__tekst { font-size: var(--fs-tekst); line-height: 1.5; color: var(--tekst-2); }
.strona-kampania .kampania-strony__uwaga {
  padding-top: 20px;
  border-top: 1px solid var(--linia);
  font-size: var(--fs-drobny);
  line-height: 1.5;
  color: var(--tekst-3);
}
@media (min-width: 600px) {
  .strona-kampania .kampania-strony { padding: 12px 32px 28px; }
  .strona-kampania .kampania-strony__wiersz { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
}


/* --------------------------------------------------------------------------
   II. Siedem misji aktu I: karty misji.
   Telefon: jedna kolumna; od 768: dwie; od 1024: trzy. Finał (misja 7) zajmuje cały rząd
   od 768, a od 1024 dzieli się na głowę (numer, nazwa, data) i treść obok.
   -------------------------------------------------------------------------- */
.strona-kampania .kampania-misje {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--siatka-odstep);
  margin: 0;
  padding: 0;
}
.strona-kampania .kampania-misje > li { display: flex; min-width: 0; }
@media (min-width: 768px) {
  .strona-kampania .kampania-misje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strona-kampania .kampania-misje__final { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .strona-kampania .kampania-misje { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.strona-kampania .kampania-misja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 20px 20px 22px;
  background: var(--karta);
  border-top: 6px solid var(--karmin);
  box-shadow: var(--cien-karty);
  color: var(--atrament);
}
@media (min-width: 600px) {
  .strona-kampania .kampania-misja { padding: 24px 26px 26px; }
}
.strona-kampania .kampania-misja__glowa,
.strona-kampania .kampania-misja__reszta { display: flex; flex-direction: column; gap: 10px; }
.strona-kampania .kampania-misja__reszta { flex-grow: 1; }
.strona-kampania .kampania-misja__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 24px;
}
.strona-kampania .kampania-misja__nr {
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem); /* 16 → 17 */
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--karmin);
}
.strona-kampania .kampania-misja__nazwa { font-size: var(--fs-h3); line-height: 1.1; }
.strona-kampania .kampania-misja__kiedy {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem); /* 16 → 18 */
  line-height: 1.4;
  color: var(--tekst-3);
}
.strona-kampania .kampania-misja__opis { font-size: var(--fs-maly); line-height: 1.5; color: var(--tekst-2); }
.strona-kampania .kampania-misja__cel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--linia);
  font-weight: 700;
  font-size: var(--fs-maly);
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .strona-kampania .kampania-misje__final .kampania-misja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 24px;
  }
  .strona-kampania .kampania-misje__final .kampania-misja__reszta { padding-top: 4px; }
}

/* Trzy uwagi pod misjami */
.strona-kampania .kampania-uwagi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 24px;
  padding-top: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem); /* 20 → 28 */
  border-top: 1px solid var(--linia);
  font-size: var(--fs-maly);
  line-height: 1.5;
  color: var(--tekst-2);
}
.strona-kampania .kampania-uwagi strong { color: var(--atrament); }
@media (min-width: 1024px) {
  .strona-kampania .kampania-uwagi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   III. Bohater (drewno) i V. Ekran kampanii: drugi akapit w kartach przygaszony
   (kolor z kontekstu, więc działa w ciemnych i jasnych kartach)
   -------------------------------------------------------------------------- */
.strona-kampania .kampania-forma__dopisek { color: var(--c-tekst-3); }

/* styles/pages/nacje.css */
/* ==========================================================================
   Nacje: przegląd /nacje/ (body.strona-nacje) i strony nacji /nacje/<nacja>/ (body.strona-nacja)
   Projekt: Nacje.dc.html i Nacja-*.dc.html (1440 px). Telefon i tablet w duchu projektu Telefon.
   Wspólne komponenty (karta-nacji, chipy, pasek-nacji, siatka-jednostek, karta-jednostki,
   karta-superbroni, fakty, sasiedzi) są w components.css; tu tylko to, co różni te strony.
   ========================================================================== */

/* ==========================================================================
   1. /nacje/: wstęp, karty nacji, „Kto kogo bije”
   ========================================================================== */
.strona-nacje .nacje-wstep {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.6286rem + 1.5238vw, 3rem); /* 32 → 48: tytuł → chipy nacji */
}
.strona-nacje .wstep-strony__bok .etykieta-mala { font-size: var(--fs-drobny); } /* „Jak czytać karty”: 15 px */
.strona-nacje .nacje-wstep__tekst { font-size: var(--fs-tekst); line-height: 1.5; color: var(--c-tekst-2); }

/* Karty nacji: plansza z portretem 250 px (portret 330 px = 0,648 × 509) */
.strona-nacje .karta-nacji { --portret-h: 250px; }
.strona-nacje .karta-nacji__licznik { font-size: var(--fs-drobny); line-height: 1.45; color: var(--c-tekst-3); }

/* Familia: szeroka ciemna karta pod siatką */
.strona-nacje .karta-nacji--szeroka .karta-nacji__tresc { gap: 12px; }
.strona-nacje .karta-nacji--szeroka .karta-nacji__motto {
  font-size: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem); /* 17 → 19 */
  color: var(--c-tekst-2);
}
.strona-nacje .karta-nacji__podsumowanie { font-size: var(--fs-tekst); line-height: 1.5; color: var(--c-tekst-3); }
.strona-nacje .karta-nacji__podsumowanie strong { color: var(--c-tekst); }
@media (min-width: 768px) {
  .strona-nacje .karta-nacji--szeroka .przycisk { align-self: flex-start; }
}

/* „Kto kogo bije”: wiersz z wnioskiem i przyciskami pod kartami */
.strona-nacje .nacje-wniosek {
  padding-top: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem); /* 24 → 32 */
  border-top: 1px solid var(--c-linia);
}
.strona-nacje .nacje-wniosek__tekst {
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.55;
  color: var(--c-tekst-2);
}
@media (max-width: 599.98px) {
  /* na telefonie lista „kto kogo” kończy się kreską, więc druga kreska byłaby zbędna */
  .strona-nacje .nacje-wniosek { padding-top: 0; border-top: 0; }
}
@media (min-width: 600px) {
  .strona-nacje .nacje-wniosek__akcje { gap: 12px 20px; }
}
@media (min-width: 1024px) {
  .strona-nacje .nacje-wniosek__akcje { justify-content: flex-end; }
}

/* ==========================================================================
   2. Strony nacji: wstęp z portretem oddziału
   ========================================================================== */
/* Pasek nacji ma już kreskę u dołu; pas „plansza” pod nim nie potrzebuje drugiej */
.strona-nacja .pasek-nacji + .pas { border-top: 0; }

/* Chipy w pasku nacji na tablecie: bez tego ostatni chip (Familia) zostawał sam w drugim rzędzie.
   600–767 px: równa siatka 4 + 3; 768–1023 px: węższe chipy mieszczą się w jednym rzędzie. */
@media (min-width: 600px) and (max-width: 767.98px) {
  .strona-nacja .pasek-nacji .chipy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .strona-nacja .pasek-nacji .chip--maly { padding-inline: 10px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .strona-nacja .pasek-nacji .chip--maly { padding-inline: 8px; }
}

/* Plansza z portretem (440 px = 0,864 × 509): telefon 5 : 4, od 600 px 340 px jak w projekcie */
.strona-nacja .nacja-portret {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 4;
  max-height: 340px;
  background: var(--c-tlo-obrazu);
  border-top: 8px solid var(--nacja, var(--linia));
  box-shadow: 0 0 0 1px var(--c-obrys);
  overflow: hidden;
}
.strona-nacja .nacja-portret img { max-width: 100%; height: auto; }
@media (min-width: 600px) {
  .strona-nacja .nacja-portret { aspect-ratio: auto; height: 340px; }
}

.strona-nacja .nacja-opis {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.7357rem + 0.5714vw, 1.25rem); /* 14 → 20 */
}
.strona-nacja .nacja-opis__naglowek { display: flex; flex-direction: column; gap: 8px; }
.strona-nacja .nacja-opis__tytul { font-size: clamp(2.125rem, 1.8929rem + 0.9524vw, 2.75rem); line-height: 1.05; } /* 34 → 44 */
.strona-nacja .nacja-opis__motto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--c-tekst-3);
}
.strona-nacja .nacja-opis__tekst { font-size: var(--fs-duzy); line-height: 1.6; color: var(--c-tekst); }
.strona-nacja .ciemne .nacja-opis__tekst { color: var(--c-tekst-2); }
.strona-nacja .fakty b { color: var(--c-tekst); }

/* ==========================================================================
   3. Strony nacji: wojsko (siatka jednostek)
   Telefon i tablet 2 kolumny, od 960 px 3, od 1280 px 4 jak w projekcie.
   ========================================================================== */
.strona-nacja .wojsko {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem); /* 20 → 28 */
}
.strona-nacja .siatka-jednostek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) {
  .strona-nacja .siatka-jednostek { gap: var(--siatka-odstep); }
}
@media (min-width: 960px) {
  .strona-nacja .siatka-jednostek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1280px) {
  .strona-nacja .siatka-jednostek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Pole superbroni: cały rząd do 959 px (na telefonie także jasna karta Familii, żeby opis nie był w wąskiej kolumnie);
   od 960 px na 2 kolumny, --3 na cały rząd (3 kolumny), od 1280 px na 3 z 4 */
.strona-nacja .siatka-jednostek__szeroka,
.strona-nacja .siatka-jednostek__szeroka--3 { grid-column: 1 / -1; }
@media (max-width: 599.98px) {
  .strona-nacja .siatka-jednostek__superbron { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .strona-nacja .siatka-jednostek__szeroka { grid-column: span 2; }
  .strona-nacja .siatka-jednostek__szeroka--3 { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .strona-nacja .siatka-jednostek__szeroka--3 { grid-column: span 3; }
}

/* ==========================================================================
   4. Superbroń: warianty z projektu
   --rycina (Koalicja, Dyktat): zrzut z podpisem, 2 kolumny
   --ikona (Marchia): ciemna karta z ikoną, 2 kolumny
   --pozioma (Protektorat, Porta, Arcyksięstwo): 3 kolumny, opis z boku
   --jasna (Familia): jasna karta w jednej kolumnie, pas w kolorze Dyktatu
   ========================================================================== */
.strona-nacja .karta-superbroni--rycina .karta-superbroni__rycina img { aspect-ratio: 1400 / 626; object-fit: cover; }

.strona-nacja .karta-superbroni__ikona { width: 40px; height: 40px; flex-shrink: 0; color: var(--c-mosiadz); }
.strona-nacja .karta-superbroni__przypis {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-tekst);
  line-height: 1.5;
  color: var(--c-tekst-3);
}

.strona-nacja .karta-superbroni--ikona .karta-superbroni__tresc {
  justify-content: center;
  gap: 12px;
  padding: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem); /* 24 → 32 */
}
.strona-nacja .karta-superbroni--ikona .karta-superbroni__nazwa { font-size: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem); line-height: 1.05; } /* 26 → 30 */
.strona-nacja .karta-superbroni--ikona .karta-superbroni__opis { line-height: 1.55; }

.strona-nacja .karta-superbroni--pozioma { gap: 20px; padding: 24px 20px 26px; }
.strona-nacja .karta-superbroni--pozioma .karta-superbroni__tresc { gap: 10px; padding: 0; }
.strona-nacja .karta-superbroni--pozioma .karta-superbroni__wiersz { justify-content: flex-start; column-gap: 14px; }
.strona-nacja .karta-superbroni--pozioma .karta-superbroni__nazwa { font-size: clamp(1.875rem, 1.6429rem + 0.9524vw, 2.5rem); line-height: 1.05; } /* 30 → 40 */
.strona-nacja .karta-superbroni__bok {
  padding-top: 20px;
  border-top: 1px solid var(--c-linia);
  font-size: var(--fs-duzy);
  line-height: 1.6;
  color: var(--c-tekst-2);
}
@media (min-width: 768px) {
  .strona-nacja .karta-superbroni--pozioma {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    align-content: center;
    padding: 36px 40px;
  }
  .strona-nacja .karta-superbroni__bok { align-self: center; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--c-linia); }
}

/* Jasna karta na ciemnej stronie: przywraca jasny kontekst kolorów */
.strona-nacja .karta-superbroni--jasna {
  --c-tekst: var(--atrament);
  --c-tekst-2: var(--tekst-2);
  --c-tekst-3: var(--tekst-3);
  --c-etykieta: var(--karmin);
  --c-mosiadz: var(--mosiadz);
  --c-akcent: var(--karmin);
  --c-linia: var(--linia);
  --c-obrys: var(--obrys);
  --c-fokus: var(--karmin);
  background: var(--pergamin);
  border-top: 8px solid var(--nacja, var(--linia));
  box-shadow: 0 0 0 1px var(--obrys);
}
.strona-nacja .karta-superbroni--jasna .karta-superbroni__tresc { gap: 10px; padding: 24px 22px 26px; }
.strona-nacja .karta-superbroni--jasna .karta-superbroni__wiersz { flex-direction: column; align-items: flex-start; gap: 2px; }
.strona-nacja .karta-superbroni--jasna .karta-superbroni__ikona { width: 36px; height: 36px; color: var(--c-tekst); }
.strona-nacja .karta-superbroni--jasna .karta-superbroni__przypis { font-size: var(--fs-drobny); }

/* ==========================================================================
   5. Poprzednia / następna nacja (projekt: 64 u góry, 88 u dołu)
   ========================================================================== */
.strona-nacja .nacja-sasiedzi {
  padding-block: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem) clamp(3.5rem, 2.7571rem + 3.0476vw, 5.5rem);
}

/* styles/pages/pc.css */
/* ==========================================================================
   Strona "Wersja na PC" (/pl/pc/, /pc/ i przeklady): fakty obok tytulu
   ========================================================================== */

.strona-pc .pc-fakty { --fakty-kol: 104px; }
.strona-pc .pc-fakty dd { font-size: var(--fs-maly); line-height: 1.55; }

/* Tryb realistyczny: szesc kart, wiec na szerokim ekranie trzy kolumny zamiast czterech (bez pustego miejsca w drugim rzedzie) */
@media (min-width: 1024px) {
  .strona-pc .kto-kogo--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* styles/pages/prasa.css */
/* ==========================================================================
   Strona: Materiały prasowe (/prasa/), projekt Prasa.dc.html
   Każdy selektor zaczyna się od .strona-prasa (bodyClass strony).
   Spis:
     1. Wstęp: większy h1, przyciski, karta „Zawartość paczki” (.paczka)
     2. I. Fakty i opis: kolumny, wiersze w <dd>, trzy opisy (.opis-gry)
     3. II. Cechy: lista z rombami (.wyrozniki)
     4. III. Historia (oś czasu to wspólny .os-czasu)
     5. IV. Zrzuty: siatka kadrów, wiersz pliku, link „Pobierz” (.kadry, .plik, .pobierz)
     6. V. Grafiki: ikona na jasnym / ciemnym tle, logo, portrety oddziałów
     7. VI. Zasady korzystania
     8. Kontakt prasowy (pas karminowy, lista danych)
   ========================================================================== */

/* ---------- 1. Wstęp ---------- */
.strona-prasa .wstep-strony {
  padding-bottom: clamp(3rem, 1.9786rem + 4.1905vw, 5.5rem); /* 48 → 88, jak u góry */
}
.strona-prasa .tytul-strony {
  font-size: clamp(2.625rem, 1.9286rem + 2.8571vw, 4.5rem); /* 42 → 72 */
  line-height: 0.98;
}
.strona-prasa .prasa-lead { max-width: 640px; }
.strona-prasa .prasa-przyciski { align-self: stretch; padding-top: 8px; }

/* Karta „Zawartość paczki” obok tytułu */
.strona-prasa .paczka {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px 20px 22px;
  background: var(--karta);
  border-top: 6px solid var(--karmin);
  box-shadow: var(--cien-karty);
}
.strona-prasa .paczka__tytul {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-drobny);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--mosiadz);
}
.strona-prasa .paczka__lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-bottom: 1px dashed var(--linia);
  font-size: var(--fs-tekst);
  line-height: 1.4;
}
.strona-prasa .paczka__pozycja {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px dashed var(--linia);
}
.strona-prasa .paczka__pozycja dd { margin: 0; font-weight: 700; text-align: right; }
.strona-prasa .paczka__data { font-size: var(--fs-drobny); color: var(--tekst-3); }
@media (min-width: 600px) {
  .strona-prasa .paczka { padding: 28px 32px 26px; }
}

/* ---------- 2. I. Fakty i opis ---------- */
.strona-prasa .prasa-kolumna {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem); /* 16 → 20 */
}
@media (min-width: 1024px) {
  .strona-prasa .prasa-opisy { padding-left: 16px; }
}

.strona-prasa .fakty dd { color: var(--c-tekst); line-height: 1.5; }
.strona-prasa .prasa-linia { display: block; }
.strona-prasa .prasa-linia + .prasa-linia { margin-top: 2px; }
.strona-prasa .prasa-linia--uwaga { padding-top: 4px; font-size: var(--fs-drobny); color: var(--c-tekst-3); }
.strona-prasa .prasa-email {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  color: var(--c-akcent);
  overflow-wrap: anywhere;
}
.strona-prasa .prasa-email:hover { color: var(--c-link-hover); }

/* Trzy długości opisu gry */
.strona-prasa .opisy { display: flex; flex-direction: column; }
.strona-prasa .opis-gry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--linia);
}
.strona-prasa .opis-gry:last-child { padding-bottom: 0; }
.strona-prasa .opis-gry__etykieta {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-drobny);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--mosiadz);
}
.strona-prasa .opis-gry__zdanie {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1804rem + 0.2857vw, 1.4375rem); /* 20 → 23 */
  line-height: 1.45;
}
.strona-prasa .opis-gry__krotki {
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.6;
}
.strona-prasa .opis-gry__dlugi { font-size: var(--fs-tekst); line-height: 1.6; color: var(--tekst-2); }

/* ---------- 3. II. Najważniejsze cechy ---------- */
.strona-prasa .wyrozniki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linia);
}
.strona-prasa .wyrozniki__pozycja {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 0;
  border-top: 1px solid var(--linia);
  font-weight: 500;
  font-size: var(--fs-duzy);
  line-height: 1.4;
}
.strona-prasa .wyrozniki__romb { flex-shrink: 0; width: 14px; height: 14px; color: var(--mosiadz-ozdoba); }
@media (min-width: 768px) {
  .strona-prasa .wyrozniki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strona-prasa .wyrozniki__pozycja { gap: 18px; min-height: 76px; padding: 16px 0; }
}

/* ---------- 4. III. Historia ---------- */
.strona-prasa .prasa-historia__tekst { line-height: 1.6; }

/* ---------- 5. IV. Zrzuty ekranu ---------- */
.strona-prasa .kadry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.6286rem + 1.5238vw, 3rem) 24px; /* rzędy 32 → 48 */
}
@media (min-width: 768px) {
  .strona-prasa .kadry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* pierwszy kadr (miasto) na całą szerokość, żeby pozostałe osiem stało parami */
  .strona-prasa .kadr--szeroki { grid-column: 1 / -1; }
}
/* Podgląd lekko przycięty do proporcji z projektu (588 × 271); plik do pobrania ma pełną klatkę */
.strona-prasa .kadr__obraz { aspect-ratio: 588 / 271; object-fit: cover; }
.strona-prasa .kadr__podpis { display: flex; flex-direction: column; gap: 8px; }
/* W dwóch kolumnach podpisy mają różną liczbę wierszy: wiersz „Pobierz” trzyma się dołu,
   więc kreski i przyciski w jednym rzędzie stoją na tej samej wysokości */
@media (min-width: 768px) {
  .strona-prasa .kadr__podpis { flex-grow: 1; }
  .strona-prasa .kadr__podpis .plik { margin-top: auto; }
}

/* Wiersz pliku: wymiary / opis z lewej, „Pobierz” z prawej */
.strona-prasa .plik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.strona-prasa .kadr__podpis .plik { border-top: 1px dashed var(--linia); }
.strona-prasa .plik__meta { font-size: var(--fs-drobny); line-height: 1.45; color: var(--c-tekst-3); }

/* Link do pobrania pliku (karmin, ikona strzałki w dół), min. 44 px */
.strona-prasa .pobierz {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--c-akcent);
  font-weight: 700;
  font-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem); /* 16 → 17 */
  line-height: 1.2;
  text-decoration: none;
}
.strona-prasa .pobierz:hover { color: var(--c-link-hover); }
.strona-prasa .pobierz svg { flex-shrink: 0; width: 18px; height: 18px; }
.strona-prasa .pobierz--maly { gap: 6px; font-size: 1rem; }
.strona-prasa .pobierz--maly svg { width: 16px; height: 16px; }

/* ---------- 6. V. Grafiki ---------- */
.strona-prasa .grafiki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .strona-prasa .grafiki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.strona-prasa .grafika { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.strona-prasa .grafika__plansza {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  background: var(--karta);
  box-shadow: var(--cien-karty);
}
@media (min-width: 1024px) {
  .strona-prasa .grafika__plansza { height: 280px; }
}
.strona-prasa .grafika__plansza--ciemna { background: var(--drewno); box-shadow: 0 0 0 1px var(--drewno-obrys); }
.strona-prasa .grafika__ikona { border-radius: 36px; }
/* Miejsce na logo wektorowe (przerywana ramka) */
.strona-prasa .grafika__zastepcze {
  padding: 24px;
  border: 1.5px dashed var(--linia);
  background: none;
  box-shadow: none;
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--tekst-3);
}
/* Telefon: plansze stoją jedna pod drugą, więc sam napis nie potrzebuje pełnych 240 px */
@media (max-width: 767.98px) {
  .strona-prasa .grafika__zastepcze { height: 160px; }
}
.strona-prasa .plik--grafika { flex-wrap: wrap; row-gap: 0; min-height: 44px; }
.strona-prasa .plik__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.strona-prasa .plik__tytul {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.3;
  text-wrap: pretty;
}

/* Portrety oddziałów nacji: 2 kolumny (telefon) → 4 (768) → 7 w jednym rzędzie, gdy kontener ma 1200 px */
.strona-prasa .oddzialy-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
}
.strona-prasa .oddzialy-naglowek__dopisek { font-size: var(--fs-maly); }
.strona-prasa .oddzialy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .strona-prasa .oddzialy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .strona-prasa .oddzialy { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.strona-prasa .oddzial {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--karta);
  border-top: 6px solid var(--nacja, var(--linia));
  box-shadow: var(--cien-karty);
}
.strona-prasa .oddzial__portret {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 120px;
  background: var(--tlo-obrazu);
  overflow: hidden;
}
.strona-prasa .oddzial__portret img { max-width: 100%; height: auto; }
.strona-prasa .oddzial__tresc { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px 4px; }
.strona-prasa .oddzial__nazwa { font-size: 1.125rem; line-height: 1.2; }

/* ---------- 7. VI. Zasady korzystania ---------- */
.strona-prasa .zasady { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .strona-prasa .zasady { padding-top: 40px; }
}
.strona-prasa .zasady__ramka {
  padding: 18px 20px;
  border: 1.5px dashed var(--linia);
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.55;
  color: var(--tekst-2);
}
@media (min-width: 600px) {
  .strona-prasa .zasady__ramka { padding: 20px 24px; }
}

/* ---------- 8. Kontakt prasowy (pas karminowy) ---------- */
.strona-prasa .kontakt-dane {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-bottom: 1px solid var(--c-linia);
}
.strona-prasa .kontakt-dane__wiersz {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--c-linia);
}
.strona-prasa .kontakt-dane dt {
  font-family: var(--font-sc);
  font-weight: 500;
  font-size: var(--fs-drobny);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--c-etykieta);
}
.strona-prasa .kontakt-dane dd {
  margin: 0;
  font-size: var(--fs-duzy);
  line-height: 1.45;
  color: var(--c-tekst);
  overflow-wrap: anywhere;
}
.strona-prasa .kontakt-dane .kontakt-dane__email {
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem); /* 20 → 24 */
  line-height: 1.3;
}
.strona-prasa .kontakt-dane__email a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; }

/* styles/pages/prywatnosc.css */
/* ==========================================================================
   Polityka prywatności (/prywatnosc/, body.strona-prywatnosc)
   Projekt Prywatnosc.dc.html: wstęp na planszy, pod nim spis treści w lewej
   kolumnie (3 kol.) i paragrafy od 5. kolumny (7 kol.). Telefon: spis nad
   treścią; tablet: spis w dwóch kolumnach; od 1024 px spis przyklejony.

   Strona 404 (/404.html, body.strona-404) też ma style tutaj (na dole).
   ========================================================================== */

/* --- Wstęp --- */
.strona-prywatnosc .prywatnosc-wstep { gap: 16px; }
.strona-prywatnosc .prywatnosc-wstep__lead { max-width: 760px; line-height: 1.5; }
.strona-prywatnosc .prywatnosc-wstep__data {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tekst-3);
}

/* --- Układ: spis treści + paragrafy --- */
.strona-prywatnosc .prywatnosc-tresc {
  padding-top: clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem);   /* 48 → 72 */
  padding-bottom: clamp(4rem, 3.2571rem + 3.0476vw, 6rem);  /* 64 → 96 */
}
.strona-prywatnosc .prywatnosc-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 2.2214rem + 1.1429vw, 3.25rem) 24px; /* 40 → 52 */
}
.strona-prywatnosc .prywatnosc-uklad > * { min-width: 0; }

/* --- Spis treści --- */
.strona-prywatnosc .prywatnosc-spis { display: flex; flex-direction: column; }
.strona-prywatnosc .prywatnosc-spis__tytul { padding-bottom: 8px; font-size: var(--fs-drobny); }
.strona-prywatnosc .prywatnosc-spis__lista { display: flex; flex-direction: column; }
.strona-prywatnosc .prywatnosc-spis__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--atrament);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}
.strona-prywatnosc .prywatnosc-spis__link:hover {
  color: var(--karmin-ciemny);
  text-decoration: underline;
}

/* Tablet: spis w dwóch kolumnach, żeby nie spychał treści w dół */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .strona-prywatnosc .prywatnosc-spis__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: 24px;
  }
}

/* Komputer: spis w lewej kolumnie (przyklejony), paragrafy od 5. kolumny */
@media (min-width: 1024px) {
  .strona-prywatnosc .prywatnosc-uklad {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .strona-prywatnosc .prywatnosc-spis {
    grid-column: 1 / span 3;
    position: sticky;
    top: 24px;
  }
  .strona-prywatnosc .prywatnosc-paragrafy { grid-column: 5 / span 7; }
}
/* Mysz na komputerze: wiersze spisu 36 px co 4 px jak w projekcie (dotyk zostaje przy 44 px) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .strona-prywatnosc .prywatnosc-spis__lista { gap: 4px; }
  .strona-prywatnosc .prywatnosc-spis__link { min-height: 36px; }
}

/* --- Paragrafy --- */
.strona-prywatnosc .prywatnosc-paragrafy {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 2.0643rem + 0.7619vw, 2.75rem); /* 36 → 44 */
  font-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
  line-height: 1.6;
}

/* Ramka „W skrócie” */
.strona-prywatnosc .prywatnosc-skrot { gap: 10px; }
@media (min-width: 600px) {
  .strona-prywatnosc .prywatnosc-skrot { padding: 24px 28px; }
}
.strona-prywatnosc .prywatnosc-skrot__tytul {
  font-size: var(--fs-h4); /* 19 → 22 */
  line-height: 1.2;
}
.strona-prywatnosc .prywatnosc-skrot__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 22px;
}

/* Jeden paragraf: tytuł „§ N.” i akapity */
.strona-prywatnosc .prywatnosc-paragraf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 24px;
}
.strona-prywatnosc .prywatnosc-paragraf__tytul {
  font-size: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem); /* 26 → 30 */
  line-height: 1.15;
}

/* ==========================================================================
   Strona 404 (body.strona-404)
   Pas planszy wypełnia wysokość między nagłówkiem a stopką.
   ========================================================================== */
.strona-404 { display: flex; flex-direction: column; }
.strona-404 > main { display: flex; flex-direction: column; flex-grow: 1; }
.strona-404 .blad {
  flex-grow: 1;
  padding-block: clamp(3.5rem, 2.3857rem + 4.5714vw, 6.5rem) clamp(4rem, 3.2571rem + 3.0476vw, 6rem); /* 56 → 104, 64 → 96 */
}
.strona-404 .blad__lead { max-width: 760px; }
.strona-404 .blad__nawigacja { width: 100%; padding-top: 8px; }
.strona-404 .blad__przyciski .przycisk { width: 100%; }
@media (min-width: 600px) {
  .strona-404 .blad__przyciski .przycisk { width: auto; }
}
.strona-404 .blad__en {
  padding-top: 4px;
  font-size: var(--fs-maly);
  line-height: 1.5;
  color: var(--tekst-3);
}
.strona-404 .blad__en a { display: inline-block; padding-block: 11px; }

/* styles/pages/roadmapa.css */
/* ==========================================================================
   Strona "Plany rozwoju" (/pl/roadmapa/, /roadmap/; ukryta: tak, tylko w podgladzie): data stanu, statusy, lista z rombami
   ========================================================================== */

.strona-roadmapa .roadmapa-stan { font-family: var(--font-sc); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; color: var(--c-akcent); }

/* status na karcie: W planach (obrys), W drodze (mosiadz), Gotowe (karmin) */
.strona-roadmapa .roadmapa-znacznik { align-self: flex-start; }
.strona-roadmapa .roadmapa-znacznik--droga { background: var(--c-mosiadz); box-shadow: none; color: var(--kremowy); }
.strona-roadmapa .roadmapa-znacznik--gotowe { background: var(--karmin); box-shadow: none; color: var(--kremowy); }

.strona-roadmapa .roadmapa-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-maly);
  line-height: 1.5;
  color: var(--c-tekst-2);
}
.strona-roadmapa .roadmapa-lista > li { position: relative; padding-left: 22px; }
.strona-roadmapa .roadmapa-lista > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--c-mosiadz);
  transform: rotate(45deg);
}
.strona-roadmapa .karta .link-strzalka { margin-top: auto; }

/* styles/pages/tworca.css */
/* ==========================================================================
   Strona "O twórcy" (/pl/tworca/, /creator/ i przeklady): fakty obok tytulu, tekst obok tytulu sekcji,
   dwa hołdy (zrzut + tekst; od 1024 px obok siebie, drugi odwrócony)
   ========================================================================== */

.strona-tworca .tworca-fakty { --fakty-kol: 96px; }
.strona-tworca .tworca-fakty dd { font-size: var(--fs-maly); line-height: 1.55; }

/* akapity obok tytułu sekcji (I i III) */
.strona-tworca .tworca-tekst {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--fs-duzy);
  line-height: 1.65;
  color: var(--c-tekst-2);
}
.strona-tworca .tworca-tekst > .wstep { color: var(--c-tekst); }
.strona-tworca .tworca-tekst .link-strzalka { align-self: flex-start; margin-top: 4px; }

/* hołd: zrzut i tekst; na telefonie zrzut nad tekstem */
.strona-tworca .hold { display: grid; gap: 24px; align-items: center; }
.strona-tworca .hold__tekst { display: flex; flex-direction: column; gap: 12px; }
.strona-tworca .hold__tekst p:not(.etykieta-mala) { font-size: var(--fs-duzy); line-height: 1.65; color: var(--c-tekst-2); }
@media (min-width: 1024px) {
  .strona-tworca .hold { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .strona-tworca .hold--odwrotnie { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .strona-tworca .hold--odwrotnie > .rycina { order: 2; }
}

.strona-tworca .karta .link-strzalka { margin-top: auto; }

/* inne serie RTS: tytuły w rzędzie z rombami (na telefonie jeden pod drugim) */
.strona-tworca .hold-inne__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sc);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-tekst);
}
.strona-tworca .hold-inne__lista > li { position: relative; padding-left: 20px; }
.strona-tworca .hold-inne__lista > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--c-mosiadz);
  transform: rotate(45deg);
}