/* Scena SPRAWDŹ nad paskiem: płótno WebGL (z 1), napisy etapów i linijka (z 2), pasek z pasek.css (wyżej). */
.scena-plotno { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.etapy { position: fixed; z-index: 2; left: clamp(16px, 6vw, 96px); top: 46%; translate: 0 -50%; width: min(44ch, 40vw); pointer-events: none; }
.etap { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; }
.etap:first-child { opacity: 1; }
.etap p.nr { font: 600 .75rem/1 Archivo, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--napis-2); margin: 0 0 14px; }
.etap h2 { font: 400 clamp(2.4rem, 5.2vw, 4.8rem)/1.08 Anton, Impact, sans-serif; text-transform: uppercase; color: var(--napis); margin: 0; text-wrap: balance; }
.etap h2 mark { background: var(--limonka); color: var(--tusz); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.etap p.opis { font: 500 clamp(1.05rem, 1.35vw, 1.25rem)/1.55 Archivo, system-ui, sans-serif; color: var(--napis-2); margin: 18px 0 0; max-width: 38ch; }
.linijka { position: fixed; z-index: 2; right: clamp(16px, 3vw, 40px); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; pointer-events: none; }
.linijka li { font: 600 .6875rem/1 Archivo, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--napis-2); display: flex; align-items: center; gap: 10px; justify-content: flex-end; opacity: .55; transition: opacity .3s; }
.linijka li::after { content: ""; width: 18px; height: 2px; background: currentColor; transition: width .3s; }
.linijka li[data-akt] { opacity: 1; color: var(--napis); }
.linijka li[data-akt]::after { width: 34px; background: var(--limonka); }
.licznik { position: fixed; z-index: 2; right: clamp(16px, 3vw, 40px); top: clamp(16px, 4vh, 32px); font: 400 1.4rem/1 Anton, sans-serif; color: var(--napis); font-variant-numeric: tabular-nums; }
:root { --ciemno: 0; --napis: color-mix(in srgb, #EDE9E1 calc(var(--ciemno) * 100%), var(--tusz)); --napis-2: color-mix(in srgb, #D3D9DD calc(var(--ciemno) * 100%), #2E3A44); }
.wysokosc--scena { height: 700svh; }
@media (max-width: 699px) {
  .etapy { left: 16px; right: 16px; width: auto; top: auto; bottom: 230px; translate: none; }
  .etap { inset: auto 0 0 0; }
  .etap h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .etap p.opis { font-size: .95rem; }
  .linijka { top: 16px; translate: none; right: 16px; grid-auto-flow: column; gap: 6px; }
  .linijka li { font-size: 0; gap: 0; }
  .linijka li::after { width: 22px; }
  .linijka li[data-akt]::after { width: 22px; background: var(--limonka); height: 4px; }
  .licznik { display: none; }
}

/* Grześ: cztery pozy z planszy 2 × 2 (assets/grzes/plansza.png) dla etapów 1 do 4, wideo z prezentem dla etapu 5.
   Pozy przenikają się; na ciemnych światach jasna poświata, bez odwracania barw postaci. */
.grzes { position: fixed; z-index: 2; pointer-events: none; transform-origin: 50% 100%; right: clamp(120px, 11vw, 200px); bottom: 5vh; width: min(25vw, 42vh); aspect-ratio: 1; }
.grzes > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity, transform;
  filter: drop-shadow(0 0 2px rgba(237, 233, 225, calc(var(--ciemno) * .95))) drop-shadow(0 0 3px rgba(237, 233, 225, calc(var(--ciemno) * .9))) drop-shadow(0 0 34px rgba(237, 233, 225, calc(var(--ciemno) * .34))) drop-shadow(0 12px 22px rgba(17, 30, 38, calc((1 - var(--ciemno)) * .2))); }
.grzes .poza { background: url(../assets/grzes/plansza.png) no-repeat; background-size: 200% 200%; }
.grzes .poza:nth-child(1) { background-position: 0 0; }
.grzes .poza:nth-child(2) { background-position: 100% 0; }
.grzes .poza:nth-child(3) { background-position: 0 100%; }
.grzes .poza:nth-child(4) { background-position: 100% 100%; }
.grzes video { object-fit: contain; }
@media (max-width: 699px) { .grzes { right: 8px; bottom: auto; top: 30svh; width: 38vw; } }

/* Litery w środku kółek etapu Metoda: pozycję i rozmiar ustawia skrypt z parametrów sceny. */
.kolka-litery { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.kolka-litery span { position: absolute; translate: -50% -50%; font: 400 1rem/1 Anton, sans-serif; color: var(--napis); opacity: 0; transition: transform .25s; }
.kolka-litery span[data-zapalona] { color: #EDE9E1; }
.kolka-litery span[data-aktywna] { color: var(--limonka); transform: scale(1.35); text-shadow: 0 0 12px rgba(218, 255, 1, .45); }
/* Karty liter: wszystkie w HTML, widać jedną. */
.litery-karty { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.litery-karty > li { grid-area: 1 / 1; opacity: 0; transition: opacity .35s, translate .35s; translate: 0 10px; }
.litery-karty > li[data-aktywna] { opacity: 1; translate: 0 0; }
.karta-l { margin: 0; font: 400 1.5rem/1.1 Anton, sans-serif; text-transform: uppercase; color: var(--napis); }
.karta-l b { font-weight: 400; background: var(--limonka); color: var(--tusz); padding: 0 .2em; margin-right: .2em; }
.karta-q { margin: 10px 0 8px; font: 600 1.05rem/1.4 Archivo, sans-serif; color: var(--napis); }
.litery-karty ul { margin: 0; padding-left: 1.1em; color: var(--napis-2); font: 500 1.02rem/1.5 Archivo, sans-serif; }

/* Metoda niesie nagłówek i kartę naraz, więc nagłówek jest mniejszy i mieści się w jednej, dwóch liniach. */
.etap:nth-child(3) h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
@media (max-height: 760px) and (min-width: 700px) { .etap h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); } .etap:nth-child(3) h2 { font-size: clamp(1.6rem, 2.8vw, 2.6rem); } }
.etap:nth-child(3) h2 { line-height: 1.22; }

/* ===== Układ wyśrodkowany jak na zero.university (2026-10-04, decyzja użytkownika) ===== */
@font-face { font-family: "Caveat Brush"; src: url(../assets/fonts/caveat-brush-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Caveat Brush"; src: url(../assets/fonts/caveat-brush-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F; }
.etapy { left: 50%; top: 7vh; translate: -50% 0; width: min(62ch, 86vw); text-align: center; }
.etap h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1.04; }
.etap:nth-child(3) h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.15; }
.etap p.opis { margin-inline: auto; max-width: 52ch; }
.litery-karty { justify-items: center; }
.litery-karty ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.litery-karty ul li + li::before { content: "·"; margin: 0 .55em; color: var(--limonka); }
/* Grześ: bohater na ścieżce, pozycję poziomą ustawia skrypt */
.grzes { right: auto; left: 50%; bottom: 3vh; width: clamp(270px, 25vw, 390px); translate: -50% 0; }
@media (max-height: 760px) and (min-width: 700px) { .etap h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); } }
@media (max-width: 699px) {
  .etapy { top: 9svh; bottom: auto; left: 50%; right: auto; width: calc(100vw - 32px); }
  .etap { inset: 0 0 auto 0; }
  .grzes { top: auto; bottom: 98px; width: clamp(176px, 48vw, 230px); }
}
/* Framework: kurtyna z pełną tabelą */
.framework { position: relative; z-index: 3; background: var(--papier); padding: 96px 16px 180px; text-align: center; box-shadow: 0 -30px 60px rgba(17, 30, 38, .12); }
.framework__nad { font: 600 .75rem/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-2); margin: 0 0 18px; }
.framework h2 { font: 400 clamp(2rem, 4.4vw, 4rem)/1.05 Anton, Impact, sans-serif; text-transform: uppercase; color: var(--tusz); margin: 0 auto; max-width: 18ch; text-wrap: balance; }
.framework .pismo { font-family: "Caveat Brush", cursive; text-transform: none; color: var(--tusz); background: var(--limonka); padding: 0 .15em; font-size: 1.1em; }
.framework__lede { max-width: 56ch; margin: 22px auto 0; font: 500 1.1rem/1.6 Archivo, sans-serif; color: #2E3A44; }
.framework__tabela { max-width: 980px; margin: 56px auto 0; text-align: left; display: grid; }
.framework__tabela > div { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 28px; padding: 22px 0; border-top: 1px solid rgba(17, 30, 38, .14); }
.framework__tabela > div:last-child { border-bottom: 1px solid rgba(17, 30, 38, .14); }
.framework__tabela dt { font: 400 1.3rem/1.15 Anton, sans-serif; text-transform: uppercase; color: var(--tusz); display: flex; gap: 12px; align-items: baseline; }
.framework__tabela dt b { font-weight: 400; background: var(--limonka); padding: 0 .25em; min-width: 1.4em; text-align: center; }
.framework__tabela dd { margin: 0; }
.framework__tabela dd p { margin: 0; font: 600 1.05rem/1.45 Archivo, sans-serif; color: var(--tusz); }
.framework__tabela dd p.sprawdz { margin-top: 6px; font-weight: 400; font-size: .95rem; color: #3A4650; }
.framework__stopka { margin: 40px auto 0; font: 500 1rem/1.5 Archivo, sans-serif; color: #2E3A44; }
@media (max-width: 699px) { .framework__tabela > div { grid-template-columns: 1fr; gap: 8px; } }
.grzes .chod { background-repeat: no-repeat; opacity: 0; inset: auto; left: 50%; bottom: 0; height: 100%; width: auto; aspect-ratio: 328 / 600; translate: -50% 0; }   /* klatki chodu są pionowe: 4 x 2 z planszy 1312 x 1199 */