/* ============================================================
   DISTRICTS, strona ladowania, wersja czwarta.
   Rdzen stylu = wersja trzecia bez warstwy sladu: czern kinowa,
   pelnoekranowe wideo, duza typografia, prawdziwe materialy.
   Charakter niesie material (wideo, zdjecia, ekrany z gry),
   naprzemiennosc motywu ciemnego i jasnego oraz skos przejscia
   wziety z karty TEREN ZDOBYTY. Zadnego efektu tla.

   Tokeny z kodu gry:
   ciemne: tlo #181818, panel #222222, tekst #DADADA
   jasne:  tlo #D6D5D2, panel #F3EDE8, tekst #181818
   aktywnosci: spacer #8553FF, bieg #BCE92C, rower #F11B91
   zloto #FFD700 (medale i Zlota Strefa), promien 3px,
   cien 0 0 15px rgba(0,0,0,.2), Clash Display SemiBold.

   Warstwy strony, od spodu:
   0  body, czern
   1  main i stopka, cala tresc (jasne sekcje niosa wlasne
      kremowe tlo ciete skosem przez clip-path)
   120  pasek gorny
   300  odnosnik pomijania
   ============================================================ */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ciemne-tlo: #181818;
  --ciemne-panel: #222222;
  --ciemne-tekst: #dadada;
  --ciemne-cichy: #9aa0a6;
  --jasne-tlo: #d6d5d2;
  --jasne-panel: #f3ede8;
  --jasne-tekst: #181818;
  --jasne-cichy: #56534e;
  --spacer: #8553ff;
  --bieg: #bce92c;
  --rower: #f11b91;
  --zloto: #ffd700;
  --cien: 0 0 15px rgba(0, 0, 0, 0.2);
  --promien: 3px;
  --skos: clamp(20px, 3vw, 48px);
  --wyswietlacz: "Clash Display", "Arial Black", sans-serif;
  --pismo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lam: clamp(20px, 4vw, 56px);
}

/* motywy sekcji: kazdy mebel strony czyta te zmienne.
   Akcent motywu: limonka na ciemnym, roz roweru na jasnym (rozkaz
   foundera: limonka na kremie ma 1,04 kontrastu i ginie, roz 2,70). */
.s-ciemna {
  --pow: var(--ciemne-tlo);
  --pan: var(--ciemne-panel);
  --ink: var(--ciemne-tekst);
  --cichy: var(--ciemne-cichy);
  --obrys: rgba(218, 218, 218, 0.16);
  --linia: rgba(218, 218, 218, 0.14);
  --ognisko: var(--bieg);
  --akcent: var(--bieg);
  color: var(--ink);
}
.s-jasna {
  --pow: var(--jasne-tlo);
  --pan: var(--jasne-panel);
  --ink: var(--jasne-tekst);
  --cichy: var(--jasne-cichy);
  --obrys: rgba(24, 24, 24, 0.18);
  --linia: rgba(24, 24, 24, 0.14);
  --ognisko: #181818;
  --akcent: var(--rower);
  color: var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ciemne-tlo);
  color: var(--ciemne-tekst);
  font-family: var(--pismo);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ognisko, var(--bieg));
  outline-offset: 3px;
  border-radius: var(--promien);
}

.pomin {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--bieg);
  color: #181818;
  padding: 10px 18px;
  font-family: var(--wyswietlacz);
  text-transform: uppercase;
  border-radius: var(--promien);
}
.pomin:focus-visible { left: 12px; top: 12px; }

/* ---------- typografia ---------- */

h1, h2, h3, .guzik, .odznaka, .stat-liczba, .guzik-tekst {
  font-family: var(--wyswietlacz);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.4rem, 7.2vw, 6.4rem); line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.9rem); line-height: 1.02; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }

p { max-width: 62ch; }

.brew {
  font-family: var(--wyswietlacz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--cichy);
  margin-bottom: 18px;
}
.brew-jasna { color: var(--ciemne-tekst); }

.wyroznik { font-family: var(--wyswietlacz); font-weight: 600; text-transform: uppercase; font-size: 0.94em; }

/* ---------- naglowek strony ----------
   Znak jak w gorny_pasek_v3.dart, 1:1: nad motywem ciemnym plik jasny
   (wordmark_light barwiony F3EDE8), nad jasnym plik ciemny (wordmark_dark
   barwiony 181818). Tinty wypieczone w media/znak_jasny.png
   i media/znak_ciemny.png; przelaczenie klasa na-jasnym. */

.pasek-gora {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--lam);
  background: rgba(24, 24, 24, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.35s ease;
}
.pasek-gora.na-jasnym { background: rgba(214, 213, 210, 0.94); }
.logo-gora { display: block; font-size: 0; }
.logo-gora .znak { height: clamp(30px, 3.4vw, 46px); width: auto; }
.znak-na-jasnym { display: none; }
.pasek-gora.na-jasnym .znak-na-ciemnym { display: none; }
.pasek-gora.na-jasnym .znak-na-jasnym { display: block; }
.pasek-gora .guzik { padding: 10px 20px; font-size: 0.85rem; }
.pasek-gora.na-jasnym .guzik { background: var(--rower); }
.pasek-gora.na-jasnym .guzik:hover { box-shadow: 0 0 24px rgba(241, 27, 145, 0.35); }
.pasek-gora.na-jasnym :focus-visible { outline-color: #181818; }

/* ---------- guziki: elementy marki ---------- */

.guzik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bieg);
  color: #181818;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: var(--promien);
  box-shadow: var(--cien);
  font-size: 1rem;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.guzik:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 0 24px rgba(188, 233, 44, 0.35);
}
.s-jasna .guzik:hover { box-shadow: 0 8px 20px rgba(24, 24, 24, 0.28); }
.guzik:active { transform: translateY(1px); filter: brightness(0.96); box-shadow: var(--cien); }

.guzik-cichy {
  background: transparent;
  color: var(--ink, var(--ciemne-tekst));
  border: 1px solid var(--obrys, rgba(218, 218, 218, 0.4));
  box-shadow: none;
}
.otwarcie .guzik-cichy { border-color: rgba(218, 218, 218, 0.4); }
.guzik-cichy:hover { border-color: currentColor; filter: none; box-shadow: none; background: rgba(127, 127, 127, 0.08); }
.guzik-cichy:active { transform: translateY(1px); }

.guzik-tekst {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--akcent, var(--bieg));
  padding-bottom: 2px;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.guzik-tekst::after { content: "\2192"; font-family: var(--pismo); color: var(--akcent, var(--bieg)); }
.guzik-tekst:hover { gap: 14px; }
.guzik-tekst:active { border-color: currentColor; }

/* ---------- meble gry: kwadraty aktywnosci ---------- */

.znak-akt {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--promien);
  box-shadow: var(--cien);
  background: var(--bieg);
  color: #181818;
}
.znak-akt svg { width: 24px; height: 24px; }
.znak-bieg { background: var(--bieg); }
.znak-rower { background: var(--rower); }
.znak-spacer { background: var(--spacer); }

/* ---------- sekcje wspolne ---------- */

main { position: relative; z-index: 1; }

.sekcja {
  position: relative;
  padding: clamp(90px, 12vh, 150px) var(--lam);
}
/* jasne sekcje: kremowe tlo z wlasnym skosem ciecia, jak na karcie
   TEREN ZDOBYTY z gry; zapas paddingu na glebokosc skosu */
.s-jasna.sekcja {
  background: var(--jasne-tlo);
  clip-path: polygon(0 var(--skos), 100% 0, 100% calc(100% - var(--skos)), 0 100%);
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(120px, 14vh, 180px);
}
.srodek { max-width: 1280px; margin: 0 auto; }
.sekcja-glowa { margin-bottom: 6px; }

/* odslony przy przewijaniu */
.odslona {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.odslona.widoczna { opacity: 1; transform: none; }
.odslona-2 { transition-delay: 0.12s; }
.odslona-3 { transition-delay: 0.24s; }
.odslona-4 { transition-delay: 0.36s; }

/* ---------- 1. otwarcie ---------- */

.otwarcie {
  position: relative;
  height: 100svh;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  background: var(--ciemne-tlo);
}
.sciana-wideo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
}
.panel-wideo { position: relative; overflow: hidden; }
.panel-wideo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel-boczny { opacity: 0.62; }
.otwarcie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(24, 24, 24, 0.92) 0%,
    rgba(24, 24, 24, 0.35) 18%,
    rgba(24, 24, 24, 0.06) 40%,
    rgba(24, 24, 24, 0.62) 62%,
    rgba(24, 24, 24, 0.96) 100%);
  pointer-events: none;
}
/* oslona pisma: dolny pas hero, zakotwiczony przy tresci (tresc jest
   dobita do dolu), dociaga tlo pod brwia, naglowkiem i licznikiem do
   poziomu, przy ktorym nawet czysta biel kadru wideo trzyma prog 4,5 */
.otwarcie::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: min(78%, 760px);
  background: linear-gradient(180deg,
    rgba(24, 24, 24, 0) 0%,
    rgba(24, 24, 24, 0.5) 8%,
    rgba(24, 24, 24, 0.78) 18%,
    rgba(24, 24, 24, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
}
.otwarcie-tresc {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 0 var(--lam) clamp(46px, 8vh, 90px);
  max-width: 1280px;
  margin: 0 auto;
  right: 0;
  left: 0;
}
.otwarcie-tresc h1 { max-width: 13ch; text-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
.otwarcie-tresc .brew { margin-bottom: 14px; }
/* tablica wynikow otwarcia: obie liczby rownej rangi obok siebie,
   miedzy nimi ukosna kreska w jezyku skosu sekcji. Stopien liczby,
   kolor bieg i margines gorny przejete z odebranego licznika km2;
   cien liter 0 0 15px 20% jak w naglowku otwarcia. Rezerwa 4.3ch
   na cyfrach km2 zmierzona sonda prawdziwym krojem: najszersza
   wartosc posrednia odliczania 444,4 ma 4.279ch, wiec kreska stoi
   w miejscu (cyfry Clash Display nie sa tabelaryczne). Podpisy
   zwezone do dwoch wierszy kazdy, zeby oba pola mialy rowny ciezar. */
.tablica-licznikow {
  display: flex;
  align-items: stretch;
  gap: clamp(22px, 3vw, 46px);
  margin-top: 26px;
}
.otwarcie .odslona { transition: none; }
.pole-licznika { display: flex; flex-direction: column; gap: 8px; }
.liczba-tablicy {
  font-family: var(--wyswietlacz);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--bieg);
  line-height: 1;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.liczba-tablicy sup { font-size: 0.45em; }
.liczba-teren > span { display: inline-block; min-width: 4.3ch; }
.podpis-tablicy { color: var(--ciemne-tekst); max-width: 19ch; line-height: 1.35; }
.podpis-gracze { max-width: 13ch; }
.kreska-tablicy { width: 1px; background: rgba(218, 218, 218, 0.28); transform: skewX(-14deg); }
.otwarcie-guziki { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.wskaz-dol {
  position: absolute;
  right: var(--lam);
  bottom: 22px;
  z-index: 3;
  font-family: var(--wyswietlacz);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ciemne-cichy);
  writing-mode: vertical-rl;
  animation: dryf 2.4s ease-in-out infinite;
}
@keyframes dryf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* wejscie strony: zaaranzowana sekwencja
   0s rama HUD (logo i guzik), potem brew, naglowek, licznik
   z odliczaniem, guziki, na koncu wskaz przewijania */
.start-hud { opacity: 0; }
.gotowa .start-hud { animation: pojaw 0.7s ease-out forwards; }
.start-uklon { opacity: 0; transform: translateY(30px); }
.gotowa .start-uklon {
  animation: uklon 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gotowa .start-1 { animation-delay: 0.15s; }
.gotowa .start-2 { animation-delay: 0.25s; }
.gotowa .start-3 { animation-delay: 0.45s; }
.gotowa .start-4 { animation-delay: 0.6s; }
.start-cichy { opacity: 0; }
.gotowa .start-cichy {
  animation: pojaw 0.9s ease-out 0.9s forwards, dryf 2.4s ease-in-out infinite;
}
@keyframes uklon {
  to { opacity: 1; transform: none; }
}
@keyframes pojaw {
  to { opacity: 1; }
}

/* ---------- 2. zasada gry, pasek pieciu krokow ----------
   Piec krokow w jednym rzedzie: ilustracja i podpis pod nia.
   Siatka daje kolumnom szerokosc ich zawartosci, a miedzy nimi
   zostawia rowne przerwy 1fr ze strzalka w rozu roweru. Ilustracje
   wyrownane GORA, wysokosc kazdej podana udzialem pasma; udzialy
   78/29/100/99/93 % oraz pozycja strzalek na 88 % wysokosci pasma
   sa zmierzone na wzorcu foundera, nie dobrane na oko. Pasek
   aktywnosci jako jedyny lezy w osi pionowej pasma. Ponizej 900 px
   pasek schodzi do dwoch kolumn, ponizej 560 px do wierszy ze
   strzalka w dol, wiec kolejnosc krokow zostaje czytelna. */
.s-jasna.zasada {
  padding-top: clamp(64px, 9vh, 96px);
  padding-bottom: clamp(64px, 9vh, 96px);
}
.gra-tytul {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.05vw, 2.5rem);
  line-height: 1.06;
  max-width: 46ch;
}
.gra-kroki {
  --pasmo: clamp(150px, 19.2vw, 246px);
  list-style: none;
  margin: clamp(30px, 4vw, 54px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: start;
}
.gra-krok { display: flex; flex-direction: column; }
.gra-obraz {
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  height: var(--pasmo);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.gra-obraz img { display: block; width: auto; height: 100%; object-fit: contain; }
.gra-krok-awatar .gra-obraz img { height: 78%; }
.gra-krok-aktywnosc .gra-obraz { align-items: center; }
.gra-krok-aktywnosc .gra-obraz img { height: 29%; }
.gra-krok-ruch .gra-obraz img { height: 100%; }
.gra-krok-petla .gra-obraz img { height: 99%; }
.gra-krok-teren .gra-obraz img { height: 93%; }
.gra-opis {
  font-family: var(--wyswietlacz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(0.82rem, 1.1vw, 1.05rem);
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 14ch;
}
.gra-strzalka {
  align-self: start;
  height: var(--pasmo);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 clamp(10px, 1.2vw, 20px) 12%;
}
.gra-strzalka svg { display: block; width: clamp(26px, 3vw, 46px); height: auto; }
.zasada-rewanz { margin-top: clamp(28px, 3.2vw, 40px); }

/* szeroki ekran: kotwica #zasady zatrzymuje sie 34 px wyzej, zeby
   brew nie wpadala pod pasek gorny */
@media (min-width: 1141px) {
  .s-jasna.zasada { scroll-margin-top: 34px; }
}

.telefon {
  border: 1px solid var(--obrys);
  background: var(--pan);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 10px;
}
.telefon video, .telefon img { width: 100%; height: auto; border-radius: var(--promien); }
.telefon-podpis { margin-top: 10px; font-size: 0.85rem; color: var(--cichy); text-align: center; }

/* ---------- 3. aktywnosci: tryptyk redakcyjny ---------- */

.tryptyk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 44px;
}
/* kadr kafla: rama trzyma obrys i promien, obraz w srodku dostaje
   lagodne przyblizenie przy najechaniu (przywrocone rozkazem 7,
   rozwiazanie z wersji trzeciej: scale 1.04, 0.7 s ease); kafel
   NIE udaje kontrolki: zero kursora, tabindex i obwodek przycisku */
.akt-kadr {
  overflow: hidden;
  border-radius: var(--promien);
  border: 1px solid var(--obrys);
  box-shadow: var(--cien);
}
.akt-kadr img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.akt:hover .akt-kadr img { transform: scale(1.04); }
/* kafel ROWER: zdjecie jazdy doslane przez foundera 17.08.2026,
   zastapilo tymczasowy kwadrat aktywnosci. Kadr pionowy 701 na 1280,
   wiec przy ciasnym 3:4 punkt zaczepienia trzyma sylwetke i rower. */
img.poz-rower { object-position: 50% 42%; }
.akt figcaption { margin-top: 18px; }
.akt-glowa { display: flex; align-items: center; gap: 12px; }
.akt figcaption p { color: var(--cichy); margin-top: 10px; max-width: 40ch; }
.akt-przelicznik {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--wyswietlacz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--bieg);
}
.akt-dopisek { margin-top: 44px; color: var(--cichy); }

/* ---------- 4. zdobyte ---------- */

/* trzy kafle od 2026-08-29: km2, km i liczba graczy */
.stat-rzad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 44px;
}
.stat {
  background: var(--pan);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 34px 30px 30px;
}
.stat-liczba {
  /* 4.2vw zamiast 4.6vw od 2026-08-29: przy trzech kaflach kolumna
     jest wezsza i czterocyfrowe km2 musza sie miescic od 1021 px */
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-liczba sup { font-size: 0.45em; }
.stat-etykieta { margin-top: 10px; color: var(--cichy); font-size: 0.95rem; }

/* dwa dowody wokol opisu: ekran z gry i klip kampanii TERAZ
   (spray na plakacie mowi to samo co naglowek TO NIE ZAPOWIEDZ) */
.dowody {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.16fr) minmax(0, 0.72fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: 60px;
}
.dowod-karta { max-width: 400px; justify-self: center; width: 100%; }
.dowod-karta img, .dowod-karta video {
  border-radius: var(--promien);
  border: 1px solid var(--obrys);
  box-shadow: var(--cien);
  width: 100%;
}
.dowod-karta figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--cichy); }
.dowod-opis h3 { margin-bottom: 12px; }
.dowod-opis p { color: var(--cichy); }
.dowod-opis .guzik-tekst { margin-top: 18px; }

/* pas zdjec: nieskonczona petla bez dziur. HTML niesie JEDNA kopie
   zestawu; ruch.js mierzy jej szerokosc, powiela zestaw az laczna
   szerokosc przekroczy podwojna szerokosc najszerszego okna (2560)
   i wpisuje --szer-kopii oraz czas trwania (stala predkosc px na s).
   Przesuw = DOKLADNIE szerokosc jednej kopii, wiec petla zaskakuje
   idealnie w kazdej fazie; bez skryptu pas stoi (zero animacji). */
.pas-owin { margin-top: 70px; overflow: hidden; }
.pas { display: flex; gap: 8px; width: max-content; }
.pas-zbudowany { animation: przesuw 46s linear infinite; }
.pas-wstecz { animation-direction: reverse; margin-top: 8px; }
.pas img {
  height: clamp(150px, 22vh, 220px);
  width: auto;
  border-radius: var(--promien);
  border: 1px solid var(--obrys);
  box-shadow: var(--cien);
}
.pas-owin:hover .pas { animation-play-state: paused; }
@keyframes przesuw {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--szer-kopii, 50%))); }
}

/* ---------- 5. ekipa: przerywnik i mozaika ---------- */

.ekipa { padding: 0 0 clamp(90px, 12vh, 150px); }
.ekipa .srodek { padding: 0 var(--lam); }
.przerywnik {
  position: relative;
  min-height: 72svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 90px var(--lam);
  background: var(--ciemne-tlo);
  margin-bottom: clamp(70px, 9vh, 110px);
}
.przerywnik img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.55;
}
.przerywnik::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
}
.przerywnik h2 {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.mozaika-tytul { margin-top: 0; }
.mozaika {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 140px;
  grid-auto-flow: row dense;
  gap: 8px;
  margin-top: 24px;
}
.mozaika img, .mozaika video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--promien);
  border: 1px solid var(--obrys);
  box-shadow: var(--cien);
}
/* siatka domknieta co do komorki: 6 kolumn x 4 rzedy = 24 pola,
   wideo(6) + a(4) + b(2) + c(4) + dwa d(2+2) + cztery pojedyncze = 24 */
.moz-a { grid-column: span 2; grid-row: span 2; }
.moz-b { grid-column: span 2; }
.moz-c { grid-column: span 2; grid-row: span 2; }
.moz-d { grid-column: span 2; }
/* zywy kafel mozaiki: klip kampanii z wielkim plakatem; kotwica 30
   procent trzyma glowe zawodniczki i haslo plakatu w kadrze kafla */
.moz-wideo {
  grid-column: span 2;
  grid-row: span 3;
  object-position: 50% 30%;
  background: var(--pan);
}
.mozaika-podpis { margin-top: 16px; font-size: 0.85rem; color: var(--cichy); }

/* ---------- 6. pobranie ---------- */

.pobranie { min-height: 92svh; display: grid; align-items: center; }
.pobranie-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.pobranie h2 { max-width: 15ch; }
.pobranie-opis { margin-top: 20px; color: var(--cichy); }
.odznaki { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.odznaka {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--pan);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  color: var(--ink);
  text-decoration: none;
  padding: 20px 34px;
  min-height: 86px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.odznaka:hover { transform: translateY(-2px); border-color: var(--akcent); }
.odznaka:active { transform: translateY(0); }
.odznaka svg { width: 42px; height: 42px; flex: none; }
.odznaka-tekst { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.odznaka-tekst small {
  font-family: var(--pismo);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cichy);
}
.odznaka-tekst b { font-size: 1.25rem; font-weight: 600; }
.pobranie-dopisek { margin-top: 22px; font-size: 0.85rem; color: var(--cichy); }

/* ---------- stopka: znak marki jako domkniecie strony ----------
   Dwie kolumny: po lewej znak (NIETYKALNY, ta sama klasa i rozmiar),
   odnosniki prawne i meta; po prawej blok spolecznosciowy. Adresy
   profili wpisuje sie w SOCIAL_LINKS na gorze ruch.js; odnosnik bez
   adresu nie dostaje href, wiec jest nieklikalny i przygaszony. */

.stopka {
  position: relative;
  z-index: 1;
  padding: 80px var(--lam) 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px clamp(40px, 6vw, 120px);
  align-items: start;
  background: var(--ciemne-tlo);
}
.stopka-glowna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.stopka-znak { width: min(520px, 72vw); height: auto; }
.stopka span { font-size: 0.85rem; color: var(--cichy); }
.stopka-meta { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.stopka-spol { width: 340px; }
.stopka-spol-tytul { margin-bottom: 16px; }
.spol-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
/* kafle w jezyku Districts, nie w barwach obcych marek: panel
   grafitowy z obrysem i cieniem jak odznaki sklepow, znak platformy
   jako grafitowy glif na limonkowym kwadracie (wzorzec .znak-akt),
   nazwa w Clash Display wielkimi literami, pod nia uchwyt profilu
   ze strzalka. Najechanie jak guziki marki: uniesienie,
   rozjasnienie, limonkowa poswiata. Adres wpisany w SOCIAL_LINKS
   w ruch.js robi kafel klikalnym; bez adresu kafel zostaje bez
   href, nieklikalny i przygaszony. */
.spol {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 20px;
  background: var(--pan);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.spol .spol-znak {
  width: 46px;
  height: 46px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--promien);
  box-shadow: var(--cien);
  background: var(--bieg);
  color: #181818;
}
.spol .spol-znak svg { width: 28px; height: 28px; display: block; }
.spol .spol-tresc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.spol .spol-tresc b {
  font-family: var(--wyswietlacz);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.spol .spol-tresc small { font-size: 0.85rem; color: var(--cichy); }
.spol .spol-tresc small::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  color: var(--bieg);
  transition: transform 0.2s ease;
}
.spol[href]:hover,
.spol[href]:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: var(--bieg);
  box-shadow: 0 0 24px rgba(188, 233, 44, 0.35);
}
.spol[href]:hover .spol-tresc small::after,
.spol[href]:focus-visible .spol-tresc small::after { transform: translateX(6px); }
.spol[href]:active { transform: translateY(1px); filter: brightness(0.96); box-shadow: var(--cien); }
/* bez adresu w SOCIAL_LINKS: kafel przygaszony i nieklikalny */
.spol:not([href]) { opacity: 0.55; }
/* ---------- odnosniki prawne w stopce ----------
   Link do polityki prywatnosci jest wymogiem App Store i Google Play,
   a usuniecie konta musi byc osiagalne ze strony glownej. */
.stopka-prawne { display: flex; gap: 10px 26px; flex-wrap: wrap; }
.stopka-prawne a,
.stopka-meta a {
  font-size: 0.85rem;
  color: var(--cichy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.stopka-prawne a:hover,
.stopka-prawne a:focus-visible,
.stopka-meta a:hover,
.stopka-meta a:focus-visible { color: var(--tresc); border-bottom-color: var(--akcent); }

/* ---------- kotwice kadrow ----------
   Punkt zaczepienia obrazu nad twarzami: ciasne kafle tna cover
   z gory i z dolu, wiec srodek geometryczny ucina glowy portretow.
   Procent = pozycja pasma twarzy w pliku zrodlowym (przeglad
   kazdego zdjecia); zero zmian samych plikow. */
img.poz-f08 { object-position: 50% 8%; }   /* przerywnik: glowa tuz pod gorna krawedzia */
img.poz-f38 { object-position: 50% 12%; }  /* trojka z torba, glowy w gornej cwiartce */
img.poz-f33 { object-position: 50% 29%; }  /* biegacze, glowy w drugiej cwiartce */
img.poz-f07 { object-position: 50% 10%; }  /* portret od tylu, glowa wysoko */
img.poz-f56 { object-position: 50% 4%; }   /* telefon i twarz w gornej cwiartce */
img.poz-f46 { object-position: 50% 35%; }  /* poziomy kadr, twarz w gornej tercji */
img.poz-f48 { object-position: 50% 10%; }  /* portret w czapce, twarz wysoko */
img.poz-f13 { object-position: 50% 30%; }  /* detal grafiki City na plecach w calosci */
img.poz-f32 { object-position: 50% 12%; }  /* kafel BIEG w kadrze 4:3, glowy biegaczy */
img.poz-f09 { object-position: 50% 15%; }  /* kafel SPACER w kadrze 4:3, glowa idacej */

/* ---------- rowna linia przelicznikow w kaflach aktywnosci ----------
   Opisy maja rozna liczbe wierszy (BIEG i SPACER dwa, ROWER jeden), wiec
   przeliczniki XP stawaly na trzech roznych wysokosciach. Kafel rozciaga sie
   na pelna wysokosc rzedu, opis zabiera nadwyzke miejsca, a przelicznik siada
   na dole. Zadnej stalej wysokosci, wiec dziala na kazdej szerokosci. */
.tryptyk > .akt { display: flex; flex-direction: column; height: 100%; }
.tryptyk > .akt > figcaption { display: flex; flex-direction: column; flex: 1 1 auto; }
.tryptyk > .akt > figcaption > p { flex: 1 1 auto; }

/* ---------- uklad posredni i telefon ---------- */

@media (max-width: 1020px) {
  .pobranie-uklad { grid-template-columns: 1fr; }
  /* trzy kafle statystyk ida w jedna kolumne juz tutaj: ponizej 1021 px
     trzy kolumny nie mieszcza liczby km2 bez przepelnienia */
  .stat-rzad { grid-template-columns: 1fr; }
  .dowody { grid-template-columns: 1fr; }
  /* 3 kolumny x 6 rzedow = 18 pol: wideo(6) + a(4) + osiem pojedynczych;
     dense dosypuje pojedyncze obok wysokich kafli, zero dziur */
  .mozaika { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 130px; }
  .moz-b, .moz-c, .moz-d { grid-column: auto; grid-row: auto; }
}

/* pasek krokow na waskich ekranach: dwie kolumny, potem wiersze */
@media (max-width: 900px) {
  .gra-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 4vw, 40px); row-gap: clamp(26px, 5vw, 40px); }
  .gra-strzalka { display: none; }
  .gra-opis { max-width: 22ch; }
}
@media (max-width: 560px) {
  .gra-kroki { --pasmo: 112px; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .gra-krok { flex-direction: row; align-items: center; gap: 20px; }
  .gra-obraz { width: 112px; margin: 0; justify-content: center; align-items: center; flex: none; }
  .gra-obraz img { max-width: 100%; }
  .gra-krok-aktywnosc .gra-obraz img { height: auto; width: 100%; }
  /* kolejnosc krokow niesie strzalka w dol, w osi kolumny ilustracji */
  .gra-strzalka { display: flex; width: 112px; height: auto; padding: 2px 0; align-items: center; }
  .gra-strzalka svg { width: 20px; transform: rotate(90deg); }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .sciana-wideo { grid-template-columns: 1fr; }
  .panel-boczny { display: none; }
  .tryptyk { grid-template-columns: 1fr; gap: 36px; }
  .akt-kadr img { aspect-ratio: 4 / 3; }
  /* w szerokim kadrze 4:3 pionowe zdjecie jazdy nie zmiesci naraz kasku
     i roweru, wiec zaczepienie schodzi nizej: zostaje kask i kolo */
  img.poz-rower { object-position: 50% 55%; }
  .dowody { grid-template-columns: 1fr; }
  .telefon { max-width: 380px; margin: 0 auto; }
  /* 2 kolumny x 11 rzedow = 22 pola: wideo(10) + a(4) + osiem pojedynczych;
     wyzszy kafel wideo (5 rzedow), zeby haslo plakatu nie wypadalo z kadru */
  .mozaika { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; }
  .moz-wideo { grid-row: span 5; }
  .wskaz-dol { display: none; }
  .pasek-gora .guzik { padding: 9px 14px; font-size: 0.78rem; }
  .logo-gora .znak { height: 30px; }
  /* stopka w jednej kolumnie: blok spolecznosciowy pod meta */
  .stopka { grid-template-columns: 1fr; gap: 44px; }
  .stopka-spol { width: min(340px, 100%); }
}

@media (max-width: 480px) {
  .otwarcie-guziki { flex-direction: column; align-items: stretch; }
  .odznaki { flex-direction: column; align-items: stretch; }
  .odznaka { justify-content: center; }
  .tablica-licznikow { gap: 16px; }
  .podpis-tablicy { max-width: 15ch; }
  .podpis-gracze { max-width: 13ch; }
}

/* tryb zrzutow kontrolnych (?zrzut=1), tylko do renderu QA */
.zrzut .odslona, .zrzut .start-uklon, .zrzut .start-hud, .zrzut .start-cichy {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.zrzut .pas { animation-play-state: paused; }
.zrzut .otwarcie { height: 900px; min-height: 0; }
.zrzut .pobranie { min-height: 0; }
.zrzut .przerywnik { min-height: 620px; }
.zrzut .pas img { height: 200px; }
@media (max-width: 820px) {
  .zrzut .otwarcie { height: 780px; }
}

/* ---------- ograniczony ruch ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .odslona, .start-uklon, .start-hud, .start-cichy { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pas { animation: none; }
  .wskaz-dol { animation: none; }
  .guzik, .guzik-tekst, .odznaka, .logo-gora img, .akt-kadr img, .pasek-gora, .spol, .spol-tresc small::after { transition: none; }
  .akt:hover .akt-kadr img { transform: none; }
}