/* OSTATNI ODCZYT – strona sprzedaży, logowanie, konto, zakup, panel admina.
   Estetyka akt: noc nad obserwatorium w nagłówku, papier w treści, jeden kolor
   akcentu (czerwień akt #8f2020), szeryfowa treść, wąskie oznaczenia. */

@font-face { font-family: "Caladea"; src: url("../fonty/caladea.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("../fonty/caladea-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("../fonty/caladea-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DejaVu Cond"; src: url("../fonty/dejavu-cond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DejaVu Cond"; src: url("../fonty/dejavu-cond-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DejaVu Mono"; src: url("../fonty/dejavu-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --noc: #0b1020;
  --noc-2: #141a2e;
  --noc-3: #1f2842;
  --gwiazda: #e8e6df;
  --papier: #f4f0e5;
  --papier-2: #ebe5d6;
  --papier-3: #d9d0b9;
  --atrament: #1d1d22;
  --szary: #5b5b66;
  --szary-jasny: #9aa1b4;
  --mosiadz: #c8a45a;
  --czerwien: #8f2020;
  --czerwien-2: #a82a2a;
  --zielen: #2f6b3c;
  --szer: 1120px;
  --serif: "Caladea", Georgia, "Times New Roman", serif;
  --sans: "DejaVu Cond", "Arial Narrow", Arial, sans-serif;
  --mono: "DejaVu Mono", "Courier New", monospace;
  --cien: 0 18px 50px rgba(5, 8, 18, .35);
  /* MARKA-TD (runda 10): marka Archiwum Zagadek – kolory, krój i ruch (BRAND_GUIDELINES.md, rozdziały 5, 6 i 11).
     Wartości zapasowe: /pliki/wyglad.css (panel: Wygląd i marka) nadpisuje te, które odpowiadają kolorom z panelu
     (granat, noc, papier, kartka, atrament, gwiazda, bursztyn, ochra). Maskotka i sygnet mają kolory stałe (w plikach SVG). */
  --marka-bursztyn: #f2b544;        /* bursztyn (pudło archiwalne): sygnet, maskotka, przycisk na nocy (napis nocą 10,3:1) */
  --marka-bursztyn-ciemny: #d18b26; /* pokrywa pudła, cienie, ozdoby; nie do tekstu */
  --marka-bursztyn-jasny: #fbe3a6;  /* tło plakietek, podświetlenie, iskry */
  --marka-ochra: #b5761d;           /* fokus i sygnatury: 3,4:1 na papierze, 5,0:1 na nocy */
  --marka-ochra-tekst: #8a540b;     /* napis w barwie bursztynu na jasnym tle (5,6:1) */
  --marka-granat: #23427f;          /* przyciski i linki na jasnym tle (biały napis 9,7:1) */
  --marka-granat-2: #1b3566;        /* granat po najechaniu */
  --marka-noc: #0b1020;             /* nagłówek, stopka, sekcje nocne */
  --marka-noc-2: #141a2e;           /* karty na nocy */
  --marka-atrament: #1a2033;        /* tekst na jasnym tle (14,4:1) */
  --marka-papier: #f6f1e7;          /* tło treści */
  --marka-kartka: #fffcf6;          /* karty, okna; kartki maskotki */
  --marka-gwiazda: #ede9e0;         /* tekst na nocy (15,6:1) */
  --marka-pieczec: #6a45b8;         /* fiolet pieczątki: odznaki, osiągnięcia, serie (5,9:1 na papierze) */
  --marka-pieczec-jasna: #b9a2f0;   /* pieczątka na nocy (8,6:1) */
  --marka-koral: #e2574c;           /* rumieńce i język maskotki, konfetti; nie do tekstu */
  --marka-kroj: "Rubik", "Montserrat", "Segoe UI", system-ui, sans-serif;   /* logo, nagłówki, przyciski */
  --marka-ruch-krotki: 150ms;       /* najechanie, wciśnięcie */
  --marka-ruch: 250ms;              /* rozwinięcie, pojawienie się */
  --marka-ruch-dlugi: 400ms;        /* wejście maskotki, uniesienie pokrywy (dłużej nie) */
  --marka-krzywa: cubic-bezier(.2, .7, .2, 1);              /* wyhamowanie */
  --marka-krzywa-sprezyna: cubic-bezier(.34, 1.45, .64, 1); /* lekkie odbicie: maskotka, odznaki */
  --marka-cien: 0 10px 28px rgba(11, 16, 32, .16);
  --marka-cien-uniesienie: 0 16px 40px rgba(11, 16, 32, .24);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papier); color: var(--atrament);
  font: 18px/1.6 var(--serif); text-rendering: optimizeLegibility;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: var(--czerwien); text-underline-offset: .18em; }
a:hover { color: var(--czerwien-2); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
.ukryte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mosiadz); outline-offset: 2px; }

.sygn {
  font: 12.5px/1.4 var(--mono); letter-spacing: .1em; color: var(--mosiadz);
  margin: 0 0 14px;
}
.maly { font-size: 14.5px; color: var(--szary); }

/* ───────────── przyciski */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1.5px solid currentColor;
  font: 700 16px/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--atrament); background: transparent; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.przycisk:hover { background: rgba(0, 0, 0, .05); color: var(--atrament); }
.przycisk:active { transform: translateY(1px); }
.przycisk.glowny { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }
.przycisk.glowny:hover { background: var(--czerwien-2); border-color: var(--czerwien-2); color: #fff; }
.przycisk.jasny { color: var(--gwiazda); border-color: rgba(232, 230, 223, .55); }
.przycisk.jasny:hover { background: rgba(232, 230, 223, .1); color: #fff; }
.przycisk.duzy { min-height: 56px; font-size: 18px; padding: 0 28px; }
.przycisk[disabled], .przycisk.wylaczony { opacity: .45; cursor: not-allowed; }
.przycisk-tekstowy { background: none; border: 0; padding: 0; font: inherit; color: var(--czerwien); text-decoration: underline; cursor: pointer; }

/* ───────────── pasek górny */
.pasek {
  position: absolute; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px clamp(16px, 4vw, 40px); color: var(--gwiazda);
}
.pasek a { color: inherit; text-decoration: none; }
.pasek-znak { font: 700 15px/1 var(--sans); letter-spacing: .22em; }
.pasek-nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font: 15px/1 var(--sans); }
.pasek-nav a:hover { color: #fff; text-decoration: underline; }
.pasek-konto { border: 1px solid rgba(232, 230, 223, .45); border-radius: 4px; padding: 9px 14px; }
.pasek.ciemny-tekst { position: static; color: var(--atrament); border-bottom: 1px solid var(--papier-3); background: var(--papier); }
.pasek.ciemny-tekst .pasek-konto { border-color: var(--papier-3); }
@media (max-width: 640px) { .pasek-nav .opcjonalny { display: none; } }

/* ───────────── nagłówek z nocnym niebem */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; color: var(--gwiazda); background: var(--noc);
  overflow: hidden; display: flex; align-items: center;
}
.hero-scena { position: absolute; inset: 0; }
.hero-scena > * { position: absolute; }
/* zdjęcie obserwatorium bez gwiazd; kadrowanie = "pozycja" w media/niebo.json (narzedzia/kadr_hero.py) */
.hero-scena > picture { inset: 0; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.hero-niebo { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero-niebo.gotowe { opacity: 1; }
.hero-mgla {
  left: -20%; right: -20%; bottom: 0; height: 36%; pointer-events: none; opacity: .35;
  background:
    radial-gradient(40% 60% at 20% 90%, rgba(150, 160, 178, .28), transparent 70%),
    radial-gradient(35% 55% at 55% 95%, rgba(150, 160, 178, .22), transparent 70%),
    radial-gradient(40% 60% at 85% 92%, rgba(150, 160, 178, .25), transparent 70%);
  animation: mgla 60s ease-in-out infinite alternate;
}
@keyframes mgla { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.hero-wideo { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cien {
  inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 11, 22, .82) 0%, rgba(8, 11, 22, .55) 38%, rgba(8, 11, 22, 0) 62%),
              linear-gradient(0deg, rgba(8, 11, 22, .55) 0%, rgba(8, 11, 22, 0) 30%);
}
.hero-tresc {
  position: relative; z-index: 2; width: 100%; max-width: var(--szer); margin: 0 auto;
  padding: 120px clamp(16px, 4vw, 40px) 72px;
}
.hero-tresc > * { max-width: 560px; }
.hero-tytul {
  font: 700 clamp(52px, 8.6vw, 104px)/.95 var(--serif); letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 22px; text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.hero-lead { font-size: clamp(18px, 1.7vw, 21px); color: #d6dae4; }
.hero-fakty { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 0 0 28px; }
.hero-fakty li {
  font: 13.5px/1 var(--sans); letter-spacing: .05em; padding: 8px 11px; border: 1px solid rgba(232, 230, 223, .3);
  border-radius: 3px; color: #cfd4de; background: rgba(11, 16, 32, .35);
}
.hero-kup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cena { flex-basis: 100%; margin: 0 0 4px; font: 700 34px/1.1 var(--serif); }
.cena span { display: block; font: 15px/1.4 var(--sans); color: var(--szary-jasny); margin-top: 6px; }
.cena-promo { flex-basis: 100%; font: 14px/1.4 var(--sans); color: var(--szary-jasny); margin: -2px 0 6px; }
.cena-promo s { color: var(--szary-jasny); }
.hero-przewin {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--szary-jasny);
  font: 12px/1 var(--mono); letter-spacing: .15em; text-decoration: none; text-transform: uppercase;
}
.hero-przewin:hover { color: #fff; }
@media (max-aspect-ratio: 1/1) {
  .hero { align-items: flex-end; }
  .hero-cien {
    background: linear-gradient(0deg, rgba(8, 11, 22, .92) 0%, rgba(8, 11, 22, .75) 40%, rgba(8, 11, 22, 0) 62%);
  }
  .hero-tresc { padding-top: 52vh; padding-bottom: 56px; }
  .hero-foto { object-position: 50% 32%; }
}
@media (max-width: 480px) {
  .hero-tytul { font-size: 48px; }
  .cena { font-size: 30px; }
  .hero-kup .przycisk { flex: 1 1 100%; }
}

/* ───────────── katalog gier (strona /gry albo główna w trybie katalogu) */
.hero-katalog { min-height: 88vh; min-height: 88svh; }
.hero-tytul-katalog { font-size: clamp(40px, 6vw, 76px); letter-spacing: .01em; text-transform: none; line-height: 1.02; }
.gry-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; margin-top: 28px; }
.gra-karta {
  display: flex; flex-direction: column; background: #fbf8f0; border: 1px solid var(--papier-3); border-radius: 4px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(5, 8, 18, .08); transition: transform .2s ease, box-shadow .2s ease;
}
.gra-karta:not(.wkrotce):hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(5, 8, 18, .16); }
.gra-okladka { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--noc); overflow: hidden; color: #fff; }
.gra-okladka img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: transform .6s ease; }
.gra-karta:not(.wkrotce):hover .gra-okladka img { transform: scale(1.04); }
.gra-gatunek {
  position: absolute; left: 12px; top: 12px; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 9px; border-radius: 3px; background: rgba(8, 11, 22, .72); color: #fff;
}
.gra-opis { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.gra-opis h3 { font-size: 24px; margin: 0 0 8px; text-wrap: balance; }
.gra-opis h3 a { color: var(--atrament); text-decoration: none; }
.gra-opis h3 a:hover { color: var(--czerwien); }
.gra-opis > p { font-size: 16.5px; color: #3a3a42; }
.gra-fakty { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.gra-fakty li { font: 13px/1 var(--sans); padding: 6px 8px; border: 1px solid var(--papier-3); border-radius: 3px; color: var(--szary); }
.gra-cena { font: 700 26px/1.1 var(--serif); margin: auto 0 12px; }
.gra-cena span { font: 13.5px/1.3 var(--sans); color: var(--szary); font-weight: 400; margin-left: 6px; }
.gra-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.gra-przyciski .przycisk { flex: 1 1 auto; min-height: 44px; font-size: 15px; padding: 0 14px; }
.gra-etykieta { font: 700 12px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--czerwien) !important; margin: 0 0 8px; }
.gra-karta.wkrotce { background: var(--papier-2); }
.gra-karta.wkrotce .gra-okladka { display: grid; place-items: center; }
.gra-znak { width: 76px; height: 76px; opacity: .9; }
.gra-znak svg { width: 100%; height: 100%; }
.styl-cyberpunk .gra-okladka { background: radial-gradient(120% 90% at 20% 110%, #ff2e88 0%, transparent 55%),
  radial-gradient(90% 80% at 90% -10%, #19d3ff 0%, transparent 50%), linear-gradient(160deg, #120a2a, #05030f); color: #aef6ff; }
.styl-dzieci .gra-okladka { background: radial-gradient(100% 90% at 80% 10%, #ffd166 0%, transparent 60%),
  radial-gradient(90% 90% at 10% 100%, #06d6a0 0%, transparent 60%), linear-gradient(160deg, #2b6cb0, #1a4480); color: #fff7d6; }
.styl-horror .gra-okladka { background: radial-gradient(80% 70% at 50% 30%, #3b0d0d 0%, transparent 70%),
  linear-gradient(180deg, #120606, #030101); color: #d64545; }
.styl-kryminal.wkrotce .gra-okladka { background: linear-gradient(160deg, var(--noc-3), var(--noc)); color: var(--mosiadz); }
@media (prefers-reduced-motion: reduce) { .gra-karta, .gra-okladka img { transition: none; } }

/* ───────────── sekcje treści */
.sekcja { padding: clamp(64px, 9vw, 112px) clamp(16px, 4vw, 40px); }
.sekcja > .wnetrze { max-width: var(--szer); margin: 0 auto; }
.sekcja.ciemna { background: var(--noc); color: var(--gwiazda); }
.sekcja.ciemna a { color: var(--mosiadz); }
.sekcja.papier-2 { background: var(--papier-2); }
.dwie-kolumny { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .dwie-kolumny { grid-template-columns: 1fr; } }
.wstep { font-size: 21px; }

/* dokument z akt (pismo) */
.pismo {
  position: relative; background: #fbf8f0; border: 1px solid var(--papier-3); padding: 34px 34px 28px;
  box-shadow: 0 2px 0 var(--papier-3), 0 14px 40px rgba(29, 29, 34, .12); transform: rotate(-.6deg);
  font: 16px/1.55 var(--mono); color: #2a2a30;
}
.pismo::before {
  content: ""; position: absolute; right: 26px; top: 22px; width: 120px; height: 46px; border: 2px solid rgba(143, 32, 32, .55);
  border-radius: 3px; transform: rotate(-8deg);
}
.pismo-pieczec { position: absolute; right: 26px; top: 28px; width: 120px; transform: rotate(-8deg); text-align: center;
  font: 700 11px/1.25 var(--sans); letter-spacing: .08em; color: rgba(143, 32, 32, .7); }
.pismo p { margin: 0 0 .9em; }
.pismo .podpis { font: 22px/1.2 var(--serif); font-style: italic; margin-top: 18px; color: #243a6e; }

/* cechy */
.cechy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 900px) { .cechy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cechy { grid-template-columns: 1fr; } }
.cecha { background: var(--papier); border: 1px solid var(--papier-3); padding: 24px 22px 20px; border-radius: 3px; }
.cecha svg { width: 34px; height: 34px; color: var(--czerwien); margin-bottom: 12px; }
.cecha h3 { font-size: 19px; margin-bottom: 8px; }
.cecha p { font-size: 16px; margin: 0; color: #3a3a42; }

/* kroki */
.kroki { list-style: none; counter-reset: k; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .kroki { grid-template-columns: 1fr; } }
.kroki li { counter-increment: k; position: relative; padding-top: 58px; }
.kroki li::before {
  content: counter(k); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border: 1.5px solid var(--mosiadz);
  border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--serif); color: var(--mosiadz);
}
.kroki h3 { font-size: 20px; }
.kroki p { color: #cfd4de; font-size: 17px; }

.nie-dla { border-left: 3px solid var(--czerwien); padding: 6px 0 6px 24px; font-size: 20px; max-width: 760px; }

/* pytania */
.pytania { max-width: 820px; margin-top: 28px; }
.pytania details { border-top: 1px solid var(--papier-3); padding: 4px 0; }
.pytania details:last-child { border-bottom: 1px solid var(--papier-3); }
.pytania summary {
  cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font: 700 18px/1.35 var(--sans); position: relative;
}
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 26px/1 var(--sans); color: var(--czerwien); }
.pytania details[open] summary::after { content: "−"; }
.pytania details p { font-size: 17px; margin: 0 0 16px; color: #3a3a42; }

/* karta ceny */
.karta-ceny {
  max-width: 520px; margin: 0 auto; background: #fbf8f0; color: var(--atrament); border: 1px solid var(--papier-3);
  border-top: 6px solid var(--czerwien); padding: 34px 32px 28px; box-shadow: var(--cien); text-align: left;
}
.karta-ceny .cena { font-size: 44px; }
.karta-ceny .cena span { color: var(--szary); }
.karta-ceny ul { padding-left: 1.1em; margin: 18px 0 24px; }
.karta-ceny li { margin: 0 0 6px; }
.karta-ceny .przycisk { width: 100%; }

/* ───────────── stopka */
.stopka { background: var(--noc); color: var(--szary-jasny); padding: 44px clamp(16px, 4vw, 40px) 36px; font: 14px/1.6 var(--sans); }
.stopka .wnetrze { max-width: var(--szer); margin: 0 auto; display: grid; gap: 14px; }
.stopka a { color: var(--gwiazda); }
.stopka-linki { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.stopka-znak { font: 700 14px/1 var(--sans); letter-spacing: .22em; color: var(--gwiazda); }

/* ───────────── strony z kartą (logowanie, konto, zakup) */
body.s-karta { background: var(--noc); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.tlo-nocy { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 70% 0%, var(--noc-3), var(--noc) 70%); }
.tlo-nocy canvas, .tlo-nocy video, .tlo-nocy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tlo-nocy::after { content: ""; position: absolute; inset: 0; background: rgba(8, 11, 22, .35); }
.s-karta .pasek { position: relative; }
.s-karta main { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; padding: 24px 16px 56px; }
.karta {
  width: 100%; max-width: 520px; background: #fbf8f0; color: var(--atrament); border: 1px solid var(--papier-3);
  border-top: 6px solid var(--czerwien); border-radius: 2px; padding: clamp(24px, 5vw, 38px); box-shadow: var(--cien);
}
.karta.szeroka { max-width: 760px; }
.karta h1 { font-size: clamp(28px, 5vw, 36px); }
.karta .sygn { color: var(--czerwien); }
.karta-sekcja { border-top: 1px solid var(--papier-3); margin-top: 26px; padding-top: 22px; }
.karta-sekcja:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.s-karta .stopka { position: relative; z-index: 1; background: transparent; }

.pole { display: grid; gap: 6px; margin: 0 0 16px; }
.pole label { font: 700 14px/1.2 var(--sans); letter-spacing: .02em; }
.pole input, .pole select, .pole textarea {
  font: 17px/1.3 var(--sans); padding: 12px 14px; border: 1.5px solid var(--papier-3); border-radius: 4px;
  background: #fff; color: var(--atrament); min-height: 48px; width: 100%;
}
.pole textarea { min-height: 90px; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--czerwien); outline: none; box-shadow: 0 0 0 3px rgba(143, 32, 32, .15); }
.wiersz-formularza { display: flex; gap: 10px; flex-wrap: wrap; }
.wiersz-formularza > .pole { flex: 1 1 220px; margin: 0; }
.wiersz-formularza > .przycisk { flex: 0 0 auto; align-self: end; }
.oswiadczenie { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 0 0 14px; font: 16px/1.45 var(--sans); cursor: pointer; }
.oswiadczenie input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--czerwien); cursor: pointer; }
.albo { display: flex; align-items: center; gap: 12px; color: var(--szary); font: 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 22px 0; }
.albo::before, .albo::after { content: ""; flex: 1; height: 1px; background: var(--papier-3); }
.komunikat { border-radius: 4px; padding: 12px 14px; font: 15.5px/1.45 var(--sans); margin: 0 0 16px; }
.komunikat.blad { background: #f7e3df; color: #6e1a15; border: 1px solid #e6b9b1; }
.komunikat.ok { background: #e3efe3; color: #1f4a28; border: 1px solid #b9d6bd; }
.komunikat.info { background: var(--papier-2); color: var(--atrament); border: 1px solid var(--papier-3); }
.komunikat.test { background: #fff4d6; color: #5c4200; border: 1px dashed #d9b451; }
#google-przycisk { min-height: 44px; display: flex; justify-content: center; }
.podsumowanie { width: 100%; border-collapse: collapse; font: 16px/1.4 var(--sans); margin: 0 0 18px; }
.podsumowanie td { padding: 9px 0; border-bottom: 1px dashed var(--papier-3); vertical-align: top; }
.podsumowanie td:last-child { text-align: right; font-weight: 700; }
.podsumowanie tr.suma td { border-bottom: 0; font-size: 20px; padding-top: 14px; }
.cechy-lista { font: 15.5px/1.5 var(--sans); padding-left: 1.1em; color: #3a3a42; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--papier-3); border-top-color: var(--czerwien); border-radius: 50%;
  animation: obrot 1s linear infinite; margin: 10px auto 18px; }
@keyframes obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .hero-mgla { animation: none; } }
.gra-kafel { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.gra-kafel img { width: 96px; height: 96px; border-radius: 8px; }
.pasek-postepu { height: 8px; background: var(--papier-3); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.pasek-postepu > i { display: block; height: 100%; background: var(--czerwien); }

/* ───────────── konto: moje gry, inne gry, kod prezentu */
.karta.karta-konto { max-width: 880px; }
.karta-sekcja.pierwsza { border-top: 0; margin-top: 0; padding-top: 0; }
.konto-gry { display: grid; gap: 14px; }
.moja-gra {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--papier-3); border-radius: 4px; padding: 12px;
}
.moja-gra-okladka { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--noc); }
.moja-gra-okladka img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.moja-gra h3 { font-size: 22px; margin: 2px 0 6px; }
.moja-gra-stan p { font: 16px/1.45 var(--sans); color: #3a3a42; margin: 0 0 4px; }
.moja-gra-skad { margin: 6px 0 0; font-size: 13.5px; }
.moja-gra .gra-przyciski { margin-top: 12px; }
.moja-gra .gra-przyciski .przycisk { flex: 0 1 auto; min-width: 160px; }
@media (max-width: 560px) {
  .moja-gra { grid-template-columns: 1fr; gap: 12px; }
  .moja-gra .gra-przyciski .przycisk { flex: 1 1 100%; }
}
.karta .gra-karta { background: #fff; }
.karta .gra-karta.wkrotce { background: var(--papier-2); }
.konto-katalog { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 10px; }
.konto-katalog .gra-opis h3 { font-size: 21px; }
.konto-katalog .gra-opis > p { font-size: 15.5px; }
.konto-katalog .gra-cena { font-size: 22px; }
.konto-katalog .gra-przyciski .przycisk { flex: 1 1 auto; padding: 0 12px; }
.gra-prezent { flex-basis: 100%; font: 14.5px/1.3 var(--sans); margin-top: 4px; }
#sekcja-kod.prezent-wyrozniony {
  background: #fff8e6; border: 1.5px solid var(--mosiadz); border-radius: 4px; padding: 18px 18px 16px; margin: 0 0 22px;
}
#sekcja-kod.prezent-wyrozniony + .karta-sekcja { border-top: 0; margin-top: 0; padding-top: 0; }
#sekcja-kod.prezent-wyrozniony h2 { font-size: 24px !important; }

/* dostęp przyznany */
.dostep-scena { position: relative; aspect-ratio: 16 / 9; background: var(--noc); border-radius: 2px; overflow: hidden; margin: -8px 0 20px; }
.dostep-scena video, .dostep-scena img, .dostep-scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dostep-napis { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; font: 700 26px/1.2 var(--serif);
  background: linear-gradient(0deg, rgba(8, 11, 22, .8), transparent); opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; }
.dostep-napis.widoczny { opacity: 1; transform: none; }
/* bez własnych grafik: nocne niebo nad wieżą, jak w nagłówku strony głównej (kadr 16:9 zawsze) */
.dostep-scena .hero-mgla { position: absolute; }
.dostep-scena img.hero-foto { object-position: 20% 50%; }

/* ───────────── „żywe zdjęcie” (js/zywe.js): zdjęcie ożywione w kodzie */
.zywe { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .9s ease; }
.zywe.gotowe { opacity: 1; }
.zywe > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zywe > .zywe-foto { object-fit: cover; transform-origin: var(--sx, 50%) var(--sy, 40%); will-change: transform; }
.zywe.gotowe > .zywe-foto { animation: zywe-najazd 42s ease-in-out infinite alternate; }
@keyframes zywe-najazd { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.zywe-swiatlo { mix-blend-mode: soft-light; }
.zywe-swiatlo i {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at var(--sx, 50%) var(--sy, 40%),
    rgba(255, 200, 140, .9), rgba(255, 170, 100, .35) 45%, rgba(255, 150, 80, 0) 75%);
  animation: zywe-oddech 7s ease-in-out infinite alternate;
}
@keyframes zywe-oddech { from { opacity: .68; } to { opacity: 1; } }
.zywe-swiatlo.mrug { animation: zywe-mrug .7s linear 1; }
@keyframes zywe-mrug { 0% { opacity: 1; } 10% { opacity: .5; } 20% { opacity: .95; } 32% { opacity: .7; } 48%, 100% { opacity: 1; } }
.zywe-mgielka {
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 45% 40% at var(--sx, 50%) var(--sy, 40%), rgba(255, 214, 170, .16), rgba(255, 214, 170, 0) 70%);
  animation: zywe-oddech 7s ease-in-out infinite alternate;
}
.zywe-winieta { background: radial-gradient(ellipse 85% 80% at var(--sx, 50%) var(--sy, 40%), rgba(6, 7, 12, 0) 45%, rgba(6, 7, 12, .55) 100%); }
/* odsłona (ekran „Dostęp przyznany”) */
.zywe-ciemnosc { background: #05060a; transition: opacity 1.6s ease .15s; }
.zywe.gotowe > .zywe-ciemnosc { opacity: 0; }
.zywe.odslona.gotowe > .zywe-foto {
  animation: zywe-odslona 2.6s cubic-bezier(.2, .7, .2, 1) both, zywe-najazd 42s ease-in-out 2.6s infinite alternate;
}
@keyframes zywe-odslona { from { transform: scale(1.12); filter: brightness(.55); } to { transform: scale(1.02); filter: none; } }
.zywe-blysk {
  mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(105deg, rgba(255, 240, 215, 0) 35%, rgba(255, 240, 215, .85) 50%, rgba(255, 240, 215, 0) 65%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
}
.zywe.odslona.gotowe > .zywe-blysk { animation: zywe-blysk 1.8s ease-in-out .9s 1 both; }
@keyframes zywe-blysk {
  0% { opacity: 0; background-position: 130% 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; }
}
/* bez animacji (ustawienie systemu): samo zdjęcie z ciepłym światłem */
.zywe.spokojne > .zywe-foto, .zywe.spokojne .zywe-swiatlo i, .zywe.spokojne > .zywe-mgielka,
.zywe.spokojne > .zywe-blysk { animation: none !important; }
.zywe.spokojne > .zywe-pyl { display: none; }
.zywe.spokojne, .zywe.spokojne > .zywe-ciemnosc { transition: none; }
/* logowanie ze zdjęciem albo filmem w tle: na szerokim ekranie karta po lewej, zdjęcie widać po prawej */
@media (min-width: 900px) {
  body.z-tlem main { justify-items: start; padding-left: clamp(24px, 7vw, 120px); padding-right: 24px; }
}
body.z-tlem .tlo-nocy::after { background: linear-gradient(90deg, rgba(8, 11, 22, .45), rgba(8, 11, 22, .12) 60%, rgba(8, 11, 22, .08)); }
@media (max-width: 899px) { body.z-tlem .tlo-nocy::after { background: rgba(8, 11, 22, .3); } }

/* ───────────── dokumenty prawne */
.dokument { max-width: 820px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 40px) 80px; }
.dokument h1 { font-size: clamp(30px, 4vw, 40px); }
.dokument h2 { font-size: 23px; margin-top: 1.8em; }
.dokument h3 { font-size: 19px; margin-top: 1.4em; }
.dokument ol, .dokument ul { padding-left: 1.4em; }
.dokument li { margin: 0 0 .45em; }
.dokument ol.litery { list-style: lower-alpha; }
.dokument .ramka { background: var(--papier-2); border: 1px solid var(--papier-3); padding: 14px 18px; margin: 0 0 1.2em; font-size: 17px; }
.dokument-narzedzia { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; font: 15px/1 var(--sans); }

/* ───────────── baner cookies */
.zgoda {
  position: fixed; z-index: 100; left: 12px; right: 12px; bottom: 12px; max-width: 980px; margin: 0 auto;
  background: #fbf8f0; color: var(--atrament); border: 1px solid var(--papier-3); border-radius: 6px; box-shadow: var(--cien);
  padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font: 15px/1.45 var(--sans);
}
.zgoda p { margin: 0; flex: 1 1 380px; }
.zgoda-przyciski { display: flex; gap: 10px; flex-wrap: wrap; }
.zgoda-przyciski .przycisk { min-height: 42px; padding: 0 16px; font-size: 15px; }
dialog.okno {
  border: 1px solid var(--papier-3); border-radius: 6px; padding: 0; width: min(560px, calc(100vw - 24px));
  background: #fbf8f0; color: var(--atrament); box-shadow: var(--cien);
}
dialog.okno::backdrop { background: rgba(8, 11, 22, .6); }
.okno-tresc { padding: 24px 24px 8px; font: 15.5px/1.5 var(--sans); }
.okno-tresc h2 { font: 700 22px/1.2 var(--serif); }
.okno-przyciski { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 24px 22px; }
.przelacznik { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--papier-3); }
.przelacznik b { font-size: 16px; }
.przelacznik span { grid-column: 1; color: var(--szary); font-size: 14px; }
.przelacznik input { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; accent-color: var(--czerwien); align-self: center; }

/* ───────────── panel admina */
body.s-admin { background: #f1eee6; font: 15px/1.45 var(--sans); }
.admin-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--noc); color: var(--gwiazda); }
.admin-glowa a { color: var(--gwiazda); }
/* (pasek zakładek w jednym rzędzie zastąpiło menu w grupach: sekcja „panel: nawigacja i narzędzia SEO” na końcu pliku) */
.admin-tresc { max-width: 1400px; }
.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px; }
.kafelek { background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; padding: 14px; }
.kafelek b { display: block; font-size: 26px; font-family: var(--serif); }
.kafelek span { color: var(--szary); font-size: 13px; }
.tabela-kontener { overflow-x: auto; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eee7d6; white-space: nowrap; }
.tabela th { background: #f7f3ea; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--szary); position: sticky; top: 0; }
.tabela tr.klik { cursor: pointer; }
.tabela tr.klik:hover td { background: #faf6ec; }
.etykieta { display: inline-block; font-size: 12px; padding: 3px 7px; border-radius: 3px; background: #eee7d6; }
.etykieta.zakup { background: #e3efe3; color: #1f4a28; }
.etykieta.prezent, .etykieta.kod { background: #e5e9f6; color: #22346a; }
.etykieta.brak { background: #f3e1de; color: #6e1a15; }
.etykieta.ok { background: #e3efe3; color: #1f4a28; }
.narzedzia-listy { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 14px; }
.narzedzia-listy .pole { margin: 0; min-width: 180px; }
.narzedzia-listy .pole input, .narzedzia-listy .pole select { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.narzedzia-listy .przycisk { min-height: 40px; font-size: 14px; padding: 0 14px; }
.szuflada { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: #fbf8f0; box-shadow: -10px 0 40px rgba(0,0,0,.25); overflow-y: auto; padding: 20px 22px 60px; }
.szuflada h2 { font-size: 22px; }
.szuflada .przyciski { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.szuflada .przyciski .przycisk { min-height: 38px; font-size: 13.5px; padding: 0 12px; }
.lejek { display: grid; gap: 6px; max-width: 640px; }
.lejek div { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 10px; font-size: 14px; }
.lejek i { display: block; height: 14px; background: var(--czerwien); border-radius: 2px; min-width: 2px; }
.dziennik td:last-child { white-space: normal; font-family: var(--mono); font-size: 12px; }
.kody-lista { font: 16px/1.8 var(--mono); background: #fff; border: 1px solid #ddd6c4; padding: 12px 16px; border-radius: 6px; user-select: all; }

@media (max-width: 600px) {
  .zgoda { left: 8px; right: 8px; bottom: 8px; padding: 12px 12px 10px; gap: 10px; font-size: 13.5px; line-height: 1.4; }
  .zgoda p { flex-basis: 100%; }
  .zgoda-przyciski { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .zgoda-przyciski .przycisk { flex: 1 1 0; min-height: 40px; padding: 0 6px; font-size: 14px; }
}

.przycisk.google { width: 100%; background: #fff; color: #1f1f1f; border: 1px solid #747775; gap: 12px; }
.przycisk.google:hover { background: #f6f6f6; color: #1f1f1f; }
.przycisk.google img { width: 20px; height: 20px; }

/* ───────────── zakup w prezencie */
/* Zamówienie (zakup.html): przełącznik „Dla siebie / W prezencie”, pola prezentu, podgląd zaproszenia
   (kartka z akt jak .pismo), podsumowanie; w trybie prezentu karta szersza, od 860 px dwie kolumny. */
.karta.karta-zakup.tryb-prezent { max-width: 880px; }
.zakup-produkt h1 { margin: 0; overflow-wrap: anywhere; }
.zakup-produkt { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.zakup-okladka {
  flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--noc);
  box-shadow: 0 2px 8px rgba(5, 8, 18, .2);
}
.zakup-okladka img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.zakup-produkt > div { min-width: 0; }
.zakup-cena { margin: 4px 0 0; font: 15px/1.35 var(--sans); color: var(--szary); }
.zakup-cena b { color: var(--atrament); font-size: 17px; }

/* przełącznik: dwa pola wyboru jako segment (strzałki i Tab działają jak w zwykłych radiach) */
.segment { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.segment-opcje {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--papier-2); border: 1px solid var(--papier-3); border-radius: 8px;
}
.segment input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.segment label {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px;
  border-radius: 5px; font: 700 16px/1.2 var(--sans); color: var(--szary); text-align: center; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.segment label:hover { color: var(--atrament); }
.segment svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.segment input:checked + label {
  background: #fff; color: var(--czerwien); box-shadow: 0 1px 3px rgba(29, 29, 34, .14), inset 0 0 0 1.5px var(--czerwien);
}
.segment input:focus-visible + label { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
@media (forced-colors: active) { .segment input:checked + label { outline: 2px solid CanvasText; } }
@media (max-width: 360px) { .segment svg { display: none; } }
@media (prefers-reduced-motion: reduce) { .segment label { transition: none; } }

.zakup-lead { margin: 0 0 22px; font: 16.5px/1.5 var(--sans); color: #3a3a42; }

/* konto ma już grę (albo jest za młode): zamiast formularza „Kup w prezencie” */
.zakup-stan {
  background: var(--papier-2); border: 1px solid var(--papier-3); border-left: 4px solid var(--czerwien); border-radius: 4px;
  padding: 18px 18px 4px; margin: 0 0 6px;
}
.zakup-stan h2 { font-size: 23px; margin: 0 0 6px; }
.zakup-stan p { font: 16px/1.5 var(--sans); color: #3a3a42; }
.zakup-stan-przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
.zakup-stan-przyciski .przycisk { flex: 1 1 170px; }

/* układ: pola, podgląd, podsumowanie (telefon: jedno pod drugim, w tej kolejności) */
.zakup-uklad { display: grid; grid-template-columns: minmax(0, 1fr); }
.zakup-pola { border: 0; padding: 0; margin: 0; min-width: 0; }
.zakup-legenda { padding: 0; margin: 0 0 14px; font: 700 21px/1.25 var(--serif); }
.zakup-dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0 14px; align-items: end; }
@supports (grid-template-rows: subgrid) {
  /* etykieta, pole i podpowiedź w jednej linii w obu kolumnach, nawet gdy jedna etykieta ma dwa wiersze */
  .zakup-dwa { align-items: stretch; }
  .zakup-dwa > .pole { grid-row: span 3; grid-template-rows: subgrid; }
  .zakup-dwa > .pole > label { align-self: end; }
}
.opcjonalne { font-weight: 400; color: var(--szary); }
.pole-pomoc { margin: 0; font: 14px/1.4 var(--sans); color: var(--szary); }
.pole-blad { margin: 0; font: 700 14.5px/1.4 var(--sans); color: #8f2020; }
.pole-blad::before { content: "! "; }
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: var(--czerwien); background: #fff8f6; }
.pole textarea#p-zyczenia { min-height: 112px; }
.licznik { text-align: right; }
.licznik.blisko { color: var(--czerwien); font-weight: 700; }
.kiedy { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.kiedy legend { padding: 0; margin: 0 0 8px; font: 700 14px/1.2 var(--sans); letter-spacing: .02em; }
.wybor {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; background: #fff;
  border: 1.5px solid var(--papier-3); border-radius: 4px; font: 16px/1.3 var(--sans); cursor: pointer;
}
.wybor + .wybor { margin-top: 8px; }
.wybor input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--czerwien); cursor: pointer; }
.wybor:has(input:checked) { border-color: var(--czerwien); box-shadow: 0 0 0 3px rgba(143, 32, 32, .08); }
.kiedy-data { margin: 12px 0 0; }

/* podgląd zaproszenia: kartka z akt (.pismo z katalogu) z pieczęcią i zakrytym kodem */
.zakup-podglad { min-width: 0; margin: 4px 0 24px; }
.zakup-podglad > .sygn { margin: 0 0 12px; color: var(--szary); }
.pismo.pismo-prezent {
  margin: 0 6px; padding: 24px 22px 20px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere;
  transform: rotate(-.7deg);
}
.pismo-prezent::before { right: 16px; top: 16px; width: 104px; height: 34px; }
.pismo-prezent .pismo-pieczec { right: 16px; top: 25px; width: 104px; font-size: 12.5px; letter-spacing: .16em; }
.pismo-prezent p { margin: 0 0 .8em; }
.pismo-prezent .pg-etykieta { margin-bottom: 22px; font: 12px/1.3 var(--mono); letter-spacing: .12em; color: var(--czerwien); }
.pismo-prezent .pg-tytul { margin-bottom: 10px; font: 700 22px/1.2 var(--serif); color: var(--atrament); }
.pismo-prezent .pg-zyczenia {
  padding: 2px 0 2px 12px; border-left: 3px solid var(--czerwien); font: italic 17px/1.5 var(--serif); color: #2a2a30;
  white-space: pre-line;
}
.pismo-prezent .pg-zyczenia.puste { border-left: 3px dashed var(--papier-3); font: 14px/1.5 var(--sans); color: var(--szary); }
.pismo-prezent .podpis { margin: -2px 0 12px; font-size: 21px; }
.pismo-prezent .pg-kod { margin: 16px 0 0; padding: 8px 10px; border: 2px dashed rgba(143, 32, 32, .55); border-radius: 5px; text-align: center; }
.pg-kod small { display: block; font: 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--czerwien); }
.pg-kod b { display: block; font: 700 18px/1.35 var(--mono); letter-spacing: .1em; color: var(--atrament); }
.podglad-dokad { margin: 16px 6px 0; font: 14.5px/1.55 var(--sans); color: var(--szary); overflow-wrap: anywhere; }
.podglad-dokad b { color: var(--atrament); }
.podglad-dokad b.puste { font-weight: 400; font-style: italic; color: var(--szary); }

/* podsumowanie, oświadczenia, przycisk */
.zakup-reszta { min-width: 0; }
.tryb-prezent .zakup-reszta { border-top: 1px solid var(--papier-3); padding-top: 20px; }
.karta-zakup .podsumowanie td:last-child { white-space: nowrap; padding-left: 14px; }
.karta-zakup .oswiadczenie { min-height: 44px; }
#komunikat-zakup .komunikat { margin: 4px 0 14px; }
.przycisk.zakup-zaplac { width: 100%; margin-top: 6px; padding: 10px 20px; line-height: 1.2; text-align: center; }
.zakup-uwaga { margin: 12px 0 0; }
.zakup-uwaga + .zakup-uwaga { margin-top: 10px; }

@media (min-width: 860px) {
  .tryb-prezent .zakup-uklad {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "pola podglad" "reszta podglad";
    column-gap: 36px; align-items: start;
  }
  .tryb-prezent .zakup-pola { grid-area: pola; }
  .tryb-prezent .zakup-podglad { grid-area: podglad; position: sticky; top: 16px; margin: 0; }
  .tryb-prezent .zakup-reszta { grid-area: reszta; margin-top: 4px; }
}

/* wynik po płatności (także „Prezent opłacony”) */
.wynik-opis { overflow-wrap: anywhere; }
.wynik-opis .wynik-glowne { font-size: 19.5px; }
.wynik-przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
#wynik-tytul:focus { outline: none; }
@media (max-width: 480px) {
  .segment label { gap: 6px; padding: 6px; font-size: 15.5px; }
  .zakup-okladka { width: 76px; }
  .wynik-przyciski .przycisk, .zakup-stan-przyciski .przycisk { flex: 1 1 100%; }
  .przycisk.zakup-zaplac { font-size: 17px; padding: 10px 14px; }
}

/* ───────────── panel admina: gry, prezenty kupione */
/* Nagłówek z wyborem gry, zakładki (telefon: przewijane w bok), kafelki, tabele przewijane w poziomie wewnątrz
   ramki (pierwsza kolumna przyklejona), szuflada (telefon: cała szerokość), lejek etapów, karta gry u gracza,
   prezenty kupione. Przyciski co najmniej 40 px; pola 16 px, żeby iPad nie powiększał strony przy pisaniu. */
.admin-glowa { flex-wrap: wrap; row-gap: 8px; }
.admin-marka { font: 700 14px/1.3 var(--sans); letter-spacing: .06em; }
.admin-gra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.admin-gra label { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--szary-jasny); }
.admin-gra select {
  min-height: 40px; max-width: 100%; padding: 6px 34px 6px 12px; border: 1px solid rgba(232, 230, 223, .35); border-radius: 4px;
  font: 700 16px/1.2 var(--sans); color: var(--gwiazda); cursor: pointer; -webkit-appearance: none; appearance: none;
  background: var(--noc-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8e6df' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
}
.admin-gra select:focus-visible { outline: 3px solid var(--mosiadz); outline-offset: 1px; }
.admin-gra-liczby { font-size: 13.5px; color: var(--szary-jasny); }
.admin-linki { font-size: 14px; }
.admin-linki a { display: inline-block; padding: 10px 2px; }
.admin-tresc { min-width: 0; }
.s-admin .admin-tresc h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 18px 0 12px; }
.s-admin .admin-tresc h3 { font-size: 19px; }
.opis-zakladki { max-width: 760px; color: #3a3a42; }
.s-admin .kafelki { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); }
.kafelek small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--szary); }
.s-admin .narzedzia-listy .pole input, .s-admin .narzedzia-listy .pole select { font-size: 16px; }
.s-admin .narzedzia-listy .pole.szerokie { min-width: min(100%, 280px); }
.formularz-dostepu { max-width: 760px; }
.formularz-dostepu .oswiadczenie span { font-size: 15.5px; color: var(--atrament); }
.bez-etykiety > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tabele: przewijanie w poziomie w ramce, przyklejona pierwsza kolumna, wiersze do kliknięcia (także z klawiatury) */
.tabela-kontener { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabela td .maly { font-size: 12.5px; }
.tabela .kod { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.tabela .trwa { color: var(--szary); font-style: italic; }
.tabela .przycisk { min-height: 40px; padding: 0 12px; font-size: 14px; }
.tabela tr.klik:focus-visible { outline: 3px solid var(--mosiadz); outline-offset: -3px; }
.tabela tr.klik:focus-visible td { background: #faf6ec; }
.tabela tr.problem td { background: #fff7e0; }
.tabela td.zyczenia-krotko { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-style: italic; color: #3a3a42; }
.tabela.przyklejona th:first-child, .tabela.przyklejona td:first-child {
  position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 #eee7d6;
}
.tabela.przyklejona th:first-child { z-index: 3; background: #f7f3ea; }
.tabela.przyklejona tr.klik:hover td:first-child, .tabela.przyklejona tr.klik:focus-visible td:first-child { background: #faf6ec; }
.tabela.przyklejona tr.problem td:first-child { background: #fff7e0; }
.etykieta.prezent-kupiony { background: #f6ecd2; color: #5c4200; }
.etykieta.plan { background: #e5e9f6; color: #22346a; }
.etykieta.uwaga { background: #fff0c2; color: #5c4200; box-shadow: inset 0 0 0 1px #d9b451; }

/* lejek etapów: pasek = doszło co najmniej do etapu, w nawiasie: jest na nim teraz */
.lejek.lejek-etapow {
  max-width: 760px; grid-template-columns: minmax(84px, 110px) minmax(0, 1fr) max-content; align-items: center; gap: 8px 10px;
  font-size: 14px;
}
.lejek.lejek-etapow > div { display: contents; }
.lejek-tor { display: block; background: #e9e3d3; border-radius: 2px; }
.lejek-etapow i { height: 16px; }
.lejek-etapow > div > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lejek-etapow small { color: var(--szary); font-size: 12.5px; }
.lejek-etapow .rozwiazani i { background: var(--zielen); }

/* szuflada (karta gracza, karta prezentu): belka z „Zamknij” zostaje u góry przy przewijaniu */
.szuflada { padding-top: 0; overscroll-behavior: contain; }
.szuflada-belka {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -22px 12px; padding: 10px 22px; background: rgba(251, 248, 240, .97); border-bottom: 1px solid var(--papier-3);
}
.szuflada-belka .przycisk { min-height: 40px; font-size: 14px; padding: 0 16px; }
.szuflada .przyciski .przycisk { min-height: 40px; }
.szuflada h2 { overflow-wrap: anywhere; }
.szuflada h3 { font-size: 18px; margin: 20px 0 8px; }
.szuflada .pole textarea { font-size: 16px; }
.karta-gry { background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; padding: 14px 16px 2px; margin: 14px 0; }
.karta-gry.wybrana { border-left: 4px solid var(--czerwien); }
.karta-gry h3 { margin: 0 0 6px; }
.karta-gry .przyciski { margin: 8px 0 12px; }
.fakty-gry { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 16px; margin: 10px 0 12px; font-size: 14.5px; }
.fakty-gry dt { color: var(--szary); }
.fakty-gry dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.etapy-gracza { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 10px 0 2px; }
.etapy-gracza li {
  display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: 3px;
  background: #eee7d6; color: var(--szary); font: 700 13px/1 var(--sans);
}
.etapy-gracza li.zaliczony { background: #e3efe3; color: #1f4a28; }
.etapy-gracza li.biezacy { background: var(--czerwien); color: #fff; }
.etapy-gracza li.koniec { background: var(--zielen); color: #fff; }
.zyczenia {
  margin: 6px 0 14px; padding: 6px 0 6px 14px; border-left: 3px solid var(--czerwien); font: italic 17px/1.5 var(--serif);
  color: #2a2a30; white-space: pre-line; overflow-wrap: anywhere;
}
.formularz-wiersz {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin: 0 0 16px; padding: 12px;
  background: #fff; border: 1px solid #ddd6c4; border-radius: 6px;
}
.formularz-wiersz .pole { flex: 1 1 220px; margin: 0; }
.formularz-wiersz .pole input { min-height: 44px; padding: 8px 10px; font-size: 16px; }
.formularz-wiersz .przycisk { min-height: 44px; font-size: 15px; padding: 0 16px; }
.formularz-wiersz .maly { flex-basis: 100%; margin: 0; }
.historia li { margin: 0 0 4px; overflow-wrap: anywhere; }

.s-admin .admin-tresc { max-width: 1680px; }
.s-admin .tabela th { white-space: normal; vertical-align: bottom; }

@media (max-width: 1000px) {
  .admin-marka { order: 1; }
  .admin-linki { order: 2; }
  .admin-gra { order: 3; flex: 1 1 100%; }
  .tabela .kol-email > * { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
  .admin-glowa { padding: 6px 12px 10px; }
  .admin-marka-dopisek { display: none; }
  .tabela .kol-email > * { max-width: 42vw; }
  .szuflada { left: 0; width: 100%; padding: 0 14px 48px; box-shadow: none; }
  .szuflada-belka { margin: 0 -14px 10px; padding: 8px 14px; }
}
@media (max-width: 520px) {
  .s-admin .kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s-admin .kafelek { padding: 10px 12px; }
  .s-admin .kafelek b { font-size: 21px; }
  .s-admin .narzedzia-listy .pole { flex: 1 1 100%; min-width: 0; }
  .lejek.lejek-etapow { grid-template-columns: 78px minmax(0, 1fr) max-content; gap: 8px; }
  .fakty-gry { gap: 5px 10px; font-size: 14px; }
  .karta-gry { padding: 12px 12px 2px; }
}

/* ───────────── panel admina: ustawienia */
.ustawienia-spis { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.ustawienia-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.ustawienia-grupa { scroll-margin-top: 12px; }
.ustawienia-grupa h3 { font-size: 19px; margin: 0 0 4px; }
.ustawienie { margin: 0 0 14px; }
.ustawienie input, .ustawienie select, .ustawienie textarea { min-height: 42px; font-size: 15.5px; padding: 9px 11px; }
.ustawienie textarea.pole-kod { font: 13px/1.45 var(--mono); }
.ustawienie-opis { display: block; color: var(--szary); font-size: 12.5px; line-height: 1.4; }
.ustawienie-opis .etykieta { font-size: 11px; padding: 2px 6px; margin-right: 4px; }
.ustawienie-blad { display: block; color: #6e1a15; font-size: 13px; }
.ustawienie-blad:empty { display: none; }
.ustawienia-sekrety { border-top: 1px dashed #ddd6c4; margin-top: 10px; padding-top: 8px; }
.ustawienia-sekrety ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.ustawienia-sekrety li { margin: 0 0 6px; }

/* ───────────── bezpieczeństwo: logowanie (Google, Apple, inne sposoby, captcha), zakładka panelu, pasek „Dziś”, panel na telefonie */
.logowanie-szybkie { display: grid; gap: 12px; margin: 0 0 18px; }
.przycisk.apple { width: 100%; background: #000; color: #fff; border: 1px solid #000; gap: 12px; }
.przycisk.apple:hover { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
.przycisk.apple img { width: 20px; height: 20px; }
.inne-sposoby { border-top: 1px solid var(--papier-3); padding-top: 4px; }
.inne-sposoby > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none;
  font: 700 15.5px/1.3 var(--sans); color: var(--szary);
}
.inne-sposoby > summary::-webkit-details-marker { display: none; }
.inne-sposoby > summary::before { content: "+"; width: 16px; font: 400 24px/1 var(--sans); color: var(--czerwien); }
.inne-sposoby[open] > summary::before { content: "−"; }
.inne-sposoby > summary:hover { color: var(--atrament); }
.inne-sposoby.jedyny { border-top: 0; padding-top: 0; }
.inne-sposoby.jedyny > summary { display: none; }
.inne-sposoby form { padding: 4px 0 2px; }
.inne-sposoby form .przycisk.duzy { width: 100%; }
.inne-sposoby form .maly { margin: 10px 0 0; }
.captcha { margin: 0 0 14px; min-height: 65px; }
.logowanie-zgody { margin-top: 22px; }

.admin-nav .odznaka, .admin-arkusz .odznaka {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 2px 6px; border-radius: 10px;
  background: var(--mosiadz); color: var(--atrament); font: 700 12px/16px var(--sans); text-align: center;
}
.admin-nav .odznaka.pilna, .admin-arkusz .odznaka.pilna { background: #c0392b; color: #fff; }
.bezp-uklad { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.bezp-sekcja { margin: 0 0 22px; min-width: 0; }
.bezp-boczna .bezp-sekcja { background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; padding: 14px 16px; }
.s-admin .bezp-boczna h2 { font-size: 20px; margin: 0 0 10px; }
.bezp-boczna h3 { font-size: 16px; margin: 14px 0 4px; }
.bezp-przelacznik { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.bezp-przelacznik input { width: 20px; height: 20px; margin: 0; }
.alerty-lista { display: grid; gap: 10px; margin: 0 0 12px; }
.alert-karta {
  background: #fff; border: 1px solid #ddd6c4; border-left: 5px solid var(--szary-jasny); border-radius: 6px; padding: 12px 14px;
}
.alert-karta.poziom-pilne { border-left-color: #c0392b; background: #fff8f6; }
.alert-karta.poziom-ostrzezenie { border-left-color: #d9a441; }
.alert-karta.przeczytany { background: #faf8f3; }
.alert-karta.przeczytany .alert-tytul, .alert-karta.przeczytany .alert-opis { color: var(--szary); }
.alert-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.alert-poziom {
  font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px;
  background: #eee7d6; color: var(--atrament);
}
.poziom-pilne .alert-poziom { background: #c0392b; color: #fff; }
.poziom-ostrzezenie .alert-poziom { background: #fff0c2; color: #5c4200; }
.alert-tytul { font-size: 16px; }
.alert-glowa time { margin-left: auto; font-size: 13px; color: var(--szary); white-space: nowrap; }
.alert-opis { margin: 6px 0 2px; font-size: 15px; overflow-wrap: anywhere; }
.alert-szczegoly { margin: 0; font-size: 13px; color: var(--szary); overflow-wrap: anywhere; }
.alert-akcje { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 10px; margin-top: 4px; }
.alert-akcje > .przycisk, .bezp-przyciski .przycisk, .bezp-lista .przycisk, .bezp-sekcja > .przycisk {
  min-height: 44px; font-size: 14.5px; padding: 0 14px;
}
.alert-akcje > .maly { align-self: center; }
.alert-porada, .bezp-instrukcja { flex: 1 1 240px; font-size: 14px; }
.alert-porada summary, .bezp-instrukcja summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--czerwien); font-weight: 700;
}
.alert-porada p { margin: 0 0 6px; }
.bezp-stan { font-size: 15px; margin: 0 0 10px; }
.bezp-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.bezp-instrukcja { margin: 0 0 6px; }
.bezp-instrukcja ol { margin: 0 0 8px; padding-left: 20px; }
.bezp-instrukcja li { margin: 0 0 8px; }
.bezp-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.bezp-lista li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 8px 0; border-bottom: 1px solid #eee7d6; font-size: 14px;
}
.bezp-lista li.ta { font-weight: 400; }
.bezp-lista li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bezp-kontrola { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.bezp-kontrola li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee7d6; }
.bezp-kontrola li:last-child, .bezp-lista li:last-child { border-bottom: 0; }
.bezp-znak {
  flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: #eee7d6; color: var(--szary);
}
.bezp-kontrola li.ok .bezp-znak { background: #e3efe3; color: #1f4a28; }
.bezp-kontrola li.brak .bezp-znak { background: #fff0c2; color: #5c4200; }
.przycisk.ostrzegawczy { color: #6e1a15; border-color: #c98f86; }
.przycisk.ostrzegawczy:hover { background: #f7e3df; color: #6e1a15; }
.wizualnie-ukryte {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dzis-pasek {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 16px; padding: 10px 14px;
  background: var(--noc); color: var(--gwiazda); border-radius: 6px; font-size: 14.5px;
}
.dzis-tytul { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mosiadz); }
.dzis-el { white-space: nowrap; }
.dzis-el strong { font: 700 19px/1 var(--serif); color: #fff; }
a.dzis-alerty { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: #ffd98a; font-weight: 700; }
a.dzis-alerty.pilne { color: #ff9b8f; }
/* panel zainstalowany na telefonie (bez paska przeglądarki): margines na wycięcie ekranu */
@media (display-mode: standalone) {
  .s-admin .admin-glowa { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left));
                          padding-right: max(12px, env(safe-area-inset-right)); }
}
@media (max-width: 1100px) {
  .bezp-uklad { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 520px) {
  .alert-glowa time { margin-left: 0; flex-basis: 100%; }
  .bezp-boczna .bezp-sekcja { padding: 12px; }
  .dzis-pasek { gap: 4px 12px; padding: 10px 12px; }
  a.dzis-alerty { margin-left: 0; }
  .s-admin .narzedzia-listy .bezp-przelacznik { flex: 1 1 100%; }
}

/* ───────────── katalog i SEO: kategorie, filtry, skala trudności, motywy gier, panel SEO */
/* Katalog: kategorie (linki do /kategorie/…), filtry (od 1000 px kolumna po lewej, węższe: panel zwijany
   nad wynikami), licznik wyników i sortowanie. Karty: kropki trudności z nazwą poziomu i czasem gry.
   Motyw gry (--m-*: kolory z kontrastem AA liczonym na serwerze, krój, kształt) na karcie i stronie gry;
   strona gry w kolorach marki (motyw-marki) wygląda jak dotąd. */
.sygn-czerwony { color: var(--czerwien); }
.katalog-wstep { max-width: 760px; }
.hero-kategoria { min-height: 64vh; min-height: 64svh; }

.kategorie-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.kategorie-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--papier-3);
  border-radius: 999px; background: #fbf8f0; color: var(--atrament); font: 700 15px/1 var(--sans); text-decoration: none;
}
.kategorie-nav a:hover { border-color: var(--czerwien); color: var(--czerwien); }
.kategorie-nav a[aria-current="page"] { background: var(--atrament); border-color: var(--atrament); color: #fff; }

.katalog-uklad { display: grid; gap: 18px 28px; margin-top: 22px; }
.katalog-wyniki { min-width: 0; }
.katalog-wyniki .gry-siatka { margin-top: 0; }
@media (min-width: 1000px) {
  .katalog-uklad { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
}
.filtry-panel { background: #fbf8f0; border: 1px solid var(--papier-3); border-radius: 6px; }
.filtry-naglowek {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none;
  font: 700 16px/1 var(--sans); border-radius: 6px;
}
.filtry-naglowek::-webkit-details-marker { display: none; }
.filtry-naglowek::after { content: "+"; margin-left: auto; font: 400 24px/1 var(--sans); color: var(--czerwien); }
.filtry-panel[open] > .filtry-naglowek::after { content: "−"; }
.filtry-naglowek:focus-visible { outline-offset: -3px; }
.filtry-ile { color: var(--czerwien); }
.filtry-pola { display: grid; padding: 0 16px 4px; }
@media (min-width: 600px) and (max-width: 999px) {
  .filtry-pola { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
.filtr { border: 0; margin: 0; padding: 10px 0 8px; min-width: 0; box-shadow: inset 0 1px 0 var(--papier-3); }
.filtr > legend, .filtr-tytul {
  float: left; width: 100%; padding: 0; margin: 0 0 4px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--szary);
}
.filtr > legend + * { clear: left; }
.filtr-tytul { float: none; display: block; }
.filtr-opcja { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 15.5px/1.3 var(--sans); cursor: pointer; }
.filtr-opcja input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--czerwien); cursor: pointer; }
.filtr-opcja .kropki { margin-right: 2px; }
.filtr-opcja .kropki i { width: 7px; height: 7px; }
.filtr select, .filtry-sort select {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--papier-3); border-radius: 4px; background: #fff;
  color: var(--atrament); font: 16px/1.2 var(--sans);
}
.filtr select:focus, .filtry-sort select:focus { border-color: var(--czerwien); outline: none; box-shadow: 0 0 0 3px rgba(143, 32, 32, .15); }
@media (pointer: coarse) { .filtr-opcja { min-height: 44px; } }
.filtry-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 16px 16px; box-shadow: inset 0 1px 0 var(--papier-3); }
.filtry-przyciski .przycisk { flex: 1 1 auto; min-height: 44px; padding: 0 14px; font-size: 15px; }
.filtry-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font: 15px/1.3 var(--sans); }
.filtry-wynik { flex: 1 1 200px; margin: 0; color: var(--szary); }
.filtry-wyczysc { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.filtry-sort { display: flex; align-items: center; gap: 8px; }
.filtry-sort label { font: 700 14px/1 var(--sans); color: var(--szary); }
.filtry-sort select { width: auto; }
.gry-brak { margin: 14px 0 0; padding: 18px 20px; border: 1px dashed var(--papier-3); border-radius: 6px; background: var(--papier-2);
  font: 16px/1.5 var(--sans); }
@media (max-width: 480px) {
  .filtry-sort { flex: 1 1 100%; }
  .filtry-sort select { flex: 1 1 auto; }
}

/* skala trudności: kropki (wygląd) + nazwa poziomu (tekst) */
.skala-opis { margin: 22px 0 0; font: 15.5px/1.5 var(--sans); color: #3a3a42; }
.skala-opis summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--atrament); }
.skala-lista { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 6px; }
.skala-lista .kropki { color: var(--czerwien); }
.skala-lista b { color: var(--atrament); }
.kropki { display: inline-flex; gap: 3px; margin-right: 7px; vertical-align: -1px; }
.kropki i { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .6; }
.kropki i.pelna { background: currentColor; opacity: 1; }
.gra-skala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; font: 14.5px/1.3 var(--sans);
  color: var(--szary); }
.gra-trudnosc { display: inline-flex; align-items: center; color: var(--atrament); font-weight: 700; }
.gra-skala .kropki { color: var(--m-akcent-tekst, var(--czerwien)); }
.gra-czas { display: inline-flex; align-items: center; }
.gra-cena .gra-pudelko { display: block; margin: 4px 0 0; }
.gra-czas svg { width: 15px; height: 15px; margin-right: 5px; color: var(--m-akcent-tekst, var(--czerwien)); }
.hero-fakty .fakt-trudnosc { display: inline-flex; align-items: center; }
.hero-fakty .kropki { color: var(--mosiadz); }
.hero-fakty .kropki i { width: 8px; height: 8px; }

/* motyw gry na karcie: krój nagłówka, kolor akcentu (pasek pod okładką), kształt */
.gra-karta { border-radius: var(--m-promien, 4px); }
.gra-karta .gra-opis h3 { font-family: var(--m-kroj, var(--serif)); }
.gra-karta .gra-opis h3 a:hover { color: var(--m-akcent-tekst, var(--czerwien)); }
.gra-karta .gra-etykieta { color: var(--m-akcent-tekst, var(--czerwien)) !important; }
.gra-okladka::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--m-akcent, transparent); }
.gra-karta.ksztalt-zaokraglony .przycisk { border-radius: 999px; }
.gra-karta.ksztalt-sciety { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.gra-karta.ksztalt-sciety .przycisk { border-radius: 0; }

/* motyw na stronie gry (tylko gdy inny niż kolory marki) */
.motyw:not(.motyw-marki) {
  --czerwien: var(--m-akcent-tekst); --czerwien-2: var(--m-akcent-tekst); --mosiadz: var(--m-akcent-jasny);
  --noc: var(--m-tlo); --gwiazda: var(--m-tekst);
}
.motyw:not(.motyw-marki) :is(h1, h2, h3) { font-family: var(--m-kroj); }
.motyw.ksztalt-zaokraglony:not(.motyw-marki) .przycisk { border-radius: 999px; }

/* kontrast (Lighthouse): przyciski i linki w jasnej karcie ceny na ciemnej sekcji, pieczęć na piśmie */
.sekcja.ciemna .przycisk.glowny, .sekcja.ciemna .przycisk.glowny:hover { color: #fff; }
.sekcja.ciemna .karta-ceny a:not(.przycisk) { color: var(--czerwien); }
.sekcja.ciemna .karta-ceny .przycisk:not(.glowny) { color: var(--atrament); }
.s-glowna .pismo-pieczec { color: rgba(143, 32, 32, .86); }
/* dokumenty prawne na telefonie: znak marki w jednym wierszu, linki pod nim (bez łamania „Zaloguj się”) */
@media (max-width: 480px) {
  .s-dokument .pasek { flex-wrap: wrap; row-gap: 10px; }
  .s-dokument .pasek-nav a { white-space: nowrap; }
}
/* dotyk: linki narzędzi dokumentu i stopki z polem co najmniej 44 px */
@media (pointer: coarse) {
  .dokument-narzedzia { gap: 4px 18px; margin-bottom: 16px; }
  .dokument-narzedzia a, .stopka-linki a { display: inline-flex; align-items: center; min-height: 44px; }
  .stopka-linki { row-gap: 0; }
}

/* panel admina: zakładka SEO (podgląd wyniku Google, obrazy, ikony, kod) */
.seo-sekcja { margin: 0 0 30px; scroll-margin-top: 12px; }
.seo-sekcja > h3 { font-size: 21px; margin: 26px 0 6px; }
.seo-sekcja .przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.seo-sekcja > .ustawienie, .seo-domeny .ustawienie, .seo-domeny .wiersz-formularza { max-width: 900px; }
.seo-strony { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.seo-strona { min-width: 0; padding: 14px 16px 4px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.seo-strona .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.seo-strona-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.seo-strona-glowa h4 { margin: 0; font: 700 17px/1.3 var(--sans); }
.seo-strona-glowa a { font-size: 13.5px; overflow-wrap: anywhere; }
.seo-google { display: grid; gap: 3px; margin: 6px 0 12px; padding: 12px 14px; background: #fff; border: 1px solid #ddd6c4;
  border-radius: 8px; font-family: Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.g-adres { font-size: 13px; color: #202124; }
.g-tytul { font-size: 19px; line-height: 1.3; color: #1a0dab; }
.g-opis { font-size: 14px; line-height: 1.45; color: #4d5156; }
.seo-licznik { display: block; font-size: 12.5px; color: var(--szary); }
.seo-licznik.za-dlugi, .seo-licznik.za-krotki { color: #8a4b00; font-weight: 700; }
.seo-obraz { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 10px; }
.seo-obraz img { width: 240px; height: 126px; object-fit: cover; border: 1px solid #ddd6c4; border-radius: 4px; background: #eee; }
.seo-obraz .przycisk, .seo-domyslny .przycisk { min-height: 40px; padding: 0 14px; font-size: 14px; }
.seo-domyslny { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
label.przycisk { cursor: pointer; }
input[type="file"].ukryte:focus-visible + label.przycisk { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
.seo-ikony { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 6px 0 10px; }
.seo-ikony figure { margin: 0; text-align: center; font-size: 12px; color: var(--szary); }
.seo-ikony img { margin: 0 auto 4px; border: 1px solid #ddd6c4; background: #fff; }
.seo-pre { max-height: 420px; overflow: auto; margin: 6px 0 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; font: 12.5px/1.45 var(--mono); }
.seo-details { margin: 8px 0 0; }
.seo-details summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 700; }
.seo-kod-grupa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 14px; }
.seo-kod-grupa h4, .seo-domeny h4 { grid-column: 1 / -1; margin: 12px 0 6px; font: 700 16px/1.3 var(--sans); }
.seo-ostrzezenie, .seo-zasady { max-width: 900px; }
.seo-zasady { padding-left: 1.2em; }
.seo-zasady li { margin: 0 0 4px; }

/* ───────────── crm: e-maile z reguł, gracze bez postępu, ankiety, statystyki, asystent AI (panel admina);
   zgody, baner regulaminu i ankieta „Oceń sprawę” na stronie konta */
/* słupki: jedna seria, pasek od wspólnej linii, zaokrąglony tylko koniec z danymi, wartość przy końcu paska */
.crm-slupki { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr) max-content; gap: 6px 10px; align-items: center; max-width: 760px; font-size: 14px; }
.crm-slupek { display: contents; }
.crm-slupek-nazwa { min-width: 0; overflow-wrap: anywhere; }
.crm-slupek-tor { display: block; height: 16px; background: #ece6d8; border-radius: 0 4px 4px 0; }
.crm-slupek-tor i { display: block; height: 100%; background: var(--czerwien); border-radius: 0 4px 4px 0; }
.crm-slupek.dobrze .crm-slupek-tor i { background: var(--zielen); }
.crm-slupek.neutralnie .crm-slupek-tor i { background: #8a8577; }
.crm-slupek-wartosc { white-space: nowrap; font-variant-numeric: tabular-nums; color: #3a3a42; }
.crm-podpis { margin: 8px 0 0; }
.crm-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 28px; align-items: start; margin: 4px 0 8px; }
.crm-siatka h3 { margin: 14px 0 10px; }
/* zakres dat i gotowe okresy */
.crm-zakres { align-items: end; }
.crm-okresy { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; }
.crm-okresy .przycisk, .crm-zakres > .przycisk { min-height: 44px; padding: 0 14px; font-size: 14.5px; }
.crm-okresy .przycisk.wybrany { background: var(--atrament); border-color: var(--atrament); color: #fff; }
.crm-zakres .pole { min-width: 150px; }
.crm-eksport { margin: 10px 0 4px; }
.crm-przyciski, .crm-przyciski-gora, .crm-eksport, .crm-ai-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.crm-eksport .przycisk, .crm-przyciski-gora .przycisk, .crm-przyciski .przycisk { min-height: 44px; font-size: 15px; line-height: 1.25; padding: 8px 16px; text-align: center; }
/* reguły e-maili */
.crm-reguly { display: grid; gap: 14px; max-width: 980px; }
.crm-regula { background: #fff; border: 1px solid #ddd6c4; border-left: 5px solid #ddd6c4; border-radius: 6px; padding: 14px 16px 10px; }
.crm-regula.wlaczona { border-left-color: var(--zielen); }
.crm-regula-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crm-regula-glowa h3 { margin: 0; font-size: 19px; }
.crm-regula-opis { margin: 6px 0 2px; color: #3a3a42; }
.crm-przelacznik { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-weight: 700; cursor: pointer; }
.crm-przelacznik input { width: 22px; height: 22px; accent-color: var(--zielen); cursor: pointer; }
.crm-edycja { margin: 8px 0 4px; }
.crm-edycja > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--czerwien); }
.crm-formularz { margin-top: 8px; }
.crm-formularz .pole input, .crm-formularz .pole select, .crm-formularz .pole textarea { font-size: 16px; min-height: 44px; padding: 9px 11px; }
.crm-formularz .pole textarea { font: 15.5px/1.5 var(--sans); }
.crm-wiersz { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: end; }
.crm-wiersz > .maly { margin: 0 0 20px; }
.crm-krotkie { min-width: 130px; max-width: 280px; }
.crm-pola { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 8px; }
.crm-pole { min-height: 40px; padding: 0 10px; border: 1px solid #d9d0b9; border-radius: 4px; background: #f7f3ea; font: 13px/1 var(--mono); color: var(--atrament); cursor: pointer; }
.crm-pole:hover { background: #efe8d6; }
.crm-pola-opis { margin: 0 0 14px; font-size: 14px; }
.crm-pola-opis summary { cursor: pointer; min-height: 32px; color: var(--szary); }
.crm-pola-opis ul { margin: 6px 0 0; padding-left: 1.1em; }
.crm-rabat { border: 1px solid #e6dfcc; border-radius: 6px; padding: 10px 14px 4px; margin: 0 0 12px; }
.crm-rabat legend { font-weight: 700; padding: 0 6px; }
.crm-rabat .oswiadczenie { font-size: 15px; }
.crm-podglad:empty { display: none; }
.crm-podglad { margin: 12px 0 8px; }
.crm-podglad-temat { margin: 0 0 8px; overflow-wrap: anywhere; }
.crm-ramka { display: block; width: 100%; height: 560px; border: 1px solid #ddd6c4; border-radius: 6px; background: #16161a; }
.crm-tekst { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; background: #fbf8f0; border: 1px solid #e6dfcc; border-radius: 4px; padding: 10px 12px; font: 13px/1.5 var(--mono); }
/* gracze bez postępu, kody do skopiowania, sekcja w karcie gracza */
.crm-kod { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-kod code { font: 700 14px/1 var(--mono); letter-spacing: .06em; background: #f7f3ea; border: 1px dashed #c9bd9e; border-radius: 3px; padding: 6px 8px; }
.crm-kod .przycisk { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
.crm-akcja { display: grid; gap: 6px; justify-items: start; }
.tabela td.crm-akcja { white-space: normal; min-width: 200px; }
.crm-w-karcie { border-top: 1px dashed #ddd6c4; margin-top: 16px; }
.crm-w-karcie .przycisk { min-height: 40px; font-size: 13.5px; padding: 0 12px; }
/* odpowiedzi z ankiet */
.crm-odpowiedzi { display: grid; gap: 10px; max-width: 900px; }
.crm-odpowiedz { background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; padding: 10px 14px; }
.crm-odpowiedz p { margin: 0 0 6px; overflow-wrap: anywhere; }
.crm-gwiazdki { color: #9a6b00; letter-spacing: .08em; }
/* asystent AI */
.crm-dane-ai summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; color: var(--czerwien); font-weight: 700; }
.crm-ai-przyciski .przycisk { min-height: 48px; }
.crm-ai-wynik { max-width: 900px; margin: 14px 0; }
.crm-md { max-width: 860px; font: 16px/1.55 var(--sans); }
.crm-md h3 { font-size: 19px; margin: 20px 0 8px; }
.crm-md h4 { font-size: 17px; margin: 16px 0 6px; }
.crm-md ul, .crm-md ol { padding-left: 1.3em; margin: 0 0 12px; }
.crm-md li { margin: 0 0 4px; }
.crm-md code { font: 14px var(--mono); background: #f7f3ea; padding: 1px 4px; border-radius: 3px; }
.crm-md .tabela-kontener { margin: 0 0 12px; }
.szuflada .crm-md { font-size: 15.5px; }
@media (max-width: 520px) {
  .crm-slupki { grid-template-columns: minmax(70px, max-content) minmax(0, 1fr) max-content; gap: 6px 8px; font-size: 13.5px; }
  .crm-regula { padding: 12px 12px 8px; }
  .crm-przelacznik { margin-left: 0; }
  .crm-ramka { height: 480px; }
  .crm-zakres .pole { min-width: 0; flex: 1 1 40%; }
}

/* konto: baner nowego regulaminu, prośba o zgodę, zgody i powiadomienia, ankieta */
.baner-regulaminu { background: #fff8e6; border: 1.5px solid var(--mosiadz); border-radius: 4px; padding: 16px 18px 6px; margin: 0 0 22px; }
.baner-regulaminu h2 { font-size: 22px; margin: 0 0 6px; }
.baner-regulaminu p { font: 16px/1.45 var(--sans); margin: 0 0 12px; }
.baner-regulaminu-przyciski, .prosba-zgody-przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
.prosba-zgody p { font: 16px/1.5 var(--sans); }
.prosba-zgody-przyciski .przycisk { flex: 1 1 180px; }
.zgoda-przelacznik { cursor: pointer; border-top: 0; padding-top: 4px; }
.zgoda-przelacznik span { font: 15px/1.5 var(--sans); }
.zgoda-przelacznik input { width: 26px; height: 26px; }
.ankieta-miejsce { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ankieta-dzieki { margin: 0; }
dialog.okno-ankiety { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.ankieta-pytanie { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.ankieta-pytanie legend { font: 700 16px/1.35 var(--sans); padding: 0; margin: 0 0 8px; }
.ankieta-pytanie .maly { margin: -4px 0 8px; font-size: 13.5px; }
.ankieta-opcje { display: flex; flex-wrap: wrap; gap: 6px; }
.ankieta-opcje label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 12px; border: 1.5px solid var(--papier-3); border-radius: 4px; background: #fff; font: 15px/1.2 var(--sans); cursor: pointer; }
.ankieta-opcje input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ankieta-opcje label:has(input:checked) { border-color: var(--czerwien); background: #f9ecea; font-weight: 700; }
.ankieta-opcje label:has(input:focus-visible) { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
.ankieta-skala .ankieta-opcje { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-width: 560px; }
.ankieta-skala .ankieta-opcje label { padding: 0; }
/* gwiazdki: zgaszona = sam kontur (kontrast 3:1), zapalona = wypełniona – różnią się kształtem, nie tylko kolorem */
.ankieta-gwiazdki .ankieta-opcje label { font-size: 28px; color: transparent; -webkit-text-stroke: 1.5px #7d7359; padding: 0 6px; border-color: transparent; background: transparent; }
.ankieta-gwiazdki .ankieta-opcje label.zapalona { color: #b8860b; -webkit-text-stroke: 1.5px #8a6400; }
@media (forced-colors: active) {
  .ankieta-gwiazdki .ankieta-opcje label { color: GrayText; -webkit-text-stroke: 0; }
  .ankieta-gwiazdki .ankieta-opcje label.zapalona { color: Highlight; }
}
.ankieta-gwiazdki .ankieta-opcje label:has(input:checked) { background: transparent; border-color: transparent; }
.okno-ankiety .pole textarea { min-height: 80px; }

/* ───────────── sklep: pudełko na stronie gry, zamówienie z wysyłką, kod rabatowy, zamówienia na koncie, panel
   (zamówienia, magazyn, sposoby dostawy, rabaty). Karty online i pudełka stoją obok siebie od ~760 px (bez :has – jedna
   pod drugą). Pola 16 px (iPhone nie powiększa), cele dotyku min. 44 px. */
#kup .wnetrze:has(> .karta-pudelka) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 28px; align-items: stretch;
  max-width: 1100px;
}
#kup .wnetrze:has(> .karta-pudelka) > .karta-ceny { max-width: none; margin: 0; display: flex; flex-direction: column; }
#kup .wnetrze:has(> .karta-pudelka) > .karta-ceny > * { flex: 0 0 auto; }   /* .cena ma flex-basis: 100% */
#kup .wnetrze:has(> .karta-pudelka) > .karta-ceny > .przycisk.duzy { margin-top: auto; }
.karta-pudelka { margin: 28px auto 0; border-top-color: var(--mosiadz); overflow: hidden; }
.karta-pudelka .sygn { color: #7a5b1c; }
.karta-pudelka-tytul { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 .5em; }
.pudelko-zdjecie { display: block; width: calc(100% + 64px); max-width: none; margin: -34px -32px 22px; aspect-ratio: 4 / 3; object-fit: cover; }
.pudelko-stan { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; font: 700 16px/1.35 var(--sans); color: #1f4a28; }
.pudelko-kropka { flex: 0 0 auto; width: 11px; height: 11px; margin-top: .3em; border-radius: 50%; background: var(--zielen); box-shadow: 0 0 0 3px rgba(47, 107, 60, .18); }
.karta-pudelka.stan-na-zamowienie .pudelko-stan { color: #5c4200; }
.karta-pudelka.stan-na-zamowienie .pudelko-kropka { background: var(--mosiadz); box-shadow: 0 0 0 3px rgba(200, 164, 90, .25); }
.karta-pudelka.stan-brak .pudelko-stan { color: var(--szary); }
.karta-pudelka.stan-brak .pudelko-kropka { background: #9a9aa3; box-shadow: none; }
.karta-pudelka .przycisk.duzy:not(.glowny) { color: var(--atrament); }
.pudelko-uwaga { margin: 14px 0 0; }
.pudelko-gpsr { margin: 14px 0 0; border-top: 1px solid var(--papier-3); font: 14px/1.45 var(--sans); color: #3a3a42; }
.pudelko-gpsr summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--szary); font-weight: 700; }
.pudelko-gpsr summary:hover { color: var(--atrament); }
.pudelko-gpsr dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 2px 0 6px; }
.pudelko-gpsr dt { color: var(--szary); }
.pudelko-gpsr dd { margin: 0; overflow-wrap: anywhere; }

/* zamówienie: wersja (online / w pudełku), adres i dostawa, rabat, termin wysyłki, zgoda marketingowa */
.segment-cena { font-weight: 400; opacity: .85; white-space: nowrap; }
.segment-cena:not(:empty)::before { content: "· "; }
.karta.karta-zakup.tryb-pudelko { max-width: 880px; }
.zakup-wysylka-lead { margin: -6px 0 16px; }
.zakup-dwa.zakup-kod-miasto { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); }
.zakup-dostawy .wybor.dostawa { justify-content: flex-start; }
.dostawa-nazwa { flex: 1 1 auto; }
.dostawa-cena { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.zakup-dostawy[aria-invalid="true"] .wybor { border-color: var(--czerwien); }
#wiersz-paczkomat input { text-transform: uppercase; letter-spacing: .06em; }
#wiersz-paczkomat input::placeholder { text-transform: none; letter-spacing: 0; }
.zakup-faktura { margin: 6px 0 12px; }
.tryb-pudelko .zakup-reszta { border-top: 1px solid var(--papier-3); padding-top: 20px; }
@media (min-width: 860px) {
  .tryb-pudelko .zakup-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "wysylka reszta"; column-gap: 36px; align-items: start; }
  .tryb-pudelko #pola-wysylki { grid-area: wysylka; }
  .tryb-pudelko .zakup-reszta { grid-area: reszta; border-top: 0; padding-top: 0; }
}
.zakup-rabat { margin: 0 0 14px; }
.zakup-rabat summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--czerwien);
  font: 16px/1.3 var(--sans); text-decoration: underline; text-underline-offset: .18em; }
.zakup-rabat .wiersz-formularza { margin: 4px 0 6px; }
.zakup-rabat .wiersz-formularza .pole { flex-basis: 160px; }
.zakup-rabat .pole input { text-transform: uppercase; letter-spacing: .04em; }
.rabat-wynik { color: #1f4a28; font-weight: 700; }
.rabat-wynik:empty { display: none; }
#wiersz-rabat td { color: #1f4a28; }
.zakup-termin { margin: -6px 0 18px; padding: 10px 12px; border-left: 4px solid var(--zielen); border-radius: 3px; background: #eef5ee;
  font: 15px/1.45 var(--sans); color: #1f3a25; }
.zakup-termin.na-zamowienie { border-left-color: var(--mosiadz); background: #fbf3dc; color: #4d3a0d; }
.zakup-odstapienie { margin: 0 0 14px; font: 15.5px/1.45 var(--sans); color: #3a3a42; }
.oswiadczenie.zgoda-marketing { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--papier-3); }
.oswiadczenie.zgoda-marketing > span { font-size: 15px; }
@media (max-width: 480px) {
  #wersja label { flex-wrap: wrap; row-gap: 0; line-height: 1.15; }
  #wersja .segment-cena { flex-basis: 100%; font-size: 14px; }
  #wersja .segment-cena::before { content: none; }
}

/* konto: „Twoje zamówienia” */
#sekcja-zamowienia { scroll-margin-top: 16px; }
.konto-zamowienia { display: grid; gap: 12px; }
.zamowienie-karta { background: #fff; border: 1px solid var(--papier-3); border-radius: 4px; padding: 14px 16px 6px; font: 16px/1.45 var(--sans); }
.zamowienie-glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.zamowienie-karta h3 { margin: 0; font: 700 20px/1.25 var(--serif); }
.zamowienie-stan { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; }
.zamowienie-stan i { width: 10px; height: 10px; border-radius: 50%; background: var(--mosiadz); }
.zamowienie-stan.stan-wyslane i, .zamowienie-stan.stan-gotowe i { background: var(--zielen); }
.zamowienie-stan.stan-anulowane i { background: #9a9aa3; }
.zamowienie-opis { margin: 6px 0 8px; color: #3a3a42; }
.zamowienie-przesylka { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.zamowienie-przesylka b { font-family: var(--mono); font-size: 14.5px; letter-spacing: .03em; overflow-wrap: anywhere; }
.zamowienie-przesylka .przycisk { min-height: 44px; padding: 0 16px; font-size: 15px; }
.zamowienie-fakty { margin: 0 0 8px; }

/* panel: zamówienia (podzakładki, lista, szuflada), magazyn, sposoby dostawy, rabaty, Omnibus */
.sklep-podnav { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px; background: #e9e3d3; border-radius: 6px; max-width: 100%; }
.sklep-podnav button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  font: 700 14px/1 var(--sans); color: var(--szary); }
.sklep-podnav button:hover { color: var(--atrament); }
.sklep-podnav button[aria-pressed="true"] { background: #fff; color: var(--czerwien); box-shadow: 0 1px 3px rgba(29, 29, 34, .12); }
.sklep-problemy { max-width: 860px; }
.sklep-problemy ul { margin: 6px 0 0; padding-left: 1.2em; }
.tabela .po-terminie { color: #6e1a15; font-weight: 700; }
.narzedzia-listy > a.przycisk { min-height: 40px; font-size: 14px; padding: 0 14px; }
.magazyn-karta { margin: 0 0 18px; max-width: 1100px; }
.magazyn-karta h3 { margin: 0 0 10px; }
.magazyn-karta h4 { margin: 14px 0 8px; font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--szary); }
.magazyn-karta .kafelki { margin-bottom: 12px; }
.magazyn-karta .kafelek { background: #faf7ef; }
.magazyn-formularze { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.magazyn-formularze .formularz-wiersz { margin: 0; }
.magazyn-historia td.plus { color: #1f4a28; font-weight: 700; }
.magazyn-historia td.minus { color: #6e1a15; font-weight: 700; }
.magazyn-historia td.powod { white-space: normal; min-width: 180px; }
.tabela-dostaw input[type=text], .tabela-dostaw select { min-height: 40px; padding: 6px 8px; font: 16px/1.2 var(--sans);
  border: 1.5px solid var(--papier-3); border-radius: 4px; background: #fff; }
.tabela-dostaw input[type=text] { width: 100%; min-width: 120px; }
.tabela-dostaw td:nth-child(2) input { width: 96px; min-width: 0; }
.tabela-dostaw input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--czerwien); }
.tabela-dostaw td.srodek { text-align: center; }
.przyciski-dostaw { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.omnibus { max-width: 860px; margin: 0 0 16px; padding: 12px 16px; background: #fff8e6; border: 1px solid #e5cf8f;
  border-left: 4px solid var(--mosiadz); border-radius: 4px; font-size: 14.5px; }
.omnibus p { margin: 6px 0 0; }
.omnibus ul { margin: 8px 0 0; padding-left: 1.2em; }
.rabaty-formularze { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; max-width: 1280px; }
@media (max-width: 1000px) { .rabaty-formularze { grid-template-columns: minmax(0, 1fr); } }
.rabat-generator h3, .rabat-gracz h3 { margin: 0 0 10px; }
.rabat-pola { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px 12px; margin: 0 0 8px; }
.rabat-pola .pole { margin: 0; }
.rabat-pola .pole.szerokie { grid-column: 1 / -1; }
.rabat-pola .pole input, .rabat-pola .pole select, .rabat-gracz .pole input { min-height: 42px; padding: 8px 10px; font-size: 16px; }
.rabat-generator .oswiadczenie, .rabat-gracz .oswiadczenie { font-size: 15px; margin: 6px 0; }
.rabat-gracz .wiersz-formularza .przycisk { min-height: 42px; }
.tabela td.dotyczy { white-space: normal; min-width: 200px; }

/* ───────────── bezpieczeństwo (cd.): panel admina na telefonie – cele dotyku min. 44 px (spis sekcji, linki w nagłówku) */
@media (pointer: coarse) {
  .s-admin .ustawienia-spis { gap: 0 16px; }
  .s-admin .ustawienia-spis a { display: inline-flex; align-items: center; min-height: 44px; }
  .s-admin .admin-linki a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}

/* ───────────── prawne: tabela w dokumentach prawnych (np. okresy przechowywania danych w polityce prywatności) */
.dokument .tabela-dokumentu { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; line-height: 1.4; }
.dokument .tabela-dokumentu th, .dokument .tabela-dokumentu td { border: 1px solid var(--papier-3); padding: 8px 10px; text-align: left; vertical-align: top; }
.dokument .tabela-dokumentu th { background: var(--papier-2); font-weight: 700; }
@media (max-width: 600px) {
  .dokument .tabela-dokumentu { display: block; overflow-x: auto; font-size: 14px; }
  .dokument .tabela-dokumentu th, .dokument .tabela-dokumentu td { min-width: 130px; padding: 6px 8px; }
}

/* ───────────── integracje: zakładka panelu – karty usług zewnętrznych, plakietki stanu, formularze kluczy, instrukcje */
.etykieta.blad { background: #f3e1de; color: #6e1a15; box-shadow: inset 0 0 0 1px #e6b9b1; }
.etykieta.szara { background: #eee7d6; color: #5b5b66; }
.integracje-podsumowanie { max-width: 820px; margin: 0 0 12px; }
.integracje-podsumowanie h3 { font-size: 17px; margin: 10px 0 6px; }
.integracje-do-zrobienia { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.integracje-do-zrobienia li { margin: 0 0 4px; }
.integracje-do-zrobienia a { font-weight: 700; }
.integracje-grupa { margin: 26px 0 10px; font-size: 20px; }
.integracje-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start; }
.integracja { scroll-margin-top: 12px; border-left: 4px solid #cfc7b4; }
.integracja.stan-dziala { border-left-color: #2f7a3f; }
.integracja.stan-blad { border-left-color: #a32b21; }
.integracja.stan-czesciowo { border-left-color: #d9a021; }
.integracja-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.integracja-naglowek h3 { font-size: 19px; margin: 0; flex: 1 1 auto; }
.integracja-naglowek h3:focus { outline: 3px solid rgba(143, 32, 32, .35); outline-offset: 3px; }
.integracja-cel { margin: 0 0 10px; color: #3a3a42; font-size: 15px; }
.integracja .komunikat.maly { font-size: 13.5px; padding: 8px 10px; }
.integracja-formularz { margin: 6px 0 4px; }
.integracja-formularz .pole { margin-bottom: 12px; }
.integracja-formularz textarea.pole-sekret { font: 12.5px/1.4 var(--mono); min-height: 72px; }
.integracja .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.integracja .przyciski .przycisk { min-height: 44px; }
.integracja-wynik { border-top: 1px dashed #ddd6c4; padding-top: 10px; margin-top: 4px; font-size: 14.5px; }
.integracja-wynik > p { margin: 0 0 8px; line-height: 1.5; }
.integracja-wynik .etykieta { vertical-align: middle; margin-right: 4px; }
.integracja-szczegoly { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 4px 12px; margin: 6px 0 8px; font-size: 13.5px; }
.integracja-szczegoly dt { color: var(--szary); }
.integracja-szczegoly dd { margin: 0; overflow-wrap: anywhere; }
.integracja-kiedy { margin: 0; }
.integracja-akcja-wynik .komunikat { margin: 6px 0; }
.integracja-akcja-wynik h4 { font-size: 15px; margin: 12px 0 6px; }
.integracja-akcja-wynik .kafelki { margin: 0 0 8px; }
.integracja-tabela { font-size: 13.5px; }
.integracja-tabela td { overflow-wrap: anywhere; }
.integracja-instrukcja, .integracja-historia { margin-top: 6px; }
.integracja-kroki { padding-left: 22px; margin: 6px 0 10px; font-size: 14.5px; line-height: 1.5; }
.integracja-kroki li { margin: 0 0 6px; }
.integracja-wklej { margin: 0 0 10px; }
.integracja-wklej-wiersz { display: flex; gap: 6px; align-items: center; }
.integracja-adres { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 10px; font: 13.5px/1.3 var(--mono); border: 1px solid #d9d0b9; border-radius: 4px; background: #fff; color: var(--atrament); }
.integracja-wklej-wiersz .przycisk { min-height: 44px; flex: 0 0 auto; }
.ustawienia-przeniesione ul { list-style: none; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.6; }
.ustawienia-przeniesione li { margin: 0 0 4px; }
@media (max-width: 600px) {
  .integracja-szczegoly { grid-template-columns: 1fr; gap: 0 0; }
  .integracja-szczegoly dt { margin-top: 6px; }
  .integracja .przyciski .przycisk { flex: 1 1 100%; }
  .integracja-wklej-wiersz { flex-wrap: wrap; }
  .integracja-wklej-wiersz .przycisk { flex: 1 1 100%; }
}
.integracja details > summary::before { content: "▸"; display: inline-block; width: 1em; margin-right: 4px; color: var(--czerwien); transition: transform .15s; }
.integracja details[open] > summary::before { transform: rotate(90deg); }

/* ───────────── panel: nawigacja i narzędzia SEO */
/* Menu w grupach: boczne (komputer: zwijane przyciskiem ☰; tablet: wysuwane nad treścią), na telefonie pasek na dole
   z 5 grupami i lista grupy (arkusz od dołu). Nagłówek zakładki (grupa, tytuł, jedno zdanie) nad treścią; powtórzony
   tytuł w treści zakładki jest chowany. Ekran Start: karta kroków uruchomienia, „co wymaga uwagi”. Wyszukiwarka i pomoc
   w oknach <dialog>. Pusty stan list, znak „?” z wyjaśnieniem. Cele dotyku min. 44 px. */
.admin-pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; background: #fff; color: var(--atrament); border-radius: 4px; font: 700 15px/1 var(--sans); }
.admin-pomin:focus { left: 8px; }
.s-admin .admin-glowa { flex-wrap: nowrap; gap: 8px 14px; padding: 8px 14px; min-height: 60px; }
.admin-menu, .admin-narzedzie, .admin-nav-zwin {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--gwiazda); font: 700 14px/1 var(--sans); cursor: pointer;
}
.admin-menu:hover, .admin-narzedzie:hover, .admin-nav-zwin:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.admin-menu svg, .admin-narzedzie svg, .admin-nav-zwin svg { flex: 0 0 auto; }
.admin-narzedzia { display: flex; align-items: center; gap: 2px 10px; margin-left: auto; flex: 0 0 auto; }
.s-admin .admin-marka { flex: 0 0 auto; }
.s-admin .admin-gra { flex: 1 1 auto; justify-content: center; }
.admin-uklad { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
body.nav-zwinieta .admin-uklad { grid-template-columns: minmax(0, 1fr); }
body.nav-zwinieta .admin-nav { display: none; }
.admin-nav { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 4px 10px 40px; background: var(--noc-2); color: var(--gwiazda); scrollbar-width: thin; }
.admin-nav-gora { display: flex; justify-content: flex-end; }
.admin-grupa { padding: 4px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.admin-grupa:last-child { border-bottom: 0; }
.admin-grupa-tytul { display: block; padding: 12px 12px 4px; font: 700 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mosiadz); }
.admin-nav [data-zakladka] {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--szary-jasny); font: 700 15px/1.2 var(--sans); text-align: left; cursor: pointer;
}
.admin-nav [data-zakladka]:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.admin-nav [data-zakladka][aria-current="page"] { background: #f1eee6; color: var(--atrament); }
.admin-nav [data-zakladka]:focus-visible { outline-offset: -3px; }
.admin-nav .odznaka { margin-left: auto; }
.admin-nav-tlo { position: fixed; inset: 0; z-index: 55; border: 0; background: rgba(11, 16, 32, .5); cursor: pointer; }
.admin-glowna { min-width: 0; padding: 18px 24px 80px; }
.admin-naglowek { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #ddd6c4; }
.admin-sciezka { margin: 0 0 2px; font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.admin-tytul { margin: 0; font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); }
.admin-opis { margin: 6px 0 0; max-width: 820px; font-size: 15.5px; line-height: 1.45; color: #3a3a42; }
.admin-tytul-powtorzony { position: absolute !important; width: 1px; height: 1px; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wczytuje { color: var(--szary); font-style: italic; }
.wczytuje::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid #c9bd9e; border-top-color: var(--czerwien); animation: admin-krec .8s linear infinite;
}
@keyframes admin-krec { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wczytuje::before { animation: none; } }
.pusto { max-width: 760px; margin: 8px 0 16px; padding: 18px 20px; border: 1px dashed #c9bd9e; border-radius: 6px; background: #faf7ef; }
.pusto p { margin: 0 0 4px; font-size: 16px; }
.pusto p.maly { margin: 0; }
.pomoc { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; }
.pomoc > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--szary); color: var(--szary); font: 700 13px/1 var(--sans); cursor: pointer;
}
.pomoc > summary::-webkit-details-marker { display: none; }
.pomoc[open] > summary { background: var(--atrament); color: #fff; border-color: var(--atrament); }
.pomoc-tekst {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: min(340px, 80vw); padding: 10px 12px; border-radius: 6px;
  background: var(--atrament); color: #fff; font: 14px/1.45 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.pomoc.od-prawej .pomoc-tekst { left: auto; right: 0; }
@media (pointer: coarse) { .pomoc > summary { width: 44px; height: 44px; font-size: 16px; } }
/* ekran Start */
.start-siatka { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; margin: 0 0 18px; }
.start-karta { min-width: 0; padding: 16px 18px 12px; background: #fff; border: 1px solid #ddd6c4; border-radius: 8px; }
.s-admin .start-karta h2 { margin: 0 0 8px; font-size: 20px; }
.start-kroki.gotowe { border-color: #b8d6bd; background: #f3f8f3; }
.start-pasek { height: 10px; margin: 6px 0 14px; border-radius: 5px; background: #e9e3d3; overflow: hidden; }
.start-pasek i { display: block; height: 100%; background: var(--czerwien); border-radius: 5px; }
.start-kroki.gotowe .start-pasek i { background: var(--zielen); }
.start-lista { list-style: none; margin: 0; padding: 0; }
.krok { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid #eee7d6; }
.start-lista .krok:first-child { border-top: 0; }
.krok-tresc { min-width: 0; }
.krok-tresc b { font-size: 16px; }
.krok-tresc p { margin: 2px 0 0; }
.krok-znak { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: #eee7d6; color: var(--szary); font: 700 15px/1 var(--sans); }
.krok-znak.krok-tak { background: #e3efe3; color: #1f4a28; }
.krok-znak.krok-nie { background: #fff0c2; color: #5c4200; box-shadow: inset 0 0 0 1px #d9b451; }
.krok-znak.krok-czesc { background: #e5e9f6; color: #22346a; }
.krok .przycisk, .start-uwaga .przycisk { min-height: 40px; padding: 0 14px; font-size: 14px; align-self: center; }
.start-zrobione { margin: 8px 0 4px; }
.start-zrobione > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--szary); }
.start-zrobione .krok-tresc b { color: var(--szary); font-weight: 400; }
.start-brawo { margin: 6px 0 10px; font-size: 17px; font-weight: 700; color: #1f4a28; }
.start-uwaga-lista { list-style: none; margin: 0; padding: 0; }
.start-uwaga-lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eee7d6; }
.start-uwaga-lista li:first-child { border-top: 0; }
.start-liczba { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 16px; background: #fff0c2; color: #5c4200; font: 700 15px/1 var(--sans); }
.start-uwaga-lista li.pilne .start-liczba { background: #c0392b; color: #fff; }
.start-uwaga-tekst { font-size: 15px; }
.start-uwaga .pusto { margin: 4px 0 6px; }
/* okna: wyszukiwarka, pomoc */
.admin-dialog {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 14px 18px 18px; border: 1px solid #ddd6c4; border-radius: 10px;
  background: #fbf8f0; color: var(--atrament); font: 15px/1.45 var(--sans); box-shadow: var(--cien);
}
.admin-dialog::backdrop { background: rgba(11, 16, 32, .55); }
.admin-dialog-belka { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.admin-dialog-belka b { font: 700 18px/1.2 var(--serif); }
.admin-dialog-belka .przycisk { min-height: 44px; font-size: 14px; padding: 0 16px; }
.admin-szukaj .pole { margin: 0 0 6px; }
.admin-szukaj .pole input { width: 100%; min-height: 48px; padding: 8px 12px; font-size: 17px; }
.admin-wyniki { list-style: none; display: grid; gap: 4px; max-height: 50vh; margin: 8px 0 0; padding: 0; overflow: auto; }
.admin-wynik {
  display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid #e6dfcc; border-radius: 6px;
  background: #fff; color: var(--atrament); font: 15px/1.35 var(--sans); text-align: left; cursor: pointer;
}
.admin-wynik:hover, .admin-wynik:focus-visible { border-color: var(--czerwien); background: #fff7f5; }
.admin-wynik b { font-size: 15.5px; overflow-wrap: anywhere; }
.admin-wynik span { color: var(--szary); font-size: 13.5px; }
.admin-wynik-info { padding: 8px 4px; }
.admin-pomoc-tresc p { margin: 0 0 10px; }
.admin-pomoc-tresc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; }
.admin-pomoc-tresc dt { font-weight: 700; }
.admin-pomoc-tresc dd { margin: 0; }
.admin-pomoc-tresc code { padding: 1px 5px; border-radius: 3px; background: #f1eee6; font: 13.5px var(--mono); }
/* pasek dolny i arkusz grupy (telefon) */
.admin-dol {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; grid-template-columns: repeat(5, 1fr);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--noc); border-top: 1px solid rgba(255, 255, 255, .08);
}
.admin-dol button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border: 0; border-radius: 8px;
  background: transparent; color: var(--szary-jasny); font: 700 11.5px/1 var(--sans); cursor: pointer;
}
.admin-dol button svg { width: 24px; height: 24px; }
.admin-dol button[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .1); }
.admin-arkusz {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; max-height: 82vh; overflow: auto; padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  background: #fbf8f0; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
}
.admin-arkusz-belka { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.admin-arkusz-belka b { font: 700 20px/1.2 var(--serif); }
.admin-arkusz-belka .przycisk { min-height: 48px; padding: 0 20px; }
.admin-arkusz-lista { display: grid; gap: 6px; }
.admin-arkusz-grupa { display: block; padding: 10px 6px 2px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.admin-arkusz-el, .admin-arkusz-link {
  display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid #e6dfcc; border-radius: 8px;
  background: #fff; color: var(--atrament); font: 15px/1.35 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.admin-arkusz-el b { font-size: 16px; }
.admin-arkusz-el span { color: var(--szary); font-size: 13.5px; }
.admin-arkusz-el[aria-current="page"] { border-color: var(--czerwien); background: #fff7f5; }
.admin-arkusz-link { align-content: center; font-weight: 700; }
body.arkusz-otwarty::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(11, 16, 32, .45); }
/* tablet: menu wysuwane */
@media (max-width: 999px) {
  .admin-uklad { grid-template-columns: minmax(0, 1fr); }
  .admin-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(320px, 86vw); max-height: none; padding-top: 8px;
    transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 40px rgba(0, 0, 0, .3);
  }
  body.nav-otwarta .admin-nav { transform: none; }
  body.nav-zwinieta .admin-nav { display: block; }
  .s-admin .admin-glowa { flex-wrap: wrap; }
  .admin-menu { order: 0; }
  .s-admin .admin-marka { order: 1; flex: 1 1 auto; }
  .admin-narzedzia { order: 2; margin-left: 0; }
  .s-admin .admin-gra { order: 5; flex: 1 1 100%; justify-content: flex-start; }
  .admin-glowna { padding: 14px 16px 60px; }
}
@media (prefers-reduced-motion: reduce) { .admin-nav { transition: none; } }
/* telefon: pasek dolny zamiast menu, ikony narzędzi bez podpisów, szuflada na cały ekran z dużym „Zamknij” */
@media (max-width: 699px) {
  .admin-menu, .admin-nav, .admin-nav-tlo, .admin-linki { display: none !important; }
  .admin-dol { display: grid; }
  .admin-narzedzie span { display: none; }
  .admin-narzedzie { padding: 0 6px; }
  .s-admin .admin-glowa { padding: 6px 10px 8px; }
  .admin-glowna { padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  .admin-naglowek { margin-bottom: 10px; padding-bottom: 8px; }
  .admin-tytul { font-size: 24px; }
  .admin-opis { font-size: 14.5px; }
  .szuflada { z-index: 70; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .szuflada-belka .przycisk { min-height: 48px; padding: 0 24px; font-size: 16px; }
  .admin-dialog { width: calc(100vw - 16px); padding: 12px 12px 14px; }
  .start-siatka { gap: 12px; }
  .start-karta { padding: 14px 14px 10px; }
  .krok { grid-template-columns: 28px minmax(0, 1fr); }
  .krok .przycisk { grid-column: 2; justify-self: start; }
  .start-uwaga-lista li { grid-template-columns: 40px minmax(0, 1fr); }
  .start-uwaga-lista li .przycisk { grid-column: 2; justify-self: start; }
}
@media (max-width: 1100px) { .start-siatka { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── panel: nawigacja i narzędzia SEO (cd.): podwidoki SEO – audyt, przekierowania, indeksowanie, szybkość, zadania */
.seo-podnav { margin-bottom: 14px; }
.seo-podwidok { min-width: 0; }
.seo-podwidok .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.seo-podwidok h3 { margin: 22px 0 8px; }
.seo-podwidok h4 { margin: 14px 0 6px; font: 700 16px/1.3 var(--sans); }
.seo-punkty {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%;
  font: 700 17px/1 var(--sans); background: #eee7d6; color: var(--szary); flex: 0 0 auto;
}
.seo-punkty.dobrze { background: #e3efe3; color: #1f4a28; }
.seo-punkty.srednio { background: #fff0c2; color: #5c4200; }
.seo-punkty.slabo { background: #f3e1de; color: #6e1a15; }
.seo-punkty.duze { min-width: 72px; height: 72px; font-size: 28px; }
.seo-wynik-duzy { display: flex; align-items: center; gap: 14px; }
.seo-wynik-duzy b { font: 700 20px/1.2 var(--serif); }
.seo-audyt-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 12px; }
.seo-audyt-glowa .kafelki { flex: 1 1 420px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.seo-audyt-strona, .seo-pomiar { min-width: 0; margin: 0 0 12px; padding: 14px 16px 10px; background: #fff; border: 1px solid #ddd6c4; border-radius: 8px; }
.seo-audyt-naglowek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }
.seo-audyt-naglowek > div { flex: 1 1 200px; min-width: 0; }
.seo-podwidok .seo-audyt-naglowek h3 { margin: 0; font-size: 18px; }
.seo-audyt-naglowek a { overflow-wrap: anywhere; }
.seo-fakty { margin: 0 0 8px; overflow-wrap: anywhere; }
.seo-problemy, .seo-zadania, .seo-stany, .seo-porady, .seo-problemy-ld { list-style: none; margin: 0; padding: 0; }
.seo-problemy li, .seo-zadanie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 8px 0; border-top: 1px solid #eee7d6; }
.seo-problemy li .etykieta, .seo-zadanie > .etykieta { margin-top: 3px; }
.seo-problem-tresc, .seo-zadanie-tresc { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.seo-problem-tresc b { font-size: 15px; }
.seo-problemy li.poziom-info b { font-weight: 400; color: var(--szary); }
.seo-problemy .przycisk, .seo-zadanie .przycisk { min-height: 40px; padding: 0 12px; font-size: 14px; }
.seo-zadanie .przyciski { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }
.seo-zadanie.stan-zrobione .seo-zadanie-tresc b { text-decoration: line-through; color: var(--szary); }
.seo-zadanie.stan-ignoruj .seo-zadanie-tresc b { color: var(--szary); }
.seo-porady li, .seo-problemy-ld li { padding: 6px 0; border-top: 1px solid #eee7d6; overflow-wrap: anywhere; }
.seo-stany li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 0; }
.seo-propozycje { margin: 0 0 8px; }
.seo-propozycja { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; margin: 0 0 6px; background: #faf7ef; border: 1px solid #e6dfcc; border-radius: 6px; }
.seo-propozycja b { grid-column: 1; font-size: 15px; overflow-wrap: anywhere; }
.seo-propozycja span { grid-column: 1; font-size: 13.5px; color: #3a3a42; overflow-wrap: anywhere; }
.seo-propozycja .przycisk { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 0 14px; font-size: 14px; }
.seo-zarys { margin: 0 0 12px; padding: 0; list-style: none; font-size: 14.5px; }
.seo-zarys li { padding: 3px 0; overflow-wrap: anywhere; }
.seo-zarys li.poziom-2 { padding-left: 16px; }
.seo-zarys li.poziom-3 { padding-left: 32px; }
.seo-zarys li.poziom-4, .seo-zarys li.poziom-5, .seo-zarys li.poziom-6 { padding-left: 48px; }
.seo-h { display: inline-block; min-width: 26px; font: 700 11px/1 var(--mono); color: var(--czerwien); }
.seo-tekst { max-height: 60vh; overflow: auto; margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; font: 14px/1.5 var(--sans); }
.seo-domena { max-width: 900px; }
.seo-form-przek .pole { flex: 1 1 200px; }
.seo-form-przek .pole select { min-height: 44px; font-size: 16px; }
.seo-test-wynik:empty { display: none; }
.seo-test-wynik { margin: -8px 0 16px; padding: 10px 14px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.seo-test-wynik p { margin: 0 0 4px; }
.seo-test-wynik ol { margin: 4px 0; }
.tabela.seo-tabela-przek td.seo-notatka { white-space: normal; max-width: 220px; }
.tabela.seo-tabela-przek tr.wylaczone td { color: var(--szary); }
.tabela.seo-tabela-przek input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--zielen); }
.tabela.seo-tabela-przek .przyciski { display: flex; gap: 6px; margin: 0; }
.tabela.seo-tabela-przek .przyciski .przycisk { min-height: 40px; }
.seo-wykres { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin: 10px 0 4px; padding: 6px 8px 0; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.seo-slupek { position: relative; flex: 1 1 0; min-width: 3px; height: 100%; }
.seo-slupek i { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 2px 2px 0 0; min-height: 1px; }
.seo-slupek i.wysw { background: #e9e3d3; }
.seo-slupek i.klik { left: 25%; right: 25%; background: var(--czerwien); }
.seo-legenda i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; border-radius: 2px; }
.seo-legenda i.klik { background: var(--czerwien); }
.seo-legenda i.wysw { background: #e9e3d3; border: 1px solid #d6cdb5; }
.seo-dwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 8px 24px; align-items: start; }
.tabela td.seo-klucz { white-space: normal; overflow-wrap: anywhere; min-width: 160px; }
.seo-cwv.dobrze { border-left: 4px solid var(--zielen); }
.seo-cwv.srednio { border-left: 4px solid var(--mosiadz); }
.seo-cwv.slabo { border-left: 4px solid #a32b21; }
@media (pointer: coarse) {
  .seo-strona-glowa a, .seo-audyt-naglowek a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 600px) {
  .seo-problemy li, .seo-zadanie { grid-template-columns: auto minmax(0, 1fr); }
  .seo-problemy li > .przycisk, .seo-zadanie > .przyciski { grid-column: 1 / -1; justify-content: flex-start; }
  .seo-propozycja { grid-template-columns: minmax(0, 1fr); }
  .seo-propozycja .przycisk { grid-column: 1; grid-row: auto; justify-self: start; }
  .seo-wykres { height: 110px; }
}

/* ───────────── ranking: rankingi (/ranking, /ranking/<gra>), strona wyniku (/wynik/<token>), odznaki detektywa,
   ksywka i wyniki na koncie, zakładka panelu „Ranking” */
.karta.karta-ranking { max-width: 900px; }
.karta.karta-ranking, .karta.karta-wyniku { min-width: 0; }          /* element siatki: tabela przewija się w środku, nie strona */
.ranking-tabela .krotka, .ranking-tabela .odznaki-mobilne { display: none; }
.ranking-wstep { font: 16px/1.5 var(--sans); color: #3a3a42; }
.ranking-moj { background: #fff8e6; border: 1.5px solid var(--mosiadz); border-radius: 4px; padding: 14px 16px 6px; margin: 0 0 18px; font: 16px/1.45 var(--sans); }
.ranking-moj p { margin: 0 0 10px; }
.ranking-zakladki, .ranking-filtry { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ranking-zakladki.ranking-gry { margin-bottom: 16px; }
.ranking-filtr {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--papier-3); border-radius: 4px;
  background: #fff; color: var(--atrament); font: 15px/1 var(--sans); text-decoration: none;
}
.ranking-filtr:hover { background: var(--papier-2); color: var(--atrament); }
.ranking-filtr.aktywny { background: var(--noc); border-color: var(--noc); color: var(--gwiazda); }
.ranking-zakladki .ranking-filtr.aktywny { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }
.ranking-tabela { margin: 6px 0 14px; }
.ranking-tabela .tabela { width: 100%; border-collapse: collapse; font: 16px/1.4 var(--sans); }
.ranking-tabela .tabela th { position: static; }
.ranking-tabela .tabela td { vertical-align: middle; }
.ranking-tabela .tabela td.ranking-ksywka { white-space: normal; overflow-wrap: anywhere; font-weight: 700; min-width: 120px; }
.ranking-tabela .tabela td.ranking-poz { color: var(--szary); font-family: var(--mono); }
.ranking-tabela .tabela td.ranking-czas { font-variant-numeric: tabular-nums; }
.ranking-tabela tr:nth-child(-n+3) td.ranking-poz { color: var(--czerwien); font-weight: 700; }
.ranking-tabela tr.ranking-ja td { background: #fff8e6; }
.ranking-pusto { background: var(--papier-2); border: 1px dashed var(--papier-3); border-radius: 4px; padding: 22px 18px; text-align: center; font: 16px/1.5 var(--sans); }
.ranking-uwaga { margin: 12px 0 8px; }
.ranking-legenda { margin: 8px 0 0; border: 1px solid var(--papier-3); border-radius: 4px; padding: 8px 14px; background: #fff; font: 15px/1.45 var(--sans); }
.ranking-legenda summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.ranking-cta-przyciski .przycisk, .wynik-cta-przyciski .przycisk { flex: 1 1 200px; }
@media (max-width: 560px) {
  .ranking-tabela .tabela th:nth-child(6), .ranking-tabela .tabela td:nth-child(6),
  .ranking-tabela .tabela th:nth-child(7), .ranking-tabela .tabela td:nth-child(7) { display: none; }
  .ranking-tabela .tabela th, .ranking-tabela .tabela td { padding: 8px 6px; }
  .ranking-tabela .pelna, .ranking-tabela .tabela th:nth-child(5), .ranking-tabela .tabela td.ranking-odznaki { display: none; }
  .ranking-tabela .krotka { display: inline; }
  .ranking-tabela .odznaki-mobilne { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
  .ranking-tabela .odznaki-mobilne .odznaka-ikona { width: 18px; height: 18px; }
  .ranking-tabela .tabela td.ranking-ksywka { min-width: 90px; }
}

/* odznaki: medale (SVG z danych), rząd ikon, lista z opisami, legenda */
.odznaka-ikona { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.odznaki-rzad { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.ranking-odznaki { white-space: normal !important; min-width: 60px; }
.odznaki-lista, .odznaki-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.odznaki-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.odznaki-lista li, .odznaki-legenda li { display: flex; gap: 10px; align-items: center; }
.odznaki-lista li span, .odznaki-legenda li span { display: grid; font: 15px/1.35 var(--sans); }
.odznaki-lista small { color: var(--szary); font-size: 13.5px; }
.odznaki-legenda { margin: 8px 0; }
.odznaki-legenda li span { display: block; }

/* strona wyniku */
.karta.karta-wyniku { max-width: 660px; }
.wynik-karta-tresc h1 { font-size: clamp(24px, 4.6vw, 32px); margin-bottom: 14px; }
.wynik-ksywka { color: var(--czerwien); overflow-wrap: anywhere; }
.wynik-rozwiazal { font-weight: 400; }
.wynik-gra { white-space: nowrap; }
.wynik-czas { margin: 0 0 4px; }
.wynik-czas-etykieta { display: block; font: 12.5px/1.4 var(--mono); letter-spacing: .1em; color: var(--szary); text-transform: uppercase; }
.wynik-czas-liczba { display: block; font: 700 clamp(40px, 9vw, 60px)/1.05 var(--serif); color: var(--atrament); font-variant-numeric: tabular-nums; }
.wynik-szybciej { font: 700 18px/1.3 var(--sans); color: var(--zielen); margin: 0 0 14px; }
.wynik-dane { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 0 0 18px; }
.wynik-dane > div { background: var(--papier); border: 1px solid var(--papier-3); border-radius: 4px; padding: 10px 12px; }
.wynik-dane dt { font: 12.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--szary); }
.wynik-dane dd { margin: 4px 0 0; font: 700 17px/1.3 var(--sans); }
.wynik-odznaki h2 { font-size: 20px; margin-bottom: 10px; }
.wynik-udostepnij, .wynik-cta { border-top: 1px solid var(--papier-3); margin-top: 22px; padding-top: 20px; }
.wynik-udostepnij h2, .wynik-cta h2 { font-size: 22px; }
.udostepnij-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.udostepnij-przyciski .przycisk { flex: 1 1 140px; min-height: 48px; font-size: 15px; padding: 0 14px; }
.udost-facebook { border-color: #1877f2; color: #1462c8; }
.udost-messenger { border-color: #7b3fe4; color: #6b34c9; }
.udost-whatsapp { border-color: #25d366; color: #1a8f47; }
.udost-x { border-color: #1d1d22; color: #1d1d22; }
.udost-telegram { border-color: #229ed9; color: #1a7fb0; }
@media (hover: hover) and (pointer: fine) { .tylko-telefon { display: none !important; } }
.wynik-obrazki { margin: 10px 0 0; border: 1px solid var(--papier-3); border-radius: 4px; padding: 10px 14px; font: 15.5px/1.5 var(--sans); }
.wynik-obrazki summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.wynik-obrazki .udostepnij-przyciski { margin-top: 8px; }
.wynik-podglad { width: min(100%, 320px); height: auto; border: 1px solid var(--papier-3); margin-top: 8px; }
.wynik-wlasciciel { margin-top: 12px; }
#wynik-oferta { margin-top: 12px; background: #fff8e6; border: 1.5px solid var(--mosiadz); border-radius: 4px; padding: 12px 14px 4px; font: 15.5px/1.5 var(--sans); }
#wynik-oferta code, .oferta-kod code { font: 700 17px var(--mono); letter-spacing: .06em; background: #fff; padding: 2px 8px; border-radius: 3px; border: 1px dashed var(--mosiadz); }

/* konto: ksywka detektywa, odznaki, wynik przy ukończonej grze */
.ksywka-obecna { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.ksywka-obecna b { font: 700 24px/1.2 var(--serif); color: var(--czerwien); overflow-wrap: anywhere; }
.ksywka-prosba { background: #f7e3df; border: 1px solid #e6b9b1; color: #6e1a15; border-radius: 4px; padding: 10px 12px; font: 15.5px/1.45 var(--sans); }
.konto-odznaki h3 { margin: 22px 0 12px; font-size: 19px; }
.konto-odznaki .odznaki-lista li.zablokowana { opacity: .55; }
.konto-odznaki .odznaki-lista li.zablokowana .odznaka-ikona { filter: grayscale(1); }
.moja-gra-wynik { margin: 10px 0 0; padding: 10px 12px; background: var(--papier); border: 1px solid var(--papier-3); border-radius: 4px; font: 15.5px/1.5 var(--sans); }
.moja-gra-wynik p { margin: 0 0 8px; }
.moja-gra-wynik .gra-przyciski { margin-top: 6px; }
.moja-gra-wynik .gra-przyciski .przycisk { min-width: 0; }
.moja-gra-wynik .odznaki-rzad { margin: 0 0 8px; }
.moja-gra-wynik .oferta-kod { margin: 8px 0 0; }
dialog.okno-ksywka { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.okno-ksywka ul { margin: 0 0 14px; padding-left: 1.2em; }

/* panel admina: zakładka Ranking */
.ranking-admin-kanaly { font-size: 12.5px; color: var(--szary); }
.tabela tr.ranking-ukryty td { color: var(--szary); }
.tabela tr.ranking-przeglad td { background: #fff8e6; }
.tabela td.ranking-admin-ksywka { white-space: normal; overflow-wrap: anywhere; min-width: 120px; font-weight: 700; }
.tabela td .ranking-pomiar { display: block; font-size: 12.5px; color: var(--szary); white-space: normal; min-width: 150px; max-width: 220px; }
.tabela td.ranking-admin-akcje .przyciski { display: flex; flex-wrap: wrap; gap: 4px; width: 210px; white-space: normal; }
.tabela td.ranking-admin-akcje .przycisk { min-height: 36px; font-size: 13.5px; padding: 0 10px; }
@media (pointer: coarse) { .tabela td.ranking-admin-akcje .przycisk { min-height: 44px; } }

/* ───────────── konkurencja: zakładka panelu – „Co robić dalej” (analiza AI albo reguły), lista konkurentów, źródła danych,
   porównanie cen (słupki), oś czasu obserwacji, karta konkurenta (produkty, kandydaci, przyjęcie nowego stanu strony) */
.konkurencja-co-dalej { max-width: 980px; margin: 0 0 22px; padding: 16px 18px 12px; background: #fff; border: 1px solid #ddd6c4;
  border-left: 4px solid #8a8577; border-radius: 6px; }
.konkurencja-co-dalej.z-ai { border-left-color: var(--zielen); }
.konkurencja-co-dalej-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.konkurencja-co-dalej-glowa h3 { margin: 0; font-size: 21px; flex: 0 0 auto; }
.konkurencja-co-dalej-glowa .etykieta { white-space: normal; }
.konkurencja-co-dalej h4 { font-size: 16px; margin: 16px 0 8px; }
.konkurencja-podsumowanie-tekst { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
.konkurencja-kroki { margin: 0; padding-left: 22px; }
.konkurencja-kroki li { margin: 0 0 10px; line-height: 1.45; }
.konkurencja-kroki li p { margin: 3px 0 0; }
.konkurencja-kroki .etykieta { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.etykieta.obszar-marketing { background: #e5e9f6; color: #22346a; }
.etykieta.obszar-ceny { background: #fff0c2; color: #5c4200; }
.etykieta.obszar-oferta, .etykieta.obszar-produkt { background: #e3efe3; color: #1f4a28; }
.etykieta.obszar-strona { background: #f3e1de; color: #6e1a15; }
.konkurencja-miernik { color: var(--szary); }
.konkurencja-przebic { margin: 0; padding-left: 20px; }
.konkurencja-przebic li { margin: 0 0 8px; line-height: 1.45; }
.konkurencja-przebic li b { display: block; }
.konkurencja-gry { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.konkurencja-gra { border: 1px solid #e6dfcc; border-radius: 6px; padding: 10px 12px; background: #fcfaf4; }
.konkurencja-gra h5 { margin: 0 0 4px; font: 700 16px/1.3 var(--sans); }
.konkurencja-gra p { margin: 0 0 6px; }
.konkurencja-gra-cechy { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13.5px; }
.konkurencja-gra-cechy dt { color: var(--szary); }
.konkurencja-gra-cechy dd { margin: 0; overflow-wrap: anywhere; }
.konkurencja-co-dalej .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.konkurencja-co-dalej .przyciski .przycisk, .konkurencja-akcje .przycisk, .konkurencja-przebudowa .przycisk { min-height: 44px; }
.konkurencja-historia-analiz ul { padding-left: 18px; }
.konkurencja-historia-analiz li { margin: 0 0 6px; }
.konkurencja-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.konkurencja-stan { max-width: 980px; }
.konkurencja-nowy { max-width: 760px; margin: 0 0 20px; padding: 14px 16px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.konkurencja-formularz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 14px; }
.konkurencja-formularz .przyciski { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.konkurencja-formularz .pole:has(textarea) { grid-column: 1 / -1; }
.konkurencja-tabela td { vertical-align: top; }
.konkurencja-tabela td:first-child { white-space: normal; min-width: 170px; }
.tabela tr.nieaktywny td { color: #8a8577; }
.tabela tr.nieaktywny td .etykieta { opacity: .75; }
.etykieta.nowy { background: #e3efe3; color: #1f4a28; box-shadow: inset 0 0 0 1px #b9d6bd; }
.konkurencja-slupki .crm-slupek.nasza .crm-slupek-tor i { background: var(--zielen); }
.konkurencja-slupki .crm-slupek.nasza .crm-slupek-nazwa, .konkurencja-slupki .crm-slupek.nasza .crm-slupek-wartosc { font-weight: 700; color: #1f4a28; }
.konkurencja-porownanie { margin: 22px 0 8px; }
.konkurencja-porownanie .crm-okresy { margin: 0 0 12px; }
.konkurencja-slupki { grid-template-columns: minmax(120px, 380px) minmax(0, 1fr) max-content; max-width: 980px; }
.konkurencja-porownanie > p.maly { margin-top: 12px; max-width: 980px; }
.konkurencja-tabela .tylko-tel { display: none; }
.konkurencja-tabela td.konkurencja-ceny { white-space: normal; min-width: 80px; }
.konkurencja-os { list-style: none; padding: 0; max-width: 980px; }
.konkurencja-os li { padding: 3px 0 3px 10px; border-left: 3px solid #e6dfcc; margin: 0 0 4px; line-height: 1.45; }
.konkurencja-os li.nowy { border-left-color: var(--zielen); }
.konkurencja-os li.cena { border-left-color: #d9a021; }
.konkurencja-os li.zniknal { border-left-color: #a32b21; }
.konkurencja-os li.problem { border-left-color: #a32b21; background: #fff7e0; }
.konkurencja-os li.stan { border-left-color: #22346a; }
.konkurencja-os time { color: var(--szary); font-variant-numeric: tabular-nums; }
.konkurencja-zrodla { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 8px; }
.konkurencja-zrodla .etykieta { font-size: 12.5px; }
.konkurencja-przebudowa p { margin: 0 0 10px; }
.konkurencja-linki a, .konkurencja-narzedzia a { overflow-wrap: anywhere; }
.konkurencja-narzedzia { padding-left: 18px; }
.konkurencja-narzedzia li { margin: 0 0 6px; }
.konkurencja-profile { display: flex; flex-wrap: wrap; gap: 8px; }
.konkurencja-profile .przycisk { min-height: 44px; font-size: 14px; }
.konkurencja-notatka { background: #faf7ef; border: 1px solid #e6dfcc; border-radius: 4px; padding: 8px 10px; font-size: 14px; white-space: pre-line; }
.konkurencja-produkty td:first-child { white-space: normal; min-width: 180px; }
.konkurencja-produkty td:first-child .etykieta { margin-left: 6px; }
.konkurencja-produkty tr.zniknal td { color: #8a8577; }
.konkurencja-dawne { display: block; color: var(--szary); font-size: 12px; }
.konkurencja-jak { max-width: 980px; }
.konkurencja-jak li { margin: 0 0 6px; line-height: 1.45; }
@media (max-width: 600px) {
  .konkurencja-co-dalej { padding: 12px 12px 8px; }
  .konkurencja-co-dalej-glowa h3 { font-size: 19px; }
  .konkurencja-tabela .ukryj-tel, .konkurencja-tabela th:nth-child(2), .konkurencja-tabela th:nth-child(3),
  .konkurencja-tabela th:nth-child(4), .konkurencja-tabela th:nth-child(7) { display: none; }
  .konkurencja-tabela .tylko-tel { display: block; margin-top: 4px; }
  .konkurencja-tabela td { white-space: normal; }
  .konkurencja-tabela td:first-child { min-width: 0; }
  .konkurencja-slupki { grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 8px; }
  .konkurencja-slupki .crm-slupek-nazwa { grid-column: 1 / -1; margin-top: 6px; }
  .konkurencja-akcje .przycisk, .konkurencja-co-dalej .przyciski .przycisk { flex: 1 1 100%; }
  .konkurencja-gra-cechy { grid-template-columns: 1fr; }
  .konkurencja-gra-cechy dt { margin-top: 4px; }
}

/* ───────────── konkurencja: „Dowód społeczny” (opinie, oceny, obserwujący, trendy, import i eksport), karta firmy, „Co mówią gracze” */
.dowod { margin: 28px 0 10px; padding-top: 8px; border-top: 2px solid #e6dfcc; max-width: 1240px; }
.dowod > h3 { margin: 10px 0 6px; font-size: 22px; }
.dowod h4 { margin: 20px 0 8px; font: 700 17px/1.3 var(--sans); }
.dowod h5, .dowod-karta h5 { margin: 12px 0 6px; font: 700 15px/1.3 var(--sans); }
.dowod .opis-zakladki { max-width: 900px; }
.dowod-kafelki .kafelek b { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.dowod-integracje { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0; margin: 0 0 12px; }
.dowod-integracje .etykieta { font-size: 12.5px; }
.dowod-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.dowod-akcje .przycisk { min-height: 44px; font-size: 14.5px; padding: 0 14px; }
.dowod-uwaga-kluczy { max-width: 760px; margin: 0 0 10px; }
.dowod-przypomnienie { max-width: 980px; }
.dowod-przypomnienie p { margin: 0 0 10px; }
.dowod-panel { max-width: 1100px; margin: 0 0 18px; padding: 14px 16px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.dowod-panel[hidden] { display: none; }
.dowod-panel h4 { margin-top: 0; }
.dowod-formularz { display: block; }
.dowod-formularz > .pole.dowod-data { max-width: 220px; }
.dowod-formularz .pole input, .dowod-formularz .pole select, .dowod-formularz .pole textarea { min-height: 44px; font-size: 16px; }
.dowod-formularz .przyciski, .dowod-panel .przyciski, .dowod-karta .przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.dowod-formularz .przycisk, .dowod-panel .przycisk, .dowod-karta .przycisk { min-height: 44px; font-size: 14.5px; padding: 0 16px; }
.dowod-firma { margin: 0 0 12px; padding: 10px 14px 4px; border: 1px solid #e6dfcc; border-radius: 6px; background: #fcfaf4; min-width: 0; }
.dowod-firma legend { padding: 0 6px; font: 700 15.5px/1.3 var(--sans); }
.dowod-firma legend .etykieta { margin-left: 8px; vertical-align: 1px; }
.dowod-profile { margin: 0 0 8px; }
.dowod-pola { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 14px; }
.dowod-pola .pole { margin: 0 0 12px; min-width: 0; }
.dowod-inne > summary, .dowod-bez-profili > summary { font-weight: 600; }
.dowod-bez-profili { margin: 4px 0 12px; }
.dowod-tabela td { vertical-align: top; }
.dowod-tabela td:first-child { white-space: normal; min-width: 170px; }
.dowod-liczba b, .dowod-trend b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.dowod-liczba small, .dowod-trend small { display: block; max-width: 150px; margin-top: 1px; color: var(--szary); font-size: 12px; line-height: 1.3; white-space: normal; }
.dowod-liczba .etykieta { margin-top: 3px; font-size: 11px; padding: 1px 5px; }
.dowod-liczba small.dowod-ocena { color: var(--atrament); font-size: 12.5px; }
.dowod-liczba small.dowod-system, .dowod-liczba small.dowod-pominiete { font-style: italic; }
.dowod-liczba small.dowod-reczna { color: var(--atrament); font-size: 12.5px; margin-top: 4px; }
.dowod-brak { color: #8a8577; }
.dowod-trend { font-variant-numeric: tabular-nums; }
.dowod-trend.gora b { color: #1f4a28; }
.dowod-trend.dol b { color: #a32b21; }
.dowod-trend.zero b, .dowod-trend.brak { color: var(--szary); }
.dowod-tabela .tylko-tel { display: none; }
.dowod-wykresy { margin: 18px 0 8px; }
.dowod-wykres { margin: 0 0 14px; min-width: 0; }
.dowod-wykres figcaption { margin: 0 0 8px; font: 700 15px/1.3 var(--sans); }
.dowod-slupki { grid-template-columns: minmax(110px, 230px) minmax(0, 1fr) max-content; max-width: 100%; }
.dowod-slupki .crm-slupek-wartosc { white-space: normal; font-size: 13px; text-align: right; }
.dowod-slupki-blok { max-width: 100%; }
.dowod-slupek { margin: 0 0 10px; }
.dowod-slupek-glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; font-size: 14px; }
.dowod-slupek-nazwa { min-width: 0; overflow-wrap: anywhere; }
.dowod-slupek-wartosc { margin-left: auto; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: #3a3a42; }
.dowod-slupek .crm-slupek-tor { height: 12px; margin-top: 3px; }
.dowod-slupek.dobrze .crm-slupek-tor i { background: var(--zielen); }
.dowod-slupek.neutralnie .crm-slupek-tor i { background: #8a8577; }
.dowod-skad { max-width: 980px; margin-top: 14px; }
.dowod-skad li { margin: 0 0 6px; line-height: 1.45; }
.dowod-podglad { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; max-width: 900px; }
.dowod-podglad > li { padding: 8px 12px; background: #fff; border: 1px solid #e6dfcc; border-left-width: 4px; border-left-color: var(--zielen); border-radius: 6px; min-width: 0; }
.dowod-podglad > li.dowod-blad { background: #fdf0ee; border-left-color: #a32b21; }
.dowod-podglad-glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; }
.dowod-podglad-glowa .etykieta { margin-left: auto; }
.dowod-podglad .dowod-lista-liczb, .dowod-podglad .dowod-lista-bledow { margin: 2px 0 0; overflow-wrap: anywhere; }
.dowod-lista-liczb, .dowod-lista-bledow { margin: 0; padding-left: 16px; font-size: 13px; }
.dowod-lista-bledow { color: #6e1a15; }
.dowod-lista { padding-left: 18px; }
.dowod-lista li { margin: 0 0 5px; overflow-wrap: anywhere; }
.dowod-karta { margin: 18px 0 8px; padding-top: 6px; border-top: 2px solid #e6dfcc; }
.dowod-karta .tabela td { vertical-align: top; }
.dowod-karta .dowod-liczba b { font-size: 15px; display: inline; }
.dowod-karta .dowod-liczba small.dowod-skad-liczby { max-width: none; }
.dowod-google-znak { margin: 4px 0; font: 400 13px/1.3 Roboto, Arial, sans-serif; color: #5f6368; }
.dowod-karta small.dowod-zrodlo { display: block; margin-top: 1px; color: var(--szary); font-size: 12px; line-height: 1.3; }
.dowod-karta .dowod-liczba .etykieta { margin: 0 0 0 6px; }
.dowod-karta .dowod-trend b { font-size: 14.5px; }
.dowod-karta .dowod-trend small { max-width: none; }
.dowod-historia .pole { max-width: 360px; }
.dowod-historia .crm-slupki, .dowod-glos-firmy .crm-slupki { max-width: 100%; }
.dowod-karta .dowod-slupki { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) max-content; }
.dowod-wpis-firmy .dowod-pola { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.dowod-api .tabela td { white-space: normal; }
.dowod-kandydaci { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.dowod-kandydaci li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; background: #fff; border: 1px solid #e6dfcc; border-radius: 6px; }
.dowod-kandydaci li .maly { flex: 1 1 200px; }
.dowod-glos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 18px; margin: 8px 0 4px; }
.dowod-glos-kolumna { padding: 8px 12px; background: #fcfaf4; border: 1px solid #e6dfcc; border-radius: 6px; border-left-width: 4px; }
.dowod-glos-kolumna.chwala { border-left-color: var(--zielen); }
.dowod-glos-kolumna.narzekaja { border-left-color: #a32b21; }
.dowod-glos-kolumna.chca { border-left-color: #22346a; }
.dowod-glos-kolumna.gry, .dowod-glos-kolumna.marketing { border-left-color: var(--mosiadz, #b58a2a); }
.dowod-glos-kolumna h5 { margin: 0 0 6px; }
.dowod-glos-kolumna ul { margin: 0; padding-left: 18px; }
.dowod-glos-kolumna li { margin: 0 0 6px; line-height: 1.4; overflow-wrap: anywhere; }
.dowod-formularz .dowod-firma:focus-within { border-color: #b8ad92; }
.dowod-panel :focus-visible, .dowod-karta :focus-visible { outline: 2px solid var(--atrament); outline-offset: 2px; }
@media (max-width: 600px) {
  .dowod { margin-top: 22px; }
  .dowod > h3 { font-size: 20px; }
  .dowod-kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dowod-kafelki .kafelek b { font-size: 17px; }
  .dowod-akcje .przycisk { flex: 1 1 calc(50% - 4px); padding: 6px 8px; font-size: 14px; line-height: 1.25; }
  .dowod-akcje .przycisk.glowny { flex-basis: 100%; }
  .dowod-tabela th:nth-child(n+2), .dowod-tabela td:nth-child(n+2) { display: none; }
  .dowod-tabela td:first-child { min-width: 0; }
  .dowod-tabela .tylko-tel { display: block; margin-top: 4px; }
  .dowod-tel-linia { display: block; margin: 0 0 1px; line-height: 1.35; }
  .dowod-slupki, .dowod-karta .dowod-slupki { grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 8px; }
  .dowod-slupki .crm-slupek-nazwa { grid-column: 1 / -1; margin-top: 6px; }
  .dowod-panel { padding: 12px; }
  .dowod-firma { padding: 8px 10px 2px; }
  .dowod-pola { grid-template-columns: 1fr; }
  .dowod-karta .tabela th, .dowod-karta .tabela td { padding: 8px 6px; white-space: normal; }
  .dowod-karta .tabela th { font-size: 11px; letter-spacing: 0; }
  .dowod-karta .dowod-liczba small, .dowod-karta .dowod-trend small { overflow-wrap: anywhere; }
}

/* ───────────── JĘZYK-2S: wersje językowe strony (fonty z cyrylicą, przełącznik, baner, uwagi) */
/* cyrylica: przeglądarka pobiera te pliki tylko wtedy, gdy na stronie są znaki z tego zakresu (strony /uk/) */
@font-face { font-family: "Caladea"; src: url("../fonty/szeryf-cyr.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Caladea"; src: url("../fonty/szeryf-cyr-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Caladea"; src: url("../fonty/szeryf-cyr-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "DejaVu Cond"; src: url("../fonty/dejavu-cond-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "DejaVu Cond"; src: url("../fonty/dejavu-cond-cyr-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "DejaVu Mono"; src: url("../fonty/dejavu-mono-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }

/* przełącznik języka w pasku: przycisk (cel dotyku 44 px) i lista pod nim */
.jezyk-wybor { position: relative; flex: 0 0 auto; font: 15px/1 var(--sans); }
.jezyk-wybor > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 4px; cursor: pointer; letter-spacing: .06em; }
.jezyk-wybor > summary::-webkit-details-marker { display: none; }
.jezyk-wybor > summary:hover, .jezyk-wybor[open] > summary { background: rgba(232, 230, 223, .12); }
.jezyk-wybor > summary:focus-visible { outline: 2px solid var(--mosiadz); outline-offset: 2px; }
.jezyk-wybor svg { flex: 0 0 auto; }
.jezyk-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px; margin: 0; padding: 6px;
  list-style: none; background: #fff; color: var(--atrament); border: 1px solid var(--papier-3); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.jezyk-lista a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 4px;
  color: var(--atrament); text-decoration: none; white-space: nowrap; }
.jezyk-lista a b { display: inline-block; min-width: 24px; font-weight: 700; letter-spacing: .06em; color: var(--czerwien); }
.jezyk-lista a:hover, .jezyk-lista a:focus-visible { background: var(--papier); text-decoration: none; }
.jezyk-lista a[aria-current] { background: var(--papier-2); font-weight: 700; }
.pasek.ciemny-tekst .jezyk-wybor > summary:hover, .pasek.ciemny-tekst .jezyk-wybor[open] > summary { background: var(--papier-2); }
/* stopka: Polski · English · Українська */
.stopka-jezyki { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.stopka-jezyki a[aria-current] { font-weight: 700; text-decoration: none; }
@media (pointer: coarse) { .stopka-jezyki a { display: inline-flex; align-items: center; min-height: 44px; } }
/* baner na stronie polskiej: „This page is also available in English” (bez przesuwania treści) */
.baner-jezyka { position: fixed; z-index: 60; top: 72px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 6px; max-width: min(560px, calc(100vw - 24px)); padding: 6px 6px 6px 16px; background: #fff; color: var(--atrament);
  border: 1px solid var(--papier-3); border-left: 4px solid var(--mosiadz); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  font: 15px/1.4 var(--sans); }
.baner-jezyka p { margin: 0; }
.baner-jezyka a { color: var(--czerwien); font-weight: 700; }
.baner-jezyka-zamknij { flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: none; color: var(--atrament);
  font: 26px/1 var(--sans); cursor: pointer; border-radius: 4px; }
.baner-jezyka-zamknij:hover, .baner-jezyka-zamknij:focus-visible { background: var(--papier); }
@media (max-width: 640px) { .baner-jezyka { top: 64px; left: 12px; right: 12px; transform: none; max-width: none; } }
/* dokumenty prawne w przekładzie: ramka o wiążącej wersji polskiej; pudełko po polsku na stronach en/uk */
.dokument .ramka-jezyka { border-left: 4px solid var(--mosiadz); font-size: 16px; }
.pudelko-jezyk { margin: 10px 0 0; }
/* dłuższe teksty po angielsku i ukraińsku: przyciski i etykiety łamią się zamiast wychodzić poza kartę */
html:not([lang="pl"]) .przycisk { white-space: normal; text-align: center; }
html:not([lang="pl"]) .segment-opcje label { overflow-wrap: anywhere; }
/* panel: zakładka Języki (tekst polski w szufladzie, kolumny listy tłumaczeń) */
.tl-polski { margin: 0 0 14px; padding: 10px 14px; background: #fbf8f0; border-left: 4px solid var(--mosiadz); white-space: pre-wrap;
  overflow-wrap: anywhere; }
.tabela-tlumaczen td { vertical-align: top; overflow-wrap: anywhere; }
.tabela-tlumaczen td:nth-child(1), .tabela-tlumaczen td:nth-child(2) { min-width: 220px; max-width: 520px; }

/* ───────────── sklep-funkcje: premiera i „Dodaj do kalendarza” (strona gry, zapowiedź w katalogu), ikony social media w stopce,
   wolne ksywki w oknie ksywki na koncie, zakładka panelu „Gry” (pudełko jest / nie ma, data premiery) */
.premiera { margin: 0 0 22px; font-family: var(--sans); }
.premiera-karta { margin: 0 0 14px; }
.premiera-data { margin: 0 0 10px; font: 15px/1.45 var(--sans); color: #d6dae4; }
.premiera-data time { font-weight: 700; color: #fff; }
.premiera-etykieta { margin-right: 4px; font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mosiadz); }
details.kalendarz { max-width: 360px; }
.kalendarz-przycisk {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 4px; cursor: pointer;
  border: 1.5px solid rgba(232, 230, 223, .55); color: var(--gwiazda); font: 700 15px/1.2 var(--sans); letter-spacing: .02em;
  list-style: none; user-select: none; transition: background .15s, border-color .15s, color .15s;
}
.kalendarz-przycisk::-webkit-details-marker { display: none; }
.kalendarz-przycisk::marker { content: ""; }
.kalendarz-przycisk:hover, .kalendarz[open] .kalendarz-przycisk { background: rgba(232, 230, 223, .12); color: #fff; }
.kalendarz[open] .kalendarz-przycisk { border-color: var(--mosiadz); }
.kalendarz-przycisk svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kalendarz-lista { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid rgba(232, 230, 223, .3); border-radius: 4px; background: rgba(11, 16, 32, .88); }
.kalendarz-lista a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: 8px 12px; border-radius: 3px;
  color: var(--gwiazda); font: 15px/1.3 var(--sans); text-decoration: none;
}
.kalendarz-lista a:hover { background: rgba(232, 230, 223, .14); color: #fff; text-decoration: underline; }
.kalendarz-opis { font-size: 12.5px; color: var(--szary-jasny); }
/* wariant na jasnej karcie katalogu (zapowiedź) */
.premiera-karta .premiera-data { margin-bottom: 8px; font-size: 14.5px; color: #3a3a42; }
.premiera-karta .premiera-data time { color: var(--atrament); }
.premiera-karta .premiera-etykieta { color: var(--czerwien); }
.premiera-karta .kalendarz-przycisk { border-color: #bdb3a0; color: var(--atrament); }
.premiera-karta .kalendarz-przycisk:hover, .premiera-karta .kalendarz[open] .kalendarz-przycisk { background: rgba(0, 0, 0, .05); color: var(--atrament); }
.premiera-karta .kalendarz[open] .kalendarz-przycisk { border-color: var(--czerwien); }
.premiera-karta .kalendarz-lista { background: #fff; border-color: var(--papier-3); }
.premiera-karta .kalendarz-lista a { color: var(--atrament); }
.premiera-karta .kalendarz-lista a:hover { background: var(--papier-2); color: var(--czerwien); }
.premiera-karta .kalendarz-opis { color: var(--szary); }

.stopka-social ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; }
.stopka-social li { margin: 0; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(232, 230, 223, .3); color: var(--gwiazda); transition: background .15s, border-color .15s, color .15s;
}
.stopka .social-link:hover { background: rgba(232, 230, 223, .12); border-color: var(--mosiadz); color: #fff; }
.social-ikona { display: block; width: 22px; height: 22px; }

.ksywka-propozycje { margin: 10px 0 0; padding: 10px 12px; background: var(--papier-2); border-radius: 4px; }
.ksywka-propozycje .maly { margin: 0 0 8px; }
.ksywka-propozycje-lista, .okno-ksywka .ksywka-propozycje-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
.ksywka-propozycja {
  min-height: 44px; padding: 0 14px; border: 1.5px solid #bdb3a0; border-radius: 4px; background: #fff; color: var(--atrament);
  font: 700 16px/1.2 var(--sans); cursor: pointer; overflow-wrap: anywhere; transition: background .15s, border-color .15s, color .15s;
}
.ksywka-propozycja:hover { border-color: var(--czerwien); color: var(--czerwien); }
.ksywka-propozycja[aria-pressed="true"] { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }
.ksywka-wybrana { min-height: 1.3em; margin: 0; }

.gry-karta h3 .etykieta { margin-left: 8px; vertical-align: middle; }
.gry-wybor { margin: 0 0 14px; padding: 8px 14px 12px; border: 1px solid var(--papier-3); border-radius: 4px; }
.gry-wybor legend { padding: 0 6px; font: 700 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }
.gry-radia { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 8px; }
.gry-radia label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1.5px solid #bdb3a0;
  border-radius: 4px; background: #fff; cursor: pointer; font: 700 16px/1.2 var(--sans);
}
.gry-radia input { width: 20px; height: 20px; margin: 0; accent-color: var(--czerwien); }
.gry-radia label:has(input:checked) { border-color: var(--czerwien); background: #fbeeea; color: var(--czerwien); }
.gry-radia label:has(input:focus-visible) { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
.gry-problemy { margin: 0 0 8px; padding-left: 1.2em; font: 14.5px/1.45 var(--sans); color: #6e1a15; }
.gry-stan { margin: 0; }
.gry-premiera .formularz-wiersz { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .kalendarz-przycisk, .social-link, .ksywka-propozycja { transition: none; } }

/* ===== APLIKACJA (runda 5): menu na telefonie, ruch strony, biblioteka gier, instalacja. Ten blok jest na końcu pliku. ===== */
/* Ruch: animujemy transform i opacity (wyjątek: wysokość rozwijanych sekcji <details>, ustawia ją js/aplikacja.js). Przy ustawieniu
   systemu „ogranicz ruch” nie ma żadnej animacji ani przejścia (blok prefers-reduced-motion na końcu). */
:root { --ruch-wyjscie: cubic-bezier(.2, .7, .2, 1); --ruch-wejscie: cubic-bezier(.4, 0, 1, 1); }

/* ───────────── przejścia między stronami (View Transitions; przeglądarki bez obsługi pokazują stronę zwykłym przeładowaniem) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .14s ease-in both vt-zanik; }
  ::view-transition-new(root) { animation: .32s var(--ruch-wyjscie) both vt-pojawienie; }
  /* wejście treści strony (także tam, gdzie nie ma View Transitions) */
  .s-karta main > * { animation: wejscie-strony .5s var(--ruch-wyjscie) backwards; }
}
@keyframes vt-zanik { to { opacity: 0; } }
@keyframes vt-pojawienie { from { opacity: 0; } }
@keyframes wejscie-strony { from { opacity: 0; transform: translateY(12px); } }

/* cienki pasek u góry przy wolnym przejściu na inną stronę (dodaje go js/aplikacja.js po 280 ms) */
html.nawiguje::after {
  content: ""; position: fixed; z-index: 120; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--mosiadz), #ecdcae); transform-origin: 0 50%; transform: scaleX(.06);
  animation: pasek-nawigacji 8s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes pasek-nawigacji { to { transform: scaleX(.92); } }

/* ───────────── przyciski: lekkie uniesienie przy najechaniu, wciśnięcie przy dotyku */
.przycisk { transition: background .15s, color .15s, border-color .15s, transform .18s var(--ruch-wyjscie), box-shadow .2s ease; }
@media (hover: hover) {
  .przycisk:hover { transform: translateY(-1px); }
  .przycisk.glowny:hover { box-shadow: 0 8px 18px rgba(143, 32, 32, .3); }
  .przycisk.jasny:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
}
.przycisk:active { transform: translateY(1px) scale(.99); box-shadow: none; }

/* ───────────── pasek: bezpieczne marginesy (wycięcia ekranu, tryb poziomy), mały telefon */
@supports (padding: max(0px)) {
  .pasek { padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right)); }
}
@media (max-width: 420px) {
  .pasek { gap: 10px; }
  .pasek-znak { font-size: 13px; letter-spacing: .13em; }
  .pasek-nav { gap: 8px; }
  .pasek-konto { padding: 9px 10px; font-size: 14px; }
}

/* ───────────── przycisk menu (telefon) */
.menu-przycisk {
  display: none; position: relative; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
  border: 1px solid rgba(232, 230, 223, .45); border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s; -webkit-tap-highlight-color: transparent;
}
.menu-przycisk:hover { background: rgba(232, 230, 223, .12); }
.menu-przycisk:active { transform: scale(.94); }
.pasek.ciemny-tekst .menu-przycisk { border-color: var(--papier-3); }
.pasek.ciemny-tekst .menu-przycisk:hover { background: var(--papier-2); }
@media (max-width: 640px) {
  .menu-przycisk { display: inline-flex; }
  .pasek-nav:has(> .menu-przycisk) > .jezyk-wybor { display: none; }       /* język jest wtedy w szufladzie */
}
.menu-kreski { position: relative; display: block; width: 20px; height: 14px; }
.menu-kreski i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor; transition: transform .32s var(--ruch-wyjscie), opacity .2s ease; }
.menu-kreski i:nth-child(1) { top: 0; }
.menu-kreski i:nth-child(2) { top: 6px; }
.menu-kreski i:nth-child(3) { top: 12px; }
.menu-przycisk[aria-expanded="true"] .menu-kreski i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-przycisk[aria-expanded="true"] .menu-kreski i:nth-child(2) { opacity: 0; }
.menu-przycisk[aria-expanded="true"] .menu-kreski i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ───────────── szuflada menu: okno modalne <dialog>, wysuwa się z prawej; Esc, kliknięcie obok i „Zamknij” ją zamykają */
html.menu-otwarte { overflow: hidden; }
.menu-szuflada {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; width: min(88vw, 360px); max-width: none; height: 100%; max-height: none;
  overflow: hidden; overscroll-behavior: contain; color: var(--gwiazda); background: linear-gradient(170deg, var(--noc-3), var(--noc) 72%);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .45); transform: translateX(105%); transition: transform .28s var(--ruch-wejscie);
}
.menu-szuflada.otwarte { transform: none; transition: transform .4s var(--ruch-wyjscie); }
.menu-szuflada::backdrop { background: rgba(5, 8, 18, .62); opacity: 0; transition: opacity .28s ease; }
.menu-szuflada.otwarte::backdrop { opacity: 1; }
.menu-szuflada-wnetrze {
  display: flex; flex-direction: column; gap: 18px; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 22px;
}
.menu-szuflada-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.menu-szuflada-znak { font: 700 15px/1 var(--sans); letter-spacing: .22em; }
.menu-zamknij {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(232, 230, 223, .4);
  border-radius: 4px; background: transparent; color: inherit; cursor: pointer; transition: background .2s, transform .12s;
}
.menu-zamknij:hover { background: rgba(232, 230, 223, .12); }
.menu-zamknij:active { transform: scale(.94); }
.menu-kreski-x i { top: 6px; }
.menu-kreski-x i:nth-child(1) { transform: rotate(45deg); }
.menu-kreski-x i:nth-child(2) { transform: rotate(-45deg); }
.menu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-lista li { opacity: 0; transform: translateX(18px); transition: opacity .22s ease, transform .28s var(--ruch-wejscie); }
.menu-szuflada.otwarte .menu-lista li { opacity: 1; transform: none; transition: opacity .32s ease, transform .42s var(--ruch-wyjscie); transition-delay: calc(var(--i, 0) * 45ms + 100ms); }
.menu-lista a {
  display: flex; align-items: center; min-height: 54px; padding: 0 14px; border-radius: 6px; color: var(--gwiazda); text-decoration: none;
  font: 700 21px/1.2 var(--sans); transition: background .2s, color .2s, transform .15s;
}
.menu-lista a:hover, .menu-lista a:focus-visible { background: rgba(232, 230, 223, .1); color: #fff; text-decoration: none; }
.menu-lista a:active { transform: translateX(3px); }
.menu-lista a[aria-current] { position: relative; color: var(--mosiadz); }
.menu-lista a[aria-current]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--mosiadz); }
.menu-lista a.menu-konto { justify-content: center; margin-top: 10px; border: 1px solid rgba(232, 230, 223, .4); font-size: 18px; }
.menu-jezyk { border-top: 1px solid rgba(232, 230, 223, .18); padding-top: 10px; }
.menu-jezyk > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  list-style: none; font: 16px/1.2 var(--sans); color: var(--gwiazda);
}
.menu-jezyk > summary::-webkit-details-marker { display: none; }
.menu-jezyk > summary:hover { background: rgba(232, 230, 223, .08); }
.menu-jezyk > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .28s var(--ruch-wyjscie);
}
.menu-jezyk[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu-jezyk.zamyka > summary::after { transform: rotate(45deg) translateY(-2px); }
.menu-jezyki { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 2px; }
.menu-jezyki a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 6px; color: var(--gwiazda); text-decoration: none; font: 17px/1.2 var(--sans); }
.menu-jezyki a:hover, .menu-jezyki a:focus-visible { background: rgba(232, 230, 223, .1); text-decoration: none; }
.menu-jezyki a b { min-width: 28px; letter-spacing: .08em; color: var(--mosiadz); }
.menu-jezyki a[aria-current] { background: rgba(232, 230, 223, .1); font-weight: 700; }
.menu-instaluj { width: 100%; margin-top: auto; flex: 0 0 auto; }

/* ───────────── rozwijane menu języka i rozwijane sekcje */
.jezyk-wybor[open] > .jezyk-lista { animation: lista-wejscie .2s var(--ruch-wyjscie) backwards; transform-origin: top right; }
@keyframes lista-wejscie { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.jezyk-wybor > summary svg { transition: transform .35s var(--ruch-wyjscie); }
.jezyk-wybor[open] > summary svg { transform: rotate(24deg); }
details.rozwija > :not(summary) { animation: tresc-wejscie .34s var(--ruch-wyjscie) backwards; }
@keyframes tresc-wejscie { from { opacity: 0; transform: translateY(-6px); } }
.pytania details.zamyka summary::after { content: "+"; }

/* ───────────── odsłanianie sekcji przy przewijaniu (klasy dodaje js/aplikacja.js tylko poniżej pierwszego ekranu) */
.odslon { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .65s var(--ruch-wyjscie); transition-delay: calc(var(--i, 0) * 80ms); }
.odslon.widoczny { opacity: 1; transform: none; }

/* ───────────── komunikat na dole ekranu */
.app-toast {
  position: fixed; z-index: 130; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); max-width: min(520px, calc(100vw - 28px));
  padding: 12px 16px; border-radius: 6px; background: var(--atrament); color: #fff; font: 15px/1.4 var(--sans); box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s ease, transform .35s var(--ruch-wyjscie);
}
.app-toast.widoczny { opacity: 1; transform: translate(-50%, 0); }

/* ───────────── panel „Zainstaluj aplikację” (biblioteka, konto, pomoc) */
.app-panel {
  display: flex; align-items: flex-start; gap: 16px; margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(232, 230, 223, .3);
  border-radius: 6px; background: rgba(20, 26, 46, .84); color: var(--gwiazda); animation: panel-wejscie .45s var(--ruch-wyjscie) backwards;
}
@keyframes panel-wejscie { from { opacity: 0; transform: translateY(8px); } }
.app-panel-ikona { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.app-panel-tresc { flex: 1 1 auto; min-width: 0; }
.app-panel-tytul { margin: 0 0 4px; font-size: 20px; }
.app-panel-opis { margin: 0 0 8px; font: 15.5px/1.45 var(--sans); color: #cfd4de; }
.app-panel-kroki { margin: 10px 0 0; padding-left: 1.3em; font: 15.5px/1.5 var(--sans); }
.app-panel-kroki li { margin: 0 0 4px; }
.app-panel-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.app-panel-akcje .przycisk { min-height: 44px; font-size: 15px; padding: 0 16px; }
.app-panel-jasny { background: #fff; color: var(--atrament); border-color: var(--papier-3); }
.app-panel-jasny .app-panel-opis { color: #3a3a42; }
@media (max-width: 480px) { .app-panel { padding: 14px; gap: 12px; } .app-panel-ikona { width: 44px; height: 44px; border-radius: 10px; } }

/* rysunki dla iPhone'a i Safari (SVG z js/instalacja.js: kolory z tych zmiennych, numer kroku w czerwonym kółku) */
.rysunek { --r-tlo: #10162a; --r-kontur: rgba(232, 230, 223, .55); --r-szary: rgba(232, 230, 223, .3); --r-karta: rgba(232, 230, 223, .16);
  --r-pasek: rgba(232, 230, 223, .18); --r-arkusz: #1c2442; --r-ikona: #e8e6df; --r-akcent: #d65a5a; margin: 12px 0 8px; max-width: 440px; }
.app-panel-jasny .rysunek, .instalacja-tresc .rysunek { --r-tlo: #fbf8f0; --r-kontur: #8b8472; --r-szary: #d6cdb7; --r-karta: #ebe4d1;
  --r-pasek: #e6e0ce; --r-arkusz: #fff; --r-ikona: #4a4a52; --r-akcent: var(--czerwien); }
.rysunek-svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-tel { fill: var(--r-tlo); stroke: var(--r-kontur); stroke-width: 1.5; }
.r-numer { fill: var(--czerwien); stroke: #fff; stroke-width: 1.2; }
.r-cyfra { fill: #fff; font: 700 11px var(--sans); }
.r-szary, .r-szary-kolo { fill: var(--r-szary); }
.r-karta, .r-pole { fill: var(--r-karta); }
.r-pasek { fill: var(--r-pasek); }
.r-arkusz { fill: var(--r-arkusz); stroke: var(--r-kontur); stroke-width: 1; }
.r-ikona { fill: none; stroke: var(--r-ikona); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.r-wyroznienie { fill: rgba(143, 32, 32, .16); }
.r-obwod { fill: none; stroke: var(--r-akcent); stroke-width: 2; animation: r-puls 2.4s ease-in-out infinite; }
@keyframes r-puls { 50% { opacity: .3; } }
.r-akcent { fill: var(--r-akcent); }
.r-jasny { fill: #fff; }
.r-ikona-app { fill: var(--noc-3); stroke: var(--mosiadz); stroke-width: 1.2; }
.r-jasny-linia { fill: none; stroke: var(--mosiadz); stroke-width: 1.6; }
.r-strzalka { fill: none; stroke: var(--r-kontur); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── biblioteka gier (/biblioteka) */
.s-biblioteka main { place-items: start center; padding-top: 12px; }
.biblioteka { width: 100%; max-width: 1040px; color: var(--gwiazda); }
.biblioteka-lead a, .biblioteka-uwaga a, .biblioteka-pomoc a { color: var(--mosiadz); }
.biblioteka-glowa { margin: 6px 0 14px; }
.biblioteka-glowa .sygn { color: var(--mosiadz); }
.biblioteka-glowa h1 { margin: 0 0 10px; font-size: clamp(34px, 6vw, 52px); }
.biblioteka-lead { max-width: 660px; margin: 0; font-size: 18px; color: #cfd4de; }
.biblioteka .maly { color: var(--szary-jasny); }
.biblioteka .komunikat { margin-top: 14px; }
.biblioteka-sekcja { margin: 30px 0 0; }
.biblioteka-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.biblioteka-naglowek h2 { margin: 0; font-size: clamp(24px, 4vw, 30px); color: var(--gwiazda); }
.biblioteka-odswiez {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
  color: var(--szary-jasny); font: 15px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s;
}
.biblioteka-odswiez:hover { color: #fff; background: rgba(232, 230, 223, .1); }
.biblioteka-odswiez.pracuje svg { animation: obrot .9s linear infinite; }
.biblioteka-status { margin: 14px 0 0; font: 15px/1.45 var(--sans); color: var(--szary-jasny); }
.biblioteka-status:empty { margin: 0; }
.biblioteka-status.offline { padding: 10px 14px; border-radius: 4px; background: #fff4d6; color: #5c4200; border: 1px dashed #d9b451; }
.biblioteka-status.ok { color: #a9d9b2; }
.biblioteka-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.biblioteka-katalog { margin-top: 0; }
.biblioteka-kafel {
  display: flex; flex-direction: column; overflow: hidden; background: #fbf8f0; color: var(--atrament); border: 1px solid var(--papier-3); border-radius: 4px;
  box-shadow: var(--cien); transition: transform .2s ease, box-shadow .2s ease; animation: kafel-wejscie .5s var(--ruch-wyjscie) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes kafel-wejscie { from { opacity: 0; transform: translateY(14px); } }
.biblioteka-kafel:not(.szkielet):hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(5, 8, 18, .45); }
.biblioteka-okladka { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--noc); }
.biblioteka-okladka img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: transform .6s ease; }
.biblioteka-kafel:not(.szkielet):hover .biblioteka-okladka img { transform: scale(1.04); }
.biblioteka-opis { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.biblioteka-opis h3 { margin: 0; font-size: 24px; text-wrap: balance; }
.biblioteka-stan { margin: 0; font: 15.5px/1.45 var(--sans); color: #3a3a42; }
.biblioteka-opis .pasek-postepu { margin: 6px 0 2px; }
.biblioteka-opis .pasek-postepu > i { transform-origin: 0 50%; animation: wypelnij .9s var(--ruch-wyjscie) .25s backwards; }
@keyframes wypelnij { from { transform: scaleX(0); } }
.biblioteka-opis .gra-przyciski { margin-top: auto; padding-top: 10px; }
.biblioteka-znacznik {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 8px; border-radius: 3px;
  background: rgba(47, 107, 60, .95); color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .04em; animation: panel-wejscie .4s var(--ruch-wyjscie) backwards;
}
.biblioteka-znacznik::before { content: ""; width: 4px; height: 8px; margin: -2px 2px 0 1px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.biblioteka-znacznik.czesc { background: rgba(8, 11, 22, .82); }
.biblioteka-znacznik.czesc::before { width: 8px; height: 2px; margin: 0 1px 0 0; border-width: 0 0 2px; transform: none; }
.biblioteka-info {
  margin: 24px 0 0; padding: clamp(20px, 4vw, 30px); background: #fbf8f0; color: var(--atrament); border: 1px solid var(--papier-3);
  border-top: 6px solid var(--czerwien); border-radius: 2px; box-shadow: var(--cien); animation: wejscie-strony .45s var(--ruch-wyjscie) backwards;
}
.biblioteka-info h2 { margin: 0 0 8px; font-size: 26px; }
.biblioteka-info p { max-width: 640px; }
.biblioteka-info .gra-przyciski { margin-top: 14px; }
.biblioteka-uwaga { margin: 14px 0 0; max-width: 700px; }
.biblioteka-pomoc { margin: 34px 0 0; }
.biblioteka-katalog .gra-karta { background: #fbf8f0; color: var(--atrament); }
.biblioteka-katalog .gra-karta.wkrotce { background: var(--papier-2); }
/* ładowanie: szare bloki z przesuwającym się blaskiem */
.szkielet { pointer-events: none; }
.szkielet .biblioteka-okladka, .sz-linia, .sz-przycisk { position: relative; overflow: hidden; background: #e7e0cd; }
.szkielet .biblioteka-okladka::after, .sz-linia::after, .sz-przycisk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: blysk 1.4s ease-in-out infinite;
}
@keyframes blysk { to { transform: translateX(100%); } }
.sz-linia { display: block; height: 14px; border-radius: 7px; }
.sz-tytul { width: 62%; height: 24px; margin-bottom: 4px; }
.sz-krotka { width: 42%; }
.sz-przycisk { display: block; width: 150px; height: 44px; margin-top: 12px; border-radius: 4px; }

/* ───────────── strona „Jak zainstalować” i strona „offline” */
.karta-instalacja { max-width: 820px; }
.instalacja-lead { font-size: 19px; color: #3a3a42; }
.instalacja-h2 { margin: 30px 0 12px; font-size: 26px; }
.instalacja-lista { border-top: 1px solid var(--papier-3); }
.instalacja-lista > details { border-bottom: 1px solid var(--papier-3); }
.instalacja-lista summary {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 56px; padding: 6px 36px 6px 0; cursor: pointer;
  list-style: none; font: 700 18px/1.3 var(--sans); transition: color .2s;
}
.instalacja-lista summary::-webkit-details-marker { display: none; }
.instalacja-lista summary:hover { color: var(--czerwien); }
.instalacja-lista summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--czerwien); border-bottom: 2px solid var(--czerwien);
  transform: rotate(45deg); transition: transform .3s var(--ruch-wyjscie);
}
.instalacja-lista details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.instalacja-lista details.zamyka > summary::after { transform: rotate(45deg); }
.instalacja-twoje { padding: 5px 8px; border-radius: 3px; background: var(--czerwien); color: #fff; font: 700 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.instalacja-platforma.twoje { box-shadow: inset 3px 0 0 var(--czerwien); padding-left: 14px; background: linear-gradient(90deg, rgba(143, 32, 32, .06), transparent 60%); }
.instalacja-tresc { padding: 2px 0 20px; font: 16.5px/1.55 var(--sans); color: #2e2e36; }
.instalacja-platforma.twoje .instalacja-tresc { padding-left: 0; }
.instalacja-tresc p { margin: 0 0 12px; }
.instalacja-tresc ol { margin: 0 0 12px; padding-left: 1.4em; }
.instalacja-tresc li { margin: 0 0 6px; }
.instalacja-tresc .maly { font-size: 14.5px; }
.instalacja-koniec { margin-top: 28px; }
.s-offline .karta { max-width: 560px; }
.konto-biblioteka-przyciski { margin: 12px 0 0; }
#aplikacja-panel .app-panel { margin-top: 14px; }

/* ───────────── panel admina: podgląd aplikacji (Ustawienia → Aplikacja na telefon, tablet i komputer; js/admin-aplikacja.js) */
.app-podglad { margin: 18px 0 8px; padding-top: 6px; border-top: 1px solid var(--papier-3); }
.app-podglad h4 { margin: 18px 0 8px; font: 700 14px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }
.app-pole-koloru { display: flex; align-items: center; gap: 8px; }
.app-pole-koloru input[type="text"] { flex: 1 1 auto; min-width: 0; }
.pole .app-probnik { flex: 0 0 auto; width: 56px; min-height: 48px; padding: 4px; cursor: pointer; }
.app-pod-siatka-kart { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.app-pod-karta { margin: 0; min-width: 0; }
.app-pod-karta figcaption { margin-top: 8px; font: 13.5px/1.4 var(--sans); color: var(--szary); }
.app-pod-telefon { display: flex; flex-direction: column; width: 100%; max-width: 230px; aspect-ratio: 9 / 14; overflow: hidden; border: 3px solid #1d1d22; border-radius: 22px;
  background: linear-gradient(160deg, #3a4a6e, #1c2338); }
.app-pod-pasek { flex: 0 0 18px; }
.app-pod-siatka { display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 14px 8px; padding: 18px 12px; }
.app-pod-puste { display: block; align-self: start; width: 100%; aspect-ratio: 1; border-radius: 24%; background: rgba(255, 255, 255, .12); }
.app-pod-ikona-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.app-pod-ikona { width: 100%; height: auto; border-radius: 24%; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.app-pod-nazwa { display: block; width: 78px; margin: 0 -17px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 10.5px/1.2 var(--sans); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .55); }
.app-pod-okno { overflow: hidden; border: 1px solid #8b8472; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.app-pod-okno-tytul { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: #fff; font: 13px/1.2 var(--sans); }
.app-pod-okno-tytul img { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 3px; }
.app-pod-okno-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pod-okno-tresc { display: grid; place-items: center; height: 138px; }
.app-pod-start { width: 72px; height: 72px; border-radius: 16px; }
.app-pod-ikony-rzad { display: flex; flex-wrap: wrap; gap: 14px; }
.app-pod-wariant { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 12.5px/1.2 var(--sans); color: var(--szary); }
.app-ik { width: 64px; height: 64px; object-fit: cover; background: #e4dfd0; }
.app-ik-zwykla { border-radius: 14px; }
.app-ik-okragla { border-radius: 50%; }
.app-ik-gladka { border-radius: 26%; }
.app-ik-mono { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #d9d4c6; }
.app-ik-mono .app-ik-mono-obraz { width: 46px; height: 46px; border-radius: 0; background: none; object-fit: contain; }
.app-kontrole { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-kontrola { display: flex; align-items: flex-start; gap: 10px; font: 15px/1.45 var(--sans); }
.app-kontrola small { display: block; font-size: 13.5px; color: var(--szary); }
.app-kontrola-znak { display: inline-grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; color: #fff; font: 700 13px/1 var(--sans); }
.app-kontrola.ok .app-kontrola-znak { background: var(--zielen); }
.app-kontrola.ok .app-kontrola-znak::before { content: "\2713"; }
.app-kontrola.uwaga .app-kontrola-znak { background: #a86e00; }
.app-kontrola.uwaga .app-kontrola-znak::before { content: "!"; }
.app-kontrola.blad .app-kontrola-znak { background: var(--czerwien); }
.app-kontrola.blad .app-kontrola-znak::before { content: "\00d7"; font-size: 16px; }
.app-kontrola.info .app-kontrola-znak { background: #5b6b8a; }
.app-kontrola.info .app-kontrola-znak::before { content: "i"; }
.app-tabela { width: 100%; border-collapse: collapse; font: 14.5px/1.4 var(--sans); }
.app-tabela th, .app-tabela td { padding: 8px 12px 8px 0; border-bottom: 1px dashed var(--papier-3); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.app-tabela td:nth-child(2), .app-tabela td:nth-child(3) { overflow-wrap: anywhere; }       /* adresy mogą się łamać w środku słowa, nagłówki i kody języków nie */
.app-tabela th:first-child, .app-tabela td:first-child { white-space: nowrap; }
.app-json { margin: 8px 0 0; padding: 12px; overflow: auto; border-radius: 4px; background: var(--papier-2); font: 13px/1.5 var(--mono); }

/* ───────────── wydruk i tryb „ogranicz ruch” */
@media print {
  .menu-przycisk, .menu-szuflada, .app-toast, .app-panel, html.nawiguje::after { display: none !important; }
  .odslon { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-przycisk, .menu-zamknij, .menu-kreski i, .menu-szuflada, .menu-szuflada::backdrop, .menu-lista li, .menu-lista a, .menu-jezyk > summary::after,
  .jezyk-wybor > summary svg, .instalacja-lista summary::after, .odslon, .app-toast, .biblioteka-kafel, .biblioteka-okladka img, .przycisk { transition: none !important; }
  .s-karta main > *, .biblioteka-kafel, .biblioteka-info, .biblioteka-znacznik, .biblioteka-opis .pasek-postepu > i, .app-panel, details.rozwija > :not(summary),
  .jezyk-wybor[open] > .jezyk-lista, .r-obwod, html.nawiguje::after, .szkielet .biblioteka-okladka::after, .sz-linia::after, .sz-przycisk::after,
  .biblioteka-odswiez.pracuje svg { animation: none !important; }
  .odslon { opacity: 1; transform: none; }
  html.nawiguje::after { transform: scaleX(.6); }
}
/* ===== /APLIKACJA ===== */

/* ───────────── INTEGRACJE-2: przycisk „Kontynuuj z Facebookiem”, strony potwierdzenia e-maila i usunięcia danych, komponent „Jak to skonfigurować” */
.przycisk.facebook { width: 100%; background: #1877f2; color: #fff; border: 1px solid #1877f2; gap: 12px; font-weight: 700; }
.przycisk.facebook.duzy { font-size: 19px; }
.przycisk.facebook:hover { background: #166fe5; border-color: #166fe5; color: #fff; }
.przycisk.facebook:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #1877f2; }
.przycisk.facebook img { width: 22px; height: 22px; flex: 0 0 auto; }
.karta ol.kroki-prosto { margin: 8px 0 14px 20px; padding: 0; line-height: 1.55; }
.karta ol.kroki-prosto li { margin: 0 0 8px; }
#karta-facebook .spinner[hidden], #karta-facebook [hidden] { display: none; }
#karta-facebook .przycisk-tekstowy, #karta-usuniecie .przycisk-tekstowy { min-height: 44px; padding: 0 4px; }

.integracja-stan-wiersz { margin: 0 0 6px; font-size: 13.5px; color: var(--szary); }
.integracja-co-zrobic { margin: 6px 0 8px; padding: 8px 10px; border-left: 3px solid var(--czerwien); background: #fbf3f1; font-size: 14px; line-height: 1.5; }
.integracja-co-zrobic > strong { display: block; margin-bottom: 2px; }
.instrukcja { margin-top: 8px; }
.instrukcja > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.instrukcja-wew { padding: 4px 0 2px; }
.instrukcja-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.instrukcja-meta li { padding: 4px 10px; border-radius: 999px; background: #f1ecdd; color: #2a2a31; font-size: 13px; line-height: 1.35; }
.instrukcja-meta li.uwaga { background: #fbf0cf; }
.instrukcja-wew h4 { margin: 16px 0 6px; font-size: 15.5px; }
.instrukcja-wew h5 { margin: 14px 0 4px; font-size: 14.5px; color: var(--czerwien); }
.instrukcja-wew p, .instrukcja-wew li { font-size: 14.5px; line-height: 1.55; }
.instrukcja-wew p { margin: 0 0 8px; }
.instrukcja-ostrzezenie { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid #d9a021; background: #fbf3d9; font-size: 13.5px; line-height: 1.5; }
.instrukcja-wymaga { margin: 0 0 8px; padding-left: 20px; }
.instrukcja-kroki { counter-reset: krok; list-style: none; margin: 6px 0 10px; padding: 0; }
.instrukcja-kroki > li { counter-increment: krok; position: relative; margin: 0; padding: 0 0 12px 40px; }
.instrukcja-kroki > li::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--czerwien); color: #fff; font: 700 14px/28px var(--sans); text-align: center; }
.instrukcja-krok-tytul { display: block; font-weight: 700; }
.instrukcja-krok-uwaga { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid #d9a021; background: #fbf3d9; font-size: 13.5px; line-height: 1.5; }
.instrukcja-krok-link { margin: 4px 0 0; font-size: 13.5px; }
.instrukcja-wew code { padding: 1px 5px; border-radius: 3px; background: #f1ecdd; font: 13px/1.3 var(--mono); overflow-wrap: anywhere; }
.instrukcja-bledy { margin: 0; padding: 0; list-style: none; }
.instrukcja-bledy li { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e3dcc8; border-radius: 4px; background: #fff; }
.instrukcja-bledy > li > strong { display: block; }
.instrukcja-dok { margin: 0; padding-left: 20px; }
.instrukcja-dok li { margin: 0 0 4px; }
.integracja-grupa-instrukcji { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .przycisk.facebook, .instrukcja > summary::before { transition: none; } }
.integracja-co-zrobic p { margin: 0 0 4px; }
.integracja-co-zrobic.neutralna { border-left-color: #8a8a93; background: #f4f2ea; }
.integracja-co-zrobic .przycisk-tekstowy { min-height: 44px; padding: 0 4px; }
.instrukcja-bledy em { font-style: normal; font-weight: 700; }
.instrukcja-wew .integracja-wklej { margin: 6px 0 8px; }
@media (max-width: 480px) { .przycisk.facebook.duzy { font-size: 16px; padding: 0 16px; gap: 10px; } }

/* ───────────── SEO-STRUKTURA (runda 6): okruszki, strony docelowe, poradnik, formularz zapytania, stopka z linkami do treści */
.okruszki { font: 14.5px/1.4 var(--sans); color: var(--szary); padding: 4px clamp(16px, 4vw, 40px); }
.okruszki ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 auto; padding: 0; list-style: none; max-width: var(--szer); }
.okruszki li { display: inline-flex; align-items: center; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.okruszki li:not(:last-child)::after { content: "/"; margin: 0 .6em; color: var(--szary-jasny); }   /* ukośnik na końcu elementu: przy zawinięciu linii nie ląduje na jej początku */
.okruszki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--szary); text-decoration-color: var(--papier-3); }
.okruszki a:hover { color: var(--czerwien); }
.okruszki [aria-current] { color: var(--atrament); font-weight: 700; }
.tresc-okruszki { background: var(--papier); border-bottom: 1px solid var(--papier-3); }

.tresc-podglad { margin: 0; padding: 12px clamp(16px, 4vw, 40px); background: #fff4d6; color: #5c4200; border-bottom: 1px dashed #d9b451; font: 15px/1.45 var(--sans); }

.tresc-hero { padding-block: clamp(40px, 7vw, 88px); }
.tresc-hero h1 { font-size: clamp(32px, 5.2vw, 54px); max-width: 24ch; }
.tresc-lead { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; max-width: 62ch; margin: 0 0 1em; }
.tresc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.tresc-hero .przycisk.jasny { color: var(--gwiazda); }
.tresc-hero .przycisk.glowny { text-decoration: none; }

.tresc-kolumna { max-width: 800px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px); }
.tresc-naglowek h1 { font-size: clamp(30px, 4.6vw, 46px); margin-bottom: .4em; }
.tresc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 18px 0 0; font: 14.5px/1.4 var(--sans); color: var(--szary); }
.tresc-okladka, .tresc-rysunek { margin: 0 0 28px; }
.tresc-okladka img, .tresc-rysunek img { width: 100%; height: auto; border-radius: 4px; }
.tresc-rysunek figcaption { margin-top: 8px; font: 14.5px/1.4 var(--sans); color: var(--szary); }

.tresc-spis { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--papier-3); border-radius: 4px; background: var(--papier-2); font: 16px/1.45 var(--sans); }
.tresc-spis-tytul { margin: 0 0 8px; font: 700 12.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--szary); }
.tresc-spis ol { margin: 0; padding-left: 1.3em; }
.tresc-spis li { margin: 0; }
.tresc-spis a { display: inline-flex; align-items: center; min-height: 44px; }

.tresc-tekst { font-size: 19px; line-height: 1.7; }
.tresc-tekst h2 { font-size: clamp(25px, 3vw, 32px); margin: 1.8em 0 .5em; scroll-margin-top: 16px; }
.tresc-tekst h3 { font-size: clamp(20px, 2.3vw, 24px); margin: 1.5em 0 .4em; scroll-margin-top: 16px; }
.tresc-tekst > :first-child { margin-top: 0; }
.tresc-tekst ul, .tresc-tekst ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.tresc-tekst li { margin: 0 0 .5em; }
.tresc-tekst .przycisk { text-decoration: none; }
.tresc-tekst .przycisk.glowny { color: #fff; }
.tresc-uwaga { margin: 1.6em 0; padding: 14px 18px; border-left: 4px solid var(--mosiadz); background: var(--papier-2); font: 17px/1.5 var(--sans); }
.tresc-uwaga > :last-child { margin-bottom: 0; }
.tresc-tabela { overflow-x: auto; margin: 0 0 1.4em; }
.tresc-tabela table { width: 100%; border-collapse: collapse; font: 16px/1.4 var(--sans); }
.tresc-tabela th, .tresc-tabela td { padding: 8px 10px; border: 1px solid var(--papier-3); text-align: left; vertical-align: top; }
.tresc-tabela th { background: var(--papier-2); }

.tresc-faq { margin: 1em 0 1.6em; }
.faq-pytanie { border-top: 1px solid var(--papier-3); }
.faq-pytanie:last-child { border-bottom: 1px solid var(--papier-3); }
.faq-pytanie summary { position: relative; min-height: 44px; padding: 14px 40px 14px 0; cursor: pointer; list-style: none; font: 700 18px/1.35 var(--sans); }
.faq-pytanie summary::-webkit-details-marker { display: none; }
.faq-pytanie summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font: 400 26px/1 var(--sans); color: var(--czerwien); }
.faq-pytanie[open] summary::after { content: "−"; }
.faq-odpowiedz { padding: 0 0 6px; font-size: 17.5px; }
.faq-odpowiedz p { margin: 0 0 .9em; }

.tresc-gry { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px); background: var(--papier-2); border-block: 1px solid var(--papier-3); }
.tresc-gry > h2, .tresc-gry > .gry-siatka { max-width: var(--szer); margin-inline: auto; }
.tresc-tekst .tresc-gry { margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); }

.tresc-formularz .tresc-forma { max-width: 680px; margin-top: 24px; }
@media (max-width: 640px) { .tresc-forma .przycisk { width: 100%; } }
.tresc-formularz .opcja { font-weight: 400; color: var(--szary); }
.pole-www { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tresc-zgoda { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin: 0 0 16px; font: 16px/1.45 var(--sans); cursor: pointer; }
.tresc-zgoda input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--czerwien); cursor: pointer; }
.tresc-zgoda input[aria-invalid="true"] { outline: 2px solid var(--czerwien); outline-offset: 2px; }
.tresc-dziekujemy { max-width: 680px; margin-top: 24px; padding: 22px 24px; border: 1px solid var(--papier-3); border-radius: 4px; background: var(--papier); }
.tresc-dziekujemy h3 { margin-top: 0; }
.tresc-dziekujemy p:last-child { margin-bottom: 0; }

.tresc-powiazane { max-width: 800px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 64px; }
.tresc-powiazane h2 { font-size: clamp(24px, 3vw, 30px); }
.tresc-powiazane ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tresc-powiazane li { margin: 0; padding: 12px 0; border-top: 1px solid var(--papier-3); }
.tresc-powiazane li a { display: inline-flex; align-items: center; min-height: 44px; font: 700 18px/1.3 var(--sans); }
.tresc-powiazane li span { display: block; font: 15.5px/1.45 var(--sans); color: var(--szary); }

.poradnik-lista.tresc-kolumna { max-width: 1000px; }
.poradnik-kategorie { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.poradnik-kategorie a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--papier-3); border-radius: 999px; background: var(--papier); color: var(--atrament); font: 15px/1 var(--sans); text-decoration: none; }
.poradnik-kategorie a:hover { border-color: var(--czerwien); }
.poradnik-kategorie a[aria-current] { background: var(--noc); border-color: var(--noc); color: var(--gwiazda); }
.poradnik-kategorie a span { margin-left: .4em; color: var(--szary); }
.poradnik-kategorie a[aria-current] span { color: var(--szary-jasny); }
.poradnik-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 24px; }
.poradnik-karta { position: relative; display: flex; flex-direction: column; border: 1px solid var(--papier-3); border-radius: 4px; background: var(--papier); overflow: hidden; }
.poradnik-karta:hover { border-color: var(--czerwien); }
.poradnik-okladka img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.poradnik-opis { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.poradnik-opis p { margin: 0; font: 16px/1.5 var(--sans); }
.poradnik-opis h2 { margin: 0; font-size: 22px; }
.poradnik-opis h2 a { color: var(--atrament); text-decoration: none; }
.poradnik-opis h2 a::after { content: ""; position: absolute; inset: 0; }
.poradnik-opis h2 a:focus-visible { outline: none; }
.poradnik-karta:has(h2 a:focus-visible) { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
.poradnik-kategoria { font: 700 12.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--czerwien); }
.poradnik-opis .poradnik-data { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--szary); }
.poradnik-strony { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; font: 15px/1.3 var(--sans); }
.poradnik-strony a { display: inline-flex; align-items: center; min-height: 44px; }

.stopka-tresci { display: flex; flex-wrap: wrap; gap: 0 22px; font: 14px/1.6 var(--sans); }
.stopka-tresci a { display: inline-flex; align-items: center; min-height: 44px; }

.hero-ocena { margin: 10px 0 0; font: 15px/1.3 var(--sans); }
.hero-ocena span:first-child { color: var(--mosiadz); }

@media (max-width: 640px) {
  .tresc-tekst { font-size: 18px; }
  .tresc-cta .przycisk { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .poradnik-karta, .poradnik-kategorie a { transition: none; } }
/* Nazwa „Українська” w przełączniku języka na stronach polskich i angielskich pisana czcionką systemową: inaczej przeglądarka
   pobierałaby dla niej cyrylicką czcionkę strony (ok. 22 KB) na każdej stronie, choć nikt na niej nie czyta po ukraińsku. */
html:not([lang="uk"]) a[lang="uk"] { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ───────────── SEO-STRUKTURA (runda 6), panel: strony docelowe, poradnik, źródła i zapytania */
.tresci-tabela td, .tresci-tabela th { vertical-align: top; }
.tresci-wersje { white-space: nowrap; }
.tresci-wersja { min-width: 44px; min-height: 44px; margin: 0 4px 4px 0; padding: 0 10px; border: 1.5px solid var(--papier-3); border-radius: 4px; background: #fff; color: var(--atrament); font: 700 14px/1 var(--sans); cursor: pointer; }
.tresci-wersja.ok { background: #e3efe3; border-color: #b9d6bd; color: #1f4a28; }
.tresci-wersja.szkic { background: #eee7d6; color: var(--szary); }
.tresci-wersja.brak { border-style: dashed; background: transparent; color: var(--szary); font-weight: 400; }
.tresci-wersja:hover { border-color: var(--czerwien); }
.tresci-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.tresci-pasek h3 { margin: 0; font-size: 21px; flex: 1 1 240px; overflow-wrap: anywhere; }
.tresci-kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) { .tresci-kolumny { grid-template-columns: minmax(0, 1fr) 340px; } }
.tresci-glowna, .tresci-bok { display: grid; gap: 14px; min-width: 0; }
.tresci-glowna > .pole, .tresci-glowna > .seo-sekcja { margin: 0; }
.tresci-karta { padding: 14px 16px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.tresci-karta h3 { margin: 0 0 10px; font: 700 16px/1.3 var(--sans); }
.tresci-karta .pole:last-child { margin-bottom: 0; }
.tresci-tresc { min-height: 360px; font: 15px/1.55 var(--mono); tab-size: 4; }
.tresci-wstawki { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.tresci-wstawki .przycisk { min-height: 44px; padding: 0 12px; font-size: 14px; }
.tresci-podglad { margin: 10px 0; padding: 16px 18px; border: 1px dashed var(--papier-3); border-radius: 6px; background: var(--papier); font-size: 17px; line-height: 1.6; max-height: 70vh; overflow: auto; }
.tresci-skladnia { margin: 8px 0 0; padding-left: 1.2em; font: 14.5px/1.5 var(--sans); }
.tresci-kontrola { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 14.5px/1.4 var(--sans); }
.tresci-kontrola li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.tresci-znak { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 12px/1 var(--sans); background: #eee7d6; }
.tresci-kontrola .ok .tresci-znak { background: #e3efe3; color: #1f4a28; }
.tresci-kontrola .uwaga .tresci-znak { background: #fff0c2; color: #5c4200; }
.tresci-kontrola .blad .tresci-znak { background: #f3e1de; color: #6e1a15; }
.tresci-wersje-lista { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font: 15px/1.4 var(--sans); }
.tresci-gry-lista { display: grid; gap: 2px; }
.tresci-akcje { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 12px 0; background: var(--papier); border-top: 1px solid var(--papier-3); }
@media (min-width: 700px) { .tresci-akcje { bottom: 0; } }
@media (max-width: 699px) {
  .tresci-akcje { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .tresci-akcje .przycisk { width: 100%; min-height: 44px; padding: 0 8px; font-size: 14px; text-align: center; }
  .seo-podnav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .seo-podnav button { flex: 0 0 auto; white-space: nowrap; }
}
.tresci-filtry { margin: 0 0 14px; }
.tresci-filtry button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--papier-3); border-radius: 999px; background: var(--papier); color: var(--atrament); font: 15px/1 var(--sans); cursor: pointer; }
.tresci-filtry button[aria-pressed="true"] { background: var(--noc); border-color: var(--noc); color: var(--gwiazda); }
.tresci-zapytania { display: grid; gap: 10px; }
.tresci-zapytanie { padding: 4px 14px; background: #fff; border: 1px solid #ddd6c4; border-radius: 6px; }
.tresci-zapytanie.nowe { border-left: 4px solid var(--czerwien); }
.tresci-zapytanie > summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.tresci-zapytanie-dane { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0 10px; font: 14.5px/1.4 var(--sans); }
.tresci-zapytanie-dane dt { color: var(--szary); }
.tresci-zapytanie-dane dd { margin: 0; overflow-wrap: anywhere; }
.tresci-wiadomosc { white-space: pre-wrap; margin: 0 0 12px; padding: 10px 12px; background: var(--papier); border-radius: 4px; font: 15.5px/1.5 var(--sans); overflow-wrap: anywhere; }
.tresci-utm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 16px; }
.utm-wynik { font: 14.5px/1.4 var(--mono); }
.seo-sekcja > .tresci-okres { max-width: 240px; }
td.liczba { text-align: right; font-variant-numeric: tabular-nums; }
/* Rozwijane sekcje w panelu SEO: wspólny styl .seo-details usuwa systemowy trójkąt (summary jest flexem), więc bez własnego znaku
   sekcje wyglądały jak zwykłe nagłówki. Trójkąt z obramowania (bez czcionek), obracany po otwarciu. */
.tresci-rozwin > summary::before { content: ""; flex: none; width: 0; height: 0; margin-right: 9px; border-left: 7px solid var(--czerwien); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; }
.tresci-rozwin[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .tresci-wersja, .tresci-rozwin > summary::before { transition: none; } }

/* ───────────── MARKA-PLATFORMY (runda 6): wygląd i marka platformy, kroje OFL z cyrylicą, warianty wiekowe gier,
   zakładka panelu „Wygląd i marka”. Wartości żetonów (kolory, kroje, promień, gęstość, logo) wstawia /wyglad.css
   generowany z panelu (api/wyglad.py) – tutaj tylko reguły, które z nich korzystają, i wartości zapasowe. */

/* kroje marki (SIL OFL 1.1, strona/fonty/LICENCJA-*.txt): łacinka z polskimi znakami i osobno cyrylica – przeglądarka
   pobiera plik dopiero, gdy krój jest użyty, a cyrylicę tylko na stronach z ukraińskim tekstem */
@font-face { font-family: "Lora"; src: url("../fonty/lora-lat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212, U+2713, U+2715; }
@font-face { font-family: "Lora"; src: url("../fonty/lora-cyr.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Lora"; src: url("../fonty/lora-italic-lat.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2122; }
@font-face { font-family: "Lora"; src: url("../fonty/lora-italic-cyr.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Montserrat"; src: url("../fonty/montserrat-lat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212, U+2713, U+2715; }
@font-face { font-family: "Montserrat"; src: url("../fonty/montserrat-cyr.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
/* MARKA-TD: Rubik – krój marki (logo, nagłówki, przyciski; OFL, strona/fonty/LICENCJA-Rubik.txt) */
@font-face { font-family: "Rubik"; src: url("../fonty/rubik-lat.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212, U+2713, U+2715; }
@font-face { font-family: "Rubik"; src: url("../fonty/rubik-cyr.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Andika"; src: url("../fonty/andika-lat.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Andika"; src: url("../fonty/andika-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Andika"; src: url("../fonty/andika-bold-lat.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Andika"; src: url("../fonty/andika-bold-cyr.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Pangolin"; src: url("../fonty/pangolin-lat.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122; }
@font-face { font-family: "Pangolin"; src: url("../fonty/pangolin-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonty/jetbrains-mono-lat.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonty/jetbrains-mono-cyr.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonty/cormorant-lat.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+2010-203A, U+20AC, U+2116, U+2122; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonty/cormorant-cyr.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }

/* marka platformy: nagłówki, kształt przycisków i pól, napis na przycisku głównym (kontrast liczy serwer) */
:where(h1, h2, h3) { font-family: var(--p-kroj-naglowkow, inherit); }
.przycisk { border-radius: var(--p-promien-przycisku, 4px); min-height: max(44px, calc(48px * var(--p-gestosc, 1)));
  padding-left: calc(22px * var(--p-gestosc, 1)); padding-right: calc(22px * var(--p-gestosc, 1)); }
.przycisk.glowny, .przycisk.glowny:hover { color: var(--na-podstawowym, #fff); }
.karta { border-radius: var(--p-promien, 2px); }
.pole input, .pole select, .pole textarea, .filtr select, .filtry-sort select { border-radius: var(--p-promien, 4px); }
.filtry-panel, .biblioteka-kafel, .zamowienie-karta, .moja-gra, dialog.okno, .komunikat { border-radius: var(--p-promien, 6px); }
.gry-siatka { gap: calc(20px * var(--p-gestosc, 1)); }
.sekcja { padding-top: calc(clamp(64px, 9vw, 112px) * var(--p-gestosc, 1)); padding-bottom: calc(clamp(64px, 9vw, 112px) * var(--p-gestosc, 1)); }
.karta-sekcja { margin-top: calc(26px * var(--p-gestosc, 1)); padding-top: calc(22px * var(--p-gestosc, 1)); }

/* znak marki przed nazwą w nagłówku i w stopce (napis zostaje tekstem: czytniki ekranu, tłumaczenie, SEO) */
.pasek-znak { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--p-kroj-naglowkow, var(--serif));
  letter-spacing: .01em; min-height: 44px; }
.pasek-znak::before { content: ""; flex: 0 0 auto; width: 34px; height: 34px; background: var(--logo-znak-ciemne, none) center / contain no-repeat; }
.pasek.ciemny-tekst .pasek-znak::before { background-image: var(--logo-znak, none); }
.stopka-znak { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--p-kroj-naglowkow, var(--serif)); letter-spacing: .01em; }
.stopka-znak::before { content: ""; width: 30px; height: 30px; background: var(--logo-znak-ciemne, none) center / contain no-repeat; }
@media (max-width: 480px) { .pasek-znak { font-size: 16px; gap: 8px; } .pasek-znak::before { width: 28px; height: 28px; } }

/* Ostatni Odczyt ma własną markę: strona gry i jej karta w katalogu wyglądają jak dotąd (kolory, kroje akt) */
.motyw.motyw-marki, .gra-karta.motyw-marki {
  --noc: #0b1020; --noc-2: #141a2e; --noc-3: #1f2842; --gwiazda: #e8e6df; --papier: #f4f0e5; --papier-2: #ebe5d6;
  --papier-3: #d9d0b9; --atrament: #1d1d22; --szary: #5b5b66; --szary-jasny: #9aa1b4; --mosiadz: #c8a45a;
  --czerwien: #8f2020; --czerwien-2: #a82a2a; --zielen: #2f6b3c; --na-podstawowym: #fff; --p-gestosc: 1;
  --serif: "Caladea", Georgia, "Times New Roman", serif; --sans: "DejaVu Cond", "Arial Narrow", Arial, sans-serif;
  --mono: "DejaVu Mono", "Courier New", monospace; --p-kroj-naglowkow: var(--serif); --p-promien: 2px; --p-promien-przycisku: 4px;
}
.motyw.motyw-marki { color-scheme: light; }
.motyw { --na-podstawowym: #fff; }
/* nagłówek i stopka zostają w marce platformy także na stronach gier z własnym motywem */
.motyw .pasek-znak, .motyw .stopka {
  --noc: var(--p-c-tlo, #0b1020); --gwiazda: var(--p-c-tekst, #e8e6df); --mosiadz: var(--p-c-akcent, #c8a45a);
  --szary-jasny: var(--p-c-szary, #9aa1b4); --serif: var(--p-kroj-tekstu, "Caladea", Georgia, serif);
  --sans: var(--p-kroj-interfejsu, "DejaVu Cond", Arial, sans-serif); --mono: var(--p-kroj-mono, "DejaVu Mono", monospace);
  --p-kroj-naglowkow: var(--p-kroj-tekstu, Georgia, serif);
}
.motyw .stopka { background: var(--p-c-tlo, var(--noc)); }
.motyw .pasek-znak { font-family: var(--p-kroj-tekstu, Georgia, serif); }

/* warianty wiekowe (8+, 12+, 16+, 18+): zmienne --w-* z /wyglad.css. Kolory i krój nagłówka gry pochodzą z jej motywu
   (katalog.json), a wariant dokłada czytelność dla wieku: krój tekstu, wielkość, odstępy, cele dotyku, jasna/ciemna karta */
.gra-karta.wariant .gra-opis { font-family: var(--w-kroj-tekstu, var(--serif));
  padding: calc(18px * var(--w-gestosc, 1)) calc(20px * var(--w-gestosc, 1)) calc(20px * var(--w-gestosc, 1)); }
.gra-karta.wariant .gra-opis h3 { font-size: calc(24px * var(--w-skala, 1)); }
.gra-karta.wariant .gra-opis > p { font-size: calc(16.5px * var(--w-skala, 1)); }
.gra-karta.wariant .gra-fakty li, .gra-karta.wariant .gra-skala { font-size: calc(13.5px * var(--w-skala, 1)); }
.gra-karta.wariant .gra-przyciski .przycisk { min-height: calc(44px * var(--w-cel, 1)); font-size: calc(15px * var(--w-skala, 1)); }
.gra-karta.wariant-8:not(.ksztalt-sciety) { border-radius: max(var(--m-promien, 14px), 18px); }
.gra-karta.wariant-8 .gra-fakty li { border-radius: 999px; }
.gra-karta.wariant-8 .gra-etykieta { letter-spacing: .06em !important; }
.gra-karta.wariant-18 .gra-opis h3 { letter-spacing: .01em; font-weight: 600; }
.gra-karta.motyw-marki.wariant .gra-opis { font-family: var(--serif); padding: 18px 20px 20px; }
.gra-karta.motyw-marki.wariant .gra-opis h3 { font-size: 24px; }
.gra-karta.motyw-marki.wariant .gra-opis > p { font-size: 16.5px; }
/* karta ciemna (np. 18+): tło i tekst wariantu, linki i przyciski w kolorze akcentu z kontrastem */
.gra-karta.w-ciemny:not(.motyw-marki) {
  background: var(--w-powierzchnia); color: var(--w-tekst); border-color: var(--w-ramka);
  --atrament: var(--w-tekst); --szary: var(--w-tekst-2); --papier-2: var(--w-powierzchnia); --papier-3: var(--w-ramka);
}
.gra-karta.w-ciemny:not(.motyw-marki) .gra-opis > p { color: var(--w-tekst-2); }
.gra-karta.w-ciemny:not(.motyw-marki) .gra-opis h3 a { color: var(--w-tekst); }
.gra-karta.w-ciemny:not(.motyw-marki) .gra-etykieta { color: var(--w-link) !important; }
.gra-karta.w-ciemny:not(.motyw-marki) .gra-skala .kropki, .gra-karta.w-ciemny:not(.motyw-marki) .gra-czas svg { color: var(--w-link); }
.gra-karta.w-ciemny:not(.motyw-marki) .przycisk:not(.glowny) { color: var(--w-tekst); border-color: var(--w-ramka); }
.gra-karta.w-ciemny:not(.motyw-marki) .premiera-karta, .gra-karta.w-ciemny:not(.motyw-marki) .kalendarz-lista { color: var(--w-tekst); }
/* strona gry w wariancie (Ostatni Odczyt – własna marka – bez zmian) */
body.wariant:not(.motyw-marki) main { font-family: var(--w-kroj-tekstu, var(--serif)); }
body.wariant:not(.motyw-marki) main :is(p, li) { font-size: calc(1em * var(--w-skala, 1)); }
body.wariant:not(.motyw-marki) .przycisk { min-height: max(44px, calc(48px * var(--w-cel, 1))); }
body.wariant:not(.motyw-marki) .sekcja { padding-top: calc(clamp(64px, 9vw, 112px) * var(--w-gestosc, 1));
  padding-bottom: calc(clamp(64px, 9vw, 112px) * var(--w-gestosc, 1)); }
body.wariant-8:not(.motyw-marki) .przycisk { border-radius: 999px; }

/* ───────────── MARKA-PLATFORMY: panel „Wygląd i marka” (js/admin-wyglad.js) */
.wyg-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.wyg-lewa, .wyg-boczna { min-width: 0; }
@media (min-width: 1180px) { .wyg-uklad { grid-template-columns: minmax(0, 1fr) 430px; } .wyg-boczna { position: sticky; top: 12px; } }
.wyg-pasek { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px;
  padding: 10px 12px; background: #fbf8f0; border: 1px solid #ddd6c4; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.wyg-pasek .wyg-stan { flex: 1 1 220px; margin: 0; font: 15px/1.35 var(--sans); }
.wyg-pasek .wyg-stan.zmiany { color: #8a5a00; font-weight: 700; }
.wyg-pasek .przycisk { min-height: 44px; padding: 0 14px; font-size: 15px; }
.wyg-pasek-akcje { display: contents; }
@media (max-width: 899px) {            /* telefon: stan i „Zapisz” u góry, reszta działań w jednym przewijanym rzędzie */
  .wyg-pasek { gap: 6px 8px; padding: 8px; }
  .wyg-pasek .wyg-stan { flex: 1 1 60%; font-size: 14px; }
  .wyg-pasek-akcje { display: flex; gap: 6px; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .wyg-pasek-akcje .przycisk { flex: 0 0 auto; }
}
.wyg-sekcja { margin: 0 0 18px; }
.kafelek.wyg-sekcja span { color: inherit; font-size: inherit; }            /* ogólna reguła .kafelek span (szary, 13 px) nie dotyczy tej zakładki */
.kafelek.wyg-sekcja .wyg-pv-w-przycisk { color: var(--pvw-na-link, #fff); font-size: 11.5px; }
.wyg-sekcja > h3 { margin: 0 0 6px; }
.wyg-sekcja > .maly { margin: 0 0 12px; max-width: 760px; }
.wyg-siatka2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .wyg-siatka2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wyg-zeton { display: grid; grid-template-columns: 52px minmax(0, 1fr) 104px; gap: 4px 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid #eee7d6; }
.wyg-zeton:last-child { border-bottom: 0; }
.wyg-zeton input[type="color"] { width: 52px; height: 44px; padding: 2px; border: 1px solid #ddd6c4; border-radius: 6px; background: #fff; cursor: pointer; }
.wyg-zeton label { font: 700 15px/1.25 var(--sans); }
.wyg-zeton label small { display: block; font-weight: 400; color: var(--szary); font-size: 13px; }
.wyg-zeton input[type="text"] { width: 104px; min-height: 44px; padding: 6px 8px; font: 15px/1 var(--mono); border: 1.5px solid #ddd6c4; border-radius: 6px; }
.wyg-zeton input[aria-invalid="true"] { border-color: #a32b21; }
.wyg-kontrasty { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font: 14px/1.35 var(--sans); }
.wyg-kontrast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: 6px; background: #f1eee6; }
.wyg-kontrast.zle { background: #f7e3df; }
.wyg-kontrast.uwaga { background: #fff4d6; }
.wyg-kontrast b { min-width: 64px; }
.wyg-probka { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 8px;
  border-radius: 4px; font: 700 14px/1 var(--sans); border: 1px solid rgba(0, 0, 0, .15); }
.wyg-kontrast .przycisk-tekstowy { min-height: 32px; }
.wyg-krok { display: grid; gap: 4px; margin: 0 0 12px; }
.wyg-krok label { font: 700 14px/1.2 var(--sans); }
.wyg-krok select, .wyg-krok input[type="text"], .wyg-krok input[type="number"], .wyg-krok textarea { min-height: 44px; padding: 8px 10px;
  border: 1.5px solid #ddd6c4; border-radius: 6px; background: #fff; font: 16px/1.3 var(--sans); width: 100%; }
.wyg-krok textarea { min-height: 84px; resize: vertical; }
.wyg-krok input[type="range"] { width: 100%; min-height: 44px; accent-color: #1f5c34; }
.wyg-krok .wyg-proba-kroju { margin: 2px 0 0; padding: 8px 10px; background: #fbf8f0; border: 1px dashed #ddd6c4; border-radius: 6px; font-size: 19px; line-height: 1.35; }
.wyg-radia { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0 0 12px; padding: 0; }
.wyg-radia legend { font: 700 14px/1.2 var(--sans); margin: 0 0 6px; padding: 0; }
.wyg-radia label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1.5px solid #ddd6c4;
  border-radius: 999px; background: #fff; cursor: pointer; font: 15px/1.2 var(--sans); }
.wyg-radia label:has(input:checked) { border-color: #1f5c34; background: #e3efe3; font-weight: 700; }
.wyg-radia input { width: 18px; height: 18px; margin: 0; accent-color: #1f5c34; }
.wyg-logo-siatka { display: grid; gap: 12px; }
@media (min-width: 760px) { .wyg-logo-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wyg-logo { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid #ddd6c4; border-radius: 8px; background: #fff; }
.wyg-logo h4 { margin: 0; font: 700 15px/1.2 var(--sans); }
.wyg-logo-obraz { display: grid; place-items: center; height: 110px; padding: 10px; border-radius: 6px; background: #f4f0e5; overflow: hidden; }
.wyg-logo-obraz.ciemne { background: #0b1020; }
.wyg-logo-obraz img { max-width: 100%; max-height: 90px; object-fit: contain; }
.wyg-logo .maly { margin: 0; }
.wyg-logo .przyciski { display: flex; flex-wrap: wrap; gap: 6px; }
.wyg-logo .przycisk { min-height: 44px; padding: 0 12px; font-size: 14.5px; }
.wyg-usuniete { margin: 0; padding: 6px 8px 6px 22px; background: #fff4d6; border-radius: 6px; font: 13px/1.4 var(--sans); }
.wyg-warianty { display: grid; gap: 14px; }
@media (min-width: 900px) { .wyg-warianty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wyg-wariant { padding: 14px; border: 1px solid #ddd6c4; border-radius: 8px; background: #fff; }
.wyg-wariant > h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 17px/1.2 var(--sans); }
.wyg-wariant-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.wyg-wariant-pola .wyg-krok.szeroki { grid-column: 1 / -1; }
.wyg-mini-kolory { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.wyg-mini-kolor { display: grid; gap: 4px; font: 13px/1.2 var(--sans); }
.wyg-mini-kolor input[type="color"] { width: 60px; height: 44px; padding: 2px; border: 1px solid #ddd6c4; border-radius: 6px; background: #fff; }
.wyg-gry td, .wyg-gry th { vertical-align: top; }
.wyg-gry select { min-height: 44px; padding: 6px 8px; border: 1.5px solid #ddd6c4; border-radius: 6px; background: #fff; font: 15px/1.2 var(--sans); }
.wyg-gry .wyg-uwagi { margin: 4px 0 0; padding-left: 18px; color: #8a5a00; font: 13px/1.4 var(--sans); }
.wyg-historia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wyg-historia li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid #eee7d6;
  border-radius: 6px; background: #fff; font: 14px/1.35 var(--sans); }
.wyg-historia li b { min-width: 36px; }
.wyg-historia li span { flex: 1 1 200px; }
.wyg-nazwa { display: grid; gap: 8px; }
.wyg-nazwa input { min-height: 48px; font: 700 20px/1.2 var(--sans); padding: 8px 12px; border: 1.5px solid #ddd6c4; border-radius: 6px; max-width: 460px; }
.wyg-propozycja { padding: 10px 12px; border-left: 4px solid #1f5c34; background: #e3efe3; border-radius: 4px; font: 15px/1.45 var(--sans); max-width: 760px; }

/* podgląd na żywo: zmienne --pv-* ustawia skrypt panelu na kontenerze (CSSOM, zgodnie z CSP) */
.wyg-podglad { --pv-podstawowy: #1f5c34; --pv-na-podstawowym: #fff; --pv-akcent: #c8a45a; --pv-tlo: #f4f0e5; --pv-powierzchnia: #fbf8f0;
  --pv-tekst: #1d1d22; --pv-szary: #5b5b66; --pv-ramka: #d9d0b9; --pv-sukces: #1e6f5c; --pv-ostrzezenie: #8a5a00; --pv-blad: #a32b21;
  --pv-c-tlo: #0b1020; --pv-c-pow: #141a2e; --pv-c-tekst: #e8e6df; --pv-c-akcent: #c8a45a; --pv-c-podstawowy: #8fcba3;
  --pv-kroj-n: Georgia, serif; --pv-kroj-t: Georgia, serif; --pv-kroj-i: Arial, sans-serif; --pv-kroj-m: monospace; --pv-promien: 6px;
  --pv-promien-p: 6px; --pv-gestosc: 1; --pv-logo: none;
  border: 1px solid #ddd6c4; border-radius: 10px; overflow: hidden; background: var(--pv-tlo); color: var(--pv-tekst);
  font: 15px/1.5 var(--pv-kroj-t); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.wyg-podglad-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  background: var(--pv-c-tlo); color: var(--pv-c-tekst); font: 13px/1 var(--pv-kroj-i); }
.wyg-pv-znak { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 var(--pv-kroj-n); }
.wyg-pv-znak img { width: 26px; height: 26px; object-fit: contain; }
.wyg-pv-nav { display: flex; gap: 12px; opacity: .9; }
.wyg-pv-hero { padding: calc(22px * var(--pv-gestosc)) 16px; background: var(--pv-c-tlo); color: var(--pv-c-tekst); border-top: 1px solid rgba(255, 255, 255, .06); }
.wyg-pv-sygn { margin: 0 0 6px; font: 11px/1.3 var(--pv-kroj-m); letter-spacing: .12em; color: var(--pv-c-akcent); text-transform: uppercase; }
.wyg-pv-hero h4 { margin: 0 0 8px; font: 700 22px/1.15 var(--pv-kroj-n); color: inherit; }
.wyg-pv-hero p { margin: 0 0 12px; opacity: .92; }
.wyg-pv-tresc { padding: calc(16px * var(--pv-gestosc)) 16px calc(18px * var(--pv-gestosc)); }
.wyg-pv-tresc h5 { margin: 0 0 6px; font: 700 19px/1.2 var(--pv-kroj-n); color: var(--pv-tekst); }
.wyg-pv-tresc p { margin: 0 0 10px; }
.wyg-pv-tresc a { color: var(--pv-podstawowy); text-underline-offset: .18em; }
.wyg-pv-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.wyg-pv-przycisk { display: inline-flex; align-items: center; min-height: calc(40px * max(var(--pv-gestosc), .9)); padding: 0 calc(16px * var(--pv-gestosc));
  border-radius: var(--pv-promien-p); border: 1.5px solid var(--pv-podstawowy); background: var(--pv-podstawowy); color: var(--pv-na-podstawowym);
  font: 700 14px/1 var(--pv-kroj-i); }
.wyg-pv-przycisk.drugi { background: transparent; color: var(--pv-tekst); border-color: var(--pv-tekst); }
.wyg-pv-przycisk.na-ciemnym { background: var(--pv-c-podstawowy); border-color: var(--pv-c-podstawowy); color: var(--pv-c-na-podstawowym, #111); }
.wyg-pv-karta { padding: calc(12px * var(--pv-gestosc)) 14px; margin: 0 0 12px; background: var(--pv-powierzchnia); border: 1px solid var(--pv-ramka);
  border-radius: var(--pv-promien); }
.wyg-pv-karta b { font-family: var(--pv-kroj-n); font-size: 16px; }
.wyg-pv-pole { display: grid; gap: 4px; margin: 0 0 10px; font: 700 13px/1.2 var(--pv-kroj-i); }
.wyg-pv-pole span { display: block; min-height: 38px; padding: 9px 10px; border: 1.5px solid var(--pv-ramka); border-radius: var(--pv-promien);
  background: #fff; color: #5b5b66; font-weight: 400; }
.wyg-pv-komunikaty { display: grid; gap: 6px; }
.wyg-pv-kom { padding: 7px 10px; border-left: 4px solid currentColor; border-radius: 4px; background: var(--pv-powierzchnia); font: 13.5px/1.35 var(--pv-kroj-i); }
.wyg-pv-kom.sukces { color: var(--pv-sukces); }
.wyg-pv-kom.ostrzezenie { color: var(--pv-ostrzezenie); }
.wyg-pv-kom.blad { color: var(--pv-blad); }
.wyg-pv-stopka { padding: 10px 14px; background: var(--pv-c-tlo); color: var(--pv-c-tekst); font: 12px/1.4 var(--pv-kroj-i); }
.wyg-pv-stopka a { color: var(--pv-c-akcent); }
.wyg-pv-mail { margin: 14px 0 0; padding: 12px; background: #16161a; border-radius: 10px; }
.wyg-pv-mail-karta { max-width: 360px; margin: 0 auto; padding: 14px 16px; background: var(--pv-tlo); border-top: 5px solid var(--pv-podstawowy);
  color: var(--pv-tekst); font: 14px/1.5 Georgia, serif; }
.wyg-pv-mail-marka { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 15px/1 Georgia, serif; }
.wyg-pv-mail-marka img { width: 24px; height: 24px; }
.wyg-pv-mail-karta .wyg-pv-przycisk { font-family: Arial, sans-serif; }
.wyg-pv-warianty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.wyg-pv-w { border-radius: var(--pvw-promien, 6px); overflow: hidden; border: 1px solid #ddd6c4; background: var(--pvw-pow, #fbf8f0);
  color: var(--pvw-tekst-karty, #1d1d22); font: calc(13px * var(--pvw-skala, 1))/1.4 var(--pvw-kroj-t, Georgia, serif); }
.wyg-pv-w-okladka { display: grid; place-items: center; height: 54px; background: var(--pvw-tlo, #0b1020); color: var(--pvw-tekst, #fff);
  border-bottom: 3px solid var(--pvw-akcent, #c8a45a); font: 700 12px/1 var(--pvw-kroj-i, Arial, sans-serif); letter-spacing: .08em; }
.wyg-pv-w-opis { padding: calc(8px * var(--pvw-gestosc, 1)) 10px calc(10px * var(--pvw-gestosc, 1)); }
.wyg-pv-w-opis b { display: block; margin: 0 0 4px; font: 700 calc(15px * var(--pvw-skala, 1))/1.15 var(--pvw-kroj-n, Georgia, serif); }
.wyg-pv-w-przycisk { display: inline-flex; align-items: center; min-height: calc(30px * var(--pvw-cel, 1)); margin-top: 6px; padding: 0 10px;
  border-radius: var(--pvw-promien-p, 4px); background: var(--pvw-link, #8f2020); color: var(--pvw-na-link, #fff); font: 700 11.5px/1 Arial, sans-serif; }
.wyg-podglad-otworz { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.wyg-podglad-otworz a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 14px/1 var(--sans); }
@media (prefers-reduced-motion: no-preference) { .wyg-podglad * { transition: background-color .2s, color .2s, border-color .2s, border-radius .2s; } }

/* ───────────── FAKTURY: dane do faktury przy zamówieniu (js/faktura-pola.js), rachunki i faktury na koncie (js/konto-dokumenty.js) */
.zakup-faktura-sekcja { margin: 0 0 14px; }
.zakup-faktura-sekcja .zakup-faktura { margin: 0 0 10px; }
.faktura-pola { margin: 4px 0 6px; }
.faktura-pola .zakup-legenda { font-size: 18px; margin-bottom: 10px; }
.faktura-typ { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; margin: 0 0 14px; }
.faktura-typ .wybor + .wybor { margin-top: 0; }
.faktura-nip { flex-wrap: nowrap; align-items: stretch; }
.faktura-nip input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.faktura-nip input::placeholder { text-transform: none; letter-spacing: 0; }
.faktura-nip .przycisk { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
.faktura-wynik:empty { display: none; }
@media (max-width: 420px) { .faktura-nip { flex-wrap: wrap; } .faktura-nip .przycisk { flex: 1 1 100%; } }
.dokumenty-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.dokument-wiersz { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 0;
  border-top: 1px solid var(--papier-3); }
.dokument-wiersz:first-child { border-top: 0; }
.dokument-opis { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dokument-wiersz .przycisk { min-height: 44px; }
.dokument-prosba select { width: 100%; min-height: 44px; }
.dokument-prosba > .przycisk { margin-top: 4px; }
.faktura-nip > .przycisk { align-self: stretch; }

/* ───────────── BEZPIECZENSTWO-2: drugi składnik logowania (admin-2fa.html) i zakładka „Ochrona danych” (js/admin-ochrona.js) */
.s-2fa .dwa-skladniki { max-width: 560px; }
.dwa-skladniki form, .dwa-skladniki section { margin: 12px 0 0; }
.dwa-skladniki input { letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.dwa-kroki { margin: 8px 0 14px; padding-left: 1.4em; }
.dwa-kroki li { margin: 4px 0; }
#qr { display: block; width: 240px; height: 240px; max-width: 100%; margin: 14px 0 6px; background: #fff; border-radius: 8px; padding: 6px; }
.dwa-sekret { font-family: "Courier New", monospace; font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.dwa-zapasowe { columns: 2; column-gap: 24px; padding-left: 1.6em; margin: 10px 0; }
.dwa-zapasowe li { margin: 4px 0; break-inside: avoid; }
.dwa-zapasowe code, .ochrona-zapasowe code { font-family: "Courier New", monospace; font-size: 16px; letter-spacing: .05em; }
.dwa-pomoc { margin: 14px 0 0; }
.dwa-pomoc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.dwa-zgoda { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.dwa-stopka { margin: 18px 0 0; text-align: right; }
.ochrona-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ochrona-akcje .przycisk { min-height: 44px; }
.ochrona-kod { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.ochrona-kod .pole { margin: 0; flex: 1 1 220px; }
.ochrona-kod .przycisk { min-height: 44px; }
.ochrona-zapasowe { border: 1px dashed currentColor; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.ochrona-zapasowe ol { columns: 2; column-gap: 24px; }
.ochrona-klucz { display: block; word-break: break-all; font-family: "Courier New", monospace; }
.ochrona-przelacznik { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; }
.ochrona-przelacznik input { width: 22px; height: 22px; }
.ochrona-zalecenia ul { margin: 6px 0 0; padding-left: 1.3em; }
.ochrona-retencja { list-style: none; margin: 8px 0 0; padding: 0; }
.ochrona-retencja li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, .25); }
.ochrona-retencja li:first-child { border-top: 0; }
.ochrona-retencja span { font-size: .92em; opacity: .85; }
@media (max-width: 480px) { .dwa-zapasowe, .ochrona-zapasowe ol { columns: 1; } }

/* ───────────── WYMAGANIA-QA: cele dotyku co najmniej 44 px (nagłówek, „przewiń”, stopka, linki samodzielne) */
/* nagłówek: linki menu, „Twoje konto” i „Wyloguj się” z polem 44 px (wiersz i tak ma 44 px przez wybór języka) */
.pasek-nav > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.pasek-konto { justify-content: center; min-height: 44px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }  /* „Twoje konto” w jednym wierszu (telefon) */
/* „przewiń ↓” na dole nagłówka strony: pole 44 × 44 px, napis w tym samym miejscu co wcześniej */
.hero-przewin { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; bottom: 2px; }
/* tytuł w karcie gry (katalog, konto): wyższe pole przez wypełnienie w wierszu, bez przesuwania tekstu */
.gra-opis h3 a { padding: 8px 0; }
/* samodzielny link do rankingu na koncie i „Odznaki detektywa: za co są?” na stronie rankingu */
#sekcja-ranking > p > a[href$="ranking"] { display: inline-flex; align-items: center; min-height: 44px; }
.ranking-legenda > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
/* dotyk (także laptop z ekranem dotykowym): stopka, języki, narzędzia dokumentu i filtry katalogu – 44 × 44 px */
@media (any-pointer: coarse) {
  .stopka-linki a, .stopka-jezyki a, .stopka-tresci a, .dokument-narzedzia a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  }
  .stopka-linki { row-gap: 0; }
  .filtr-opcja { min-height: 44px; }
}

/* ───────────── FB-KONTO: strona potwierdzenia logowania przez Facebooka (jedno konto): przyciski „Potwierdź przez Google/Apple”
   i „Wyślij kod na ten adres” w jednej linii także po ukraińsku na telefonie (jak przycisk Facebooka wyżej) */
@media (max-width: 480px) { #karta-facebook .logowanie-szybkie .przycisk.duzy { font-size: 16px; padding: 0 16px; gap: 10px; } }
/* ───────────── WYMAGANIA-QA (cd.): dokumenty prawne na telefonie, panel Wygląd i marka, panel admina na dotyku */
/* dokumenty prawne na telefonie (≤ 480 px): „Regulamin” i „Prywatność” są w menu ☰ i w stopce – bez nich nagłówek
   mieści się w ekranie (przy 360 px przycisk menu wychodził poza ekran i strona przewijała się w poziomie) */
@media (max-width: 480px) { .s-dokument .pasek-nav:has(> .menu-przycisk) > a:not(.pasek-konto) { display: none; } }
/* dokumenty prawne: długie adresy (https://…/regulamin) i długie słowa w tabelach (uk) łamią się w ramce zamiast
   wypychać stronę w bok na telefonie */
.dokument { overflow-wrap: break-word; }
.dokument td, .dokument th { overflow-wrap: anywhere; hyphens: auto; }
/* panel → Wygląd i marka: nazwa robocza w zdaniu („… Nazwa robocza platformy: <nazwa>. Decyzja…”) zostaje
   w wierszu (reguła .kafelek b z kafelków liczb robiła z niej duży osobny blok) */
.wyg-propozycja b { display: inline; font: inherit; font-weight: 700; }
/* panel admina na telefonie i tablecie (dotyk): przyciski kart „Start”, wybór gry, linki nagłówka, „Przejdź do treści”
   i link eksportu kont z polem 44 px (były 35-40 px, link eksportu 16 px) */
@media (any-pointer: coarse) {
  .start-karta .przycisk, #admin-gra, .admin-pomin { min-height: 44px; }
  .admin-glowa a { display: inline-flex; align-items: center; min-height: 44px; }
  a[href*="/api/admin/eksport.csv"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ───────────── KONTO-2: panel klienta na stronie Konta – spis sekcji, historia zakupów, twoje kody, wyniki i odznaki
   do udostępnienia, sposoby logowania z „Odłącz” (js/konto.js, js/konto-zakupy.js). Kolory i kroje z :root (marka). */
.karta-konto .karta-sekcja > h2 { font-size: 22px; }
.karta-konto .karta-sekcja.prosba-zgody > h2 { font-size: 20px; }
.karta-konto .karta-sekcja { scroll-margin-top: 16px; }
.karta-konto h3 { font-size: 19px; }
.karta-konto h4 { font: 700 18px/1.25 var(--serif); margin: 0; }

/* spis sekcji pod tytułem: linki-żetony (cel dotyku 44 px), zawijają się na telefonie */
.konto-spis { margin: 0 0 20px; }
.konto-spis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.konto-spis a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--papier-3);
  border-radius: 999px; background: #fff; color: var(--atrament); font: 700 15px/1 var(--sans); text-decoration: none;
}
.konto-spis a:hover { border-color: var(--czerwien); color: var(--czerwien); }

/* stany jako kropka i słowo (jak „Twoje zamówienia”), także w kodach */
.konto-stan { display: inline-flex; align-items: center; gap: 7px; font: 700 14.5px/1.3 var(--sans); }
.konto-stan i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--mosiadz); }
.konto-stan.stan-ok i { background: var(--zielen); }
.konto-stan.stan-szare { color: var(--szary); }
.konto-stan.stan-szare i { background: #9a9aa3; }

/* historia zakupów */
.historia-lista, .konto-kody, .wyniki-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.zakup, .kod-pozycja, .wynik-pozycja {
  background: #fff; border: 1px solid var(--papier-3); border-radius: 4px; padding: 14px 16px; font: 16px/1.45 var(--sans);
  min-width: 0; overflow-wrap: anywhere;
}
.zakup:focus-visible, .wynik-pozycja:focus-visible { outline: 3px solid var(--mosiadz); outline-offset: 2px; }
.zakup:focus:not(:focus-visible), .wynik-pozycja:focus:not(:focus-visible) { outline: none; }
.zakup-glowa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 16px; }
.zakup-co { min-width: 0; flex: 1 1 220px; }
.zakup-co h3 { margin: 0; font: 700 20px/1.25 var(--serif); }
.zakup-rodzaj { margin: 2px 0 0; color: var(--szary); font-size: 15px; }
.zakup-kwota { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.zakup-kwota b { font: 700 20px/1.25 var(--serif); }
.zakup-kwota s { display: block; color: var(--szary); font-size: 14px; }
.zakup-stany { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.zakup-test { font: 12.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #5c4200; background: #fff4d6;
  border: 1px dashed #d9b451; border-radius: 3px; padding: 0 6px; align-self: center; }
.zakup-opis { margin: 8px 0 0; color: #3a3a42; }
.zakup-akcje { margin-top: 12px; }
.zakup-akcje .przycisk { flex: 0 1 auto; }
.zakup-szczegoly { margin: 10px 0 0; border-top: 1px dashed var(--papier-3); }
.zakup-szczegoly > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--czerwien); font-weight: 700; list-style-position: inside;
}
.zakup-dane { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 4px; font-size: 15.5px; }
.zakup-dane > div { display: contents; }
.zakup-dane dt { color: var(--szary); }
.zakup-dane dd { margin: 0; min-width: 0; }
.zakup-numer { font-family: var(--mono); font-size: 14.5px; letter-spacing: .03em; }
.zakup-dokumenty { list-style: none; margin: 0; padding: 0; }
.zakup-dokumenty a { display: inline-flex; align-items: center; min-height: 44px; }
.zakup-nieoplacony { background: var(--papier); }
.zakup-nieoplacony .zakup-co h3, .zakup-nieoplacony .zakup-kwota b { color: var(--szary); }
.zakup-pusto, .kody-pusto { background: var(--papier-2); border: 1px dashed var(--papier-3); border-radius: 4px; padding: 16px 18px; font: 16px/1.5 var(--sans); }
.zakup-pusto p, .kody-pusto p { margin: 0 0 4px; }
.historia-wiecej { margin: 12px 0 0; text-align: center; }
.historia-wiecej .przycisk { min-width: 220px; }
@media (max-width: 560px) {
  .zakup-dane { grid-template-columns: 1fr; gap: 0; }
  .zakup-dane dd { margin-bottom: 8px; }
  .zakup-akcje .przycisk { flex: 1 1 100%; }
  .historia-wiecej .przycisk { width: 100%; }
  .wynik-pozycja .gra-przyciski .przycisk { flex: 1 1 100%; }
}

/* twoje kody: rabaty, kupione prezenty, formularz „Masz kod prezentu?” na końcu sekcji */
.kody-blok + .kody-blok, .kody-pusto + .konto-kod, .kody-blok + .konto-kod { margin-top: 22px; }
.kody-blok h3 { margin: 0; }
.kod-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kod-tekst {
  font: 700 17px/1.4 var(--mono); letter-spacing: .06em; background: var(--papier); padding: 2px 8px; border-radius: 3px;
  border: 1px dashed var(--mosiadz); overflow-wrap: anywhere;
}
.kod-wartosc { font: 700 18px/1.2 var(--serif); color: var(--czerwien); }
.kod-gra { font: 700 18px/1.25 var(--serif); }
.kod-opis { margin: 6px 0 0; }
.kod-wartosc-prezentu { margin: 8px 0 0; }
.kod-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.kod-akcje .przycisk, .kopiuj-przycisk { min-height: 44px; padding: 0 16px; font-size: 15px; }
.kod-nieaktywny { background: var(--papier); }
.kod-nieaktywny .kod-tekst { border-color: var(--papier-3); color: var(--szary); text-decoration: line-through; }
.kody-stare, .prezenty-stare { margin: 12px 0 0; }
.kody-stare > summary, .prezenty-stare > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 700 15.5px/1.3 var(--sans); }
.kopiuj { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kopiuj-przycisk.skopiowano { border-color: var(--zielen); color: var(--zielen); }
.kopiuj-stan:empty { display: none; }
.konto-kod { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--papier-3); }
.konto-kod h3 { margin-bottom: 4px; }
.konto-kod .maly { margin-bottom: 12px; }
#sekcja-kod.prezent-wyrozniony { border-top: 1.5px solid var(--mosiadz); }
#sekcja-kod.prezent-wyrozniony h3 { font-size: 24px; }
#sekcja-kod.prezent-wyrozniony .maly { color: var(--atrament); }

/* wyniki i odznaki do udostępnienia */
.konto-wyniki h3, .konto-odznaki h3 { margin: 22px 0 0; font-size: 19px; }
.konto-odznaki h3 { margin-bottom: 12px; }
.konto-odznaki h4 { margin: 18px 0 10px; font-size: 16px; font-family: var(--sans); color: var(--szary); }
.wynik-pozycja-glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wynik-plakietka { font: 700 14px/1 var(--sans); color: var(--czerwien); border: 1px solid currentColor; border-radius: 999px; padding: 6px 10px; }
.wynik-pozycja-fakty { margin: 6px 0 0; color: #3a3a42; }
.wynik-pozycja .odznaki-rzad { margin: 8px 0 0; }
.wynik-pozycja .gra-przyciski { margin-top: 12px; }
.wynik-pozycja .gra-przyciski .przycisk { flex: 0 1 auto; }
.wynik-pozycja.niepubliczny { background: var(--papier); }
.wynik-powod { margin: 8px 0 0; }
.udostepnij-panel { margin: 12px 0 0; padding: 12px; background: var(--papier); border: 1px solid var(--papier-3); border-radius: 4px; }
.udostepnij-panel .udostepnij-przyciski .przycisk { flex: 1 1 128px; min-height: 44px; }
.udostepnij-panel .maly { margin: 4px 0 0; }
.udostepnij-panel .maly a { display: inline-flex; align-items: center; min-height: 44px; }
.udostepnij-stan:empty { display: none; }
.konto-odznaki .odznaki-lista.odznaki-zdobyte { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.odznaki-zdobyte li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
  background: #fff; border: 1px solid var(--papier-3); border-radius: 4px; padding: 10px 12px; font: 15px/1.35 var(--sans); }
.odznaki-zdobyte li > .odznaka-ikona { grid-row: 1 / span 2; align-self: start; }
.odznaki-zdobyte .odznaka-nazwa { grid-column: 2; grid-row: 1; align-self: center; overflow-wrap: break-word; min-width: 0; }
.odznaki-zdobyte .odznaka-opis { grid-column: 2 / -1; grid-row: 2; color: var(--szary); font-size: 13.5px; }
.odznaki-zdobyte li > .udostepnij-przelacz { grid-column: 3; grid-row: 1; min-height: 44px; padding: 0 14px; font-size: 14.5px; }
.odznaki-zdobyte li > .udostepnij-panel { grid-column: 1 / -1; grid-row: 3; margin: 8px 0 0; }
.konto-ranking-link a { display: inline-flex; align-items: center; min-height: 44px; }
#ranking-stan .komunikat { margin: 12px 0 0; }

/* sposoby logowania */
.logowanie-lista { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.logowanie-pozycja {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 56px; background: #fff;
  border: 1px solid var(--papier-3); border-radius: 4px; font: 16px/1.35 var(--sans);
}
.logowanie-logo { flex: 0 0 auto; width: 22px; height: 22px; }
.logowanie-znak {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--papier-2); color: var(--atrament); font: 700 15px/1 var(--sans); border: 1px solid var(--papier-3);
}
.logowanie-opis { display: grid; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.logowanie-opis .maly { font-size: 14px; }
.logowanie-odlacz { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
.logowanie-rada { padding: 2px 2px 0; }
.konto-dane-przyciski { display: flex; gap: 10px; flex-wrap: wrap; }
dialog.okno-odlacz { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.okno-odlacz .okno-tresc p { margin: 0 0 12px; }
/* przyciski z dłuższym tekstem (np. po ukraińsku) łamią się w dwie linie bez nachodzenia wierszy */
.karta-konto .przycisk, dialog.okno-odlacz .przycisk { line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 420px) {
  .konto-dane-przyciski .przycisk { flex: 1 1 100%; }
  .konto-spis ul { gap: 6px; }
  .konto-spis a { padding: 0 12px; font-size: 14.5px; }
  .odznaki-zdobyte li { gap: 2px 8px; padding: 10px; }
  .odznaki-zdobyte li > .udostepnij-przelacz { padding: 0 10px; font-size: 14px; }
}

/* ───────────── GRY-WIELE: ogólna strona gry z paczki (strona/gra.html) i zakładka „Gry” w panelu */
.hero-paczki .hero-foto { object-position: 50% 40%; }
.hero-tytul-paczki { font-size: clamp(40px, 7vw, 88px); line-height: 1; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .hero-tytul-paczki { font-size: 40px; } }
.hero-wkrotce { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; font: 16px/1.5 var(--sans); color: #d6dae4; }
.etykieta-wkrotce {
  display: inline-block; padding: 6px 12px; border-radius: 3px; background: var(--m-akcent-jasny, var(--mosiadz)); color: var(--noc);
  font: 700 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.opis-gry { max-width: 760px; }
.opis-gry p { font-size: 18px; margin: 0 0 16px; }
.galeria-gry { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-top: 28px; }
.galeria-gry-el { margin: 0; }
.galeria-gry-el img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--m-promien, 4px);
  border: 1px solid var(--papier-3); background: var(--papier-2); }
.galeria-gry-el figcaption { margin-top: 8px; font: 14.5px/1.45 var(--sans); color: #3a3a42; }
.podglad-admina {
  position: relative; z-index: 20; margin: 0; padding: 12px clamp(16px, 4vw, 40px); background: #fff0c2; color: #5c4200;
  font: 15px/1.45 var(--sans); border-bottom: 1px solid #d9b451;
}
.gry-akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.gry-akcje .przycisk { min-height: 44px; }
.gry-rejestr-fakty { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); font: 14.5px/1.45 var(--sans); }
.gry-rejestr-fakty a { overflow-wrap: anywhere; }
.kafelek .gry-rejestr-fakty b { display: inline; font: 700 14.5px/1.45 var(--sans); letter-spacing: 0; margin: 0; color: inherit; }
.gry-karta h3 .etykieta + .etykieta { margin-left: 6px; }
.gry-problemy .gry-blokada { font-weight: 700; }
.gry-problemy .gry-ostrzezenie { color: #5c4200; }
.gry-sprzedaz { margin: 4px 0 14px; }
.gry-sprzedaz .formularz-wiersz { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.gry-sprzedaz input[type="text"], .gry-sprzedaz input[type="number"] { min-height: 44px; max-width: 12em; }
.gry-pominiete h4 { margin: 12px 0 4px; font: 700 14px/1.3 var(--mono); text-transform: none; letter-spacing: 0; }

/* ───────────── AKTUALIZACJE: panel → Ustawienia → Aktualizacje (js/admin-aktualizacje.js) */
.akt-pozycja { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 0;
  border-top: 1px solid rgba(127, 127, 127, .25); }
.bezp-sekcja > h2 + .akt-pozycja { border-top: 0; }
.akt-pozycja > div { min-width: 0; flex: 1 1 260px; }
.akt-pozycja p { margin: 2px 0 0; }
.akt-pozycja .przycisk, .akt-akcja .przycisk, .akt-zadanie .przycisk, .akt-wycofanie .przycisk, .akt-wynik .przycisk { min-height: 44px; }
.akt-pole-plikow input[type="file"] { display: block; width: 100%; min-height: 44px; padding: 8px; box-sizing: border-box; font: inherit;
  border: 1px dashed var(--papier-3, #ccc); border-radius: 6px; background: var(--papier-2, #f6f1e4); }
.akt-wybrane, .akt-postep { list-style: none; margin: 8px 0; padding: 0; }
.akt-wybrane li { font: 14.5px/1.45 var(--sans); overflow-wrap: anywhere; }
.akt-postep li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 10px; }
.akt-postep b { font: 600 14.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.akt-postep progress { width: 100%; height: 14px; accent-color: var(--czerwien); }
.akt-status { min-height: 1.4em; }
.akt-wynik { border: 1px solid var(--papier-3, #ddd6c4); border-left-width: 5px; border-radius: 6px; padding: 12px 16px; margin: 14px 0;
  background: #fff; }
.akt-wynik.ok { border-left-color: #2f7a43; }
.akt-wynik.blad { border-left-color: #b3261e; }
.akt-wynik h3 { margin: 0 0 10px; font: 700 17px/1.35 var(--sans); }
.akt-opis { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 10px; font: 14.5px/1.45 var(--sans); }
.akt-opis dt { color: var(--szary); }
.akt-opis dd { margin: 0; overflow-wrap: anywhere; }
.akt-uwagi { margin: 8px 0; padding-left: 1.3em; font: 14.5px/1.45 var(--sans); }
.akt-akcja { margin: 12px 0 4px; }
.akt-zatwierdz .pole { flex: 1 1 260px; }
.akt-kod { font: 600 20px/1.2 var(--mono); letter-spacing: .15em; max-width: 9em; }
.akt-polecenie { margin: 4px 0 10px; padding: 8px 10px; background: #0b1020; color: #e8e6df; border-radius: 6px; overflow-x: auto;
  white-space: pre; font: 13.5px/1.45 var(--mono); }
.akt-polecenie code { font: inherit; color: inherit; background: none; }
.akt-stan { font: 15px/1.5 var(--sans); }
.akt-log { max-height: 340px; overflow: auto; margin: 6px 0 0; padding: 10px 12px; background: #0b1020; color: #e8e6df; border-radius: 6px;
  font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.akt-dziennik summary, .akt-ssh summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.akt-kroki { margin: 6px 0 10px; padding-left: 1.3em; font: 14.5px/1.5 var(--sans); }
.akt-wycofanie { margin: 6px 0 12px; }
.akt-historia tr.klik { cursor: pointer; }
.akt-historia td:nth-child(2) { white-space: normal; min-width: 12em; }
@media (max-width: 600px) {
  .akt-opis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .akt-opis dd { margin-bottom: 6px; }
  .akt-pozycja .przycisk { width: 100%; }
  .akt-historia th, .akt-historia td { padding: 8px 6px; }
  .akt-historia td:first-child { white-space: normal; width: 4.5em; font-size: 13px; }
  .akt-historia td:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
}

/* ───────────── UX-WOW (runda 10): efekt „wow” bez przesady – lampa nad nagłówkiem, światło i uchylona okładka na kartach
   gier, „rozdawanie” treści sekcji, mikroruch przycisków; maskotka (dymek w rogu i w treści), strona 404, metryczka
   sprzedawcy (sekcja zaufania), przełącznik wibracji. Tylko transform i opacity, bez skoków układu; „ogranicz ruch” = bez
   ruchu; zmienne marki --marka-* (MARKA-TD) z wartościami zapasowymi. JS: js/glowna.js, js/maskotka.js, js/haptyka.js. */

/* lampa nad nagłówkiem: ciepłe światło na budynku za kursorem (komputer) albo powoli wędrujące (telefon); pod cieniem tekstu */
.hero-scena > .hero-lampa {
  left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .75), rgba(242, 181, 68, .35) 45%, rgba(242, 181, 68, 0) 74%);
  mix-blend-mode: overlay; will-change: transform; transition: opacity .9s ease;
}
.hero-scena > .hero-lampa.wl { opacity: 1; }
.hero-scena > .hero-lampa.dryf { width: 120vw; height: 120vw; margin: -60vw 0 0 -60vw; animation: lampa-dryf 18s ease-in-out infinite alternate; }
@keyframes lampa-dryf {
  from { transform: translate3d(70vw, 26svh, 0); }
  50% { transform: translate3d(48vw, 38svh, 0); }
  to { transform: translate3d(82vw, 46svh, 0); }
}

/* karty gier: uniesienie, przejście światła lampy po okładce i uchylona okładka (pod nią kartka akt) */
.gra-karta { transition: transform var(--marka-ruch, 250ms) var(--marka-krzywa, ease), box-shadow var(--marka-ruch, 250ms) ease; }
.gra-karta:not(.wkrotce) .gra-okladka { perspective: 760px; }
.gra-karta:not(.wkrotce) .gra-okladka > picture { display: block; height: 100%; transform-origin: 50% 0;
  transition: transform var(--marka-ruch-dlugi, 400ms) var(--marka-krzywa, ease), box-shadow var(--marka-ruch-dlugi, 400ms) ease; }
.gra-okladka::before {
  content: ""; position: absolute; z-index: 2; top: -20%; bottom: -20%; left: -60%; width: 60%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 233, 186, 0), rgba(255, 236, 196, .58) 50%, rgba(255, 233, 186, 0));
  transform: translateX(0) skewX(-14deg);
}
@media (hover: hover) {
  .gra-karta:not(.wkrotce):hover, .gra-karta:not(.wkrotce):focus-within {
    transform: translateY(-5px); box-shadow: var(--marka-cien-uniesienie, 0 16px 40px rgba(11, 16, 32, .24));
  }
  .gra-karta:not(.wkrotce):hover .gra-okladka,
  .gra-karta:not(.wkrotce):focus-within .gra-okladka {
    background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(26, 32, 51, .16) 9px 10px) 0 100% / 100% 42px no-repeat,
                var(--marka-kartka, #fffcf6);
  }
  .gra-karta:not(.wkrotce):hover .gra-okladka > picture,
  .gra-karta:not(.wkrotce):focus-within .gra-okladka > picture { transform: rotateX(-16deg); box-shadow: 0 12px 16px -6px rgba(11, 16, 32, .6); }
  .gra-karta:not(.wkrotce):hover .gra-okladka img { transform: none; }
  .gra-karta:not(.wkrotce):hover .gra-okladka::before,
  .gra-karta:not(.wkrotce):focus-within .gra-okladka::before { animation: lampa-przejazd .6s var(--marka-krzywa, ease) both; }
}
.gra-karta.lampa-raz .gra-okladka::before { animation: lampa-przejazd .6s .35s var(--marka-krzywa, ease) both; }
@keyframes lampa-przejazd {
  0% { opacity: 0; transform: translateX(0) skewX(-14deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(330%) skewX(-14deg); }
}
@media (hover: none) { .gra-karta:not(.wkrotce):active { transform: scale(.99); } }

/* treść sekcji „rozdawana” po kolei jak kartki na stół (klasy dodaje js/glowna.js tylko poniżej pierwszego ekranu) */
.rozdaj > * { opacity: 0; transform: translateY(14px) rotate(-.5deg); }
.rozdaj > :nth-child(even) { transform: translateY(14px) rotate(.45deg); }
.rozdaj.rozdane > * { opacity: 1; transform: none; transition: opacity .38s ease, transform .45s var(--marka-krzywa, ease);
  transition-delay: calc(var(--n, 0) * 45ms); }

/* przyciski: błysk lampy przy najechaniu (główne), płynny pierścień fokusu */
.przycisk { transition: background .15s, color .15s, border-color .15s, transform .18s var(--ruch-wyjscie, ease), box-shadow .2s ease,
  outline-offset .15s ease; }
@media (prefers-reduced-motion: no-preference) { .przycisk:focus-visible { animation: fokus-pierscien .2s var(--marka-krzywa, ease-out); } }
@keyframes fokus-pierscien { from { outline-offset: 8px; outline-color: transparent; } }
@media (hover: hover) {
  .przycisk.glowny { position: relative; overflow: hidden; isolation: isolate; }
  .przycisk.glowny::after {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
    transform: translateX(0) skewX(-14deg);
  }
  .przycisk.glowny:hover::after { transform: translateX(400%) skewX(-14deg); transition: transform .6s var(--marka-krzywa, ease); }
}

/* maskotka: dymek w rogu ekranu (js/maskotka.js) */
.maskotka-okno {
  position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: 0 4px; width: min(408px, calc(100vw - 24px));
  pointer-events: none; color: var(--marka-atrament, #1a2033);
  animation: maskotka-wejscie var(--marka-ruch-dlugi, 400ms) var(--marka-krzywa-sprezyna, ease-out) both;
}
.maskotka-okno > * { pointer-events: auto; }
.maskotka-okno .maskotka-postac { width: 112px; height: 112px; filter: drop-shadow(0 8px 12px rgba(11, 16, 32, .28)); }
.maskotka-dymek {
  position: relative; margin: 0; padding: 12px 16px; border: 2px solid var(--marka-atrament, #1a2033); border-radius: 16px;
  background: var(--marka-kartka, #fffcf6); color: var(--marka-atrament, #1a2033); font: 15.5px/1.45 var(--marka-kroj, var(--sans));
  box-shadow: var(--marka-cien, 0 10px 28px rgba(11, 16, 32, .16));
}
.maskotka-dymek::before {
  content: ""; position: absolute; left: -9px; bottom: 18px; width: 14px; height: 14px; background: inherit;
  border-left: 2px solid var(--marka-atrament, #1a2033); border-bottom: 2px solid var(--marka-atrament, #1a2033);
  transform: rotate(45deg); border-radius: 0 0 0 3px;
}
.maskotka-okno .maskotka-dymek { margin-bottom: 34px; padding-right: 46px; transform-origin: 0 100%;
  animation: dymek-wejscie var(--marka-ruch, 250ms) .12s var(--marka-krzywa, ease-out) both; }
.maskotka-dymek p { margin: 0; }
.maskotka-dymek .maskotka-imie { font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--marka-ochra-tekst, #8a540b); margin: 0 0 2px; }
.maskotka-dymek .maskotka-akcje { margin-top: 10px; }
.maskotka-akcje .przycisk { min-height: 44px; padding: 0 16px; font-size: 15px; }
.maskotka-zamknij {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 12px; background: none; color: inherit; font: 400 24px/1 var(--sans); cursor: pointer; opacity: .7;
}
.maskotka-zamknij:hover { opacity: 1; background: rgba(26, 32, 51, .07); }
.maskotka-okno.wychodzi { animation: maskotka-wyjscie .2s ease-in both; }
@keyframes maskotka-wejscie { from { opacity: 0; transform: translateY(28px) scale(.92); } }
@keyframes dymek-wejscie { from { opacity: 0; transform: scale(.88); } }
@keyframes maskotka-wyjscie { to { opacity: 0; transform: translateY(22px) scale(.96); } }
/* telefon: u góry, pod nagłówkiem – na dole są kciuki i przyciski zakupu (dymek i tak znika przy przewijaniu) */
@media (max-width: 560px) {
  .maskotka-okno { left: 12px; right: 12px; top: calc(76px + env(safe-area-inset-top)); bottom: auto; width: auto;
    grid-template-columns: 76px minmax(0, 1fr); align-items: start; animation-name: maskotka-wejscie-gora; }
  .maskotka-okno .maskotka-postac { width: 76px; height: 76px; }
  .maskotka-okno .maskotka-dymek { margin: 14px 0 0; font-size: 15px; }
  .maskotka-okno .maskotka-dymek::before { bottom: auto; top: 22px; }
  .maskotka-okno.wychodzi { animation-name: maskotka-wyjscie-gora; }
}
@keyframes maskotka-wejscie-gora { from { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes maskotka-wyjscie-gora { to { opacity: 0; transform: translateY(-18px) scale(.96); } }

/* maskotka w treści stron (wstawia ją serwer: biblioteka, brak wyników filtrów, wynik) */
.maskotka-w-tresci { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 16px; }
.maskotka-w-tresci .maskotka-postac { flex: 0 0 auto; width: 88px; height: 88px; }
.maskotka-w-tresci .maskotka-dymek { margin-bottom: 18px; max-width: 34em; font-size: 15px; }
.maskotka-w-linii { display: flex; margin: 0 0 6px; }
.maskotka-wynik { margin: -6px 0 18px; }
@media (prefers-reduced-motion: no-preference) {
  .maskotka-w-tresci .maskotka-postac { animation: maskotka-podskok .45s .2s var(--marka-krzywa-sprezyna, ease-out) both; }
}
@keyframes maskotka-podskok { from { transform: translateY(10px) scale(.94); } }

/* strona 404: maskotka „zgubiona”, pieczątka i spokojne przyciski */
.b404 { max-width: 640px; }
.b404-scena { display: flex; align-items: flex-end; gap: 6px; min-height: 120px; margin: 0 0 4px; }
.b404-maskotka { width: 168px; height: 168px; transform-origin: 50% 88%; }
.b404-pieczec {
  margin: 0 0 30px -10px; padding: 4px 14px 2px; border: 4px solid currentColor; border-radius: 10px;
  color: var(--marka-pieczec, #6a45b8); font: 700 52px/1 var(--marka-kroj, var(--sans)); letter-spacing: .08em;
  transform: rotate(-9deg); opacity: .9;
}
.b404-dymek { position: relative; display: inline-block; margin: 0 0 18px; padding: 8px 14px; border: 2px solid var(--marka-atrament, #1a2033);
  border-radius: 14px; background: var(--marka-kartka, #fffcf6); font: 15px/1.4 var(--marka-kroj, var(--sans)); }
.b404-dymek::before { content: ""; position: absolute; left: 34px; top: -9px; width: 14px; height: 14px; background: inherit;
  border-left: 2px solid var(--marka-atrament, #1a2033); border-top: 2px solid var(--marka-atrament, #1a2033); transform: rotate(45deg); }
.b404-lead { font-size: 18px; }
.b404-przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.b404-naglowek { margin: 26px 0 8px; font: 700 15px/1.3 var(--marka-kroj, var(--sans)); letter-spacing: .02em; }
.b404-lista { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; padding: 0; margin: 0; }
.b404-lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--papier-3);
  border-radius: 999px; text-decoration: none; font: 15px/1.2 var(--sans); }
.b404-lista a:hover { border-color: currentColor; }
.b404-pomoc { margin: 24px 0 0; }
.b404-pomoc a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }   /* cel dotyku 44 px w zdaniu */
@media (prefers-reduced-motion: no-preference) {
  .b404-maskotka { animation: b404-szuka 2.6s ease-in-out .5s 2 both; }
  .b404-pieczec { animation: b404-stempel .32s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes b404-szuka { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 70% { transform: rotate(4deg); } }
@keyframes b404-stempel { from { opacity: 0; transform: rotate(-16deg) scale(1.7); } }
@media (max-width: 480px) {
  .b404-maskotka { width: 132px; height: 132px; }
  .b404-pieczec { font-size: 40px; }
}

/* metryczka sprzedawcy (sekcja zaufania): akta z zakładką jak w archiwum, w środku kartka z wierszami */
.zaufanie-sekcja { background: var(--papier); }
.zaufanie-akta {
  position: relative; max-width: 920px; margin: 34px auto 0; padding: clamp(22px, 4vw, 38px);
  background: var(--marka-bursztyn-jasny, #fbe3a6); color: var(--marka-atrament, #1a2033);
  border: 2px solid var(--marka-bursztyn-ciemny, #d18b26); border-radius: 0 14px 14px 14px; box-shadow: var(--marka-cien, 0 10px 28px rgba(11, 16, 32, .16));
}
.zaufanie-akta .zaufanie-zakladka {
  position: absolute; left: -2px; bottom: 100%; margin: 0; padding: 9px 18px 7px; border: 2px solid var(--marka-bursztyn-ciemny, #d18b26);
  border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--marka-bursztyn, #f2b544); color: var(--marka-atrament, #1a2033);
  font: 700 12.5px/1.2 var(--mono); letter-spacing: .1em;
}
.zaufanie-akta h2 { margin: 0 0 18px; color: var(--marka-atrament, #1a2033); }
.zaufanie { margin: 0; background: var(--marka-kartka, #fffcf6); border: 1px solid rgba(26, 32, 51, .16); border-radius: 6px;
  box-shadow: 0 2px 0 rgba(26, 32, 51, .06); }
.zaufanie-wiersz { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 4px 22px; padding: 16px 22px;
  border-top: 1px solid rgba(26, 32, 51, .1); }
.zaufanie-wiersz:first-child { border-top: 0; }
.zaufanie dt { font: 700 13px/1.5 var(--mono); letter-spacing: .03em; color: var(--marka-ochra-tekst, #8a540b); padding-top: 3px; }
.zaufanie dd { margin: 0; font-size: 17px; line-height: 1.55; }
.zaufanie dd p { margin: 0 0 6px; }
.zaufanie dd p:last-child { margin-bottom: 0; }
.zaufanie-firma { font-weight: 700; }
.zaufanie-firma, .zaufanie-numer { margin-right: 12px; }
.zaufanie-numer { font: 14.5px/1.5 var(--mono); white-space: nowrap; }
.zaufanie-adres { display: block; }
.zaufanie-metody { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 8px; }
.zaufanie-metody li { padding: 5px 10px; border: 1.5px solid rgba(26, 32, 51, .35); border-radius: 4px; background: var(--marka-kartka, #fffcf6);
  font: 700 13.5px/1.2 var(--sans); }
.zaufanie-dopisek { font-size: 14.5px; color: var(--szary); }
.zaufanie-linki { display: flex; flex-wrap: wrap; gap: 0 18px; }
.zaufanie-linki a { display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0; }   /* cel dotyku 44 px bez luzu w wierszu */
.zaufanie dd p.zaufanie-linki { margin-top: 10px; }
.zaufanie dd p.zaufanie-linki:first-child { margin-top: 0; }
.zaufanie-ocena b { font-size: 19px; }
.zaufanie-gwiazdka { color: var(--marka-bursztyn-ciemny, #d18b26); }
@media (max-width: 640px) {
  .zaufanie-wiersz { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .zaufanie dd { font-size: 16px; }
  .zaufanie-akta .zaufanie-zakladka { font-size: 11.5px; padding: 8px 14px 6px; }
}

/* metryczka przy zakupie (strona /zakup): krótko, pod przyciskiem płatności */
.zaufanie-zakup { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--papier-3); }
.zaufanie-zakup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 14.5px/1.5 var(--sans); }
.zaufanie-zakup li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 0 12px; }
.zaufanie-zakup li > b { color: var(--szary); font-weight: 700; }
.zaufanie-zakup li > :not(b) { grid-column: 2; }
.zaufanie-zakup a { overflow-wrap: anywhere; }
@media (max-width: 480px) { .zaufanie-zakup li { grid-template-columns: minmax(0, 1fr); } .zaufanie-zakup li > :not(b) { grid-column: 1; } }

/* przełącznik wibracji w Koncie (js/haptyka.js) */
.haptyka-miejsce:empty { display: none; }
.haptyka-miejsce { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--papier-3); }

/* „ogranicz ruch” i wydruk: bez ruchu i bez ozdób */
@media (prefers-reduced-motion: reduce) {
  .hero-scena > .hero-lampa { display: none; }
  .gra-karta, .gra-karta .gra-okladka > picture, .przycisk { transition: none !important; }
  .gra-karta:not(.wkrotce):hover, .gra-karta:not(.wkrotce):focus-within { transform: none; }
  .gra-karta .gra-okladka > picture { transform: none !important; }
  .gra-okladka::before, .przycisk.glowny::after { display: none; }
  .rozdaj > * { opacity: 1; transform: none; }
  .maskotka-okno, .maskotka-okno .maskotka-dymek, .maskotka-okno.wychodzi, .maskotka-w-tresci .maskotka-postac,
  .b404-maskotka, .b404-pieczec { animation: none !important; }
}
@media print {
  .maskotka-okno, .hero-lampa { display: none !important; }
  .rozdaj > * { opacity: 1 !important; transform: none !important; }
}
/* panel: Wygląd i marka → Maskotka i wibracje (js/admin-wyglad.js) */
.wyg-maskotka-gora { display: grid; gap: 16px; align-items: start; margin: 0 0 14px; }
@media (min-width: 900px) { .wyg-maskotka-gora { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); } }
.wyg-maskotka-gora h4, .wyg-maskotka h4 { margin: 6px 0 8px; font: 700 15px/1.2 var(--sans); }
.wyg-maskotka-podglad { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: end; gap: 0 6px; padding: 14px 12px;
  border-radius: 10px; background: #f4f0e5; transition: opacity .2s, filter .2s; }
.wyg-maskotka-podglad .maskotka-dymek { margin-bottom: 26px; }
.wyg-maskotka-podglad.wylaczona { opacity: .45; filter: grayscale(1); }
.wyg-maskotka-stany .wyg-logo-obraz img { width: 96px; height: 96px; }
@media (min-width: 760px) { .wyg-maskotka-stany { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wyg-maskotka .przelacznik b { display: block; font: 700 15px/1.3 var(--sans); }    /* nie jak liczby w kafelkach (.kafelek b) */
.wyg-maskotka .przelacznik span { font-size: 13.5px; line-height: 1.45; }
.wyg-maskotka .wyg-logo h4 { min-height: 2.4em; }
/* ===== /UX-WOW ===== */

/* ───────────── WERSJA-1.0: Aktualizacje → „Co nowego”, dziennik aktualizacji, wycofanie do starszej wersji (js/admin-aktualizacje.js) */
.akt-co-nowego .akt-zm-blok + .akt-zm-blok { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e6dfcd; }
.akt-co-nowego h3 { margin: 4px 0 6px; font: 700 15px/1.3 var(--sans); }
.akt-zm-wpis { margin: 0 0 6px; }
.akt-zm-wpis > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style-position: outside; }
.akt-zm-naglowek { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.akt-zm-wersja { font: 700 15px/1.3 var(--mono); }
.akt-zm-tytul { font: 600 14.5px/1.35 var(--sans); overflow-wrap: anywhere; }
.akt-zm-data { color: var(--szary); }
.akt-zm-punkty { margin: 2px 0 8px; padding-left: 1.3em; font: 14px/1.5 var(--sans); }
.akt-zm-punkty li + li { margin-top: 3px; }
.akt-zm-dawne { margin-top: 4px; }
.akt-zm-dawne > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 14px/1.3 var(--sans); color: var(--szary); }
.akt-co-nowego-paczki { margin: 10px 0 4px; padding: 8px 12px; border-radius: 6px; background: #f7f3e8; }
.akt-co-nowego-paczki h4 { margin: 4px 0 2px; font: 700 15px/1.3 var(--sans); }
.akt-wycofanie-paczki p { margin: 4px 0; }
.akt-tryb-wycofanie .przycisk.glowny { background: #8a3b12; border-color: #8a3b12; }
.akt-dziennik-tab td { vertical-align: top; white-space: normal; }
.akt-dziennik-tab td:first-child, .akt-dziennik-tab td:last-child { white-space: nowrap; }
.akt-dziennik-tab td:nth-child(2) { min-width: 8em; max-width: 17em; }
.akt-dziennik-tab td:nth-child(4) { overflow-wrap: break-word; font-size: 14px; }
.akt-dziennik-tab .akt-dz-rodzaj { display: block; color: var(--szary); }
.akt-dziennik-tab .akt-dz-zmiana { white-space: nowrap; }
.akt-dziennik-tab .akt-dz-opis { display: block; margin-top: 2px; color: #6e1a15; overflow-wrap: anywhere; }
.akt-dziennik-tab .akt-dz-wersja { font-family: var(--mono); font-size: 13px; }
.akt-dziennik-tab .akt-dz-build { display: block; margin-top: 2px; color: var(--szary); }
@media (max-width: 700px) {
  .akt-dziennik-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .akt-dziennik-tab, .akt-dziennik-tab tbody { display: block; }
  .akt-dziennik-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 2px;
    border-bottom: 1px solid #e6dfcd; }
  .akt-historia.akt-dziennik-tab td, .akt-historia.akt-dziennik-tab td:first-child, .akt-historia.akt-dziennik-tab td:nth-child(2) {
    display: block; padding: 0; border: 0; width: auto; min-width: 0; white-space: normal; }
  .akt-dziennik-tab td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 13px; color: var(--szary); }
  .akt-dziennik-tab td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .akt-dziennik-tab td:nth-child(2), .akt-dziennik-tab td:nth-child(3), .akt-dziennik-tab td:nth-child(4) { grid-column: 1 / -1; }
  .akt-dziennik-tab td:nth-child(4)::before, .akt-dziennik-tab td:nth-child(3)::before { content: attr(data-etykieta) ": ";
    color: var(--szary); font-family: var(--sans); font-size: 13px; }
}
/* ===== /WERSJA-1.0 ===== */