/* plac.css — „plac budowy” na starej stronie (10.10.2026): drabina z budowlańcem jako pasek przewijania,
   hak dźwigu przy drabinie (ciągnięcie nad górą strony), taśma ostrzegawcza jak guma na końcu strony.
   Wszystko wstrzykuje s/plac.js; bez JS nic z tego nie istnieje. Klasy z przedrostkiem plac-. */

/* natywny pasek chowany tylko tam, gdzie drabina go zastępuje (mysz, od 1024 px) i dopiero gdy drabina naprawdę stoi
   (plac-on stawia plac.js) — gdy plac.js się nie wczyta, pasek zostaje */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  html.plac-on{scrollbar-width:none}
  html.plac-on::-webkit-scrollbar{display:none;width:0;height:0}
}
/* stary pasek postępu znika, gdy działa drabina (dwa wskaźniki to bałagan) */
html.plac-on .postep{display:none}
html.plac-ciagnie,html.plac-ciagnie *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}

/* ───────── drabina = pasek przewijania ───────── */
.plac-dr{
  --plac-szyna:rgba(138,138,130,.55);--plac-szczebel:rgba(138,138,130,.4);
  position:fixed;z-index:40;top:calc(var(--nav-h) + 12px);bottom:12px;right:8px;width:28px;
  pointer-events:none;opacity:.8;transition:opacity .3s ease;-webkit-user-select:none;user-select:none;touch-action:none
}
.plac-dr.aktywna{pointer-events:auto;cursor:pointer}
.plac-dr.aktywna:hover,.plac-dr.ciagnie{opacity:1}
/* dotyk albo węziej niż 1024 px: tylko podczas przewijania, nie do kliknięcia */
.plac-dr.znika{opacity:0;transition:opacity .6s ease}
.plac-dr.znika.widac{opacity:.9;transition-duration:.15s}
.plac-tor{position:absolute;inset:0 0 10px;overflow:hidden}
.plac-szyny{position:absolute;inset:0 4px;border-left:1.5px solid var(--plac-szyna);border-right:1.5px solid var(--plac-szyna)}
.plac-szczeble{position:absolute;inset:0 5.5px;background:repeating-linear-gradient(180deg,transparent 0 26.5px,var(--plac-szczebel) 26.5px 28px)}
.plac-przebyte{position:absolute;inset:0;overflow:hidden;will-change:transform}
.plac-przebyte .plac-szczeble{background:repeating-linear-gradient(180deg,transparent 0 25.5px,#FFC400 25.5px 27px,rgba(130,94,0,.55) 27px 28px);will-change:transform}
.plac-deska{position:absolute;left:-7px;right:-7px;bottom:3px;height:5px;border-radius:2px;background:linear-gradient(180deg,#B88A4E,#8A6436);box-shadow:0 2px 6px -2px rgba(0,0,0,.5)}
.plac-ludzik{position:absolute;left:2px;top:0;width:24px;height:34px;will-change:transform;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.plac-dr.aktywna .plac-ludzik{cursor:grab}
.plac-dr.ciagnie .plac-ludzik{cursor:grabbing}
.plac-ludzik-in,.plac-ludzik svg{display:block;width:100%;height:100%;overflow:visible}
.plac-ludzik .p{opacity:0}
.plac-ludzik[data-poza="a"] .pa,.plac-ludzik[data-poza="b"] .pb,.plac-ludzik[data-poza="s"] .ps,
.plac-ludzik[data-poza="m"] .pm,.plac-ludzik[data-poza="r"] .pr{opacity:1}
.plac-ludzik .reka{transform-box:view-box;transform-origin:15.4px 13.2px}
@keyframes plac-macha{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes plac-skok{0%{transform:none}30%{transform:translate3d(0,-10px,0)}58%{transform:none}72%{transform:translate3d(0,-3px,0)}84%{transform:none}}
@keyframes plac-strach{0%{transform:none}22%{transform:translate3d(0,-13px,0) rotate(-6deg)}48%{transform:translate3d(0,0,0) rotate(4deg)}64%{transform:translate3d(0,-4px,0)}80%{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .plac-ludzik[data-poza="m"] .reka{animation:plac-macha .32s ease-in-out 6 alternate}
  .plac-ludzik.skacze .plac-ludzik-in{animation:plac-skok .8s cubic-bezier(.3,.7,.4,1)}
  .plac-ludzik.boi-sie .plac-ludzik-in{animation:plac-strach .7s cubic-bezier(.3,.7,.4,1)}
}
@media (max-width:767.98px){
  .plac-dr{right:2px;width:14px;top:calc(var(--nav-h) + 8px);bottom:8px}
  .plac-tor{bottom:7px}
  .plac-szyny{inset:0 1.5px}
  .plac-szczeble{inset:0 3px;background:repeating-linear-gradient(180deg,transparent 0 20.5px,var(--plac-szczebel) 20.5px 22px)}
  .plac-przebyte .plac-szczeble{background:repeating-linear-gradient(180deg,transparent 0 19.5px,#FFC400 19.5px 21px,rgba(130,94,0,.55) 21px 22px)}
  .plac-deska{left:-3px;right:-3px;bottom:2px;height:4px}
  .plac-ludzik{left:-2px;width:18px;height:25.5px}
}

/* ───────── hak dźwigu: przy drabinie, wyjeżdża przy ciągnięciu nad górą strony ───────── */
.plac-hak{position:fixed;z-index:45;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) - 6px);right:34px;width:46px;height:113px;overflow:hidden;pointer-events:none}
.plac-hak-in{width:100%;height:100%;transform:translate3d(0,-100%,0);transition:transform .65s cubic-bezier(.5,-.45,.25,1)}
.plac-hak.ciagnie .plac-hak-in{transition:transform .12s linear}
.plac-hak svg{display:block;width:100%;height:100%}
@media (max-width:767.98px){.plac-hak{right:16px;width:34px;height:84px}}

/* ───────── koniec placu: taśma ostrzegawcza jak guma pod stopką ───────── */
/* pod znakiem KIEROWNIK.AI stoi teraz pas z taśmą: znak cały, bez cięcia w pół liter (line-height .76 → zapas na dół) */
html.plac-tasma .stopka-znak{transform:none;padding-bottom:.11em}
.plac-koniec{position:relative;height:140px;background-color:var(--noc);background-image:var(--szum);-webkit-user-select:none;user-select:none}
.plac-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.plac-grunt{fill:none;stroke:rgba(243,243,239,.09);stroke-width:1}
.plac-baza{fill:none;stroke:#FFC400}
.plac-brzeg{fill:none;stroke:#141414;stroke-width:2.6}
.plac-napis{font-family:var(--f-display);font-weight:700;letter-spacing:.14em;fill:#141414}
.plac-podst{fill:#2E2E33;stroke:#4A4A51;stroke-width:1}
.plac-cialo{fill:#F1F0EA}
.plac-pasy{fill:#D42A1E}
.plac-czapka{fill:#A41E15}
.plac-wezel{fill:#FFC400;stroke:rgba(20,20,20,.45);stroke-width:1}
.plac-ogon{fill:none;stroke:#E2AC00;stroke-linecap:butt}
@media (max-width:767.98px){.plac-koniec{height:120px}.plac-brzeg{stroke-width:2.2}}

@media print{.plac-dr,.plac-hak,.plac-koniec{display:none!important}}