/* gdyby.hexart.io: scenariusz na biurku przy świecy.
   Styl strony należy do serialu (papier, Courier, światło świecy). HEXART to rama:
   kontrolki (wypełnienie od lewej, ścięty róg 30°), podpis i „O stronie”. */

@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/courier-prime-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/courier-prime-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(../fonts/courier-prime-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Courier Prime"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(../fonts/courier-prime-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: italic; font-display: swap;
  src: url(../fonts/courier-prime-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: italic; font-display: swap;
  src: url(../fonts/courier-prime-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap;
  src: url(../fonts/outfit-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap;
  src: url(../fonts/outfit-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --onyx: #0A0A0C; --carbon: #050507; --graphite: #141418; --slate: #24242A;
  --gold: #D1AE53; --gold-light: #EBD065; --bronze: #7A5F1C; --ivory: #F6F3EC; --mist: #B0B8C4; --red: #FF4B4B;
  --papier: #F3EBD8; --papier-cien: #E4D8BC;
  --papier-krawedz: linear-gradient(90deg, rgba(70, 50, 20, .055), transparent 2.5%, transparent 96.5%, rgba(70, 50, 20, .07)),
    linear-gradient(180deg, rgba(70, 50, 20, .04), transparent 2%, transparent 97.5%, rgba(70, 50, 20, .06)); --tusz: #1E1A15; --tusz-blady: #5C5244;
  --znacznik: rgba(209, 174, 83, .34); --znacznik-mocny: rgba(209, 174, 83, .72);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in: cubic-bezier(0.2, 0, 0, 1);
  --chamfer-sm: polygon(0 0, calc(100% - 10px) 0, 100% 6px, 100% 100%, 0 100%);
  --chamfer-md: polygon(0 0, calc(100% - 17px) 0, 100% 10px, 100% 100%, 0 100%);
  --kartka-f: clamp(12px, calc(58vw / 49.6), 21px); /* 1em = 12 pt scenariusza */
  --pasek-h: 76px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--carbon); color: var(--ivory);
  font: 400 16px/1.45 "Outfit", "Segoe UI", Arial, sans-serif;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- biurko -------------------------------------------------------------- */

#biurko { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0d0a07 center / cover no-repeat; }
#biurko video, #biurko img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#biurko::after { /* winieta i ciepłe światło świecy z lewej u góry (tam stoi na zdjęciu) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 14% 6%, rgba(255, 190, 110, .10), transparent 60%),
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, .62) 100%);
}
#migotanie { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 55% 50% at 14% 6%, rgba(255, 170, 80, .35), transparent 70%);
  animation: migotanie 4.2s steps(30) infinite; }
@keyframes migotanie {
  0%, 100% { opacity: .55; } 13% { opacity: .7; } 21% { opacity: .5; } 37% { opacity: .66; }
  52% { opacity: .58; } 64% { opacity: .74; } 80% { opacity: .52; }
}

/* --- okładka (strona tytułowa leżąca na biurku) --------------------------------- */

#okladka-warstwa { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; perspective: 1800px;
  padding: 24px 16px calc(var(--pasek-h) + 24px + env(safe-area-inset-bottom)); overflow: auto; }
.okladka {
  position: relative; width: min(560px, 92vw); min-height: min(760px, calc(100vh - var(--pasek-h) - 48px));
  background: var(--papier); color: var(--tusz);
  font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 16px; line-height: 1.5;
  padding: 64px 48px 40px; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 2px 0 var(--papier-cien), 0 4px 0 #d9ccae, 0 6px 0 var(--papier-cien), 0 8px 18px rgba(0,0,0,.4);
  transform: rotate(-.6deg);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
  background-image: radial-gradient(ellipse at 22% 8%, rgba(255, 246, 225, .30), transparent 55%), var(--papier-krawedz),
    linear-gradient(180deg, transparent 85%, rgba(120, 90, 40, .06)), url(../media/papier.webp);
  background-size: auto, auto, auto, 512px 512px;
}
/* Otwarcie: wierzchnią kartkę ktoś unosi i spokojnie zsuwa ze stosu do góry. Bez obrotów w przestrzeni. */
.okladka.podnies { transform: rotate(-.6deg) translateY(-6px);
  box-shadow: 0 46px 80px rgba(0, 0, 0, .6), 0 2px 0 var(--papier-cien), 0 8px 18px rgba(0,0,0,.35); }
.okladka.otwarta { transform: rotate(-1.4deg) translateY(-115vh); pointer-events: none;
  transition: transform 1150ms cubic-bezier(.55, 0, .3, 1), box-shadow 600ms var(--ease); }
.okladka.wraca { transition: transform 900ms cubic-bezier(.2, 0, 0, 1), box-shadow 600ms var(--ease); }
.ok-serial { font-weight: 700; font-size: 34px; letter-spacing: .06em; margin: 28px 0 6px; }
.ok-scen { margin: 0 0 28px; }
.ok-odc { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.ok-odc-nr { margin: 0; }
.ok-tytul { font-weight: 700; font-size: 22px; margin: 0 0 30px; min-height: 2em; }
.ok-strzalka { width: 44px; height: 44px; border: 1px solid rgba(30, 26, 21, .35); background: transparent; color: var(--tusz);
  cursor: pointer; display: grid; place-items: center; }
.ok-strzalka:disabled { opacity: .25; cursor: default; }
.ok-strzalka svg { width: 18px; height: 18px; }
.ok-autorka { margin-top: auto; font-size: 14px; color: var(--tusz-blady); }
.ok-wersja { font-size: 13px; color: var(--tusz-blady); margin: 6px 0 0; }
.ok-info { font: 400 14px/1.45 "Outfit", sans-serif; color: var(--tusz-blady); max-width: 34ch; margin: 14px 0 0; }

/* Duży przycisk CZYTAJ: złoto na Onyx, wypełnienie od lewej (HEXART 1.1) */
.duzy {
  --tlo: var(--onyx); --wyp: var(--gold); --tekst: var(--gold); --tekst-wyp: var(--onyx);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 260px; min-height: 72px; padding: 0 36px; border: 0; cursor: pointer;
  background: var(--tlo); color: var(--tekst); clip-path: var(--chamfer-md);
  font: 600 22px/1 "Barlow Condensed", "Bahnschrift SemiCondensed", sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.duzy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wyp);
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--ease); }
.duzy svg { width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .duzy:hover::before { clip-path: inset(0); transition: clip-path 320ms var(--ease-in); }
  .duzy:hover { color: var(--tekst-wyp); transition: color 0ms linear 160ms; }
}
.duzy:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.duzy:active::before { clip-path: inset(0); background: var(--bronze); transition: none; }
.pole-hasla { width: min(320px, 100%); height: 56px; margin: 18px 0 18px; padding: 0 14px; text-align: center;
  background: #fffaf0; color: var(--tusz); border: 1px solid rgba(30, 26, 21, .4); font: 400 20px/1 "Courier Prime", monospace; }
.pole-hasla:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.ok-odnowa { margin-top: 14px; min-height: 44px; background: none; border: 0; color: var(--bronze); cursor: pointer; padding: 8px 10px;
  display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.3 "Outfit", sans-serif;
  text-decoration: underline; text-underline-offset: 3px; }
.ok-odnowa svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.ok-odnowa:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ok-odnowa:hover { color: var(--tusz); } }

/* --- kartki scenariusza --------------------------------------------------------- */

#stol { position: fixed; inset: 0; z-index: 3; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(209,174,83,.35) transparent; }
#stos { position: relative; width: calc(49.6 * var(--kartka-f)); margin: 0 auto;
  padding: 6vh 0 60vh; font-size: var(--kartka-f); transform: translateX(-120px); }
#stos.wjazd { animation: wjazd 900ms var(--ease) 150ms both; }
@keyframes wjazd { from { opacity: 0; } to { opacity: 1; } }

.kartka {
  position: relative; width: 49.6em; min-height: 70.2em; margin: 0 0 2.2em;
  padding: 5.9em 2.36em 5.9em 8.98em; /* 25 mm góra, 10 mm prawa treści, 38 mm lewa */
  background: var(--papier); color: var(--tusz);
  font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 1em; line-height: 1em;
  /* cień kontaktowy z blatem + miękki cień od świecy */
  box-shadow: 0 .06em .1em rgba(0, 0, 0, .45), 0 .5em 1em rgba(0, 0, 0, .32), 0 1.8em 3.6em rgba(0, 0, 0, .42);
  /* światło świecy z lewej góry, lekko uniesione brzegi, faktura (tools/papier.py; kafel 32em, rośnie z kartką) */
  background-image: radial-gradient(ellipse at 18% 4%, rgba(255, 246, 225, .26), transparent 58%),
    radial-gradient(ellipse at 92% 100%, rgba(110, 80, 35, .07), transparent 52%), var(--papier-krawedz), url(../media/papier.webp);
  background-size: auto, auto, auto, 32em 32em;
  text-shadow: 0 0 .035em rgba(30, 26, 21, .4); /* tusz lekko wsiąka w papier */
}
.kartka-nr { position: absolute; top: 3.3em; right: 2.36em; }
.el { margin-top: 1em; white-space: pre-wrap; }
.kartka > .el:first-of-type { margin-top: 0; }
.heading { margin-top: 2em; position: relative; font-weight: 700; }
.heading::before, .heading::after { content: attr(data-n); position: absolute; top: 0; font-weight: 700; }
.heading::before { left: -2.6em; }
.heading::after { right: -2.1em; }
.dlg .cue { margin-left: 13.2em; }
.dlg .paren { margin-left: 9.3em; width: 12.6em; padding-left: 1ch; text-indent: -1ch; }
.dlg .speech { margin-left: 6em; width: 21em; }
.trans { text-align: right; }
.center { text-align: center; }
.el[data-b] { cursor: pointer; border-radius: 2px; transition: opacity 600ms var(--ease); }

/* czytanie: aktywny blok, przeczytane litery, bieżące słowo */
.czyta .kartka .el[data-b] { opacity: .58; }
.czyta .kartka .el.akt { opacity: 1; }
.seg .l.z { background: var(--znacznik); }
.seg .l.w { background: var(--znacznik-mocny); }
.seg .l { border-radius: 1px; }
.el.wybrany { outline: 2px dashed var(--bronze); outline-offset: .35em; opacity: 1 !important; }

/* --- uwagi na marginesie -------------------------------------------------------- */

.punkt { position: absolute; right: -4.4em; width: 2.6em; height: 2.6em; border: 0; padding: 0; cursor: pointer;
  background: var(--onyx); color: var(--gold); clip-path: var(--chamfer-sm);
  font: 600 1.05em/2.6em "Barlow Condensed", sans-serif; text-align: center; }
.karta-uwag.wewnatrz { left: auto; right: 1em; margin-top: 3.2em; width: min(340px, 80%); }
.punkt.pawel { background: var(--gold); color: var(--onyx); }
.punkt.otwarty { outline: 2px solid var(--gold); }
.karta-uwag { position: absolute; left: calc(100% + 5.4em); width: min(320px, var(--karta-w, 320px)); z-index: 4;
  background: rgba(10, 10, 12, .88); backdrop-filter: blur(10px); color: var(--ivory);
  border-top: 1px solid var(--gold); clip-path: var(--chamfer-md); padding: 14px 16px 12px;
  font: 400 15px/1.45 "Outfit", sans-serif; }
.uwaga + .uwaga { border-top: 1px solid var(--slate); margin-top: 12px; padding-top: 12px; }
.uwaga-glowa { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.podpis { font: 600 18px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.podpis.pawel { color: var(--gold-light); }
.kiedy { color: var(--mist); font-size: 13px; }
.uwaga-tekst { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.uwaga.zalatwiona .uwaga-tekst { text-decoration: line-through; color: var(--mist); }
.uwaga-akcje { display: flex; flex-wrap: wrap; gap: 6px; }
.maly { min-height: 36px; padding: 0 12px; border: 1px solid var(--slate); background: var(--graphite); color: var(--ivory);
  cursor: pointer; font: 500 14px/1 "Outfit", sans-serif; display: inline-flex; align-items: center; gap: 6px; }
.maly svg { width: 14px; height: 14px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .maly:hover { border-color: var(--gold); } }
.maly:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.uwaga textarea { width: 100%; min-height: 110px; background: var(--onyx); color: var(--ivory); border: 1px solid var(--slate);
  font: 400 15px/1.45 "Outfit", sans-serif; padding: 8px; resize: vertical; }

/* ZGŁOŚ UWAGĘ: dobrze widoczny, sygnałowa czerwień tylko tutaj */
#zglos { flex: none; min-height: 58px; padding: 0 26px 0 20px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; clip-path: var(--chamfer-md);
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; }
#zglos .kropka { width: 16px; height: 16px; border-radius: 50%; background: #fff; }
#zglos:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { #zglos:hover { background: #e93f3f; } }

#nagrywanie { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 5, 7, .72);
  padding: 16px; }
.nagr-okno { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--graphite);
  border-top: 2px solid var(--red); clip-path: var(--chamfer-md); padding: 28px 24px 22px; text-align: center; }
.nagr-czas { font: 500 54px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; margin: 10px 0 6px; }
.nagr-poziom { height: 6px; background: var(--slate); margin: 14px 0 18px; overflow: hidden; }
.nagr-poziom i { display: block; height: 100%; width: 0; background: var(--red); transition: width 90ms linear; }
.nagr-miejsce { color: var(--mist); font-size: 15px; margin: 0 0 18px; overflow-wrap: anywhere; }
.nagr-akcje { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nagr-akcje .duzy { min-width: 0; min-height: 60px; font-size: 20px; }
.rec { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-right: 8px;
  animation: rec 1.2s steps(2) infinite; vertical-align: middle; }
@keyframes rec { 50% { opacity: .25; } }

/* --- pasek sterowania (szkło nad wideo) ---------------------------------------- */

#pasek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; min-height: var(--pasek-h);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; background: rgba(10, 10, 12, .72); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(209, 174, 83, .35); }
.pk { width: 48px; height: 48px; border: 1px solid var(--slate); background: transparent; color: var(--ivory); cursor: pointer;
  display: grid; place-items: center; flex: none; }
.pk svg { width: 20px; height: 20px; fill: currentColor; }
.pk.gl { width: 58px; height: 58px; background: var(--gold); color: var(--onyx); border: 0; clip-path: var(--chamfer-sm); }
.pk.gl svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .pk:hover { border-color: var(--gold); } }
.pk:focus-visible, .wybor:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pasek-tytul { min-width: 0; flex: 1; }
.pasek-tytul b { display: block; font: 600 18px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-tytul span { color: var(--mist); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.postep { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; cursor: pointer; }
.postep i { display: block; height: 100%; width: 0; background: var(--gold); }
.wybor { height: 40px; background: var(--onyx); color: var(--ivory); border: 1px solid var(--slate); padding: 0 8px;
  font: 500 14px/1 "Outfit", sans-serif; }
/* Znak HEXART zawsze prowadzi na hexart.io (nowa karta). Logo poziome min. 140 px, w pasku sam sygnet (min. 24 px). */
.hx-link { display: inline-block; padding: 6px; line-height: 0; opacity: .78; transition: opacity 200ms var(--ease); }
.hx-link img { display: block; height: auto; }
@media (hover: hover) and (pointer: fine) { .hx-link:hover { opacity: 1; } }
.hx-link:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 2px; }
.podpis-hx { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.podpis-hx img { width: auto; height: 26px; }
.ok-logo { margin: 14px 0 0; }
.ok-logo img { width: 140px; }
.ok-logo .hx-link:focus-visible { outline-color: var(--bronze); }

/* komunikat */
#toast { position: fixed; left: 50%; bottom: calc(var(--pasek-h) + 100px); transform: translateX(-50%); z-index: 50;
  max-width: min(520px, calc(100vw - 32px)); background: var(--onyx); color: var(--ivory); border-left: 3px solid var(--gold);
  padding: 12px 16px; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* odliczanie do następnego odcinka: prawy dolny róg, nad paskiem */
#nastepny { position: fixed; right: 20px; bottom: calc(var(--pasek-h) + 16px + env(safe-area-inset-bottom)); z-index: 16;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - var(--pasek-h) - 32px); overflow: auto;
  background: rgba(10, 10, 12, .9); backdrop-filter: blur(12px); color: var(--ivory);
  border-top: 1px solid var(--gold); clip-path: var(--chamfer-md); padding: 16px 18px 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55); animation: nast-wejscie 320ms var(--ease-in) both; }
@keyframes nast-wejscie { from { opacity: 0; transform: translateY(8px); } }
.nast-glowa { display: flex; align-items: flex-start; gap: 14px; }
.nast-opis { min-width: 0; flex: 1; }
.nast-kicker { margin: 0 0 4px; color: var(--gold); font: 600 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.nast-tytul { margin: 0; font: 600 18px/1.25 "Outfit", sans-serif; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nast-licznik { margin: -4px 0 0; flex: none; font: 500 44px/1 "Barlow Condensed", sans-serif; color: var(--gold); font-variant-numeric: tabular-nums; }
.nast-licznik small { font-size: 18px; margin-left: 2px; color: var(--mist); }
.nast-czas { height: 2px; background: var(--slate); margin: 12px 0 14px; overflow: hidden; }
/* pasek czasu to treść (ile zostało), więc gra także przy ograniczonym ruchu */
.nast-czas i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0);
  animation: nast-czas var(--nast-s, 10s) linear forwards; }
@keyframes nast-czas { to { transform: scaleX(1); } }
.nast-akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.nast-teraz { --tlo: var(--gold); --wyp: var(--gold-light); position: relative; isolation: isolate; min-height: 40px; padding: 0 16px; border: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: var(--tlo); color: var(--onyx);
  clip-path: var(--chamfer-sm); font: 600 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nast-teraz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wyp);
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .nast-teraz:hover::before { clip-path: inset(0); transition: clip-path 320ms var(--ease-in); } }
.nast-teraz:active::before { clip-path: inset(0); background: var(--bronze); transition: none; }
.nast-teraz:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nast-teraz svg { width: 14px; height: 14px; fill: currentColor; }
.tel #nastepny { right: 10px; left: 10px; width: auto; bottom: calc(var(--pasek-h) + 10px + env(safe-area-inset-bottom)); }
/* z przyciskiem ZGŁOŚ UWAGĘ na telefonie karta stoi nad nim */
.tel:has(#zglos:not([hidden])) #nastepny { bottom: calc(var(--pasek-h) + 78px + env(safe-area-inset-bottom)); }

#o-stronie { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5,5,7,.7); padding: 16px; }
.o-okno { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--onyx); border-top: 1px solid var(--gold);
  clip-path: var(--chamfer-md); padding: 26px 24px; }
.o-okno .logo { margin: 0 0 14px -6px; }
.o-okno .logo img { width: 140px; }
.o-okno h2 { font: 600 20px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.o-okno p { color: var(--mist); }

/* --- telefon: prostszy układ, tekst płynie, uwagi pod akapitem ------------------- */

body.tel { --pasek-h: 64px; }
.tel #stos { width: 100%; transform: none; padding: 18vh 0 55vh; font-size: 15px; }
.tel .kartka { width: auto; min-height: 0; margin: 0 8px 14px; padding: 28px 16px 32px; line-height: 1.35; }
.tel .kartka-nr { top: 10px; right: 14px; font-size: 12px; }
.tel .heading::before, .tel .heading::after { content: none; }
.tel .dlg .cue { margin-left: 30%; }
.tel .dlg .paren { margin-left: 20%; width: auto; }
.tel .dlg .speech { margin-left: 10%; width: auto; margin-right: 6%; }
.tel .punkt { position: static; display: inline-block; vertical-align: middle; margin: .4em 0 0; width: auto; padding: 0 10px; height: 32px;
  line-height: 32px; font-size: 15px; }
.tel .karta-uwag { position: static; width: auto; margin: 8px 0 0; }
.tel #zglos { position: fixed; right: 10px; left: 10px; bottom: calc(var(--pasek-h) + 10px + env(safe-area-inset-bottom)); justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.tel #pasek { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
.tel .pk { width: 44px; height: 44px; }
.tel .pk.gl { width: 52px; height: 52px; }
.tel .pasek-opcje, .tel .podpis-hx { display: none; }
.tel #migotanie { display: none; }
.tel .okladka { padding: 40px 22px 28px; min-height: 0; }
.tel .ok-serial { font-size: 28px; }

/* ruch: czytanie i przewijanie grają zawsze (to treść); łagodzimy tylko ozdobniki */
@media (prefers-reduced-motion: reduce) {
  #migotanie { animation-duration: 12s; }
  .okladka { transition-duration: 500ms; }
}