/*
  ARKANIP — baza wiedzy: SCENY WSTĘPÓW DZIAŁÓW w języku makiety (wiedza-wstep.js, opis tam).
  Ładuje TYLKO wiedza.html, PO wiedza-seria.css — korzysta z jego płaszczyzn (.sm .f, .bryla, .podloga,
  .sciana-w, .szklo, .skaner, kula, karta wypowiedzi, tabliczka) i klatek (sm-swiatla, sm-szew, sm-skan,
  sm-kula-ros, sm-fala-k, sm-wj-tab, sm-*). Własne reguły zawężone do `.sm.pw`, klasy `pw-*`, klatki
  `pw-*`, zarejestrowane właściwości `--pw-*`. Przeniesione z `_podglad-wiedza-pliki.html`
  (wariant A „Archiwum się zapełnia”; B „Plan piętra 02” i C „Stół skanera” uchylone) oraz
  z `_podglad-wiedza-wstepy.html` (blok „SCENY 01 i 03” niżej: 01 A „Recepcja się zapala”,
  03 A „Biurko technika”; uchylone warianty B / C obu działów nie mają tu reguł).
*/
.wstep__scena--makieta {
  position: relative;
}
.sm.pw {
  position: absolute;
  inset: 0;
  overflow-x: clip;
  overflow-y: visible; /* fale kuli mogą wyjść ponad scenę */
}
@property --pw-z { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pw-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pw-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pw-al { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pw-on { syntax: "<number>"; inherits: true; initial-value: 1; }
.sm.pw .sm-scena {
  transform: translateY(var(--dy, 0px)) scale(var(--k, 1));
}
.sm.pw .swiat {
  transform: rotateX(var(--th)) rotateZ(var(--sm-fi));
}
.sm.pw .swiat {
  --sm-fi: var(--fi1, -41deg);
}
.sm.pw .gra .swiat {
  animation: pw-obrot 2.6s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes pw-obrot { from { --sm-fi: var(--fi0, -35deg); } to { --sm-fi: var(--fi1, -41deg); } }
.sm.pw .scena__poswiata {
  left: 50%; top: 50%;
}
.sm.pw .pw-sw {
  --sm-sw: 1;
}
.sm.pw .gra .pw-sw {
  animation: sm-swiatla 0.9s ease-out var(--swd, 4s) both;
}
.sm.pw .pw-swiatlo {
  --sm-sw: 1;
}
.sm.pw .tabliczka {
  top: var(--tt, 90%);
}
.sm.pw .mowa__karta {
  --fs: 15px;
}
.sm.pw .pw-plyta-gora {
  border-radius: 6px;
  background:
  radial-gradient(70% 90% at 40% 36%, var(--surface) 0 40%, color-mix(in srgb, var(--blue-tint) 70%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 0.8px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 0 0 6px var(--surface), inset 0 0 0 6.8px color-mix(in srgb, var(--blue) 10%, transparent);
}
.sm.pw .pw-plyta-a {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue-tint-2) 80%, var(--surface)));
}
.sm.pw .pw-plyta-b {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue-tint) 90%, var(--surface)));
}
.sm.pw .pw-cien {
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 22%, transparent), color-mix(in srgb, var(--blue) 6%, transparent) 60%, transparent);
}
.pw-kartka {
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  padding: 0.75em 0.7em; border-radius: 0.35em;
  background: var(--surface);
  box-shadow: 0 0 0 0.09em color-mix(in srgb, var(--blue) 22%, transparent), 0 0.3em 0.7em -0.3em color-mix(in srgb, var(--blue) 50%, transparent);
  font-family: var(--font); color: var(--ink); line-height: 1; overflow: hidden;
}
.pw-kartka__gora {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7em;
}
.pw-kartka__typ {
  padding: 0.22em 0.4em; border-radius: 0.3em; background: var(--ink); color: #fff;
  font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; font-style: normal;
}
.pw-kartka__ik {
  width: 1.25em; height: 1.25em; color: var(--blue);
}
.pw-kartka__ik svg {
  display: block; width: 100%; height: 100%;
}
.pw-kartka__tytul {
  display: block; font-size: 0.86em; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.55em; white-space: nowrap;
}
.pw-kartka__linia {
  display: block; height: 0.2em; margin-top: 0.42em; border-radius: 0.1em; background: var(--blue-line); width: var(--w, 100%);
}
.pw-kartka__ok {
  position: absolute; right: 0.55em; bottom: 0.55em; width: 1.25em; height: 1.25em; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  opacity: var(--pw-on); transform: scale(calc(0.4 + var(--pw-on) * 0.6));
}
.pw-kartka__ok svg {
  width: 70%; height: 70%;
}
.sm.pw .pw-regal {
  display: flex; flex-direction: column; gap: 0; padding: 8px 4px 2px;
  background: var(--m-a);
  box-shadow: inset 0 0 0 0.6px var(--krawedz), inset 0 0 0 2.4px var(--surface);
}
.sm.pw .pw-regal__szyld {
  position: absolute; left: 0; right: 0; top: 1.6px; text-align: center;
  font-size: 5.2px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  color: color-mix(in srgb, var(--blue) calc(35% + var(--pw-on) * 65%), var(--ink-muted));
}
.sm.pw .pw-polka {
  flex: 1; display: flex; align-items: flex-end; gap: 0.9px; padding: 0 1.6px; border-bottom: 1.8px solid var(--surface);
}
.sm.pw .pw-polka i {
  flex: 1; height: var(--h, 90%); border-radius: 0.6px 0.6px 0 0; background: var(--c, var(--blue)); box-shadow: inset 0 0 0 0.4px var(--krawedz);
}
.sm.pw .pw-polka i.pw-luz {
  background: transparent; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--blue) 18%, transparent);
}
.sm.pw .gra .pw-polka i:not(.pw-luz) {
  animation: pw-segr 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) backwards; animation-delay: calc(var(--d) + var(--j, 0s));
}
@keyframes pw-segr { from { opacity: 0; transform: translateY(-5px) scaleY(0.4); } to { opacity: 1; transform: none; } }
.sm.pw .pw-cel {
  --pw-on: 1;
}
.sm.pw .gra .pw-cel {
  animation: pw-on 0.5s ease-out var(--d) both;
}
@keyframes pw-on { from { --pw-on: 0; } to { --pw-on: 1; } }
.sm.pw .pw-ekran {
  position: absolute; border-radius: 3px; padding: 1.6px; background: var(--ink);
  box-shadow: 0 0 0 0.6px var(--krawedz), 0 0 calc(var(--pw-on) * 10px) color-mix(in srgb, var(--blue-sky) calc(var(--pw-on) * 60%), transparent);
}
.sm.pw .pw-ekran > div {
  position: relative; height: 100%; border-radius: 2px; overflow: hidden;
  background: linear-gradient(160deg, var(--blue-sky), var(--blue) 70%, var(--blue-deep));
  opacity: var(--pw-on);
}
.sm.pw .pw-ekran .play {
  position: absolute; left: 50%; top: 38%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.sm.pw .pw-ekran .play::after {
  content: ""; position: absolute; left: 4.3px; top: 3px; border-left: 3.6px solid var(--blue); border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent;
}
.sm.pw .pw-ekran .linie {
  position: absolute; left: 3px; right: 6px; bottom: 8px; display: grid; gap: 1.6px;
}
.sm.pw .pw-ekran .linie i {
  height: 1.1px; background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.sm.pw .pw-ekran .pasek {
  position: absolute; left: 3px; right: 3px; bottom: 3.5px; height: 1.1px; background: color-mix(in srgb, var(--surface) 35%, transparent);
}
.sm.pw .pw-ekran .pasek i {
  display: block; height: 100%; width: 58%; background: var(--surface);
}
.sm.pw .gra .pw-ekran .pasek i {
  animation: pw-pasek 3s linear var(--d) backwards;
}
@keyframes pw-pasek { from { width: 0; } to { width: 58%; } }
.sm.pw .pw-tablica {
  position: absolute; padding: 4px 5px; border-radius: 2px; background: var(--surface);
  box-shadow: 0 0 0 0.6px var(--krawedz), 0 3px 6px -3px color-mix(in srgb, var(--blue) 40%, transparent);
}
.sm.pw .pw-tablica b {
  display: block; font-size: 4.4px; font-weight: 800; letter-spacing: 0.1em; line-height: 1; margin-bottom: 4px;
  color: color-mix(in srgb, var(--blue) calc(35% + var(--pw-on) * 65%), var(--ink-muted));
}
.sm.pw .pw-tablica .osoby {
  display: flex; gap: 4px;
}
.sm.pw .pw-tablica .os {
  display: grid; justify-items: center; gap: 2px; width: 14px;
}
.sm.pw .pw-tablica .os i {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--surface) 0 26%, transparent 27%), radial-gradient(circle at 50% 108%, var(--surface) 0 44%, transparent 45%), var(--c, var(--blue));
  box-shadow: inset 0 0 0 0.5px var(--krawedz);
}
.sm.pw .pw-tablica .os s {
  display: block; width: 12px; height: 1.1px; background: var(--blue-line);
}
.sm.pw .pw-tablica .os s + s {
  width: 8px;
}
.sm.pw .gra .pw-tablica .os i {
  animation: pw-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) backwards; animation-delay: calc(var(--d) + var(--j, 0s));
}
@keyframes pw-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
.sm.pw .pw-szyld {
  position: absolute; display: flex; align-items: center; gap: 4px; font-size: 7px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink); text-transform: uppercase; white-space: nowrap;
}
.sm.pw .pw-szyld i {
  width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 calc(var(--sm-sw) * 6px) var(--blue-sky);
}
.sm.pw .pw-pudlo-w {
  background: color-mix(in srgb, var(--blue-tint-2) 80%, var(--surface)); box-shadow: inset 0 0 0 0.6px var(--krawedz);
}
.sm.pw .pw-pudlo-napis {
  display: grid; place-items: center; height: 100%; font-size: 4.6px; font-weight: 800; letter-spacing: 0.12em; color: color-mix(in srgb, var(--blue) calc(35% + var(--pw-on) * 65%), var(--ink-muted));
}
.sm.pw .pw-pudlo-blask {
  border-radius: 2px; box-shadow: 0 0 0 1.2px var(--blue-sky), 0 0 12px 2px color-mix(in srgb, var(--blue-sky) 60%, transparent); opacity: 0;
}
.sm.pw .gra .pw-pudlo-blask {
  animation: sm-szew 0.9s ease-out var(--d) backwards;
}
.sm.pw .pw-lot {
  transform: translate3d(var(--pw-x), var(--pw-y), var(--pw-z)) rotateZ(var(--rz, 0deg)); --pw-al: 0;
}
.sm.pw .pw-lot .f {
  opacity: var(--pw-al);
}
.sm.pw .gra .pw-lot--a {
  animation: pw-lot-a var(--lt, 1.2s) both; animation-delay: var(--d0);
}
@keyframes pw-lot-a {
  0% { --pw-x: var(--sx, 0px); --pw-y: var(--sy, 0px); --pw-z: var(--zh, 200px); --pw-al: 0; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  14% { --pw-al: 1; }
  62% { --pw-x: var(--sx, 0px); --pw-y: var(--sy, 0px); --pw-z: 0px; --pw-al: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
  92% { --pw-al: 1; }
  100% { --pw-x: 0px; --pw-y: 0px; --pw-z: 0px; --pw-al: 0; }
}

/* ================================================================ SCENY 01 i 03 (recepcja, biurko) */
@property --pw-n { syntax: "<integer>"; inherits: true; initial-value: 10; }
@property --pw-rz { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* iskra na płaszczyźnie (lądowanie karteczki) */
.sm.pw .pw-iskra {
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-sky) 60%, transparent), transparent);
}
.sm.pw .gra .pw-iskra { animation: pw-iskra 0.8s ease-out var(--d) backwards; }
@keyframes pw-iskra { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
/* lot „zostaje”: kartka spada obrócona, prostuje się i leży (karteczki w zasobniku) */
.sm.pw .pw-lot--zost { --pw-al: 1; transform: translate3d(var(--pw-x), var(--pw-y), var(--pw-z)) rotateZ(var(--pw-rz)); }
.sm.pw .gra .pw-lot--zost { animation: pw-lot-zost var(--lt, 1s) both; animation-delay: var(--d0); }
@keyframes pw-lot-zost {
  0% { --pw-x: var(--sx, 0px); --pw-y: var(--sy, 0px); --pw-z: var(--zh, 200px); --pw-al: 0; --pw-rz: var(--rz0, 25deg); animation-timing-function: cubic-bezier(0.25, 0.55, 0.35, 1); }
  16% { --pw-al: 1; }
  84% { --pw-x: 0px; --pw-y: 0px; --pw-z: 0px; --pw-rz: 0deg; animation-timing-function: ease-out; }
  91% { --pw-z: 2px; }
  100% { --pw-x: 0px; --pw-y: 0px; --pw-z: 0px; --pw-al: 1; --pw-rz: 0deg; }
}

/* ---------- 01: karta pytania 52 × 30 ---------- */
.pw-kp {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; border-radius: 2.4px;
  background: var(--surface);
  box-shadow: 0 0 0 0.6px color-mix(in srgb, var(--blue) 26%, transparent), 0 3px 6px -3px color-mix(in srgb, var(--blue) 55%, transparent);
  font-family: var(--font); color: var(--ink); line-height: 1; overflow: hidden;
}
.pw-kp__ik { position: absolute; left: 4.5px; top: 4.2px; width: 10px; height: 10px; color: var(--blue); }
.pw-kp__ik svg { display: block; width: 100%; height: 100%; }
.pw-kp__nr { position: absolute; left: 17px; top: 6.6px; font-size: 4.2px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-muted); }
.pw-kp__et { position: absolute; left: 4.5px; bottom: 4.6px; font-size: 4.9px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.pw-kp__ok {
  position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  opacity: var(--pw-on); transform: scale(calc(0.3 + var(--pw-on) * 0.7));
}
.pw-kp__ok svg { width: 70%; height: 70%; }
.pw-kp__pasek { position: absolute; left: 4.5px; right: 4.5px; bottom: 12.6px; height: 1px; background: var(--blue-line); }
.pw-kp__pasek i { display: block; height: 100%; width: calc(var(--pw-on) * 64%); background: var(--blue); }
/* tablica pytań na ścianie, licznik 0 → 10 / 10 */
.sm.pw .pw-tabl {
  position: absolute; border-radius: 3px; background: color-mix(in srgb, var(--blue-tint) 55%, var(--surface));
  box-shadow: 0 0 0 0.6px var(--krawedz), inset 0 0 0 1.4px var(--surface), 0 5px 10px -5px color-mix(in srgb, var(--blue) 45%, transparent);
}
.sm.pw .pw-tabl__gl {
  position: absolute; left: 7px; right: 7px; top: 5.5px; display: flex; align-items: center; justify-content: space-between;
  font-size: 5px; font-weight: 800; letter-spacing: 0.12em; line-height: 1; color: var(--blue); white-space: nowrap;
}
.sm.pw .pw-tabl__gl span { display: flex; align-items: center; gap: 3px; }
.sm.pw .pw-tabl__gl span i { width: 3.6px; height: 3.6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 calc(var(--sm-sw) * 5px) var(--blue-sky); }
.sm.pw .pw-licznik { color: var(--ink); letter-spacing: 0.04em; }
.sm.pw .pw-licznik::before { counter-reset: pwn var(--pw-n); content: counter(pwn) " / 10"; }
.sm.pw .gra .pw-licznik { animation: pw-licz var(--lt) linear var(--d) both; }
@keyframes pw-licz { from { --pw-n: 0; } to { --pw-n: 10; } }
.sm.pw .pw-slot { position: absolute; width: 52px; height: 30px; }
.sm.pw .pw-slot__puste {
  position: absolute; inset: 0; border-radius: 2.4px; border: 0.7px dashed color-mix(in srgb, var(--blue) 42%, transparent);
  display: grid; place-items: center; font-size: 6px; font-weight: 800; color: color-mix(in srgb, var(--blue) 50%, transparent);
  opacity: calc(1 - var(--pw-on));
}
.sm.pw .pw-slot .pw-kp { opacity: var(--pw-on); transform: translateY(calc((1 - var(--pw-on)) * 3px)); }
/* zegar, szyld kliniki, obraz na ścianie */
.sm.pw .pw-zegar {
  position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 0.6px var(--krawedz), inset 0 0 0 1.6px var(--blue-tint-2), 0 3px 6px -3px color-mix(in srgb, var(--blue) 45%, transparent);
}
.sm.pw .pw-zegar i { position: absolute; left: 50%; bottom: 50%; width: 1.2px; margin-left: -0.6px; border-radius: 1px; transform-origin: 50% 100%; background: var(--ink); }
.sm.pw .pw-zegar i:first-child { height: 6px; transform: rotate(-60deg); }
.sm.pw .pw-zegar i:nth-child(2) { height: 8.5px; background: var(--blue); }
.sm.pw .gra .pw-zegar i:nth-child(2) { animation: pw-wskaz 7s cubic-bezier(0.4, 0, 0.3, 1) both; }
@keyframes pw-wskaz { from { transform: rotate(-200deg); } to { transform: rotate(0deg); } }
.sm.pw .pw-zegar b { position: absolute; left: 50%; top: 50%; width: 2.4px; height: 2.4px; margin: -1.2px 0 0 -1.2px; border-radius: 50%; background: var(--blue); }
.sm.pw .pw-klinika {
  position: absolute; display: flex; align-items: baseline; max-width: 120px; font-size: 10px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; line-height: 1;
}
.sm.pw .pw-klinika span { overflow: hidden; text-overflow: ellipsis; } /* długa nazwa kliniki nie wyjeżdża za ścianę */
.sm.pw .pw-klinika i { flex-shrink: 0; width: 2.6px; height: 2.6px; margin-left: 1.2px; border-radius: 50%; background: var(--blue); }
.sm.pw .pw-obraz {
  position: absolute; border-radius: 2px; background: var(--surface); box-shadow: 0 0 0 0.6px var(--krawedz), inset 0 0 0 2px var(--surface);
  background-image: radial-gradient(circle at 70% 35%, var(--blue-sky) 0 12%, transparent 13%), linear-gradient(160deg, transparent 52%, color-mix(in srgb, var(--blue) 26%, var(--surface)) 52% 70%, color-mix(in srgb, var(--blue) 46%, var(--surface)) 70%);
}

/* ---------- 03: taras, karteczki, biurko technika, ekran konfiguracji ---------- */
.sm.pw .pw-notka {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 3.4px 3.6px; border-radius: 1.4px;
  background: var(--c, var(--surface)); color: var(--k, var(--blue));
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--blue) 24%, transparent), 0 2.5px 5px -2px color-mix(in srgb, var(--blue) 55%, transparent);
  font-family: var(--font); line-height: 1; overflow: hidden;
}
.sm.pw .pw-notka__gora { display: flex; align-items: center; gap: 2px; margin-bottom: 2.8px; font-size: 3.6px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sm.pw .pw-notka__gora svg { width: 5.5px; height: 5.5px; flex-shrink: 0; }
.sm.pw .pw-notka s { display: block; height: 0.8px; margin-top: 2.2px; background: var(--l, color-mix(in srgb, var(--blue) 35%, transparent)); width: var(--w, 100%); }
.sm.pw .pw-zasobnik { background: color-mix(in srgb, var(--blue-tint-2) 70%, var(--surface)); box-shadow: inset 0 0 0 0.6px var(--krawedz); }
.sm.pw .pw-monitor {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 2.4px; border-radius: 3px; background: var(--ink);
  box-shadow: 0 0 calc(var(--sm-sw) * 12px) color-mix(in srgb, var(--blue-sky) calc(var(--sm-sw) * 55%), transparent);
}
.sm.pw .pw-monitor > div {
  position: relative; height: 100%; box-sizing: border-box; border-radius: 1.6px; padding: 6px 7px; background: var(--surface); overflow: hidden;
  font-family: var(--font); line-height: 1;
}
.sm.pw .pw-monitor__gl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 5px; font-weight: 800; letter-spacing: 0.12em; color: var(--blue); white-space: nowrap; }
.sm.pw .pw-monitor__gl span { display: flex; align-items: center; gap: 3px; }
.sm.pw .pw-monitor__gl i { width: 6px; height: 6px; border-radius: 50%; background: var(--kula, var(--blue)); }
.sm.pw .pw-monitor__gl em { font-style: normal; color: var(--ink-muted); letter-spacing: 0.06em; font-size: 4.4px; }
.sm.pw .pw-regula {
  position: relative; display: flex; align-items: center; gap: 4px; height: 12px; margin-top: 3px; padding: 0 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--blue-tint) calc(var(--pw-on) * 90%), var(--surface));
  box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--blue) calc(14% + var(--pw-on) * 20%), transparent);
}
.sm.pw .pw-regula__ik { display: grid; place-items: center; width: 7px; height: 7px; color: color-mix(in srgb, var(--blue) calc(35% + var(--pw-on) * 65%), var(--ink-muted)); }
.sm.pw .pw-regula__ik svg { width: 100%; height: 100%; }
.sm.pw .pw-regula b { font-size: 4.8px; font-weight: 800; color: color-mix(in srgb, var(--ink) calc(40% + var(--pw-on) * 60%), var(--ink-muted)); white-space: nowrap; min-width: 30px; }
.sm.pw .pw-regula s { flex: 1; height: 1.1px; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) calc(var(--pw-on) * 60%), var(--blue-line)) 0 60%, transparent 60% 64%, var(--blue-line) 64% 86%, transparent 86%); }
.sm.pw .pw-przel3 {
  position: relative; width: 10px; height: 6px; border-radius: 3px; flex-shrink: 0;
  background: color-mix(in srgb, var(--blue) calc(var(--pw-on) * 100%), var(--blue-line));
}
.sm.pw .pw-przel3::after {
  content: ""; position: absolute; top: 1px; left: calc(1px + var(--pw-on) * 4px); width: 4px; height: 4px; border-radius: 50%; background: var(--surface);
}
.sm.pw .pw-laptop-ekran { background: linear-gradient(150deg, var(--blue-sky), var(--blue) 70%); box-shadow: 0 0 calc(var(--sm-sw) * 8px) color-mix(in srgb, var(--blue-sky) 60%, transparent); }
.sm.pw .pw-laptop-ekran::before {
  content: ""; position: absolute; left: 3px; right: 6px; top: 3px; height: 9px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent) 0 0.8px, transparent 0.8px 2.6px);
}
.sm.pw .pw-tylko {
  position: absolute; display: flex; align-items: center; gap: 3px; padding: 2.4px 5px 2.4px 3px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 0.6px color-mix(in srgb, var(--blue) 30%, transparent);
  font-size: 4.6px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.sm.pw .pw-tylko svg { width: 6px; height: 6px; color: var(--blue); }

/* nici i iskry (2D, nad sceną): zasobnik → reguła na ekranie */
.sm.pw .pw-nici { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
.sm.pw .pw-nici path { fill: none; stroke: var(--blue-sky); stroke-width: 1.4; stroke-linecap: round; opacity: 0.35; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sm.pw .pw-nici path.zgas { opacity: 0; }
.sm.pw .gra .pw-nici path { animation: pw-nic 1.3s ease-out var(--d) backwards; }
.sm.pw .gra .pw-nici path.zgas { animation: pw-nic-zgas 1.3s ease-out var(--d) backwards; }
@keyframes pw-nic { 0% { stroke-dashoffset: 1; opacity: 0.95; } 40% { stroke-dashoffset: 0; opacity: 0.95; } 100% { stroke-dashoffset: 0; opacity: 0.35; } }
@keyframes pw-nic-zgas { 0% { stroke-dashoffset: 1; opacity: 0.95; } 40% { stroke-dashoffset: 0; opacity: 0.95; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sm.pw .pw-iskry { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sm.pw .pw-iskry i {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 1.6px var(--blue-sky), 0 0 10px 3px color-mix(in srgb, var(--blue-sky) 70%, transparent);
  opacity: 0; offset-rotate: 0deg;
}
.sm.pw .gra .pw-iskry i { animation: pw-iskra-lot 0.6s cubic-bezier(0.5, 0, 0.6, 1) var(--d) backwards; }
@keyframes pw-iskra-lot { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ================================================================ WSZYSTKIE ODPOWIEDZI — STAN DZIAŁU
   Runda 5 (15.10.2026), wariant A „Kondygnacje z bliska” (wiedza-wstep.js, blok „STAN DZIAŁU”): w karcie
   działu bazy wiedzy statyczna scena (`.sm.pw.pw-stan`, bez `gra`) zamiast sceny z ilustracje.js. Karta
   z makietą ma szerszą kolumnę sceny (`.pods__dzial--makieta`); wydruk chowa sceny jak dotąd (styles.css). */
.pods--v8 .pods__dzial--makieta { grid-template-columns: 400px minmax(0, 1fr) auto; }
.pods__scena.pods__scena--makieta { height: 236px; }
.sm.pw.pw-stan .mowa,
.sm.pw.pw-stan .tabliczka,
.sm.pw.pw-stan .pw-nici,
.sm.pw.pw-stan .pw-iskry { display: none; }
/* puste miejsca: regał bez segregatorów (obrysy), zespół bez zdjęć, karteczki nie ma */
.sm.pw .pw-brak { --pw-on: 0; }
.sm.pw .pw-brak .pw-polka i:not(.pw-luz) { background: transparent; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--blue) 22%, transparent); }
.sm.pw .pw-brak .os i { background: transparent; box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--blue) 35%, transparent); }
.sm.pw .pw-brak .os s { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.sm.pw .pw-lot--zost.pw-brak .f { opacity: 0; }
/* jedyny ruch: wypełnione miejsca zapalają się po kolei (raz), licznik tablicy dobija do stanu */
.sm.pw.pw-stan .pw-jest { animation: pw-on 0.55s ease-out var(--kd, 0s) both; }
.sm.pw.pw-stan .pw-jest .pw-polka i:not(.pw-luz) { animation: pw-segr 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) backwards; animation-delay: calc(var(--kd, 0s) + var(--j, 0s)); }
.sm.pw.pw-stan .pw-lot--zost.pw-jest .f { animation: pw-pojaw 0.5s ease-out var(--kd, 0s) backwards; }
@keyframes pw-pojaw { from { opacity: 0; } to { opacity: 1; } }
.sm.pw.pw-stan .pw-licznik { --pw-n: var(--pw-cel, 10); }
.sm.pw.pw-stan .pw-licznik--gra { animation: pw-licz-stan var(--kl, 1s) steps(var(--pw-cel, 10), end) 0.35s both; }
@keyframes pw-licz-stan { from { --pw-n: 0; } to { --pw-n: var(--pw-cel, 10); } }
/* znacznik stanu w lewym górnym rogu sceny („7 z 10 na tablicy · +1 Wasze”) */
.sm.pw .pw-chip {
  position: absolute; left: 14px; top: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--glass-border); box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--blue) 55%, transparent);
  font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; line-height: 1.2;
  animation: sm-wj 0.6s var(--ease) 0.15s backwards;
}
.sm.pw .pw-chip b { color: var(--ink); font-weight: 800; }
.sm.pw .pw-chip i {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: var(--kula);
  box-shadow: 0 0 0 2.5px var(--blue-tint);
}
.sm.pw .pw-chip--plan i { background: var(--surface); box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--blue) 55%, transparent); }
@media (max-width: 1100px) {
  .pods--v8 .pods__dzial--makieta { grid-template-columns: 300px minmax(0, 1fr) auto; }
  .pods__scena.pods__scena--makieta { height: 180px; }
}
@media (max-width: 760px) {
  .pods--v8 .pods__dzial--makieta { grid-template-columns: minmax(0, 1fr); }
  .pods__scena.pods__scena--makieta { display: block; height: 190px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--blue) 10%, transparent); }
}

@media (max-width: 860px) {
  .sm.pw .tabliczka { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm.pw *, .sm.pw *::before, .sm.pw *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; }
}

/* ===================== WERSJA 2 (16.10.2026) — „Wszystkie odpowiedzi” bazy wiedzy na telefonie =====================
   Pasek akcji: dwa przyciski w JEDNYM rzędzie na całą szerokość paska (wcześniej dwa rzędy dosunięte do lewej,
   prawa połowa paska pusta). Meta pod tytułem: bez kropek-separatorów, które po zawinięciu zaczynały drugi wiersz
   („· 16.10.2026”) — pozycje rozdziela odstęp. Plik ładuje tylko wiedza.html, konfigurator bez zmian. */
@media (max-width: 760px) {
  .pods__akcje.pods__akcje--dol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
    gap: 8px;
    padding: 8px;
  }
  .pods__akcje--dol .pods__status:not(:empty) { grid-column: 1 / -1; }
  .pods__akcje--dol .cta {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
    font-size: 14.5px;
    white-space: nowrap;
  }
  .pods--v8 { padding-bottom: 200px; }
  .pods--v8 .pods__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
  }
  .pods--v8 .pods__meta span + span::before { content: none; }
}

/* ===================== WERSJA 2 (16.10.2026) — szczegóły i wydruk „Wszystkich odpowiedzi” bazy wiedzy =====================
   Notatki (lista z jednym polem bez etykiety) rysowały pustą kolumnę etykiety — tekst notatki zaczynał się w połowie
   wiersza. Wydruk: bez zaokrąglonej ramki karty pod czarną linią nagłówka działu (podwójna krawędź), stopka
   „ARKANIP · arkanip.pl” w osobnym wierszu, a nie z kropką-separatorem na początku zawiniętej linii. */
.pods--v8 .pods__podpole:has(> .pods__podetykieta:empty) { display: block; }
.pods--v8 .pods__podetykieta:empty { display: none; }
@media print {
  .pods.pods--v8 .pods__dzial {
    border: 0;
    border-radius: 0;
    padding: 0 0 6px;
    margin-bottom: 16px;
  }
  .pods--v8 .pods__meta .pods__druk { display: block; margin-top: 4px; }
  .pods--v8 .pods__meta .pods__druk::before { content: none; }
}