/* kropki.html: poprawki nad scena.css (akcenty, hierarchia). Oryginał scena.css zostaje nietknięty. */

/* ---- Akcenty Ć Ń Ś Ź w Antonie: litera bazowa + akcent rysowany (patrz js/akcenty.js) ---- */
/* Litera jako blok w linii (pozycja akcentu liczona od jej pudełka, tak samo w Chrome i Firefoksie);
   całe słowo w .akc-slowo nie łamie się. Pudełko ma wysokość 1lh, obszar glifu Antona 1,51 em
   (wznoszenie 1,18 + zejście 0,33), więc góra glifu leży (1,51 em - 1lh) / 2 nad pudełkiem. */
.akc-slowo { white-space: nowrap; }
.akc { position: relative; display: inline-block; --glif: calc((1.51em - 1lh) / 2); }
.akc__widok::after { content: ""; position: absolute; left: 50%; top: calc(var(--akc-gora, .03em) - var(--glif)); width: .115em; height: .19em;
  background: currentColor; translate: -20% 0; transform: skewX(-36deg); border-radius: .012em; }   /* proporcje akcentu nad Ó w Antonie */
.akc__prawda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.akc__widok { user-select: none; }

/* ---- Hierarchia: trzy role typograficzne, każda w jednym kroju ----
   etykieta: Archivo 600 wersalikami, rozstrzelona, ściszona · nagłówek: Anton · treść: Archivo.
   W Metodzie nazwa litery przestaje konkurować z nagłówkiem (była drugim Antonem wersalikami):
   litera jest znakiem, pytanie główną linią karty, nazwa etykietą, lista ściszonym dopiskiem. */
.etap p.nr { font-size: .78rem; letter-spacing: .18em; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.etap p.nr::before, .etap p.nr::after { content: ""; width: 22px; height: 2px; background: var(--limonka); }
.etap p.opis { margin-top: 20px; font-size: clamp(1.05rem, .55rem + .75vw, 1.3rem); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.litery-karty { margin-top: 22px; }
.karta-l { display: flex; align-items: center; justify-content: center; gap: 12px; font: 700 .78rem/1 Archivo, sans-serif; letter-spacing: .16em; color: var(--napis-2); }
.karta-l b { font: 400 2.1rem/1 Anton, sans-serif; letter-spacing: 0; background: var(--limonka); color: var(--tusz); padding: .1em .28em .06em; margin: 0; }
.karta-q { margin: 14px auto 10px; max-width: 34ch; font: 600 clamp(1.1rem, .6rem + .8vw, 1.35rem)/1.35 Archivo, sans-serif; color: var(--napis); text-wrap: balance; }
.litery-karty ul { font: 400 .98rem/1.5 Archivo, sans-serif; color: var(--napis-2); max-width: 52ch; margin-inline: auto; }
@media (max-width: 699px) {
  .etap p.nr { font-size: .7rem; gap: 8px; }
  .etap p.nr::before, .etap p.nr::after { width: 14px; }
  .karta-l b { font-size: 1.6rem; }
  .karta-q { font-size: 1.02rem; }
  .litery-karty ul { font-size: .88rem; }
}

/* Litera Ź w kółku Metody: style kółek dotyczą tylko bezpośrednich liter, nie wnętrza poprawionego akcentu. */
.kolka-litery span span { font-size: inherit; color: inherit; position: static; translate: none; opacity: 1; transition: none; transform: none; text-shadow: inherit; }
.kolka-litery .akc { position: relative; }
.kolka-litery .akc__prawda { position: absolute; }

/* Nagłówki: ogonek Ą w Antonie schodzi ok. 0,3 em pod linię i przy interlinii 1,04 wpadał w następny wiersz
   („WYGLĄDA” nad „PISZE”). Limonkowe tło mark było wyższe niż litery i zasłaniało dół wiersza wyżej.
   Tło ograniczone do wysokości wersalików z małym marginesem. */
.etap h2, .etap:nth-child(3) h2 { line-height: 1.14; }
/* Metryki Antona zmierzone w przeglądarce (canvas measureText): wznoszenie 1,18 em, wersaliki 0,86 em,
   więc wersaliki zaczynają się 0,32 em od góry linii. Tło zaznaczenia: od 0,07 em nad wersalikami do 0,08 em pod linią.
   Zaznaczenie z akcentem (PYTAŃ) dostaje tło sięgające nad akcent; klasę nadaje js/akcenty.js. */
.etap h2 mark { background: linear-gradient(var(--limonka), var(--limonka)) no-repeat 0 .25em / 100% 1.01em; padding: 0 .12em; }
.etap h2 mark.mark--akcent { background-position: 0 .01em; background-size: 100% 1.25em; }

/* Ogonek Ą Ę: płytszy niż w Antonie (ok. 0,2 em zamiast 0,33 em), więc mieści się w interlinii 1,14.
   Kształt jak w foncie, tylko niższy: wychodzi ze stopki w lewo i w dół, kończy się ogonkiem w prawo
   (lewa i dolna krawędź z zaokrąglonym rogiem). Porównanie z fontem: tools/akcent.html. */
.akc--ogonek .akc__widok::after { content: ""; position: absolute; left: calc(100% - var(--og-x, .24em)); right: auto; top: calc(1.16em - var(--glif));   /* linia bazowa 1,18 em od góry glifu */
  width: .15em; height: .17em; translate: 0 var(--og-y, 0); transform: none; background: none;
  border-left: .085em solid currentColor; border-bottom: .07em solid currentColor; border-radius: 0 0 0 .16em; }
.wysokosc--scena { height: 900svh; }   /* dłuższa droga: każdy akt ma postój, Metoda czas na siedem liter */

/* ---- 2026-10-07: „więcej script writing, bardziej limonkowy mazak niż kreska” ----
   Zaznaczenie w nagłówku jak pociągnięcie mazakiem: nierówne krawędzie, lekki skos, poszarpane końce.
   Kreski przy etykiecie: krótkie pociągnięcia mazaka zamiast linii. Dopisek odręczny w każdym akcie. */
.etap h2 mark { background: none; position: relative; z-index: 0; padding: 0 .14em; }
.etap h2 mark::before { content: ""; position: absolute; z-index: -1; inset: .3em -.04em .02em -.06em; background: var(--limonka);
  border-radius: 46% 12% 38% 9% / 18% 60% 22% 55%; transform: rotate(-1.2deg) skewX(-6deg); opacity: .96;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 .12em, #000 calc(100% - .1em), transparent 100%), radial-gradient(circle at 40% 50%, #000 60%, transparent 61%);
  -webkit-mask-composite: source-over; }
.etap h2 mark.mark--akcent::before { top: .06em; }
.etap p.nr::before, .etap p.nr::after { height: 5px; width: 30px; border-radius: 40% 60% 55% 45% / 70% 40% 60% 30%; transform: rotate(-4deg); }
.etap p.nr::after { transform: rotate(3deg); }
.dopisek { font: 400 clamp(1.5rem, 1rem + 1.1vw, 2.1rem)/1 "Caveat Brush", cursive; color: var(--limonka); margin: 0 0 6px;
  transform: rotate(-3deg); text-shadow: 0 1px 0 rgba(17, 30, 38, calc((1 - var(--ciemno)) * .55)); }
:root:not([data-x]) .etap:first-child .dopisek, .etap:nth-child(5) .dopisek { color: var(--pomarancz, #F74304); text-shadow: none; }
@media (max-width: 699px) { .dopisek { font-size: 1.35rem; } }
.etap h2 .slowo { display: inline-block; }   /* wejście słowo po słowie (js/wejscia.js) */

/* Dopisek: podkreślenie mazakiem (rysowane w js/wejscia.js), sam dopisek jako blok szeroki na tekst. */
.dopisek { display: inline-block; position: relative; padding-bottom: .12em; }
.dopisek__kreska { position: absolute; left: -2%; right: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; }
.dopisek__kreska path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.etap { text-align: center; }

/* Przycisk proceduralnego dźwięku: głośnik jest stały, zmieniają się tylko fale i przekreślenie. */
[data-dzwiek] .dzwiek__fala, [data-dzwiek] .dzwiek__skos {
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  transform-origin: center;
}
[data-dzwiek] .dzwiek__fala { opacity: 0; transform: scale(.8); }
[data-dzwiek] .dzwiek__skos { opacity: 1; }
[data-dzwiek][aria-pressed="true"] .dzwiek__fala { opacity: 1; transform: scale(1); }
[data-dzwiek][aria-pressed="true"] .dzwiek__skos { opacity: 0; }
[data-dzwiek]:disabled { cursor: not-allowed; opacity: .45; }

/* Kadry tekstu w akcie (2026-10-08): kilka zmian napisu w jednym akcie, ułożone w jednej komórce siatki, przenikanie liczy js/scroll-kropki.js. */
.kadry { display: grid; }
.kadr { grid-area: 1 / 1; opacity: 0; }
.kadr:first-child { opacity: 1; }

/* Zgody na cookies (js/zgody.js), 2026-10-08: na przedzie, strona pod spodem rozmyta, „Akceptuj” po prawej. */
.zgody { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(17, 30, 38, .28); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  opacity: 0; transition: opacity .35s; }
.zgody[data-stan="otwarty"] { opacity: 1; }
.zgody[hidden] { display: none; }
.zgody__karta { width: min(520px, 100%); background: rgba(17, 30, 38, .96); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(17, 30, 38, .45); color: rgba(243, 240, 234, .8); padding: 26px 26px 22px; font: 400 .9rem/1.6 Archivo, sans-serif;
  translate: 0 14px; scale: .97; transition: translate .4s cubic-bezier(.2, .9, .3, 1.2), scale .4s cubic-bezier(.2, .9, .3, 1.2); }
.zgody[data-stan="otwarty"] .zgody__karta { translate: 0 0; scale: 1; }
.zgody h2 { margin: 0 0 8px; font: 400 1.6rem/1.1 Anton, sans-serif; text-transform: uppercase; color: #F3F0EA; }
.zgody p { margin: 0; }
.zgody a { color: var(--limonka); }
.zgody__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.zgody button { font: 600 .875rem Archivo, sans-serif; border-radius: 999px; padding: 11px 18px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #F3F0EA; }
.zgody button[data-akcja="ustawienia"] { border: 0; padding-inline: 4px; text-decoration: underline; text-underline-offset: 3px; }
.zgody button[data-akcja="wszystkie"], .zgody button[data-akcja="zapisz"] { margin-left: auto; background: var(--limonka); color: var(--tusz); border-color: transparent; padding-inline: 26px; }
.zgody button[data-akcja="zapisz"]:not([hidden]) + button[data-akcja="wszystkie"] { margin-left: 0; }
.zgody button[hidden] { display: none; }
.zgody__ustawienia { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 10px; }
.zgody__ustawienia[hidden] { display: none; }
.zgody__ustawienia label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.zgody__ustawienia input { accent-color: var(--limonka); width: 16px; height: 16px; margin: .25em 0 0; flex: none; }
.zgody__ustawienia b { color: #F3F0EA; font-weight: 600; }
@media (max-width: 699px) { .zgody { place-items: end center; padding-bottom: 24px; } .zgody__karta { padding: 22px 20px 18px; } }

/* Wejścia tekstów (js/wejscia.js, 2026-10-08): słowa opisu w pudełkach, zaznaczenie rysowane mazakiem od lewej (--mazak 0..1). */
.slowo-t { display: inline-block; }
.etap h2 mark::before { transform-origin: 0 50%; transform: rotate(-1.2deg) skewX(-6deg) scaleX(var(--mazak, 1)); }
.karta-l b { display: inline-block; }