/* Zaślepka (soon.html) — scena teatralna wg makiety assets/concepts/soon_A.png.
   Nagłówek dziedziczy z skin-c.css (.masthead: tabliczka, litery na skrawkach, podpis, lustro); tu: układ sceny, linki, lustro na
   łańcuchu, ruch nieba (chmury, balon, ptaki), kurtyny, deski, telewizorek, tabliczka i pas chodu dżentelmena.
   Wysokość sceny w px (--sh) liczy soon.js (ResizeObserver): scena = to, co zostaje z ekranu pod nagłówkiem; wszystkie rekwizyty
   sceny są ułamkami --sh, więc kompozycja trzyma proporcje makiety niezależnie od ekranu.
   Warstwy (jeden kontekst): chmury za górami i balon 1 · tło-jezioro 2 · chmury przed górami i ptaki 3 · deski 4 · nagłówek 5 ·
   rekwizyty 6 · dżentelmen 7 · kurtyny 9 ·
   fronton sceny 10 (zasłania dół kurtyn, jak na makiecie) · podpowiedź 11. */

body.soon { padding: 0; min-height: 100svh; overflow-x: clip; }
.theatre { --curtain-w: clamp(62px, 11.5vw, 220px); --sh: 440px;
  position: relative; min-height: max(100svh, 600px); display: flex; flex-direction: column; overflow: hidden; }

/* ---------- niebo: chmury płyną, balon się kiwa, ptaki przelatują ---------- */
.sky-layer { position: absolute; inset: 0; pointer-events: none; }   /* bez z-index: chmury i ptaki układają się względem tła-jeziora (2) */
.clouds i { position: absolute; left: 0; top: var(--y); z-index: var(--z, 1); width: var(--w); aspect-ratio: var(--ar); background: var(--img) center / contain no-repeat; opacity: var(--o, .95);
  filter: drop-shadow(6px 8px 0 rgb(42 33 26 / .12)); animation: cloud-drift var(--dur) linear var(--delay) infinite; will-change: transform; }
@keyframes cloud-drift { from { transform: translateX(-105%) scaleX(var(--fx, 1)); } to { transform: translateX(var(--span, 100vw)) scaleX(var(--fx, 1)); } }

.balloon { position: absolute; left: calc(var(--curtain-w) + .8vw); top: 1.5vh; z-index: 1; width: clamp(78px, 9.5vw, 160px); animation: balloon-drift 26s ease-in-out infinite alternate; }
.balloon-lift { position: relative; }   /* wzlot po kliknięciu (soon.js, Web Animations) */
.balloon .puff { position: absolute; left: 50%; top: 64%; width: 70%; translate: -50% -50%; pointer-events: none; opacity: 0; }
body.over-balloon { cursor: pointer; }
.balloon img { display: block; width: 100%; transform-origin: 50% 18%; animation: balloon-sway 3.8s ease-in-out infinite alternate; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .18)); }
@keyframes balloon-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes balloon-drift { 0% { transform: translate(0, 0); } 35% { transform: translate(2.5vw, 3vh); } 70% { transform: translate(6vw, -1vh); } 100% { transform: translate(9vw, 2vh); } }

.birds i { position: absolute; left: 0; top: var(--y); z-index: 3; width: var(--w); animation: bird-fly var(--dur) linear forwards; }
.birds i b { display: block; width: 100%; aspect-ratio: var(--ar); background: var(--img) center / contain no-repeat; transform-origin: 50% 45%; animation: bird-flap var(--flap, .42s) steps(2) infinite, bird-bob 2.4s ease-in-out infinite alternate; }
@keyframes bird-fly { from { transform: translateX(-120%); } to { transform: translateX(var(--span, 100vw)); } }
@keyframes bird-flap { 50% { scale: 1 .72; } }
@keyframes bird-bob { from { translate: 0 -14px; rotate: -4deg; } to { translate: 0 14px; rotate: 5deg; } }

/* ---------- nagłówek (siatka z skin-c.css, wyśrodkowana jak na makiecie) ---------- */
body.soon .masthead { z-index: 5; box-sizing: border-box; width: 100%; max-width: 1500px; margin: 0 auto; padding: 2.2vh calc(var(--curtain-w) + 1.5vw) 0;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "banner portrait" "name portrait" "controls portrait"; column-gap: clamp(16px, 3vw, 56px); }
body.soon .masthead::before, body.soon .masthead::after { display: none; }   /* balon i ptaki skórki — tu są własne, ruchome */
body.soon .masthead .banner { justify-self: center; margin: 4px 0 10px; padding: 4px 16px 3px; background: var(--paper-light) var(--grain); color: var(--ink); border: 1px solid var(--ink); font-size: 16px; transform: rotate(-.6deg); }
body.soon .masthead mech-letters { justify-self: center; }
body.soon .masthead mech-letters .letter-line { justify-content: center; }
body.soon .masthead mech-letters .line-0, body.soon .masthead mech-letters .line-1 { margin-left: 0; }
body.soon .masthead mech-letters .line-1 { margin-top: 2px; }
/* proporcje makiety: „Jacek” ≈ 29% szerokości ekranu, „Mossakowski” ≈ 44% (litery niższe) */
body.soon .masthead mech-letters .line-0 .letter.has-img { --letter-h: clamp(46px, 6.6vw, 100px); }
body.soon .masthead mech-letters .line-1 .letter.has-img { --letter-h: clamp(30px, 5.6vw, 84px); }
body.soon .masthead mech-letters .letter-line { gap: clamp(2px, .3vw, 5px); }
body.soon .masthead mech-letters .letters-sub { display: table; margin: 10px auto 0; text-align: center; }
body.soon .masthead mech-letters .letters-sub span { white-space: nowrap; }   /* łamanie tylko między hasłami */
/* wąska kolumna (telefon w pionie, mech-letters jest tam kontenerem): rola w pierwszym wierszu, hasła w drugim, oba wyśrodkowane,
   bez kropki na początku drugiego wiersza */
@container (max-width: 480px) {
  body.soon .masthead mech-letters .letters-sub span:first-child { display: block; }
  body.soon .masthead mech-letters .letters-sub span:nth-child(2)::before { content: none; }
}

/* ---------- lustro na łańcuchu z nieba ----------
   Cała figura (łańcuch + rama) waha się wokół punktu zawieszenia wysoko nad ekranem (--pivot), łańcuch sięga dokładnie do niego. */
body.soon .masthead .portrait.hanging { --pivot: 34vh; --bow: 14px; grid-area: portrait; justify-self: center; align-self: start; margin: calc(var(--bow) * -1 + 26px) 0 0; position: relative;
  transform-origin: 50% calc(var(--pivot) * -1); animation: mirror-swing 6.4s ease-in-out infinite alternate; zoom: var(--pzoom, 1); }
@keyframes mirror-swing { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.portrait.hanging .chain { position: absolute; left: 50%; bottom: calc(100% - var(--bow)); width: 20px; height: calc(var(--pivot) + 40px); translate: -50% 0; z-index: 3; pointer-events: none;
  background: var(--eng-chain_brass, var(--eng-chain_segment)) center bottom / 100% auto repeat-y; filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .2)); }
html:not(.has-chain_brass) .portrait.hanging .chain { width: 14px; }
html.has-chain_hook .portrait.hanging .chain::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 26px; height: 46px; translate: -50% 0; background: var(--eng-chain_hook) center / contain no-repeat; }

/* ---------- linki zamiast przełączników: mosiężne guziki i pieczęć, bez etykiet (nazwy dla czytników w aria-label;
   papierowe plakietki „LinkedIn” / „Facebook” Jacek kazał wyrzucić 19.10) ---------- */
body.soon .soon-links { grid-area: controls; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px, 2.6vw, 38px); margin: 16px 0 0; }
.soon-link { position: relative; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; cursor: pointer; }
.soon-link .btn { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: var(--paper-dark) center / contain no-repeat; border: 2px solid var(--ink); box-sizing: border-box; filter: drop-shadow(3px 4px 0 rgb(42 33 26 / .25)); transition: transform .18s steps(3), scale .1s steps(2), translate .1s steps(2), filter .1s steps(2); }
html.has-btn_in .ln-in .btn, html.has-btn_fb .ln-fb .btn, html.has-btn_mail .ln-mail .btn { border: 0; background-color: transparent; }
html.has-btn_in .ln-in .btn { background-image: var(--eng-btn_in); }
html.has-btn_fb .ln-fb .btn { background-image: var(--eng-btn_fb); }
html.has-btn_mail .ln-mail .btn { background-image: var(--eng-btn_mail); }
.soon-link:hover .btn, .soon-link:focus-visible .btn { transform: rotate(-14deg) scale(1.08); }
/* wciśnięcie: guzik zapada się w oprawę — mniejszy, niżej, cień tuż przy nim (is-pressed na chwilę z soon.js; :active póki trzymasz) */
.soon-link.is-pressed .btn, .soon-link:active .btn { scale: .86; translate: 0 3px; filter: drop-shadow(1px 1px 0 rgb(42 33 26 / .32)); }
.soon-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 30px; }
.soon-link:not([href]) { cursor: default; }

/* ---------- scena ----------
   stage_floor.png (2080×307): deski 0–22% wysokości, listwa i fronton z festonami 22–73%, niżej zanik do przezroczystości —
   pas wystaje pod dolną krawędź ekranu o te 27%. Wysokość pasu = .315 --sh, więc widoczna podłoga ≈ 23% sceny (jak na makiecie).
   Poziomy (od dołu sceny, w --sh): fronton .00–.16 · deski .16–.23 (stopy dżentelmena .17, nogi stolika .212) · tło od .22 w górę. */
.stage { position: relative; flex: 1 0 400px; margin-top: 1vh; }
/* tło: nigdy nie ucinać góry (grań i cyprysy) — wysokość co najmniej szerokość / proporcja ryciny (2172/603 ≈ 3,6), najwyżej obcięte boki;
   dolny pas wody chowa się za deskami */
.backdrop { position: absolute; left: 0; width: 100%; bottom: calc(var(--sh) * .16); height: max(27.8vw, calc(var(--sh) * .5)); object-fit: cover; object-position: center bottom; z-index: 2; pointer-events: none; }
.boards, .apron { position: absolute; left: 0; right: 0; bottom: calc(var(--sh) * -.085); height: calc(var(--sh) * .315); background: var(--eng-stage_floor) left top / auto 100% repeat-x; pointer-events: none; }
.boards { z-index: 4; }
.apron { z-index: 10; clip-path: inset(22% 0 0 0); }
html:not(.has-stage_floor) .boards { bottom: 0; height: calc(var(--sh) * .23); background: #c9a87a var(--grain); border-top: 2px solid var(--ink); }
html:not(.has-stage_floor) .apron { bottom: 0; height: calc(var(--sh) * .16); clip-path: none; background: #7a1f1f; border-top: 3px solid var(--ink); }

.props { position: absolute; left: calc(var(--curtain-w) * .45 + 1vw); bottom: 0; width: calc(var(--sh) * .48); height: 100%; z-index: 6; pointer-events: none; }
.props .table { position: absolute; left: 0; bottom: calc(var(--sh) * .212); width: 100%; height: auto; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .2)); }

/* telewizorek: rycina z przezroczystym ekranem (otwór zmierzony scripts/trim-alpha.py --hole), wideo pod nią;
   filtr: sepia, kontrast, linie kineskopu, winieta, migotanie */
.tv { --scr-l: 9.08%; --scr-t: 12.7%; --scr-w: 65.78%; --scr-h: 64.25%; position: absolute; left: 50%; bottom: calc(var(--sh) * .493); width: calc(var(--sh) * .46); aspect-ratio: 716 / 551; margin: 0; translate: -50% 0; cursor: pointer; pointer-events: auto; }
.tv-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: sepia(.3) saturate(.8) brightness(.93) drop-shadow(5px 6px 0 rgb(42 33 26 / .22)); }
.tv-screen { position: absolute; left: calc(var(--scr-l) - .6%); top: calc(var(--scr-t) - .6%); width: calc(var(--scr-w) + 1.2%); height: calc(var(--scr-h) + 1.2%); overflow: hidden; border-radius: 3.5% / 4.6%; background: #1d1813; z-index: 1; }
/* wideo 4:3 (oEmbed: 1600×1200) w całości: telewizor tv_set2 ma ekran dokładnie 4:3 (otwór 471×354 px, rogi ok. 3%),
   więc kadr wypełnia go od krawędzi do krawędzi; ekran wchodzi 0,6% pod ramkę z każdej strony */
.tv { --vid-w: 100%; --vid-h: 100%; }
.tv-screen iframe { position: absolute; left: 50%; top: 50%; width: var(--vid-w); height: var(--vid-h); translate: -50% -50%; border: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s steps(7);
  filter: grayscale(1) sepia(.65) contrast(1.3) brightness(.95); }
/* rozgrzewanie kineskopu: śnieg (szum z soon.js) do chwili, gdy YouTube gra i schował już tytuł i ikonę pauzy */
.tv-snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--snow, #3a332b) 0 0 / 96px 96px; filter: sepia(.55) contrast(1.15) brightness(.9); animation: tv-snow .3s steps(1) infinite; transition: opacity 1.4s steps(7); }
@keyframes tv-snow { 25% { background-position: 37px 61px; } 50% { background-position: 71px 13px; } 75% { background-position: 19px 83px; } }
.tv.is-on .tv-screen iframe { opacity: 1; }
.tv.is-on .tv-snow { opacity: 0; }
.tv-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; animation: tv-flicker .24s steps(2) infinite;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .24) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 58%, rgb(20 14 8 / .5) 100%); }   /* winieta lżejsza: rogi kadru mają być widoczne */
@keyframes tv-flicker { 50% { opacity: .8; } }
.tv-sound { position: absolute; right: 5%; top: 14%; width: 13%; aspect-ratio: 1; border-radius: 50%; z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tv-sound:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 2px; }
.tv-sound::after { content: "dźwięk"; position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper-light); border: 1px solid var(--ink); padding: 3px 5px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.tv:hover .tv-sound::after, .tv-sound:focus-visible::after { opacity: 1; }
.tv-sound[aria-pressed="true"]::after { content: "cisza"; }

/* tabliczka „Strona w budowie” oparta o stolik (makieta: zasłania jego lewą część, pieczęć z narzędziami u dołu) */
.sign { position: absolute; left: 2%; bottom: calc(var(--sh) * .185); width: calc(var(--sh) * .4); aspect-ratio: 1451 / 799; display: grid; place-items: center; transform: rotate(-3deg); transform-origin: 50% 100%;
  background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 5px 6px 0 rgb(42 33 26 / .24); animation: sign-wobble 5.5s ease-in-out infinite alternate; }
html.has-sign_blank .sign { background: var(--eng-sign_blank) center / 100% 100% no-repeat; border: 0; box-shadow: none; filter: drop-shadow(5px 6px 0 rgb(42 33 26 / .24)); }
.sign p { margin: -5% 0 0; font: 900 calc(var(--sh) * .046)/1.06 "Playfair Display", Georgia, serif; text-align: center; color: var(--ink); }
.sign .seal { position: absolute; left: 50%; bottom: -14%; width: 23%; translate: -50% 0; filter: drop-shadow(2px 3px 0 rgb(42 33 26 / .3)); }
@keyframes sign-wobble { from { rotate: 0deg; } to { rotate: 1.4deg; } }

/* pas chodu: stopy na przedniej części desek (przed stolikiem, za frontonem i kurtynami) */
.walk-lane { position: absolute; left: 0; right: 0; bottom: calc(var(--sh) * .17); height: calc(var(--sh) * .78); z-index: 7; pointer-events: none; }
.walker { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.walker .wk-part { position: absolute; left: 0; top: 0; transform-origin: 0 0; filter: drop-shadow(4px 4px 0 rgb(42 33 26 / .22)); }
.walker .wk-part.far { filter: brightness(.8) drop-shadow(4px 4px 0 rgb(42 33 26 / .18)); }
.walker .ribbon { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.walker .ribbon i { position: absolute; top: 0; height: 100%; background-image: var(--eng-ribbon); background-repeat: no-repeat; filter: drop-shadow(4px 5px 0 rgb(42 33 26 / .2)); }

.soon-hint { position: absolute; left: 50%; bottom: calc(var(--sh) * .045); z-index: 11; margin: 0; white-space: nowrap; translate: -50% 0; rotate: -1deg; font: 700 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--paper-light) var(--grain); border: 1px solid var(--ink); padding: 5px 12px 4px; box-shadow: 3px 3px 0 rgb(42 33 26 / .3); transition: opacity .5s; pointer-events: none; }
.soon-hint.is-gone { opacity: 0; }

/* ---------- kurtyny (ponad wszystkim poza frontonem sceny) ---------- */
.curtain { position: absolute; top: 0; bottom: calc(var(--sh) * .15); width: var(--curtain-w); z-index: 9; pointer-events: none; transform-origin: 50% 0;
  background: var(--eng-curtain_left) left top / 100% 100% no-repeat; animation: curtain-breathe 7s ease-in-out infinite alternate; filter: drop-shadow(6px 0 0 rgb(42 33 26 / .2)); }   /* fałdy są pionowe: rozciągnięcie w pionie ich nie psuje */
.curtain.left { left: 0; }
.curtain.right { right: 0; scale: -1 1; animation-duration: 8.2s; }
html:not(.has-curtain_left) .curtain { background: linear-gradient(90deg, #5d1414, #8e2222 60%, #c9a227 60% 64%, transparent 64%); }
@keyframes curtain-breathe { from { transform: skewX(-.7deg); } to { transform: skewX(.7deg); } }

/* ---------- ruch ograniczony ---------- */
@media (prefers-reduced-motion: reduce) {
  .clouds i, .balloon, .balloon img, .curtain, .sign, body.soon .masthead .portrait.hanging, .tv-fx, .tv-snow { animation: none; }
  .birds { display: none; }
}

/* ---------- węższe ekrany ---------- */
@media (max-width: 1180px) { body.soon .masthead .portrait.hanging { --pzoom: .82; } }
/* niskie okna (laptop z paskami przeglądarki): nagłówek skaluje się też po wysokości, żeby scena zmieściła się na ekranie */
@media (orientation: landscape) and (max-height: 860px) {
  body.soon .masthead { padding-top: 1.2vh; }
  body.soon .masthead .portrait.hanging { --pzoom: .78; }
  body.soon .masthead mech-letters .line-0 .letter.has-img { --letter-h: clamp(40px, min(6.6vw, 10.5vh), 100px); }
  body.soon .masthead mech-letters .line-1 .letter.has-img { --letter-h: clamp(28px, min(5.6vw, 8.6vh), 84px); }
  body.soon .soon-links { margin-top: 10px; }
  .stage { flex-basis: 320px; }
}
@media (orientation: landscape) and (max-height: 700px) { body.soon .masthead .portrait.hanging { --pzoom: .66; } }
/* telefon w poziomie: nagłówek jak na komputerze, ale wszystko skalowane po wysokości ekranu */
@media (orientation: landscape) and (max-height: 500px) {
  .theatre { --curtain-w: clamp(40px, 8vw, 90px); min-height: max(100svh, 340px); }
  body.soon .masthead { padding-top: 4px; column-gap: 12px; }
  body.soon .masthead .banner { font-size: 13px; margin: 0 0 4px; }
  body.soon .masthead .portrait.hanging { --pzoom: .44; margin-top: 18px; }
  body.soon .masthead mech-letters .line-0 .letter.has-img { --letter-h: 10.5vh; }
  body.soon .masthead mech-letters .line-1 .letter.has-img { --letter-h: 8.4vh; }
  body.soon .masthead mech-letters .letters-sub { font-size: 10px; margin-top: 4px; }
  body.soon .soon-links { margin-top: 6px; }
  .soon-link .btn { width: 38px; height: 38px; }
  .stage { flex-basis: 180px; }
  .balloon { width: 56px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .theatre { --curtain-w: clamp(30px, 10vw, 84px); min-height: 100svh; }
  /* kurtyny na telefonie: pas aksamitu z frędzlą (curtain_strip, kafel bez szwu) powtarzany w pionie w naturalnych proporcjach —
     dowolna wysokość bez spłaszczania. Bez chwostów: na prostym pasie nic nie upinają (uwaga Jacka). Bez pasa: górne upięcie
     pełnej ryciny (zapas). */
  html:not(.has-curtain_strip) .curtain { bottom: auto; height: min(62svh, 520px); }
  html.has-curtain_strip .curtain { background: var(--eng-curtain_strip) left top / 100% auto repeat-y; }
  body.soon .masthead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "banner portrait" "name name" "controls controls"; column-gap: 8px; padding: 8px calc(var(--curtain-w) + 6px) 0; }
  body.soon .masthead .banner { align-self: start; justify-self: start; margin: 18px 0 0; font-size: 14px; line-height: 1.25; }
  body.soon .masthead .portrait.hanging { --pzoom: .5; --pivot: 16vh; margin-top: 34px; }
  /* nazwisko na całą szerokość kolumny: litery liczone od jej szerokości (cqi). Pomiar przy 390 px: szerokość wiersza ≈ 6,6·h + odstępy
     („Mossakowski”, 11 liter) i 3,7·h + odstępy („Jacek”); „Jacek” ok. 1,25× wyższy, jak na makiecie */
  body.soon .masthead mech-letters { margin-top: -6px; justify-self: stretch; width: 100%; container-type: inline-size; }
  body.soon .masthead mech-letters .line-0 .letter.has-img { --letter-h: min(92px, calc((100cqi - 24px) / 5.4)); }
  body.soon .masthead mech-letters .line-1 .letter.has-img { --letter-h: min(74px, calc((100cqi - 24px) / 6.75)); }
  body.soon .masthead mech-letters .letters-sub { font-size: 11px; letter-spacing: .12em; }
  .stage { flex-basis: 330px; }
  html.has-curtain_strip .props { left: calc(var(--curtain-w) + 2vw); }   /* pas kurtyny ma stałą szerokość — rekwizyty za nim */
  .balloon { width: 64px; top: 128px; }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 800px) { .stage { flex-basis: 312px; } }
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) { body.soon .masthead .portrait.hanging { --pzoom: .72; } }
@media (max-width: 600px) {
  .soon-link .btn { width: 50px; height: 50px; }
  body.soon .soon-links { gap: 22px; margin-top: 12px; }
}

/* ---------- formularz „Ministerstwo” (soon-ministry.js, makieta assets/concepts/form_C.png) ----------
   Nakładka nad całą stroną; postać en face = deska z formularzem (z-index 3), głowa za jej górną krawędzią (2), nogi pod spodem (1),
   dłonie na bokach (4), dłoń z pieczątką (5). Wymiary z soon-ministry.js: --bw (szerokość deski), --ar (proporcja ryciny), --top.
   Papier na desce = wnętrze drukowanej ramki ryciny: 9,63% / 17,41% / 81,03% × 74,86%; pieczęcie w prawym górnym i lewym dolnym rogu. */
.ministry { position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; --bh: calc(var(--bw, 420px) * var(--ar, 1.35)); --hw: calc(var(--bw, 420px) * .75); }
.ministry[hidden] { display: none; }
.min-spot { position: fixed; inset: 0; opacity: 0; transition: opacity .55s;
  background: radial-gradient(ellipse 30% 48% at 50% 52%, rgb(255 236 190 / .16), rgb(255 236 190 / 0) 100%), radial-gradient(ellipse 42% 58% at 50% 52%, transparent 50%, rgb(14 9 4 / .62) 100%); }   /* reflektor: poza elipsą scena przygaszona */
.ministry.is-on .min-spot { opacity: 1; }
.min-stage { position: relative; height: max(100svh, calc(var(--top) + var(--bh) + 40px)); overflow: clip; }
.min-actor { position: absolute; left: 50%; top: var(--top); width: var(--bw); height: var(--bh); translate: -50% 0; }
.min-board { position: absolute; inset: 0; z-index: 3; container-type: inline-size; transform-origin: 50% 50%; }
.min-board-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(8px 10px 0 rgb(20 12 6 / .35)); }
.min-form { position: absolute; left: 9.63%; top: 17.41%; width: 81.03%; height: 74.86%; box-sizing: border-box; padding: 3.4cqi 4.4cqi 3.2cqi; display: flex; flex-direction: column; gap: 2.4cqi; color: var(--ink); }
.min-form h2 { margin: 0 17cqi .6cqi 0; font: 900 6.4cqi/1.02 "Playfair Display SC", Georgia, serif; letter-spacing: .01em; color: #231a12; }
.min-form h2 span { display: block; margin-top: .8cqi; font: 700 3.5cqi/1.2 "Courier Prime", monospace; letter-spacing: .14em; color: #6b1d16; }
.min-field { display: flex; flex-direction: column; gap: .7cqi; font: 700 3.2cqi/1.2 "Courier Prime", monospace; letter-spacing: .12em; text-transform: uppercase; color: #3a2d22; }
.min-field input, .min-field textarea { font: 400 max(16px, 4cqi)/1.35 "Special Elite", "Courier Prime", monospace; color: #1d1712; background: rgb(255 251 238 / .5); border: 0; border-bottom: 2px solid rgb(42 33 26 / .55);
  border-radius: 0; padding: .9cqi 1.4cqi; outline: none; text-transform: none; letter-spacing: 0; width: 100%; box-sizing: border-box; }
.min-field textarea { flex: 1; min-height: 3.2em; resize: none; background-image: repeating-linear-gradient(transparent 0 calc(1.35em - 1px), rgb(42 33 26 / .18) calc(1.35em - 1px) 1.35em); background-attachment: local; }
.min-msg { flex: 1; min-height: 0; }
.min-field input:focus, .min-field textarea:focus { background-color: rgb(255 251 238 / .85); border-bottom-color: #8e1b1b; }
.min-field.is-bad span { color: #b3261e; }
.min-field.is-bad input, .min-field.is-bad textarea { border-bottom-color: #b3261e; background-color: rgb(255 228 220 / .6); }
.min-foot { display: flex; align-items: center; justify-content: flex-end; min-height: 11cqi; }   /* przycisk w prawym dolnym rogu (w lewym jest pieczęć ryciny) */
.min-status { margin: -1cqi 0 -1.4cqi; min-height: 1.3em; font: 700 3cqi/1.3 "Courier Prime", monospace; color: #8e1b1b; text-align: right; }
.min-send { flex: none; font: 700 4.6cqi/1 "Playfair Display SC", Georgia, serif; letter-spacing: .05em; color: #fbf3e2; background: #8e1b1b; border: 0; border-radius: 1.4cqi; padding: 2cqi 4.4cqi 2.2cqi; cursor: pointer;
  box-shadow: 0 0 0 .5cqi #8e1b1b, 0 0 0 .9cqi #f3e6c9, 0 0 0 1.3cqi #8e1b1b, .9cqi 1.1cqi 0 1.3cqi rgb(42 33 26 / .3); }
.min-send:hover { filter: brightness(1.12); }
.min-send:focus-visible { outline: 3px solid #1d1712; outline-offset: 2.2cqi; }
.min-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.min-close { position: absolute; right: 1.2%; top: 5.5%; z-index: 6; width: 8.5cqi; height: 8.5cqi; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper-light) var(--grain); color: var(--ink); font: 700 5.2cqi/1 Georgia, serif; box-shadow: 2px 3px 0 rgb(42 33 26 / .3); }
.min-close:focus-visible { outline: 3px solid #8e1b1b; outline-offset: 2px; }
.min-imprint { position: absolute; left: 50%; top: 53%; width: 46%; translate: -50% -50%; rotate: -9deg; opacity: 0; pointer-events: none; mix-blend-mode: multiply; z-index: 2; }
.min-imprint[data-kind="fix"] { width: 40%; rotate: 7deg; }

/* głowa: dolna prosta krawędź kawałka (89,2% płótna) chowa się 0,03 szer. deski pod górną krawędzią drewna (13,85% szer. deski) */
.min-head { position: absolute; z-index: 2; left: 50%; top: calc(var(--hw) * -.667); width: var(--hw); height: var(--hw); translate: -50% 0; transform-origin: 50% 92%;
  transform: translateY(78%); transition: transform .4s cubic-bezier(.4,0,.6,1); }
.min-head img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.min-head img.is-on { visibility: visible; }
.ministry.is-on .min-head { transform: none; transition: transform .5s cubic-bezier(.3,1.55,.5,1) .05s; }
.ministry.is-on .min-head.is-peek { transform: translate(15%, 6%) rotate(7deg); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }   /* zerka zza deski na wiadomość (dół kawałka nadal pod deską) */
.min-legs { position: absolute; z-index: 1; left: 50%; top: calc(var(--bh) * .84); width: calc(var(--bw) * .62); translate: -50% 0; opacity: 0; transform: translateY(-14%); transition: opacity .25s, transform .35s; }
.ministry.is-on .min-legs { opacity: 1; transform: none; }
.min-hand { position: absolute; z-index: 4; width: calc(var(--bw) * .27); top: 41%; opacity: 0; pointer-events: none; transition: transform .3s ease-in, opacity .2s; }
.min-hand.left { left: calc(var(--bw) * -.15); transform: translateX(-70%); }   /* palce zachodzą na lewą krawędź deski */
.min-hand.right { right: calc(var(--bw) * -.15); transform: translateX(70%); }
.ministry.is-on .min-hand.left, .ministry.is-on .min-hand.right { opacity: 1; transform: none; transition: transform .35s cubic-bezier(.3,1.4,.5,1) .18s, opacity .2s .18s; }
/* dłoń z pieczątką (590×543): stopka w 24% / 95% ryciny trafia w środek odcisku (50% / 53% deski) w pozycji „w dół” (transform: none) */
/* ramiona: rękaw z nitem barku (schowany za deską) do nitu łokcia na rękawie dłoni — położenie, długość i kąt liczy soon-ministry.js */
.min-arm { position: absolute; z-index: 2; opacity: 0; pointer-events: none; filter: brightness(.92); transition: transform .3s ease-in, opacity .2s; }
.min-arm.left { transform: translateX(-70%); }
.min-arm.right { scale: -1 1; transform: translateX(70%); }
.ministry.is-on .min-arm { opacity: 1; transform: none; transition: transform .35s cubic-bezier(.3,1.4,.5,1) .18s, opacity .2s .18s; }
.min-hand.stamp { --sw: calc(var(--bw) * .7); z-index: 5; width: var(--sw); left: calc(50% - var(--sw) * .24); top: calc(53% - var(--sw) * .9203 * .95); opacity: 0; transform-origin: 24% 95%; transition: none; }
.min-note { position: fixed; left: 50%; bottom: 20px; z-index: 25; margin: 0; translate: -50% 0; max-width: calc(100vw - 40px); box-sizing: border-box; text-align: center;
  background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .3); padding: 8px 14px 7px; font: 700 13px/1.35 var(--font-mono); color: var(--ink);
  opacity: 0; transition: opacity .45s; pointer-events: none; rotate: -1deg; }
.min-note.is-on { opacity: 1; }
/* podkładka w ręku lalki (wejście i wyjście): ta sama rycina, po przystawieniu pieczątki z odciskiem */
.walker .wk-board img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.walker .wk-board .wk-imprint { left: 17%; top: 40%; width: 66%; height: auto; rotate: -9deg; opacity: 0; mix-blend-mode: multiply; }
.walker .wk-board.is-stamped .wk-imprint { opacity: .92; }
@media (prefers-reduced-motion: reduce) { .min-head, .min-legs, .min-hand, .min-spot { transition-duration: 0s !important; transition-delay: 0s !important; } }