/* rozbitek.pl — system wizualny „Ratunek” (wersja 3, 4.10.2026).
   Pomysl: rozbitek na wyspie i kolo ratunkowe. Granat glebokiej wody jako tlo, pomarancz kola
   ratunkowego jako JEDYNY akcent (guziki, wazne liczby, zaznaczenia), jedna rodzina pisma (Archivo)
   z osia szerokosci: w tytulach rozszerzona i ciezka, w tekscie normalna. Grafika tylko prawdziwa:
   mapa wyspy z plikow swiata i ryby z gry.
   Ksztalty: guziki i pola 6 px, karty i panele 12 px. Ruch: tylko odpowiedz na dzialanie gracza. */
@import url("fonty.css");
@import url("ikony/ikony.css");

:root {
  --tlo: #0a1a2b;
  --tlo-2: #0d2135;
  --panel: #12293f;
  --panel-2: #183453;
  --panel-3: #1f4166;
  --kres: rgba(166, 185, 198, 0.16);
  --kres-2: rgba(166, 185, 198, 0.3);
  --tekst: #eef3f5;
  --tekst-2: #a6b9c6;
  --tekst-3: #8097a8;
  --akcent: #ff6b2c;
  --akcent-2: #ff8550;
  --akcent-tekst: #ff935f;
  --na-akcencie: #1a0a02;
  --ok: #5fd49b;
  --zle: #ff8a73;
  --cien: 0 24px 60px -30px rgba(0, 8, 18, 0.85);
  --r: 6px;
  --r-karta: 12px;
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --szer: 1180px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-motyw="ciemny"]) {
    --tlo: #f2f5f6; --tlo-2: #e7edf0; --panel: #fbfcfc; --panel-2: #e3eaee; --panel-3: #d3dee4;
    --kres: rgba(10, 26, 43, 0.12); --kres-2: rgba(10, 26, 43, 0.24);
    --tekst: #0a1a2b; --tekst-2: #3a5468; --tekst-3: #557083;
    --akcent: #ff6b2c; --akcent-2: #ff8550; --akcent-tekst: #b83e0b;
    --ok: #13804c; --zle: #b23a22; --cien: 0 22px 50px -30px rgba(10, 26, 43, 0.35);
    color-scheme: light;
  }
}
:root[data-motyw="jasny"] {
  --tlo: #f2f5f6; --tlo-2: #e7edf0; --panel: #fbfcfc; --panel-2: #e3eaee; --panel-3: #d3dee4;
  --kres: rgba(10, 26, 43, 0.12); --kres-2: rgba(10, 26, 43, 0.24);
  --tekst: #0a1a2b; --tekst-2: #3a5468; --tekst-3: #557083;
  --akcent: #ff6b2c; --akcent-2: #ff8550; --akcent-tekst: #b83e0b;
  --ok: #13804c; --zle: #b23a22; --cien: 0 22px 50px -30px rgba(10, 26, 43, 0.35);
  color-scheme: light;
}

/* ---------- podstawa */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden przegrywa z kazdym display z klasy */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
body {
  margin: 0; background: var(--tlo); color: var(--tekst); font-family: var(--font);
  font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--akcent); color: var(--na-akcencie); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.do-tresci { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--akcent); color: var(--na-akcencie);
  padding: 10px 16px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.do-tresci:focus { top: 12px; }
.kontener { width: 100%; max-width: var(--szer); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .kontener { padding: 0 18px; } }
.piksel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* typografia: jedna rodzina, szerokosc niesie hierarchie */
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 850; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.0; }
h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; font-stretch: 112%; }
h3 { font-size: 20px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
.wstep { color: var(--tekst-2); font-size: 19px; line-height: 1.55; max-width: 58ch; }
.tekst-2 { color: var(--tekst-2); }
.liczba { font-stretch: 112%; font-weight: 800; }
.mono { font-stretch: 112%; font-weight: 700; letter-spacing: 0.01em; }

/* ---------- guziki */
.guzik {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  font-weight: 700; font-size: 16px; line-height: 1; transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.guzik:active { transform: translateY(1px); }
.guzik .ph { font-size: 19px; }
.guzik-glowny, .guzik-zloty { background: var(--akcent); color: var(--na-akcencie); }
.guzik-glowny:hover, .guzik-zloty:hover { background: var(--akcent-2); }
.guzik-obrys { border-color: var(--kres-2); color: var(--tekst); background: transparent; }
.guzik-obrys:hover { border-color: var(--tekst-2); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.guzik-maly { min-height: 40px; padding: 0 16px; font-size: 15px; }
.guzik[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ikona-guzik { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: var(--r); border: 1.5px solid var(--kres);
  background: transparent; color: var(--tekst-2); cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s; }
.ikona-guzik:hover { color: var(--tekst); border-color: var(--kres-2); }
.ikona-guzik .ph { font-size: 20px; }
.link { color: var(--akcent-tekst); font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-zloty { color: var(--akcent-tekst); font-weight: 700; text-decoration: none; }

/* ---------- naglowek i nawigacja */
.naglowek { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--kres); }
.naglowek .kontener { height: 68px; display: flex; align-items: center; gap: 24px; }
.znak { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; margin-right: auto; font-weight: 900;
  font-stretch: 125%; font-size: 23px; letter-spacing: -0.02em; line-height: 1; }
.znak b { font-weight: inherit; }
.znak i { font-style: normal; color: var(--akcent-tekst); }
.znak span { display: none; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; color: var(--tekst-2); font-weight: 600; font-size: 15.5px; padding: 8px 12px; border-radius: var(--r); }
.menu a:hover { color: var(--tekst); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.menu a[aria-current="page"] { color: var(--tekst); box-shadow: inset 0 -2px 0 var(--akcent); border-radius: 0; }
.naglowek-prawa { display: flex; align-items: center; gap: 8px; }
.stan { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; color: var(--tekst-2); font-size: 14.5px; font-weight: 600; }
.stan i { width: 9px; height: 9px; border-radius: 50%; background: var(--tekst-3); flex: none; }
.stan[data-online="tak"] i { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.koszyk-guzik { position: relative; }
.licznik { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--akcent); color: var(--na-akcencie); font: 800 12px/20px var(--font); text-align: center; }
.licznik[data-ile="0"] { display: none; }
.menu-guzik { display: none; }
@media (max-width: 920px) {
  .menu { display: none; }
  .stan span { display: none; }
  .menu-guzik { display: inline-grid; }
}
/* menu na telefonie: pelnoekranowa lista */
.menu-mobilne { position: fixed; inset: 68px 0 0 0; z-index: 29; background: var(--tlo); padding: 20px 18px 40px;
  display: grid; align-content: start; gap: 4px; border-top: 1px solid var(--kres); }
.menu-mobilne a { text-decoration: none; font-size: 22px; font-weight: 750; font-stretch: 110%; padding: 14px 6px; border-bottom: 1px solid var(--kres); }
.menu-mobilne a[aria-current="page"] { color: var(--akcent-tekst); }
.menu-mobilne .guzik { margin-top: 18px; }

/* ---------- hero z mapa wyspy */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--kres); }
.hero-mapa { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--tlo) 0%, color-mix(in srgb, var(--tlo) 92%, transparent) 38%, color-mix(in srgb, var(--tlo) 45%, transparent) 70%, color-mix(in srgb, var(--tlo) 20%, transparent) 100%),
              linear-gradient(0deg, var(--tlo) 0%, transparent 30%); }
.hero .kontener { min-height: min(64vh, 600px); display: grid; align-content: center; padding-top: 64px; padding-bottom: 80px; }
.hero h1 { max-width: 15ch; }
.hero .wstep { margin-top: 22px; max-width: 46ch; color: var(--tekst); opacity: .86; }
.hero-akcje { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.adres { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 0 18px; border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1.5px solid var(--kres-2); }
.adres strong { font-stretch: 115%; font-weight: 800; font-size: 19px; letter-spacing: 0.01em; }
.adres .guzik { min-height: 38px; padding: 0 14px; }
.hero-fakty { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--tekst-2); font-size: 15px; font-weight: 600; }
.hero-fakty span { display: inline-flex; gap: 8px; align-items: center; }
.hero-fakty .ph { color: var(--akcent-tekst); font-size: 18px; }
@media (max-width: 720px) {
  .hero::before { background: linear-gradient(0deg, var(--tlo) 10%, color-mix(in srgb, var(--tlo) 82%, transparent) 60%, color-mix(in srgb, var(--tlo) 55%, transparent) 100%); }
  .hero .kontener { min-height: 0; padding-top: 120px; padding-bottom: 56px; }
}

/* ---------- sekcje */
.sekcja { padding: 96px 0; }
.sekcja-ciemna { background: var(--tlo-2); border-block: 1px solid var(--kres); }
.naglowek-sekcji { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
@media (max-width: 720px) { .sekcja { padding: 64px 0; } .naglowek-sekcji { margin-bottom: 30px; } }

/* co tu robisz: wiersze z prawdziwymi grafikami */
.cechy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.cecha { grid-column: span 4; background: var(--panel); border: 1px solid var(--kres); border-radius: var(--r-karta);
  padding: 26px; display: grid; gap: 12px; align-content: start; }
.cecha.szeroka { grid-column: span 8; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.cecha .obraz { border-radius: 8px; overflow: hidden; background: var(--tlo-2); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.cecha .obraz img { width: 100%; height: 100%; object-fit: cover; }
.cecha .obraz.ryba img { object-fit: contain; padding: 10px; }
.cecha .ikony-rzad { display: flex; gap: 10px; flex-wrap: wrap; }
.cecha .ikony-rzad img { width: 44px; height: 44px; }
.cecha p { color: var(--tekst-2); font-size: 16px; }
.cecha .liczba-duza { font-size: 44px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--akcent-tekst); }
@media (max-width: 960px) { .cecha, .cecha.szeroka { grid-column: span 12; } }
@media (max-width: 560px) { .cecha.szeroka { grid-template-columns: 1fr; } }

/* mapa wyspy */
.mapa-uklad { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.mapa-obraz { border-radius: var(--r-karta); overflow: hidden; border: 1px solid var(--kres); box-shadow: var(--cien); background: #2c5b8a; }
.mapa-obraz img { width: 100%; }
.mapa-lista { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mapa-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--tekst-2); }
.mapa-lista b { color: var(--tekst); }
.mapa-lista .ph { color: var(--akcent-tekst); font-size: 22px; margin-top: 1px; }
@media (max-width: 900px) { .mapa-uklad { grid-template-columns: 1fr; gap: 32px; } }

/* jak zaczac — prawdziwa kolejnosc, wiec numery */
.kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: krok; margin: 0; padding: 0; list-style: none; }
.kroki li { counter-increment: krok; background: var(--panel); border: 1px solid var(--kres); border-radius: var(--r-karta); padding: 26px; display: grid; gap: 10px; align-content: start; }
.kroki li::before { content: counter(krok); font-size: 40px; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--akcent-tekst); }
.kroki p { color: var(--tekst-2); font-size: 16px; }
.kroki code { font-family: var(--font); font-weight: 750; font-stretch: 110%; background: var(--panel-2); padding: 1px 7px; border-radius: 4px; color: var(--tekst); }
@media (max-width: 860px) { .kroki { grid-template-columns: 1fr; } }

/* zasady uczciwosci */
.zasady-pas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.zasady-pas h2 { font-size: clamp(34px, 4.4vw, 56px); font-stretch: 120%; }
.fakty { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fakty li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--kres); }
.fakty li:last-child { border-bottom: 1px solid var(--kres); }
.fakty .ph { color: var(--akcent-tekst); font-size: 22px; margin-top: 2px; }
.fakty b { display: block; font-size: 17px; }
.fakty span { color: var(--tekst-2); font-size: 16px; }
@media (max-width: 860px) { .zasady-pas { grid-template-columns: 1fr; gap: 26px; } }

/* zaproszenie do sklepu */
.pas-sklepu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 36px; border-radius: var(--r-karta);
  background: linear-gradient(120deg, color-mix(in srgb, var(--akcent) 16%, var(--panel)), var(--panel) 60%); border: 1px solid var(--kres); }
.pas-sklepu .ikony-rzad { display: flex; gap: 8px; margin-top: 18px; }
.pas-sklepu .ikony-rzad img { width: 40px; height: 40px; }
@media (max-width: 720px) { .pas-sklepu { grid-template-columns: 1fr; padding: 26px; } }

/* pytania */
.pytania-uklad { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .pytania-uklad { grid-template-columns: 1fr; gap: 24px; } }
.pytanie { border-bottom: 1px solid var(--kres); }
.pytanie:first-child { border-top: 1px solid var(--kres); }
.pytanie summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; font-weight: 700; font-size: 18px; }
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary .ph { color: var(--tekst-3); flex: none; margin-top: 3px; transition: transform .2s var(--ease); }
.pytanie[open] summary .ph { transform: rotate(45deg); color: var(--akcent-tekst); }
.pytanie p, .pytanie ul { padding: 0 0 22px; margin: 0; color: var(--tekst-2); max-width: 62ch; }
.pytanie ul { padding-left: 20px; }

/* stopka */
.stopka { border-top: 1px solid var(--kres); padding: 56px 0 32px; color: var(--tekst-2); font-size: 15px; background: var(--tlo-2); }
.stopka .kontener { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.stopka h4 { font-size: 14px; color: var(--tekst); margin-bottom: 12px; font-weight: 700; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stopka a { text-decoration: none; }
.stopka a:hover { color: var(--tekst); }
.stopka-opis { margin-top: 12px; max-width: 36ch; }
.adres-tekst { all: unset; cursor: pointer; color: var(--akcent-tekst); font-weight: 750; font-stretch: 112%; }
.adres-tekst:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.drobne { grid-column: 1 / -1; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--kres); color: var(--tekst-3); font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
@media (max-width: 860px) { .stopka .kontener { grid-template-columns: 1fr 1fr; } .stopka .kontener > div:first-child { grid-column: 1 / -1; } }

/* ---------- strona sklepu */
.naglowek-strony { padding: 56px 0 32px; border-bottom: 1px solid var(--kres); }
.naglowek-strony h1 { font-size: clamp(36px, 5vw, 60px); }
.naglowek-strony .wstep { margin-top: 14px; }
.sklep-pasek { position: sticky; top: 68px; z-index: 10; background: color-mix(in srgb, var(--tlo) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--kres); }
.zakladki { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.zakladki::-webkit-scrollbar { display: none; }
.zakladka { flex: none; min-height: 42px; padding: 0 14px; border-radius: var(--r); border: 1.5px solid var(--kres); background: transparent;
  color: var(--tekst-2); font-weight: 650; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.zakladka .ph { font-size: 18px; }
.zakladka small { color: var(--tekst-3); font-weight: 600; font-size: 13px; }
.zakladka:hover { color: var(--tekst); border-color: var(--kres-2); }
.zakladka[aria-selected="true"], .zakladka[aria-pressed="true"] { color: var(--tekst); border-color: var(--akcent); background: color-mix(in srgb, var(--akcent) 12%, transparent); }
.zakladka[aria-selected="true"] small, .zakladka[aria-pressed="true"] small { color: var(--akcent-tekst); }
.flaga { display: none; }
.opis-kategorii { color: var(--tekst-2); margin: 28px 0 22px; max-width: 70ch; min-height: 1.6em; }
.siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 88px; }
@media (max-width: 1000px) { .siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .siatka { grid-template-columns: 1fr; } }
/* produkt (klasy z sklep.js: kupon, kupon-tresc, kupon-grzbiet) */
.kupon { position: relative; display: grid; grid-template-rows: 1fr auto; background: var(--panel); border: 1px solid var(--kres);
  border-radius: var(--r-karta); overflow: hidden; transition: border-color .15s, transform .15s var(--ease); }
.kupon:hover { border-color: var(--kres-2); }
.kupon-tresc { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 22px; align-content: start; }
.kupon .kafel { width: 64px; height: 64px; border-radius: 10px; display: grid; place-items: center; background: var(--tlo-2); border: 1px solid var(--kres); }
.kupon .kafel img { width: 48px; height: 48px; }
.kupon h3 { font-size: 18px; }
.kupon .opis { margin-top: 6px; color: var(--tekst-2); font-size: 15px; line-height: 1.5; }
.kupon .zawartosc { margin-top: 10px; color: var(--tekst-3); font-size: 14px; }
.kupon-grzbiet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--kres); }
.kupon-grzbiet > div { display: grid; gap: 2px; }
.kupon .cena { font-weight: 850; font-stretch: 115%; font-size: 21px; line-height: 1.1; }
.kupon .cena.brak { font-weight: 600; font-stretch: 100%; font-size: 15px; color: var(--tekst-3); }
.kupon .polecane { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--akcent-tekst); }
.kupon.wyrozniony { border-color: color-mix(in srgb, var(--akcent) 55%, var(--kres)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--akcent) 30%, transparent) inset; }
.kupon.niedostepny { opacity: .55; }
.szkielet { min-height: 190px; border-radius: var(--r-karta); background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .szkielet { animation: polysk 1.5s linear infinite; } }
@keyframes polysk { to { background-position: -150% 0; } }
.komunikat-bledu { padding: 22px; border-radius: var(--r-karta); border: 1.5px dashed var(--kres-2); color: var(--tekst-2); grid-column: 1 / -1; }
.sklep-zasady { padding: 0 0 88px; }
.sklep-zasady .fakty { max-width: 860px; }

/* ---------- koszyk */
.szuflada { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.szuflada .zaslona { position: absolute; inset: 0; background: rgba(3, 10, 18, .6); opacity: 0; transition: opacity .25s; }
.szuflada .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--tlo-2); border-left: 1px solid var(--kres);
  box-shadow: var(--cien); display: grid; grid-template-rows: auto 1fr auto; transform: translateX(100%); transition: transform .32s var(--ease); }
.szuflada[data-otwarta="tak"] { pointer-events: auto; }
.szuflada[data-otwarta="tak"] .zaslona { opacity: 1; }
.szuflada[data-otwarta="tak"] .panel { transform: none; }
.panel-gora { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--kres); }
.panel-gora h2 { font-size: 26px; }
.panel-srodek { overflow-y: auto; padding: 4px 22px; }
.panel-dol { padding: 18px 22px 22px; border-top: 1px solid var(--kres); display: grid; gap: 16px; }
.pozycja { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kres); }
.pozycja .kafel { width: 50px; height: 50px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--kres); }
.pozycja .kafel img { width: 36px; height: 36px; }
.pozycja .kafel .ph { font-size: 22px; color: var(--tekst-2); }
.pozycja b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.pozycja small { color: var(--tekst-3); font-size: 13.5px; }
.liczydlo { display: inline-flex; align-items: center; border: 1.5px solid var(--kres); border-radius: var(--r); }
.liczydlo button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--tekst-2); border-radius: var(--r); }
.liczydlo button:hover { color: var(--tekst); }
.liczydlo span { min-width: 22px; text-align: center; font-weight: 750; }
.pusty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 12px; color: var(--tekst-2); }
.pusty .ph { font-size: 38px; color: var(--tekst-3); }
.pole { display: grid; gap: 7px; }
.pole label { font-size: 15px; font-weight: 700; }
.pole input[type="text"], .pole input[type="password"], .pole input[type="email"] { min-height: 48px; padding: 0 14px; border-radius: var(--r);
  border: 1.5px solid var(--kres-2); background: var(--tlo); color: var(--tekst); font-size: 17px; }
.pole input::placeholder { color: var(--tekst-3); }
.pole input:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 25%, transparent); }
.pole input[aria-invalid="true"] { border-color: var(--zle); }
.pole .podpowiedz { font-size: 14px; color: var(--tekst-3); min-height: 1.5em; display: flex; gap: 6px; align-items: center; }
.pole .podpowiedz[data-stan="ok"] { color: var(--ok); }
.pole .podpowiedz[data-stan="zle"] { color: var(--zle); }
.zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--tekst-2); }
.zgoda input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--akcent); flex: none; }
.suma { display: flex; justify-content: space-between; align-items: baseline; }
.suma span { color: var(--tekst-2); }
.suma b { font-weight: 850; font-stretch: 115%; font-size: 22px; }
.blad-formularza { color: var(--zle); font-size: 15px; }
.blad-formularza:empty { display: none; }

/* dymek */
.dymek { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 140%); background: var(--tekst); color: var(--tlo);
  padding: 12px 18px; border-radius: var(--r); font-weight: 700; font-size: 15px; display: flex; gap: 10px; align-items: center;
  box-shadow: var(--cien); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .2s, visibility 0s linear .3s; }
.dymek[data-widoczny="tak"] { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .2s; }

/* ---------- zamowienie */
.zamowienie { padding: 56px 0 96px; }
.zamowienie .kontener { max-width: 860px; }
.zam-naglowek { display: grid; gap: 10px; margin-bottom: 32px; }
.zam-naglowek h1 { font-size: clamp(34px, 5vw, 54px); }
.zam-naglowek .numer { color: var(--tekst-3); font-size: 15px; font-weight: 600; }
.postep { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 34px; }
.krok { display: grid; justify-items: start; gap: 10px; position: relative; color: var(--tekst-3); font-size: 15px; font-weight: 700; }
.krok::before { content: ""; position: absolute; top: 18px; left: 40px; right: 0; height: 2px; background: var(--kres-2); }
.krok:last-child::before { display: none; }
.krok .krag { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--kres-2); background: var(--tlo); position: relative; }
.krok[data-stan="zrobiony"], .krok[data-stan="teraz"] { color: var(--tekst); }
.krok[data-stan="zrobiony"] .krag { border-color: var(--akcent); background: var(--akcent); color: var(--na-akcencie); }
.krok[data-stan="zrobiony"]::before { background: var(--akcent); }
.krok[data-stan="teraz"] .krag { border-color: var(--akcent); color: var(--akcent-tekst); }
.lista-poz { border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); padding: 4px 22px; }
.lista-poz .pozycja:last-child { border-bottom: 0; }
.znacznik { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--r);
  border: 1.5px solid var(--kres-2); color: var(--tekst-2); white-space: nowrap; }
.znacznik[data-s="wydana"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.znacznik[data-s="blad"] { color: var(--zle); border-color: color-mix(in srgb, var(--zle) 50%, transparent); }
.znacznik[data-s="czeka_na_gracza"], .znacznik[data-s="do_wydania"] { color: var(--akcent-tekst); border-color: color-mix(in srgb, var(--akcent) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .znacznik[data-s="do_wydania"] .ph { animation: krec 1.1s linear infinite; } }
@keyframes krec { to { transform: rotate(360deg); } }
.platnosc-test { margin-top: 26px; padding: 22px; border-radius: var(--r-karta); border: 1.5px dashed color-mix(in srgb, var(--akcent) 60%, transparent); display: grid; gap: 14px; }
.platnosc-test h3 { display: flex; gap: 10px; align-items: center; }
.platnosc-test p { color: var(--tekst-2); font-size: 16px; }
.platnosc-test .rzad { display: flex; gap: 12px; flex-wrap: wrap; align-items: start; }
.platnosc-test .pole { flex: 1 1 240px; }
.platnosc-test .rzad > .guzik { margin-top: 29px; }
.info-gracz { margin-top: 26px; color: var(--tekst-2); font-size: 15.5px; display: flex; gap: 10px; align-items: flex-start; }
.info-gracz .ph { color: var(--akcent-tekst); font-size: 20px; margin-top: 2px; }

/* ---------- konto */
.logowanie { padding: 64px 0 96px; }
.logowanie .kontener { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.logowanie h1 { font-size: clamp(36px, 5vw, 58px); max-width: 14ch; }
.logowanie .wstep { margin-top: 18px; }
.korzysci { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; color: var(--tekst-2); }
.korzysci li { display: flex; gap: 12px; align-items: center; }
.korzysci .ph { font-size: 22px; color: var(--akcent-tekst); }
.karta-logowania { padding: 26px; border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); box-shadow: var(--cien); display: grid; gap: 20px; }
.zakladki-pelne { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
.zakladki-pelne .zakladka { justify-content: center; }
.formularz { display: grid; gap: 18px; }
.kroki-kodu { margin: 0; padding-left: 20px; color: var(--tekst-2); display: grid; gap: 6px; font-size: 16px; }
.pole-kodu { font-weight: 800 !important; font-stretch: 118%; letter-spacing: 0.14em; font-size: 24px !important; text-transform: uppercase; }
@media (max-width: 860px) { .logowanie { padding: 40px 0 64px; } .logowanie .kontener { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.panel-konta { padding: 48px 0 96px; }
.profil { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.profil h1 { font-size: clamp(38px, 5.6vw, 64px); overflow-wrap: anywhere; }
.profil-meta { display: flex; gap: 12px; align-items: center; margin-top: 12px; color: var(--tekst-2); flex-wrap: wrap; }
.profil-meta .znacznik { color: var(--akcent-tekst); border-color: color-mix(in srgb, var(--akcent) 45%, transparent); }
.profil-meta .znacznik:empty { display: none; }
#zakladki-konta { margin-bottom: 22px; padding: 0; }
.widok { margin-top: 4px; }
.staty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1020px) { .staty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .staty { grid-template-columns: 1fr; } }
.kafel-stat { padding: 20px 22px; background: var(--panel); border: 1px solid var(--kres); border-radius: var(--r-karta); display: grid; gap: 4px; align-content: start; min-height: 112px; }
.kafel-stat.szeroki { grid-column: span 2; border-color: color-mix(in srgb, var(--akcent) 45%, var(--kres)); }
@media (max-width: 520px) { .kafel-stat.szeroki { grid-column: auto; } }
.kafel-stat .etykieta { display: flex; gap: 8px; align-items: center; color: var(--tekst-2); font-size: 14.5px; font-weight: 600; }
.kafel-stat .etykieta .ph { color: var(--akcent-tekst); font-size: 18px; }
.kafel-stat .wartosc { font-size: 30px; font-weight: 850; font-stretch: 115%; line-height: 1.1; overflow-wrap: anywhere; margin-top: 4px; }
.kafel-stat .opis { color: var(--tekst-3); font-size: 14.5px; }
.kafel-stat.szkielet { min-height: 112px; }
.kolekcja-gora { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kolekcja-licznik { font-size: 24px; font-weight: 800; font-stretch: 112%; }
.filtry { display: flex; gap: 6px; flex-wrap: wrap; }
.kolekcja { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ryba-karta { position: relative; padding: 14px 16px 16px; border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); display: grid; gap: 4px; min-height: 184px; align-content: start; }
.ryba-foto { height: 90px; display: grid; place-items: center; margin-bottom: 6px; }
.ryba-foto img { max-height: 90px; width: auto; }
.ryba-karta h3 { font-size: 16.5px; }
.ryba-meta { color: var(--tekst-2); font-size: 14px; }
.ryba-karta.niezlowiona { background: var(--tlo-2); }
.ryba-karta.niezlowiona img { filter: brightness(0) opacity(.3); }
.ryba-karta.niezlowiona h3 { color: var(--tekst-2); }
.ryba-karta.szkielet { background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .kafel-stat.szkielet, .ryba-karta.szkielet { animation: polysk 1.5s linear infinite; } }
.medal { position: absolute; top: 12px; right: 12px; display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-weight: 700; }
.medal-braz { color: #d6955e; } .medal-srebro { color: #bcc9cf; } .medal-zloto { color: #f1c467; } .medal-diament { color: #86e1ee; }
:root[data-motyw="jasny"] .medal-braz { color: #8c5223; } :root[data-motyw="jasny"] .medal-srebro { color: #57656b; } :root[data-motyw="jasny"] .medal-zloto { color: #8a5a00; } :root[data-motyw="jasny"] .medal-diament { color: #0f7f90; }
@media (prefers-color-scheme: light) { :root:not([data-motyw="ciemny"]) .medal-braz { color: #8c5223; } :root:not([data-motyw="ciemny"]) .medal-srebro { color: #57656b; } :root:not([data-motyw="ciemny"]) .medal-zloto { color: #8a5a00; } :root:not([data-motyw="ciemny"]) .medal-diament { color: #0f7f90; } }
.pusty-tekst { color: var(--tekst-2); grid-column: 1 / -1; padding: 28px 0; }
.wyglad-uklad { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .wyglad-uklad { grid-template-columns: 1fr; } }
.wyglad-kupony { display: grid; gap: 14px; }
.wyglad-kupony .kafel-stat { min-height: 0; }
.wyglad-opcje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .wyglad-opcje { grid-template-columns: 1fr; } }
.opcja { padding: 22px; border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); display: grid; gap: 14px; align-content: start; }
.opcja h3 { display: flex; gap: 10px; align-items: center; font-size: 18px; }
.opcja h3 .ph { color: var(--akcent-tekst); }
.opcja > p { color: var(--tekst-2); font-size: 15.5px; }
.opcja .guzik { justify-self: start; }
.pole input[type="file"] { font-size: 15px; color: var(--tekst-2); padding: 10px; border-radius: var(--r); border: 1.5px dashed var(--kres-2); background: var(--tlo); }
.warianty { border: 0; margin: 0; padding: 0; display: flex; gap: 18px; font-size: 15.5px; color: var(--tekst-2); flex-wrap: wrap; }
.warianty legend { font-weight: 700; color: var(--tekst); font-size: 15px; margin-bottom: 6px; padding: 0; }
.warianty label { display: inline-flex; gap: 8px; align-items: center; }
.warianty input { accent-color: var(--akcent); }
.wyglad-stan { margin-top: 18px; min-height: 1.6em; color: var(--tekst-2); font-weight: 600; }
.pozycja-link { text-decoration: none; color: inherit; }
.pozycja-link:hover b { color: var(--akcent-tekst); }

/* ---------- strony tekstowe (regulamin, prywatnosc, 404) */
.tekst-strony { padding: 56px 0 96px; }
.tekst-strony .kontener { max-width: 780px; }
.tekst-strony h1 { font-size: clamp(36px, 5vw, 56px); }
.tekst-strony .wstep { margin-top: 16px; }
.proza { margin-top: 36px; color: var(--tekst-2); }
.proza h2 { font-size: 24px; font-stretch: 108%; color: var(--tekst); margin: 40px 0 12px; }
.proza h3 { font-size: 18px; color: var(--tekst); margin: 24px 0 8px; }
.proza p, .proza li { max-width: 68ch; }
.proza p + p { margin-top: 12px; }
.proza ol, .proza ul { padding-left: 22px; display: grid; gap: 8px; margin: 12px 0; }
.proza strong { color: var(--tekst); }
.proza .uzupelnij { background: color-mix(in srgb, var(--akcent) 20%, transparent); color: var(--tekst); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.proza .aktualizacja { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--kres); font-size: 14px; color: var(--tekst-3); }
.spis { margin-top: 28px; padding: 18px 22px; border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); }
.spis ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.spis a { text-decoration: none; color: var(--tekst-2); }
.spis a:hover { color: var(--akcent-tekst); }

/* ---------- strona marki (wewnetrzna) */
.marka-sekcja { padding: 52px 0; border-top: 1px solid var(--kres); }
.marka-sekcja > .kontener { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
.marka-sekcja h2 { font-size: 28px; }
.opis-boku { color: var(--tekst-2); font-size: 16px; margin-top: 10px; }
@media (max-width: 860px) { .marka-sekcja > .kontener { grid-template-columns: 1fr; gap: 22px; } }
.probki { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.probka { border-radius: var(--r-karta); overflow: hidden; background: var(--panel); border: 1px solid var(--kres); }
.probka .kolor { height: 86px; }
.probka > div:last-child { padding: 12px 14px; display: grid; gap: 2px; font-size: 14px; }
.probka code { font-family: var(--font); font-weight: 600; color: var(--tekst-2); }
.probka span { color: var(--tekst-3); }
.znak-plansza { border-radius: var(--r-karta); padding: 56px 32px; display: grid; place-items: center; border: 1px solid var(--kres); }
.znak-plansza.ciemna { background: #0a1a2b; color: #eef3f5; }
.znak-plansza.jasna { background: #f2f5f6; color: #0a1a2b; }
.znak-duzy { font-weight: 900; font-stretch: 125%; font-size: clamp(54px, 9vw, 104px); letter-spacing: -0.03em; line-height: 1; }
.znak-plansza.ciemna .znak-duzy i { font-style: normal; color: #ff935f; }
.znak-plansza.jasna .znak-duzy i { font-style: normal; color: #b83e0b; }
.typo-wiersz { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--kres); }
.typo-wiersz small { color: var(--tekst-3); font-size: 14px; }
@media (max-width: 640px) { .typo-wiersz { grid-template-columns: 1fr; gap: 6px; } }
.zasady-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .zasady-lista { grid-template-columns: 1fr; } }
.zasada { padding: 18px 20px; border-radius: var(--r-karta); background: var(--panel); border: 1px solid var(--kres); display: grid; gap: 6px; font-size: 16px; }
.zasada b { display: flex; align-items: center; gap: 8px; }
.zasada.tak b .ph { color: var(--ok); }
.zasada.nie b .ph { color: var(--zle); }
.zasada span { color: var(--tekst-2); }
.tabela-gra { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabela-gra th { text-align: left; font-weight: 700; color: var(--tekst-2); padding: 0 12px 10px 0; font-size: 14px; }
.tabela-gra td { padding: 12px 12px 12px 0; border-top: 1px solid var(--kres); }
.tabela-gra .kropka { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 8px; }
.tabela-gra code { font-family: var(--font); font-weight: 700; }

/* ---------- dopiski do strony glownej */
.hero-fakty { list-style: none; padding: 0; }
.hero-fakty li { display: inline-flex; gap: 8px; align-items: center; }
.hero-fakty .ph { color: var(--akcent-tekst); font-size: 18px; }
.hero-mapa.piksel { image-rendering: pixelated; }
.mapa-obraz { margin: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.mapa-ramka { position: relative; border-radius: var(--r-karta); overflow: hidden; border: 1px solid var(--kres); box-shadow: var(--cien); background: #2c5b8a; }
.mapa-ramka img { width: 100%; }
.mapa-obraz figcaption { margin-top: 10px; color: var(--tekst-3); font-size: 14px; }
/* znaczniki na mapie: numer klucza legendy obok, polozenie z pikseli renderu (1232 x 1520) */
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akcent); color: var(--na-akcencie); font-weight: 850; font-size: 15px; line-height: 1;
  box-shadow: 0 0 0 3px rgba(10, 26, 43, 0.85), 0 6px 14px rgba(0, 0, 0, 0.45); }
.pin-1 { left: 67.9%; top: 70.2%; }
.pin-2 { left: 48.9%; top: 68.4%; }
.pin-3 { left: 39%; top: 52.6%; }
.pin-4 { left: 12.2%; top: 40.8%; }
.pin-5 { left: 61.7%; top: 21.1%; }
.pin-6 { left: 84.4%; top: 37.5%; }
.legenda { list-style: none; counter-reset: pin; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.legenda li { counter-increment: pin; position: relative; padding: 2px 0 0 44px; min-height: 30px; color: var(--tekst-2); }
.legenda li::before { content: counter(pin); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akcent); color: var(--na-akcencie); font-weight: 850; font-size: 15px; }
.legenda b { color: var(--tekst); }
.mapa-dopisek { margin-top: 22px; font-size: 16px; }
.fakty li > div { display: grid; gap: 2px; }
.pytanie code, .kroki code { font-family: var(--font); font-weight: 750; font-stretch: 110%; background: var(--panel-2); padding: 1px 7px; border-radius: 4px; color: var(--tekst); white-space: nowrap; }
.cecha h3 { font-size: 21px; }
body.bez-przewijania { overflow: hidden; }
:not(.naglowek-sekcji) > h2 + .wstep { margin-top: 16px; }
.cecha.szeroka > div:first-child { display: grid; gap: 12px; }
@media (max-width: 560px) { .cecha .obraz.ryba { aspect-ratio: 2 / 1; } }

/* ---------- strony prawne */
.uwaga { margin-top: 28px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 18px 20px; border-radius: var(--r-karta);
  border: 1.5px solid color-mix(in srgb, var(--akcent) 50%, transparent); background: color-mix(in srgb, var(--akcent) 8%, transparent); color: var(--tekst-2); font-size: 16px; }
.uwaga .ph { color: var(--akcent-tekst); font-size: 22px; }
.spis b { color: var(--tekst); font-size: 15px; }
.proza code, .kroki-kodu code { font-family: var(--font); font-weight: 750; font-stretch: 110%; background: var(--panel-2); padding: 1px 7px; border-radius: 4px; color: var(--tekst); }
.tabela-danych { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 15.5px; }
.tabela-danych th { text-align: left; font-weight: 700; color: var(--tekst); padding: 10px 14px 10px 0; border-bottom: 1.5px solid var(--kres-2); font-size: 14.5px; }
.tabela-danych td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--kres); vertical-align: top; }
.tabela-danych td:first-child { color: var(--tekst); font-weight: 600; width: 30%; }
.tabela-danych td:last-child { width: 26%; }
@media (max-width: 640px) {
  .tabela-danych thead { display: none; }
  .tabela-danych tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--kres); }
  .tabela-danych td { padding: 0; border: 0; width: auto !important; }
  .tabela-danych td:last-child { color: var(--tekst-3); font-size: 14.5px; }
}
.tekst-strony .hero-akcje { margin-top: 30px; }
.fakty-kroki { counter-reset: none; }
#zgoda-info b { color: var(--tekst); }

/* ---------- przewodnik marki */
.znaki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.znak-ikona { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; color: var(--tekst-2); font-size: 16px; }
.znak-ikona img { border-radius: 20px; }
@media (max-width: 640px) { .znaki { grid-template-columns: 1fr; } }
.znak-plansza .znak-duzy { font-size: clamp(40px, 5.4vw, 66px); }
.proza-marka { margin-top: 0; }
.dopisek-kolory { grid-column: 2; margin-top: 18px; max-width: 70ch; }
@media (max-width: 860px) { .dopisek-kolory { grid-column: auto; } }
.k-granat { background: #0a1a2b; } .k-panel { background: #12293f; } .k-pomarancz { background: #ff6b2c; }
.k-piana { background: #eef3f5; } .k-mgla { background: #a6b9c6; } .k-brzeg { background: #5fd49b; } .k-sztorm { background: #ff8a73; }
.k-zloto { background: #ebb54a; } .k-morze { background: #5c93c9; }
.probka .kolor { border-bottom: 1px solid var(--kres); }
.typo-h1 { font-size: 52px; font-weight: 900; font-stretch: 118%; line-height: 1; letter-spacing: -0.02em; }
.typo-h2 { font-size: 34px; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.typo-h3 { font-size: 21px; font-weight: 700; }
.typo-liczba { font-size: 22px; font-weight: 800; font-stretch: 115%; }
.tabela-gra { grid-column: 2; }
@media (max-width: 860px) { .tabela-gra { grid-column: auto; } .typo-h1 { font-size: 40px; } }
.marka-sekcja code { font-family: var(--font); font-weight: 700; }
/* stopka zawsze na dole, takze na krotkich stronach (404, logowanie) */
/* siatka, nie flex: element flex ma min-width: auto i szeroka tresc rozpychala strone w bok */
body { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.stopka .znak { color: var(--tekst); }

/* ---------- postac 3D na koncie (postac3d.js) */
.profil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.postac-ramka { margin: 0; width: 220px; height: 290px; border-radius: var(--r-karta); border: 1px solid var(--kres);
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--akcent) 14%, transparent), transparent 60%), var(--panel);
  overflow: hidden; }
.postac-podpis { margin-top: 10px; color: var(--tekst-3); font-size: 14.5px; }
.postac-podpis:empty { display: none; }
@media (max-width: 720px) {
  .profil { grid-template-columns: 1fr auto; }
  .postac-ramka { grid-column: 1 / -1; justify-self: center; }
}
.p3-scena { position: relative; width: 100%; height: 100%; perspective: 900px; perspective-origin: 50% 40%; cursor: grab; touch-action: pan-y; user-select: none; }
.p3-scena:active { cursor: grabbing; }
.p3-model { position: absolute; left: 50%; top: 89%; width: 0; height: 0; transform-style: preserve-3d; }
.p3-czesc, .p3-bryla { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.p3-reka-p, .p3-reka-l, .p3-noga-p, .p3-noga-l { transform-origin: 50% 0; }
.p3-sciana { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
.p3-bok { filter: brightness(0.82); }
.p3-gora { filter: brightness(1.08); }
.p3-dol { filter: brightness(0.62); }
.p3-tyl { filter: brightness(0.9); }

/* ---------- zdjecia z polowow w kolekcji */
.ryba-zdjecia { margin-top: 10px; justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px;
  border-radius: var(--r); border: 1.5px solid color-mix(in srgb, var(--akcent) 50%, transparent); background: color-mix(in srgb, var(--akcent) 10%, transparent);
  color: var(--akcent-tekst); font-weight: 700; font-size: 14px; cursor: pointer; }
.ryba-zdjecia:hover { background: color-mix(in srgb, var(--akcent) 18%, transparent); }
.ryba-karta.ze-zdjeciami { border-color: color-mix(in srgb, var(--akcent) 35%, var(--kres)); }
.galeria { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--kres-2); border-radius: var(--r-karta);
  background: var(--tlo-2); color: var(--tekst); box-shadow: var(--cien); overflow: auto; }
.galeria::backdrop { background: rgba(3, 10, 18, 0.75); }
.galeria-gora { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--kres); }
.galeria-gora h2 { font-size: 24px; }
.galeria-duze { width: 100%; height: auto; background: var(--tlo); display: block; }
.galeria-dol { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.galeria-podpis { color: var(--tekst-2); font-weight: 600; }
.galeria-miniatury { display: flex; gap: 8px; padding: 0 18px 18px; overflow-x: auto; }
.galeria-miniatura { flex: none; width: 128px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .7; }
.galeria-miniatura img { width: 100%; height: auto; display: block; }
.galeria-miniatura[aria-current="true"], .galeria-miniatura:hover { opacity: 1; border-color: var(--akcent); }

/* ---------- sklep na stronie glownej: karuzela oferty */
.menu .menu-sklep, .menu-mobilne .menu-sklep { color: var(--akcent-tekst); display: inline-flex; align-items: center; gap: 7px; font-weight: 750; }
.menu .menu-sklep { border: 1.5px solid color-mix(in srgb, var(--akcent) 55%, transparent); border-radius: var(--r); margin-left: 6px; }
.menu .menu-sklep:hover { background: color-mix(in srgb, var(--akcent) 14%, transparent); color: var(--akcent-tekst); }
.menu .menu-sklep[aria-current="page"] { box-shadow: none; border-radius: var(--r); background: color-mix(in srgb, var(--akcent) 16%, transparent); }
.guzik-sklep { border-color: var(--akcent); color: var(--tekst); background: color-mix(in srgb, var(--tlo) 55%, transparent); }
.guzik-sklep:hover { background: color-mix(in srgb, var(--akcent) 18%, var(--tlo)); }
.guzik-sklep .ph { color: var(--akcent-tekst); }
.hero-link { margin-top: 18px; font-size: 15.5px; }
.sklep-glowna { padding-top: 72px; padding-bottom: 72px; overflow: hidden;
  background: radial-gradient(90% 60% at 85% 0%, color-mix(in srgb, var(--akcent) 10%, transparent), transparent 70%); }
.oferta-naglowek { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.oferta-naglowek h2 { font-size: clamp(34px, 4.6vw, 56px); font-stretch: 120%; }
.oferta-naglowek .wstep { margin-top: 14px; max-width: 56ch; }
.oferta-akcje { display: flex; gap: 12px; align-items: center; }
.karuzela-guziki { display: flex; gap: 8px; }
.karuzela { position: relative; }
.karuzela::before, .karuzela::after { content: ""; position: absolute; top: 0; bottom: 18px; width: max(16px, calc((100vw - var(--szer)) / 2)); z-index: 2; pointer-events: none; }
.karuzela::before { left: 0; background: linear-gradient(90deg, var(--tlo), transparent); }
.karuzela::after { right: 0; background: linear-gradient(270deg, var(--tlo), transparent); }
.karuzela-tor { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 6px max(18px, calc((100vw - var(--szer)) / 2 + 28px)) 18px; scroll-padding: 0 max(18px, calc((100vw - var(--szer)) / 2 + 28px));
  scrollbar-width: thin; scrollbar-color: var(--kres-2) transparent; }
.karuzela-tor:focus-visible { outline-offset: -3px; }
.oferta-karta { --barwa: #ff6b2c; flex: 0 0 250px; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--kres); border-radius: var(--r-karta); overflow: hidden; transition: transform .2s var(--ease), border-color .2s; }
.oferta-karta:hover, .oferta-karta:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--barwa) 60%, var(--kres)); }
.oferta-karta.polecana { border-color: color-mix(in srgb, var(--akcent) 45%, var(--kres)); }
.oferta-scena { position: relative; height: 190px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--barwa) 42%, transparent), transparent 72%),
              linear-gradient(180deg, color-mix(in srgb, var(--barwa) 10%, var(--tlo-2)), var(--tlo-2)); }
.oferta-scena::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--barwa) 55%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .25; }
.oferta-scena img { width: 128px; height: 128px; position: relative; z-index: 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); transition: transform .35s var(--ease); }
.oferta-karta:hover .oferta-scena img, .oferta-karta:focus-visible .oferta-scena img { transform: translateY(-6px) scale(1.06); }
.oferta-polecane { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 12.5px; font-weight: 800; padding: 4px 9px; border-radius: 5px;
  background: var(--akcent); color: var(--na-akcencie); }
.oferta-tresc { padding: 16px 18px 18px; display: grid; gap: 6px; grid-template-rows: auto auto 1fr auto; }
.oferta-kategoria { font-size: 13px; font-weight: 700; color: var(--tekst-3); }
.oferta-tresc h3 { font-size: 18px; }
.oferta-opis { color: var(--tekst-2); font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oferta-dol { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--kres); }
.oferta-cena { font-weight: 850; font-stretch: 112%; }
.oferta-cena.brak { font-weight: 600; font-stretch: 100%; color: var(--tekst-3); font-size: 14px; }
.oferta-zobacz { font-size: 14px; font-weight: 750; color: var(--akcent-tekst); }
.oferta-uczciwie { margin-top: 26px; display: flex; gap: 10px; align-items: center; color: var(--tekst-2); font-size: 15.5px; }
.oferta-uczciwie .ph { color: var(--akcent-tekst); font-size: 20px; flex: none; }
@media (max-width: 640px) {
  .oferta-karta { flex-basis: 78vw; }
  .karuzela-guziki { display: none; }
  .oferta-akcje { width: 100%; }
  .oferta-akcje .guzik { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .karuzela-tor { scroll-behavior: auto; } }
/* produkt wskazany z karuzeli (/sklep#kat=…&p=…) */
.kupon.wskazany { border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 35%, transparent); }
/* koszyk-link do sklepu w naglowku tylko na telefonie — tam menu jest schowane */
.sklep-ikona { display: none; }
@media (max-width: 920px) { .sklep-ikona { display: inline-grid; color: var(--akcent-tekst); border-color: color-mix(in srgb, var(--akcent) 55%, transparent); } }

/* ---------- poradnik (/poradnik, tylko dla zalogowanych) ----------
   Tresc przychodzi z /api/poradnik jako fragment z docs/dokumentacja/sklad.py; klasy te same co
   w samodzielnym dokumencie, tylko zawezone do .poradnik, zeby nie ruszaly reszty strony. */
.poradnik { padding: 40px 0 96px; }
.poradnik-uklad { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.poradnik-spis { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 16px; }
.poradnik-spis-tytul { color: var(--tekst-3); font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.poradnik-spis ol { margin: 0; padding: 0; list-style: none; counter-reset: dz; display: grid; gap: 2px; }
.poradnik-spis li { counter-increment: dz; }
.poradnik-spis a { display: grid; grid-template-columns: 26px 1fr; text-decoration: none; color: var(--tekst-2); padding: 6px 8px; border-radius: var(--r); font-weight: 600; font-size: 15px; }
.poradnik-spis a::before { content: counter(dz); color: var(--tekst-3); font-weight: 800; font-stretch: 112%; }
.poradnik-spis a:hover { background: var(--panel-2); color: var(--tekst); }
.poradnik-spis a[aria-current] { background: var(--panel); color: var(--tekst); box-shadow: inset 3px 0 0 var(--akcent); }
.poradnik-glowna { min-width: 0; }
.poradnik-naglowek { padding-bottom: 24px; border-bottom: 1px solid var(--kres); }
.poradnik-naglowek h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 850; font-stretch: 118%; letter-spacing: -.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
.poradnik-naglowek .wstep { color: var(--tekst-2); margin: 12px 0 0; max-width: 62ch; }
.poradnik-stan { color: var(--tekst-2); margin: 32px 0; }
.poradnik-zaloguj { margin: 32px 0; padding: 28px; background: var(--panel); border: 1px solid var(--kres); border-left: 4px solid var(--akcent); border-radius: 0 var(--r-karta) var(--r-karta) 0; max-width: 640px; }
.poradnik-zaloguj h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; font-stretch: 110%; }
.poradnik-zaloguj p { color: var(--tekst-2); margin: 0 0 18px; }
.poradnik-tresc code { font-family: var(--font); font-weight: 650; font-stretch: 108%; background: var(--panel-2); padding: 0 5px; border-radius: 4px; font-size: .92em; overflow-wrap: anywhere; }
.poradnik-tresc a { color: var(--akcent-tekst); }
.poradnik-tresc section { padding-top: 40px; scroll-margin-top: 76px; }
.poradnik-tresc section > h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 820; font-stretch: 114%; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 18px; padding-top: 24px; border-top: 2px solid var(--tekst); text-wrap: balance; }
.poradnik-tresc h3 { font-size: 22px; font-weight: 760; font-stretch: 106%; margin: 34px 0 10px; line-height: 1.25; }
.poradnik-tresc h3 small { font-size: 14px; color: var(--tekst-3); font-weight: 600; font-stretch: 100%; margin-left: 6px; }
.poradnik-tresc h4 { font-size: 18px; font-weight: 720; margin: 26px 0 8px; }
.poradnik-tresc h5 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; color: var(--tekst-2); }
.poradnik-tresc p, .poradnik-tresc li { max-width: 74ch; line-height: 1.6; }
.poradnik-tresc ul, .poradnik-tresc ol { padding-left: 22px; }
.poradnik-tresc li + li { margin-top: 4px; }
.poradnik-tresc .lead { font-size: 19px; line-height: 1.55; }
.poradnik-tresc .fakty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.poradnik-tresc .fakty div { background: var(--panel); border: 1px solid var(--kres); border-radius: var(--r-karta); padding: 14px 16px; display: grid; gap: 2px; }
.poradnik-tresc .fakty b { font-size: 32px; font-weight: 900; font-stretch: 120%; color: var(--akcent-tekst); line-height: 1.05; }
.poradnik-tresc .fakty span { color: var(--tekst-2); font-size: 14.5px; }
.poradnik-tresc .uwaga { border-left: 4px solid var(--akcent); background: var(--panel); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0; max-width: 80ch; color: var(--tekst-2); }
.poradnik-tresc .uwaga b { color: var(--tekst); }
.poradnik-tresc .tabela { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--kres); border-radius: var(--r-karta); background: var(--panel); }
.poradnik-tresc table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.poradnik-tresc th { text-align: left; font-weight: 700; color: var(--tekst-2); background: var(--panel-2); padding: 9px 12px; white-space: nowrap; }
.poradnik-tresc td { padding: 9px 12px; border-top: 1px solid var(--kres); vertical-align: top; }
.poradnik-tresc td.num { font-weight: 800; font-stretch: 112%; text-align: right; }
.poradnik-tresc td.nag { white-space: nowrap; font-weight: 600; }
.poradnik-tresc .male { font-size: 13.5px; color: var(--tekst-3); margin-top: 2px; }
.poradnik-tresc .znacznik { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--kres-2); color: var(--tekst-3); vertical-align: 2px; margin-left: 4px; }
.poradnik-tresc .znacznik.glowna { border-color: var(--akcent); color: var(--akcent-tekst); }
.poradnik-tresc .opis-rozdzialu { color: var(--tekst-2); }
/* wstep dzialu (audyt 4.10): krotko, czego dzial dotyczy — przed tabelami i szczegolami */
.poradnik-tresc .opis-dzialu { font-size: 18px; line-height: 1.55; color: var(--tekst-2); max-width: 70ch; margin: 0 0 18px; }
.poradnik-tresc table.misje td:nth-child(2) { min-width: 240px; }
.poradnik-tresc table.misje td:nth-child(4) { min-width: 260px; }
.poradnik-tresc .szukaj { display: flex; gap: 10px; align-items: center; font-weight: 600; margin: 14px 0; flex-wrap: wrap; }
.poradnik-tresc .szukaj input { font: inherit; padding: 8px 12px; border-radius: var(--r); border: 1.5px solid var(--kres-2); background: var(--panel); color: var(--tekst); min-width: 0; width: min(340px, 100%); }
.poradnik-tresc .szukaj input:focus { outline: none; border-color: var(--akcent); }
.poradnik-tresc hr { border: 0; border-top: 1px solid var(--kres); margin: 24px 0; }
.poradnik-tresc blockquote { margin: 14px 0; padding: 4px 16px; border-left: 3px solid var(--kres-2); color: var(--tekst-2); }
.poradnik-tresc #administracja > h2 { border-top-color: var(--akcent); }
@media (max-width: 960px) {
  .poradnik-uklad { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .poradnik-spis { position: static; max-height: none; padding: 0 0 4px; margin-bottom: 8px; border-bottom: 1px solid var(--kres); }
  .poradnik-spis ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .poradnik-tresc .fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .poradnik-spis ol { grid-template-columns: minmax(0, 1fr); } }

/* ---------- teksty po audycie 4.10 ----------
   H1 strony glownej to teraz zdanie z kategoria gry („Rozbudowany symulator wedkarstwa…”), a nie
   krotkie haslo: mniejszy stopien i szersza miara, zeby schodzil w trzech liniach zamiast pieciu. */
.hero h1 { font-size: clamp(36px, 4.7vw, 64px); max-width: 19ch; }
.hero .wstep { max-width: 56ch; }
.adres-etykieta { color: var(--tekst-2); font-size: 14.5px; font-weight: 600; }
@media (max-width: 480px) { .adres-etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* stan podgladu sklepu: jedna rzeczowa plakietka pod wstepem, a nie przypis na dole */
.oferta-podglad { margin-top: 16px; display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px 7px 11px;
  border: 1px solid var(--kres-2); border-radius: 999px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--tekst-2); font-size: 14.5px; font-weight: 600; }
.oferta-podglad .ph { color: var(--akcent-tekst); font-size: 18px; flex: none; }
.oferta-uczciwie { align-items: flex-start; max-width: 78ch; }
.oferta-uczciwie .ph { margin-top: 1px; }
/* naglowek wyspy: nazwa miejsca jako glowny stopien, reszta zdania jako podtytul w tym samym h2 */
.h2-dopisek { display: block; margin-top: 10px; font-size: .52em; font-weight: 700; font-stretch: 108%; letter-spacing: 0; color: var(--tekst-2); }
/* naglowek pasa zasad sklepu jest teraz dwuzdaniowy: mniejszy stopien, zeby nie zajmowal czterech linii */
.zasady-pas h2 { font-size: clamp(30px, 3.5vw, 46px); }
/* metryka dokumentu marki (wersja i data) pod wstepem — informacja historyczna, drugi plan */
.marka-metryka { margin-top: 10px; color: var(--tekst-3); font-size: 14.5px; }
/* naglowek na najwezszych telefonach (375–400 px): logo + kropka stanu + cztery przyciski nie miescily
   sie i guzik menu wychodzil poza ekran — ciasniejsze odstepy i mniejsze przyciski */
@media (max-width: 420px) {
  .naglowek .kontener { gap: 10px; }
  .naglowek-prawa { gap: 4px; margin-left: auto; }
  .naglowek .ikona-guzik { width: 38px; height: 38px; }
  .stan { padding: 0 4px; }
}
/* pole kodu z gry ma duza czcionke o stalej szerokosci: bez min-width:0 jego naturalna szerokosc
   rozpychala kolumne logowania na telefonie (strona przewijala sie w bok) */
.pole input { min-width: 0; max-width: 100%; }