/* Z203: „Mapa 3D — Lot nad Polską” (/mapa-3d, makieta C c-lot/assets/styl.css przeniesiona 1:1). Kroje z własnego hosta (zero żądań do Google):
   Bricolage Grotesque, JetBrains Mono, a w miejsce Instrument Serif — Fraunces kursywa (krój katalogu). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/BricolageGrotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/BricolageGrotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-ext-opsz-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-opsz-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =====================================================================
   Wersja C „Lot nad Polską” — arkusz stylów.
   Nowoczesny CSS użyty świadomie (październik 2026, Chrome/Edge/Safari):
   - OKLCH + color-mix()             — cała paleta i przezroczystości paneli
   - @property (typowane zmienne)    — animowany kąt ramki wyszukiwarki,
                                       liczniki liczb animowane bez JS (counter + <integer>)
   - scroll-driven animations        — pasek postępu lotu (scroll()), odsłanianie
                                       nagłówków i liczników (view())
   - scroll-target-group/:target-current — aktywny punkt trasy w nawigacji bocznej
   - CSS anchor positioning          — dymek przyczepiony do punktu oddziału na scenie
   - @starting-style                 — wejście dymka i wierszy wyników
   - View Transitions                — zmiana wizytówki i listy katalogu
   - container queries (rozmiar) + scroll-state (stuck) — wizytówka i nagłówek listy
   - subgrid                         — kolumny wierszy katalogu i tabeli rekordów
   - :has()                          — filtry stanu, stan formularzy, tryb plakatu
   - sibling-index()                 — kaskadowe opóźnienia (z @supports)
   - text-wrap: balance / pretty, text-box: trim-both, field-sizing: content
   ===================================================================== */

@property --kat { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --liczba { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --swiatlo { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  color-scheme: dark;
  --vh: 1vh;                         /* w trybie plakatu (zrzut całej strony) JS ustawia stałą */
  --noc: oklch(0.145 0.03 262);
  --noc-2: oklch(0.185 0.035 262);
  --noc-3: oklch(0.23 0.04 262);
  --tekst: oklch(0.97 0.008 250);
  --tekst-2: oklch(0.84 0.02 255);
  --tekst-3: oklch(0.74 0.025 255);
  --linia: oklch(1 0 0 / 0.13);
  --linia-2: oklch(1 0 0 / 0.22);
  --zloto: oklch(0.87 0.135 78);
  --lod: oklch(0.86 0.09 220);
  --c-sys: oklch(0.84 0.12 195);
  --c-zew: oklch(0.81 0.10 295);
  --c-spr: oklch(0.86 0.14 85);
  --c-mar: oklch(0.74 0.14 32);
  --c-brak: oklch(0.66 0.02 260);
  --szklo: color-mix(in oklch, var(--noc) 78%, transparent);
  --szklo-mocne: color-mix(in oklch, var(--noc) 90%, transparent);
  --marg: clamp(16px, 4.2vw, 72px);
  --f-disp: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Fraunces', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--noc); }
body {
  margin: 0; background: var(--noc); color: var(--tekst);
  font: 400 16px/1.55 var(--f-disp); font-optical-sizing: auto;
  overflow-x: clip;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- warstwy sceny ---------- */
#scena { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.zasl { /* delikatna winieta: czytelność tekstu na scenie */
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 70% 45%, transparent 40%, oklch(0.11 0.03 262 / .55) 100%),
    linear-gradient(90deg, oklch(0.1 0.03 262 / .7), oklch(0.1 0.03 262 / .35) 40%, transparent 58%);
}
#nakladka { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.etykieta {
  position: absolute; left: 0; top: 0; translate: -50% -100%;
  font: 600 11.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekst); white-space: nowrap; padding: 4px 8px 4px 8px;
  background: color-mix(in oklch, var(--noc) 72%, transparent);
  border: 1px solid var(--linia); opacity: 0; transition: opacity .5s;
}
.etykieta::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(14px + var(--dy, 0px)); background: var(--linia-2); }
.etykieta.wid { opacity: 1; }
.etykieta.reg { color: oklch(0.95 0.05 var(--h, 220)); border-color: oklch(0.8 0.1 var(--h, 220) / .5); }
.etykieta .m { color: var(--tekst-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.kotwica { position: absolute; width: 2px; height: 2px; left: 0; top: 0; anchor-name: --wybrany; }
.dymek {
  position: fixed; position-anchor: --wybrany; position-area: top; margin-bottom: 22px;
  position-try-fallbacks: flip-block, flip-inline;
  width: max-content; max-width: 260px; padding: 10px 12px 11px;
  background: var(--szklo-mocne); border: 1px solid color-mix(in oklch, var(--c-sys) 45%, transparent);
  backdrop-filter: blur(10px); font-size: 13px; line-height: 1.35; opacity: 0;
  transition: opacity .4s, display .4s allow-discrete;
}
.dymek.wid { opacity: 1; }
@starting-style { .dymek.wid { opacity: 0; } }
.dymek b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.dymek .adr { font: 600 12px var(--f-mono); color: var(--zloto); display: block; margin-top: 4px; }
.dymek .m { color: var(--tekst-3); font-size: 12px; }
html:not(.anchory) .dymek { position: fixed; translate: -50% calc(-100% - 22px); }

/* ---------- pasek górny ---------- */
.belka {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 64px;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--marg);
  background: linear-gradient(180deg, oklch(0.12 0.03 262 / .92), oklch(0.12 0.03 262 / .55) 70%, transparent);
  backdrop-filter: blur(6px);
}
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.znak svg { width: 34px; height: 34px; flex: none; }
.znak span { font-weight: 650; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; }
.znak span small { display: block; font: 400 11px var(--f-mono); color: var(--tekst-3); letter-spacing: .04em; }
.belka nav { margin-left: auto; display: flex; gap: 2px; }
.belka nav a {
  text-decoration: none; font-size: 14px; color: var(--tekst-2); padding: 0 12px; min-height: 44px;
  display: inline-flex; align-items: center; border-bottom: 1px solid transparent;
}
.belka nav a:hover { color: var(--tekst); border-color: var(--zloto); }
.belka .szukaj-btn {
  display: none; margin-left: auto; min-height: 44px; padding: 0 14px; background: none;
  border: 1px solid var(--linia-2); font-size: 14px;
}
.postep { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-sys), var(--zloto)); scale: 0 1; }
@supports (animation-timeline: scroll()) {
  .postep { animation: postep linear both; animation-timeline: scroll(root block); }
  @keyframes postep { to { scale: 1 1; } }
}

/* ---------- trasa (nawigacja boczna) ---------- */
.trasa {
  position: fixed; right: 18px; top: 50%; translate: 0 -50%; z-index: 15;
  display: flex; flex-direction: column; gap: 2px; scroll-target-group: auto;
}
.trasa a {
  display: grid; grid-template-columns: 1fr 14px; align-items: center; gap: 10px; min-height: 36px;
  text-decoration: none; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: transparent; transition: color .3s;
}
.trasa a::after { content: ''; width: 7px; height: 7px; justify-self: center; border: 1px solid var(--tekst-3); rotate: 45deg; transition: .3s; }
.trasa:hover a { color: var(--tekst-3); }
.trasa:hover a[aria-current="true"], .trasa:hover a:target-current { color: var(--tekst); }
.trasa a[aria-current="true"]::after, .trasa a:target-current::after { background: var(--zloto); border-color: var(--zloto); scale: 1.3; }
.trasa::before { content: ''; position: absolute; right: 6.5px; top: 18px; bottom: 18px; width: 1px; background: var(--linia); z-index: -1; }

/* ---------- przyrząd (HUD) ---------- */
.hud {
  position: fixed; right: 64px; top: 74px; padding: 6px 10px; background: color-mix(in oklch, var(--noc) 70%, transparent); z-index: 15;
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--tekst-3);
  display: flex; gap: 18px; text-transform: uppercase; pointer-events: none;
}
.hud b { color: var(--tekst-2); font-weight: 600; }

/* ---------- sekcje ---------- */
main { position: relative; z-index: 5; }
.sek { position: relative; padding: 128px var(--marg) 96px; min-height: calc(var(--vh) * 100); }
.kadr { display: none; }
.okno { display: none; }
.num {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px;
  font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3);
}
.num b { font: italic 400 44px/0.8 var(--f-serif); color: var(--zloto); letter-spacing: 0; text-transform: none; }
.num .wsp { margin-left: auto; color: var(--tekst-3); }
h2 {
  font-weight: 720; font-size: clamp(32px, 3.6vw, 56px); line-height: .98; letter-spacing: -.035em;
  font-variation-settings: 'wdth' 88;
}
h2 em, h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-variation-settings: normal; }
.lead { font-size: 18px; line-height: 1.5; color: var(--tekst-2); max-width: 54ch; margin: 18px 0 0; }
.drobne { font-size: 13px; color: var(--tekst-3); line-height: 1.45; }
.przyklad {
  display: inline-block; font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--noc); background: var(--zloto); padding: 2px 6px; vertical-align: 2px; margin-left: 6px;
}

.panel {
  position: relative; background: var(--szklo); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--linia); padding: 28px;
}
/* znaczniki narożne jak na mapie lotniczej */
.panel::before, .panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 0 solid var(--zloto); pointer-events: none;
}
.panel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

/* odsłanianie przewijaniem */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .odslon { animation: odslon linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes odslon { from { opacity: 0; translate: 0 48px; filter: blur(8px); } }
  }
}

/* liczniki CSS: --do ustawione w HTML, licznik rośnie, gdy element wjeżdża w kadr */
.licz { --liczba: var(--do); counter-reset: n var(--liczba); }
.licz::before { content: counter(n); }
@media (prefers-reduced-motion: no-preference) {
  .licz.czas { animation: liczenie 2.2s cubic-bezier(.2,.7,.1,1) .4s both; }
  @supports (animation-timeline: view()) {
    .licz.widok { animation: liczenie linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes liczenie { from { --liczba: 0; } to { --liczba: var(--do); } }

/* ---------- 01 HERO ---------- */
.sek-hero {
  display: grid; grid-template-columns: minmax(0, 660px) 1fr; align-content: end;
  min-height: max(calc(var(--vh) * 100), 820px); padding-top: 104px; padding-bottom: 64px;
}
.hero-tresc { grid-column: 1; }
.oczko { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); display: flex; gap: 12px; flex-wrap: wrap; }
.oczko span + span::before { content: '/'; margin-right: 12px; color: var(--linia-2); }
h1 {
  margin-top: 14px; font-weight: 760; font-size: clamp(46px, 5.7vw, 94px); line-height: .9;
  letter-spacing: -.045em; font-variation-settings: 'wdth' 82, 'opsz' 96;
  text-shadow: 0 2px 40px oklch(0.12 0.03 262 / .9);
}
h1 em { color: var(--zloto); font-size: 1.04em; padding-right: .04em; }
.sek-hero .lead { max-width: 47ch; font-size: 18.5px; text-shadow: 0 1px 18px oklch(0.1 0.03 262); }

.szukajka { margin-top: 24px; max-width: 620px; }
.szukajka label.etk { display: block; font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 8px; }
.pole {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px;
  background: color-mix(in oklch, var(--noc) 86%, transparent); backdrop-filter: blur(14px);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.pole::before { /* animowana ramka: conic-gradient z kątem @property */
  content: ''; position: absolute; inset: -1px; z-index: -1; padding: 1px;
  background: conic-gradient(from var(--kat), var(--c-sys), var(--zloto) 25%, oklch(1 0 0 / .15) 40%, oklch(1 0 0 / .15) 75%, var(--c-sys));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: obrot 6s linear infinite;
}
@keyframes obrot { to { --kat: 360deg; } }
.pole svg { width: 22px; height: 22px; flex: none; color: var(--tekst-3); }
.pole input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none;
  font-size: 21px; font-weight: 500; letter-spacing: -.01em;
}
.pole input::placeholder { color: var(--tekst-3); }
.pole button {
  min-height: 52px; padding: 0 16px; border: 0; background: var(--tekst); color: var(--noc);
  font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.pole button svg { color: var(--noc); width: 18px; height: 18px; }
.podpowiedzi { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 13px; color: var(--tekst-3); align-items: center; }
.podpowiedzi button {
  background: none; border: 0; border-bottom: 1px dashed var(--linia-2); padding: 0; min-height: 32px;
  font: 500 13px var(--f-mono); color: var(--tekst-2); cursor: pointer;
}
.wyniki { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--linia); background: var(--szklo-mocne); backdrop-filter: blur(14px); }
.wyniki:empty { display: none; }
.wyniki li { border-bottom: 1px solid var(--linia); }
.wynik {
  display: grid; grid-template-columns: 14px 1fr auto; column-gap: 14px; row-gap: 1px; align-items: center;
  padding: 8px 16px; text-decoration: none; min-height: 52px; transition: background .2s;
}
@starting-style { .wyniki li { opacity: 0; translate: 0 6px; } }
.wyniki li { transition: opacity .35s, translate .35s; }
@supports (transition-delay: calc(sibling-index() * 1ms)) { .wyniki li { transition-delay: calc(sibling-index() * 40ms); } }
.wynik:hover, .wynik:focus-visible { background: oklch(1 0 0 / .05); }
.wynik .kropka { grid-row: span 2; }
.wynik .w-n { font-weight: 620; font-size: 16px; }
.wynik .w-n b { font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--tekst-2); margin-right: 6px; }
.wynik mark { background: color-mix(in oklch, var(--zloto) 30%, transparent); color: inherit; padding: 0 1px; }
.wynik .w-g { grid-column: 2; font-size: 13px; color: var(--tekst-3); }
.wynik .w-a { grid-row: 1 / span 2; grid-column: 3; font: 600 13px var(--f-mono); color: var(--zloto); text-align: right; }
.wynik .w-a small { display: block; font-weight: 400; color: var(--tekst-3); font-size: 11px; }
.wynik.okr .w-n::before { content: 'Okręg · '; font: 500 11px var(--f-mono); color: var(--tekst-3); text-transform: uppercase; letter-spacing: .08em; }
.przyklad-opis { font-size: 13px; color: var(--tekst-3); margin: 10px 0 0; }

.kropka { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--k, var(--c-brak)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--k, var(--c-brak)) 22%, transparent), 0 0 12px var(--k, transparent); }
.st-sys { --k: var(--c-sys); } .st-zew { --k: var(--c-zew); } .st-spr { --k: var(--c-spr); } .st-mar { --k: var(--c-mar); } .st-brak { --k: var(--c-brak); }

.kraj {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 34px;
  border-top: 1px solid var(--linia-2);
}
.kraj div { padding: 16px 18px 0 0; border-right: 1px solid var(--linia); padding-left: 18px; }
.kraj div:first-child { padding-left: 0; }
.kraj div:last-child { border-right: 0; }
.kraj .w { display: block; font-weight: 300; font-size: clamp(40px, 4.4vw, 72px); line-height: .9; letter-spacing: -.05em; font-variation-settings: 'wdth' 76, 'opsz' 96; text-box: trim-both cap alphabetic; }
.kraj .w i { font-style: normal; font-size: .5em; letter-spacing: 0; margin-left: 4px; color: var(--tekst-3); }
.kraj .o { display: block; margin-top: 10px; font-size: 13px; color: var(--tekst-3); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--tekst-2); margin: 18px 0 0; padding: 0; list-style: none; grid-column: 1 / -1; }
.legenda li { display: inline-flex; align-items: center; gap: 8px; }
.legenda b { font-family: var(--f-mono); font-weight: 600; color: var(--tekst); }

/* ---------- 02 STRUKTURA ---------- */
.uklad { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 40px; }
.uklad.prawy { grid-template-columns: 1fr minmax(0, 560px); }
.uklad.prawy > .panel { grid-column: 2; }
.kaskada { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; margin: 26px 0 8px; align-items: baseline; }
.kaskada .w { font-weight: 300; font-size: 64px; line-height: 1; letter-spacing: -.05em; font-variation-settings: 'wdth' 76; text-align: right; }
.kaskada .o { font-size: 15px; color: var(--tekst-2); border-bottom: 1px solid var(--linia); padding-bottom: 6px; }
.regiony { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: r; }
.region {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 10px 12px 0;
  border-top: 1px solid var(--linia); cursor: pointer; position: relative; transition: background .35s;
}
.region::before { content: ''; position: absolute; left: -28px; top: -1px; bottom: 0; width: 3px; background: oklch(0.8 0.12 var(--h)); scale: 1 0; transition: scale .4s; transform-origin: top; }
.region[aria-current="true"] { background: linear-gradient(90deg, oklch(0.8 0.12 var(--h) / .12), transparent 80%); }
.region[aria-current="true"]::before { scale: 1 1; }
.region .rn { font: italic 400 28px/1 var(--f-serif); color: oklch(0.84 0.11 var(--h)); grid-row: span 2; }
.region .rt { font-weight: 640; font-size: 16px; }
.region .rl { font: 500 12px var(--f-mono); color: var(--tekst-3); text-align: right; align-self: center; }
.region .ro { grid-column: 2 / -1; font-size: 13px; color: var(--tekst-3); line-height: 1.5; min-width: 0; }
.region .ro span { white-space: nowrap; }
.region .ro span + span::before { content: '·'; color: oklch(1 0 0 / .35); margin-right: .4em; }
.region .ro b { color: var(--tekst-2); font-weight: 600; font-family: var(--f-mono); font-size: 12px; }
.region .pasek { grid-column: 2 / -1; display: flex; gap: 2px; height: 6px; margin: 6px 0 2px; }
.region .pasek i { flex: var(--n) 1 0; background: linear-gradient(90deg, oklch(0.8 0.12 var(--h)) var(--p), oklch(1 0 0 / .1) var(--p)); }
.kronika { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linia-2); }
.kronika h3, .panel h3 { font: 600 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 12px; }
.kronika ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kronika li { display: grid; grid-template-columns: 96px 1fr; font-size: 14px; color: var(--tekst-2); }
.kronika time { font: 500 12px var(--f-mono); color: var(--tekst-3); padding-top: 2px; }

/* ---------- 03 LOTY ---------- */
.dni-pref { display: flex; gap: 0; margin: 22px 0 0; border: 1px solid var(--linia-2); width: max-content; max-width: 100%; }
.dni-pref button { min-height: 44px; padding: 0 16px; background: none; border: 0; border-right: 1px solid var(--linia); cursor: pointer; font-size: 14px; color: var(--tekst-2); }
.dni-pref button:last-child { border-right: 0; }
.dni-pref button[aria-pressed="true"] { background: var(--tekst); color: var(--noc); font-weight: 650; }
.wielkie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--linia-2); }
.wielkie > div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--linia); }
.wielkie > div:nth-child(odd) { border-right: 1px solid var(--linia); }
.wielkie > div:nth-child(even) { padding-left: 18px; }
.wielkie .w { display: block; font-weight: 300; font-size: 58px; line-height: 1; letter-spacing: -.05em; font-variation-settings: 'wdth' 78; }
.wielkie .w small { font-size: .38em; letter-spacing: 0; color: var(--tekst-3); margin-left: 4px; font-weight: 400; }
.wielkie .o { font-size: 13px; color: var(--tekst-3); }
.wielkie .zl .w { color: var(--zloto); }
.slupki { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.slupki li { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: 14px; }
.slupki .bar { height: 10px; background: linear-gradient(90deg, var(--lod), var(--zloto)); width: var(--w); min-width: 3px; }
.slupki .n { font: 600 13px var(--f-mono); text-align: right; }
.zrodlo { margin-top: 18px; font-size: 12.5px; color: var(--tekst-3); line-height: 1.45; border-left: 2px solid var(--linia-2); padding-left: 12px; }

/* ---------- 04 PULS ---------- */
.ekg { width: 100%; height: auto; display: block; margin-top: 18px; overflow: visible; }
.ekg text { font: 500 10.5px var(--f-mono); fill: var(--tekst-3); letter-spacing: .04em; }
.swiezosc { display: flex; height: 12px; margin-top: 22px; gap: 2px; }
.swiezosc i { flex: var(--n) 1 0; background: oklch(0.86 0.13 var(--h)); opacity: var(--o, 1); }
.swiezosc-opis { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.swiezosc-opis li { font-size: 12px; color: var(--tekst-3); line-height: 1.3; border-top: 2px solid oklch(0.86 0.13 var(--h)); padding-top: 6px; }
.swiezosc-opis b { display: block; font-weight: 300; font-size: 30px; color: var(--tekst); letter-spacing: -.04em; line-height: 1; margin-bottom: 4px; }
.kanal { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--linia-2); }
.kanal li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linia); font-size: 14px; }
.kanal time { font: 500 12px var(--f-mono); color: var(--tekst-3); padding-top: 2px; }
.kanal b { font-weight: 620; }
.kanal span { color: var(--tekst-2); }
.kanal .pl { display: block; font-size: 12px; color: var(--tekst-3); }

/* ---------- 05 LICZBY ---------- */
.sek-liczby { padding-top: 0; }
.niebo { height: 560px; position: relative; }
.niebo .napis { position: absolute; left: 0; bottom: 30px; max-width: 760px; }
.niebo .napis h2 { font-size: clamp(32px, 3.4vw, 52px); }
.siatka-l {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--linia);
  border: 1px solid var(--linia); position: relative;
}
.siatka-l > .k { background: var(--szklo-mocne); backdrop-filter: blur(16px); padding: 26px; }
.k-rozwoj { grid-column: span 7; }
.k-rekordy { grid-column: span 5; grid-row: span 2; }
.k-kraj { grid-column: span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-content: start; }
.k-rytm { grid-column: 1 / -1; }
.k-kraj .w { display: block; font-weight: 300; font-size: clamp(36px, 3.4vw, 54px); line-height: 1; letter-spacing: -.05em; font-variation-settings: 'wdth' 76; }
.k-kraj .o { font-size: 13px; color: var(--tekst-3); }
.k-kraj .uw { grid-column: 1 / -1; }
.wykres { width: 100%; height: auto; display: block; overflow: visible; }
.wykres text { font: 500 11px var(--f-mono); fill: var(--tekst-3); }
.wykres .wart { fill: var(--tekst); font-weight: 600; font-size: 12px; }
.wykres .odd { fill: var(--c-sys); }
.rekordy { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; }
.rekordy li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--linia); align-items: baseline; }
.rekordy .lp { font: 500 12px var(--f-mono); color: var(--tekst-3); }
.rekordy .kto { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.rekordy .kto small { display: block; font-weight: 400; font-size: 12px; color: var(--tekst-3); }
.rekordy .km { font: 600 14px var(--f-mono); color: var(--zloto); text-align: right; }
.rekordy .bar { grid-column: 2 / -1; height: 3px; background: linear-gradient(90deg, var(--zloto), transparent); width: var(--w); }
.rytm { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; }
.rytm text { font: 500 11px var(--f-mono); fill: var(--tekst-3); }
.rytm .ann { fill: var(--tekst); font-weight: 600; }

/* ---------- 06 KATALOG ---------- */
.kat-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; align-items: start; margin-top: 30px; }
.kat-glowa { max-width: 760px; }
.filtry { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.filtry label { display: grid; gap: 4px; font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.filtry input, .filtry select {
  height: 46px; padding: 0 12px; background: var(--noc-2); border: 1px solid var(--linia-2); font-size: 15px;
  text-transform: none; letter-spacing: 0; font-family: var(--f-disp); min-width: 0;
}
.stany { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; border: 0; padding: 0; }
.stany legend { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 6px; width: 100%; }
.stany label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--linia); font-size: 13.5px; color: var(--tekst-3); transition: .2s;
}
.stany label:has(:checked) { color: var(--tekst); border-color: color-mix(in oklch, var(--k) 60%, transparent); background: color-mix(in oklch, var(--k) 10%, transparent); }
.stany input { position: absolute; opacity: 0; pointer-events: none; }
.stany label b { font: 600 12px var(--f-mono); }
.stany label:has(:focus-visible) { outline: 2px solid var(--zloto); }
.az { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 0; margin-top: 12px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.az button { min-width: 0; min-height: 36px; background: none; border: 0; font: 500 13px var(--f-mono); color: var(--tekst-2); cursor: pointer; }
.az button:disabled { color: oklch(1 0 0 / .25); cursor: default; }
.az button[aria-pressed="true"] { background: var(--zloto); color: var(--noc); }
.lista-ramka { margin-top: 14px; max-height: 560px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linia-2) transparent; }
.lista { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 14px; margin: 0; padding: 0; list-style: none; view-transition-name: lista; }
.lista .wiersz {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 9px 10px; border-bottom: 1px solid var(--linia); cursor: pointer; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0; min-height: 52px; width: 100%;
}
.lista .wiersz:hover { background: oklch(1 0 0 / .04); }
.lista .wiersz[aria-current="true"] { background: color-mix(in oklch, var(--c-sys) 12%, transparent); box-shadow: inset 3px 0 0 var(--zloto); }
.lista .glowka { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 8px 10px; position: sticky; top: 0; z-index: 2;
  font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); background: var(--noc-2); border-bottom: 1px solid var(--linia-2);
  container-type: scroll-state; }
.lista .nr { font: 600 13px var(--f-mono); color: var(--tekst-2); }
.lista .nz { font-weight: 600; font-size: 15px; }
.lista .ok { font-size: 13px; color: var(--tekst-3); }
.lista .ad { font: 500 12.5px var(--f-mono); color: var(--tekst-2); overflow-wrap: anywhere; text-align: right; }
.lista .ad.brak { color: var(--tekst-3); font-family: var(--f-disp); font-style: italic; }
.licznik-wynikow { font-size: 13px; color: var(--tekst-3); margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.wizytowka { container-type: inline-size; container-name: wiz; position: sticky; top: 84px; view-transition-name: wizytowka; padding: 0; }
.wiz-g { padding: 24px 24px 18px; border-bottom: 1px solid var(--linia); }
.wiz-g .stan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-2); }
.wiz-g h3 { font: 700 30px/1 var(--f-disp); letter-spacing: -.035em; text-transform: none; color: var(--tekst); margin: 12px 0 6px; font-variation-settings: 'wdth' 85; }
.wiz-g h3 span { font: 600 18px var(--f-mono); color: var(--zloto); letter-spacing: 0; display: block; margin-bottom: 6px; }
.wiz-g p { margin: 0; font-size: 14px; color: var(--tekst-3); }
.wiz-sek { padding: 16px 24px; border-bottom: 1px solid var(--linia); }
.wiz-sek h4 { margin: 0 0 8px; font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }
.wiz-strona { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-strona a.otworz { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--tekst); color: var(--noc); text-decoration: none; font-weight: 650; font-size: 14px; flex: none; }
.wiz-strona .adr { font: 600 14px var(--f-mono); overflow-wrap: anywhere; }
.krotki { display: grid; grid-template-columns: 1fr 92px; gap: 14px; align-items: center; }
.krotki .k { font: 700 26px var(--f-mono); letter-spacing: -.02em; color: var(--zloto); }
.krotki .qr { width: 92px; height: 92px; background: var(--tekst); padding: 6px; }
.krotki .qr svg { width: 100%; height: 100%; display: block; }
.krotki p { margin: 6px 0 0; font-size: 12.5px; color: var(--tekst-3); }
.wiz-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.wiz-liczby div b { display: block; font-weight: 300; font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.wiz-liczby div span { font-size: 12px; color: var(--tekst-3); }
.wiz-sekcje { font-size: 13.5px; color: var(--tekst-2); }
.historia { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 1px solid var(--linia-2); display: grid; gap: 8px; }
.historia li { position: relative; font-size: 13.5px; color: var(--tekst-2); }
.historia li::before { content: ''; position: absolute; left: -18.5px; top: 6px; width: 8px; height: 8px; background: var(--noc); border: 1px solid var(--zloto); rotate: 45deg; }
.historia time { font: 500 12px var(--f-mono); color: var(--tekst-3); display: block; }
.wiz-stopka { padding: 14px 24px 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.wiz-stopka button, .wiz-stopka a { min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--linia-2); font-size: 13.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.wiz-adr2 { font: 500 12px var(--f-mono); color: var(--tekst-3); overflow-wrap: anywhere; }
@container wiz (max-width: 360px) {
  .wiz-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .krotki { grid-template-columns: 1fr 76px; } .krotki .qr { width: 76px; height: 76px; }
  .wiz-strona { flex-direction: column; align-items: stretch; }
}
::view-transition-old(wizytowka), ::view-transition-new(wizytowka) { animation-duration: .45s; }
::view-transition-new(wizytowka) { animation-name: wiz-wej; }
@keyframes wiz-wej { from { opacity: 0; translate: 16px 0; filter: blur(6px); } }

/* ---------- 07 ZACZNIJ ---------- */
.skad { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.skad input { flex: 1 1 200px; height: 50px; padding: 0 14px; background: var(--noc-2); border: 1px solid var(--linia-2); font-size: 18px; field-sizing: content; min-width: 0; }
.skad button { min-height: 50px; padding: 0 16px; background: none; border: 1px solid var(--linia-2); cursor: pointer; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.najblizsze { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: nb; }
.najblizsze li { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--linia); align-items: center; counter-increment: nb; }
.najblizsze li::before { content: counter(nb); font: italic 400 26px/1 var(--f-serif); color: var(--zloto); grid-row: span 2; }
.najblizsze .nz { font-weight: 620; }
.najblizsze .nz b { font: 600 13px var(--f-mono); color: var(--tekst-2); margin-right: 6px; }
.najblizsze .gd { grid-column: 2; font-size: 13px; color: var(--tekst-3); display: flex; align-items: center; gap: 8px; }
.najblizsze .km { grid-row: 1 / span 2; grid-column: 3; font: 600 15px var(--f-mono); text-align: right; }
.najblizsze .km small { display: block; font-size: 11px; color: var(--tekst-3); font-weight: 400; }
.kroki { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 1px; background: var(--linia); border: 1px solid var(--linia); }
.kroki li { background: var(--noc-2); padding: 14px 16px; font-size: 14px; color: var(--tekst-2); display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; }
.kroki li > * { grid-column: 2; }
.kroki b { grid-column: 1 !important; grid-row: span 3; font: italic 400 30px/1 var(--f-serif); color: var(--zloto); }
.kroki strong { display: block; color: var(--tekst); font-weight: 640; margin-bottom: 4px; }

/* ---------- 08 STOPKA ---------- */
.stopka { position: relative; z-index: 5; padding: 120px var(--marg) 40px; background: linear-gradient(180deg, transparent, oklch(0.12 0.03 262 / .9) 30%); }
.stopka-g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; border-top: 1px solid var(--linia-2); padding-top: 28px; }
.stopka h3 { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 12px; }
.stopka p { margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); max-width: 46ch; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li a { display: flex; align-items: center; min-height: 40px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--linia); justify-content: space-between; }
.stopka li a:hover { color: var(--zloto); }
.stopka .prowadzi { font-family: var(--f-serif); font-size: 28px; line-height: 1.1; color: var(--tekst); font-style: italic; margin-bottom: 10px; }
.dziennik { font: 500 12.5px/1.6 var(--f-mono); color: var(--tekst-3); }
.dziennik b { color: var(--tekst-2); font-weight: 600; }
.stopka .dol { margin-top: 36px; font-size: 12px; color: var(--tekst-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- układy desktopowe ---------- */
.sek-loty .panel, .sek-zacznij .panel { max-width: 520px; }
.sek-puls .uklad.prawy { align-items: start; }
.sek-kat { padding-top: 120px; }

/* ---------- brak WebGL / ruch ograniczony ---------- */
html.bez-webgl #scena { display: none; }
#mapa2d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: none; }
html.bez-webgl #mapa2d { display: block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pole::before { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- tryb plakatu: zrzut całej strony / druk — kadry sceny jako tła sekcji ---------- */
html.plakat #scena, html.plakat #nakladka, html.plakat .zasl, html.plakat #mapa2d, html.plakat .hud, html.plakat .trasa { display: none; }
html.plakat .belka { position: absolute; }
html.plakat .sek, html.plakat .stopka { overflow: hidden; }
html.plakat .kadr {
  display: block; position: absolute; inset: 0 0 auto 0; height: var(--kadr-h, 900px); z-index: -1;
  background: var(--noc) center top / 100% 100% no-repeat; background-image: var(--obraz, none);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 7%, #000 82%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 7%, #000 82%, transparent 100%);
}
html.plakat .sek-hero .kadr { -webkit-mask: linear-gradient(180deg, #000 82%, transparent); mask: linear-gradient(180deg, #000 82%, transparent); }
html.plakat .kadr::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.12 0.03 262 / .5), transparent 46%); }
html.plakat .sek-puls .kadr::after { background: linear-gradient(270deg, oklch(0.12 0.03 262 / .5), transparent 46%); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .trasa { display: none; }
  .k-rozwoj, .k-kraj { grid-column: span 12; }
  .k-rekordy { grid-column: span 12; grid-row: auto; }
  .kat-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}
@media (max-width: 980px) {
  .belka nav { display: none; }
  .belka .szukaj-btn { display: inline-flex; align-items: center; }
  .sek-hero { grid-template-columns: 1fr; }
  .kraj { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .kraj div:nth-child(3) { border-right: 0; }
  .kraj div:nth-child(4) { padding-left: 0; }
  .uklad, .uklad.prawy { grid-template-columns: 1fr; }
  .uklad.prawy > .panel { grid-column: 1; }
  .kat-uklad { grid-template-columns: 1fr; }
  .wizytowka { position: relative; top: 0; }
  .hud { display: none; }
}

/* ---------- telefon ---------- */
@media (max-width: 760px) {
  .belka { height: 58px; gap: 10px; }
  .znak svg { width: 30px; height: 30px; }
  .znak span { font-size: 13.5px; }
  .znak span small { font-size: 10px; }
  .sek { padding: 92px 16px 56px; min-height: 0; }
  .okno { display: block; height: 340px; margin: 0 -16px; pointer-events: none; }
  .sek-hero { padding-top: 84px; min-height: 0; }
  .sek-hero .okno { height: 250px; order: 0; }
  h1 { font-size: 46px; margin-top: 12px; }
  .sek-hero .lead { font-size: 16.5px; }
  .lead { font-size: 16px; }
  .pole { padding-left: 12px; }
  .pole input { font-size: 18px; height: 48px; }
  .pole button { min-height: 48px; padding: 0 12px; }
  .pole button span { display: none; }
  .wynik { padding: 10px 12px; grid-template-columns: 12px 1fr auto; column-gap: 10px; }
  .kraj { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .kraj div, .kraj div:nth-child(4) { padding: 14px 12px 0 0; border-right: 0; }
  .kraj div:nth-child(odd) { border-right: 1px solid var(--linia); }
  .kraj div:nth-child(even) { padding-left: 14px; }
  .kraj div:last-child { grid-column: 1 / -1; border-right: 0; padding-left: 0; }
  .kraj .w { font-size: 44px; }
  .panel { padding: 20px 16px; }
  .panel::before { left: -1px; }
  h2 { font-size: 34px; }
  .num b { font-size: 36px; }
  .num .wsp { display: none; }
  .kaskada .w { font-size: 48px; }
  .region { grid-template-columns: 32px 1fr auto; }
  .region::before { left: -16px; }
  .slupki li { grid-template-columns: 110px 1fr 30px; font-size: 13px; }
  .wielkie .w { font-size: 44px; }
  .swiezosc-opis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .niebo { height: 300px; margin: 0 -16px; }
  .niebo .napis { left: 16px; right: 16px; bottom: 16px; }
  .sek-liczby { padding-top: 0; }
  .siatka-l > .k { padding: 20px 16px; }
  .k-kraj { grid-template-columns: 1fr 1fr; gap: 14px; }
  .filtry { grid-template-columns: 1fr 1fr; }
  .filtry label:first-child { grid-column: 1 / -1; }
  .lista { grid-template-columns: 12px auto minmax(0, 1fr); }
  .lista .ok { display: none; }
  .lista .ad { grid-column: 3; text-align: left; font-size: 12px; }
  .lista .wiersz { row-gap: 2px; padding: 9px 6px; gap: 2px 10px; }
  .lista .glowka span:nth-child(4), .lista .glowka span:nth-child(5) { display: none; }
  .lista-ramka { max-height: 470px; }
  .stopka { padding: 72px 16px 32px; }
  .stopka-g { grid-template-columns: 1fr; gap: 28px; }
  .kronika li { grid-template-columns: 82px 1fr; font-size: 13.5px; }
}

/* plakat = obraz statyczny: bez rozmycia tła (w programowym renderowaniu kosztowne), panele nieco gęstsze */
html.plakat * { backdrop-filter: none !important; }
html.plakat { --szklo: color-mix(in oklch, var(--noc) 86%, transparent); --szklo-mocne: color-mix(in oklch, var(--noc) 94%, transparent); }

/* plakat: animacje zależne od przewijania zatrzymane na stanie końcowym, kadr stopki przygaszony */
html.plakat .licz, html.plakat .odslon { animation: none !important; }
html.plakat .stopka .kadr { opacity: .35; }

/* telefon: panele nie zasłaniają sceny w „oknach” — tło mają bloki treści, a okno jest dziurą w panelu */
@media (max-width: 760px) {
  .sek:not(.sek-kat) .panel { background: none; backdrop-filter: none; border: 0; padding: 0; margin: 0 -16px; }
  .sek:not(.sek-kat) .panel::before, .sek:not(.sek-kat) .panel::after { display: none; }
  .sek:not(.sek-kat) .panel > :not(.okno) { background: var(--szklo-mocne); backdrop-filter: blur(14px); margin: 0; padding: 0 16px 16px; }
  .sek:not(.sek-kat) .panel > :first-child { padding-top: 22px; }
  .sek:not(.sek-kat) .panel > :last-child { padding-bottom: 26px; }
  .sek:not(.sek-kat) .panel > .okno { margin: 0; }
  .sek-hero .hero-tresc > :not(.okno), .sek-hero .kraj, .sek-hero .legenda { background: var(--szklo-mocne); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .sek-hero .hero-tresc > * { margin-top: 0; margin-bottom: 0; padding-bottom: 12px; }
  .sek-hero .hero-tresc > :first-child { padding-top: 16px; }
  .sek-hero .kraj { margin-top: 0; padding-top: 8px; border-top: 0; }
  .sek-hero .legenda { margin-top: 0; padding-top: 14px; padding-bottom: 18px; }
  .szukajka { max-width: none; }
  .region { grid-template-columns: 32px minmax(0, 1fr); }
  .region .rl { grid-column: 2; text-align: left; }
  .num { margin-bottom: 12px; }
  .kanal li { grid-template-columns: 50px 1fr; }
}

.przewin { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--linia-2) transparent; }
@media (max-width: 760px) {
  .przewin { margin: 0 -16px; padding: 0 16px 6px; }
  .przewin .wykres { min-width: 560px; }
  .przewin .rytm { min-width: 980px; }
  .niebo { height: auto; padding-top: 280px; }
  .niebo .napis { position: static; background: var(--szklo-mocne); margin: 0 -16px; padding: 18px 16px 20px; max-width: none; }
  html.plakat .stopka .kadr { opacity: .18; }
}
html.bez-webgl .hud { display: none; }

/* ——— Z203: uzupełnienia wdrożenia ——— */
.wynik.brak { display: block; }
.wynik.brak a { color: var(--zloto); font-weight: 600; }
.wiz-stopka a, .wiz-adr2 a { color: inherit; }
.belka nav a.wroc { color: var(--zloto); }
.kanal a { color: inherit; text-decoration: none; }
.kanal a:hover b { text-decoration: underline; }