/* Misja Eksperci GOZ: Stacja SELEKT 2080. Silnik pomieszczeń FPP (etap 1). */
:root {
  --tlo: #030c10;
  --panel: rgba(3, 20, 24, 0.86);
  --panel-2: rgba(6, 34, 38, 0.92);
  --linia: #1fd1b6;
  --neon: #3dffa2;
  --cyan: #38d6ff;
  --bursztyn: #ffb547;
  --blad: #ff9a3d;
  --tekst: #e7fff8;
  --tekst-2: #a6d3c9;
  --krzywa: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t1: 120ms;
  --t2: 240ms;
  --t3: 400ms;
  --font: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #000; color: var(--tekst); font-family: var(--font); }
body { display: grid; place-items: center; overflow: hidden; height: 100dvh; }
button { font: inherit; color: inherit; }
img { user-select: none; -webkit-user-drag: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Scena 16:9 ------------------------------------------------------------------------------- */
#scena {
  user-select: none; -webkit-user-select: none; /* przeciąganie obraca widok, nie zaznacza tekstu */
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  overflow: clip; /* bez przewijania sceny przy fokusie punktu na krawędzi */
  background: var(--tlo);
  container-type: size;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#swiat, #efekty, #dlonie, #nakladki { position: absolute; inset: 0; }
#efekty, #dlonie { pointer-events: none; }
#efekty { z-index: 5; }
#dlonie { z-index: 6; overflow: hidden; }
#hud { z-index: 8; }
#dialog { z-index: 9; }
#nakladki { z-index: 10; pointer-events: none; }
#nakladki > * { pointer-events: auto; }
#etykieta { z-index: 12; }
/* „Wczytuję…” do pierwszej nakładki (ekran startu; usuwa go otworz() w nakladki.js). Pojawia się po 0,25 s (szybki start go nie pokazuje),
   podpowiedź o odświeżeniu po 12 s (gdyby skrypty się nie wczytały). */
#wczytywanie { position: absolute; inset: 0; z-index: 11; display: grid; place-content: center; justify-items: center; gap: 2.4cqh; padding: 0 6cqw; text-align: center; pointer-events: none; color: var(--neon); animation: wczyt-pojaw 0.3s 0.25s both; }
#wczytywanie i { width: 4.6cqw; min-width: 36px; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(61, 255, 162, 0.18); border-top-color: var(--neon); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.3); animation: wczyt-krec 0.9s linear infinite; }
#wczytywanie span { font: 600 clamp(13px, 1.4cqw, 24px)/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.45); }
#wczytywanie small { max-width: 40em; color: var(--tekst-2); font-size: clamp(11px, 0.95cqw, 16px); line-height: 1.4; animation: wczyt-pozniej 0.4s 12s both; }
@keyframes wczyt-krec { to { transform: rotate(360deg); } }
@keyframes wczyt-pojaw { from { opacity: 0; } }
@keyframes wczyt-pozniej { from { opacity: 0; visibility: hidden; } } /* do 12 s ukryta także dla czytnika ekranu */
@media (prefers-reduced-motion: reduce) { #wczytywanie i { animation-duration: 2.4s; } }

/* --- Widok, kamera, plany (paralaksa) --------------------------------------------------------- */
.widok { position: absolute; inset: 0; overflow: clip; opacity: 0; transition: opacity var(--t3) ease; }
.widok.aktywny { opacity: 1; }
.kamera { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; --px: 0; --py: 0; }
.kamera { --S: 1; --pan: 0.5; }
.plan { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--S) * 100%); will-change: transform; }
/* Przesunięcie o obrót panoramy (procent szerokości planu) + paralaksa (procent szerokości sceny). */
.plan-tlo { transform: translate3d(calc(var(--pan) * (1 - var(--S)) / var(--S) * 100% + var(--px) * -0.6cqw), calc(var(--py) * -0.45cqh), 0) scale(1.035); }
.plan-przod { transform: translate3d(calc(var(--pan) * (1 - var(--S)) / var(--S) * 100% + var(--px) * -1.4cqw), calc(var(--py) * -0.9cqh), 0) scale(1.035); pointer-events: none; }
.kadr { position: absolute; top: 0; bottom: 0; }
/* Walec 360°: perspektywa = promień walca (widok ze środka), plastry pasa panoramy i karty na ścianach. */
.scena3d { position: absolute; inset: 0; overflow: hidden; overflow: clip; cursor: grab; touch-action: pan-y; transition: filter 1.6s ease; }
.scena3d:active { cursor: grabbing; }
.obrot3d { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.plaster { position: absolute; left: 0; top: 0; background-repeat: no-repeat; backface-visibility: hidden; }
.karta3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.karta3d > .punkt, .karta3d > .warstwa { pointer-events: auto; }
.karta3d > .warstwa { pointer-events: none; }
.karta3d.wypelnij > * { left: 0 !important; top: 0 !important; right: auto !important; width: 100% !important; height: 100% !important; }
.karta3d.kadr-srodek { pointer-events: none; }
.widok.walec.niskie .scena3d { filter: brightness(0.8) saturate(0.68) sepia(0.12); }
.widok.walec.przywracanie .scena3d { animation: zapalanie 1.8s steps(1, end) 1; }
.widok.panorama .plan-tlo { cursor: grab; touch-action: pan-y; }
.widok.panorama .plan-tlo:active { cursor: grabbing; }
.obrot {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 4.2cqw; height: 9cqh; display: grid; place-items: center; align-content: center; gap: 0.6cqh;
  background: rgba(2, 18, 20, 0.55); border: 1px solid rgba(61, 255, 162, 0.45); color: var(--tekst); cursor: pointer;
  font: 600 clamp(10px, 0.8cqw, 14px)/1 var(--font); transition: background var(--t2), box-shadow var(--t2), transform var(--t1);
}
/* Wskaźnik celu poza ekranem (np. „Śluza 02”), klik = obrót w jego stronę. */
.wskaznik-celu {
  position: absolute; top: 40%; z-index: 4; display: flex; align-items: center; gap: 0.6cqw; padding: 0.7cqw 1.1cqw; cursor: pointer;
  background: rgba(2, 30, 26, 0.88); border: 2px solid var(--neon); color: var(--tekst); font: 700 clamp(12px, 1.1cqw, 20px)/1 var(--font);
  letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.55); animation: wskaznik 1.2s ease-in-out infinite;
}
.wskaznik-celu.prawo { right: 6cqw; }
.wskaznik-celu.lewo { left: 6cqw; }
.wskaznik-celu.prawo { flex-direction: row-reverse; }
.wskaznik-celu i { width: 1.1cqw; height: 1.1cqw; border: solid var(--neon); border-width: 0 3px 3px 0; transform: rotate(-45deg); }
.wskaznik-celu.lewo i { transform: rotate(135deg); }
@keyframes wskaznik { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.6cqw); } }
.wskaznik-celu.lewo { animation-name: wskaznik-l; }
@keyframes wskaznik-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-0.6cqw); } }
/* Punkt-cel (następny krok) mocniej widoczny. */
.punkt.cel-aktywny::after { border-width: 3px; border-color: var(--neon); animation: wyroznij 1.1s ease-in-out infinite; }
.punkt.cel-aktywny .znacznik-nav { font-size: clamp(14px, 1.4cqw, 24px); }
.punkt.cel-aktywny .znacznik-nav i { width: 3.4cqw; height: 3.4cqw; border-width: 3px; }
/* Drzwi powrotne: mały, szary podpis — nie mylą się z celem (zielonym). */
.punkt.powrot .znacznik-nav { color: var(--tekst-2); font-size: clamp(11px, 0.85cqw, 15px); text-shadow: none; opacity: 0.85; }
.punkt.powrot .znacznik-nav i { width: 1.8cqw; height: 1.8cqw; border-color: var(--tekst-2); box-shadow: none; animation: none; }
.punkt.powrot .znacznik-nav i::after { border-color: var(--tekst-2); transform: translate(-30%, -50%) rotate(135deg); }
.obrot.lewo { left: 0.8cqw; }
.obrot.prawo { right: 0.8cqw; }
.obrot i { width: 1.3cqw; height: 1.3cqw; border: solid var(--neon); border-width: 0 3px 3px 0; transform: rotate(135deg); }
.obrot.prawo i { transform: rotate(-45deg); }
.obrot span { color: var(--tekst-2); }
.obrot:hover, .obrot:focus-visible { background: rgba(4, 40, 36, 0.85); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.4); outline: none; }
.obrot:active { transform: translateY(-50%) scale(0.94); }
.plan-przod .punkt { pointer-events: auto; }
.tlo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1.6s ease; }
.warstwa { position: absolute; pointer-events: none; transition: opacity var(--t3) ease, filter var(--t3) ease, transform var(--t3) var(--krzywa); }
.warstwa img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Niskie zasilanie: jasno, ale przygaszone neony i ciepłe światło awaryjne (próbka A ~80%). */
.widok.niskie .tlo-img, .widok.niskie .warstwa.reaguje { filter: brightness(0.8) saturate(0.68) sepia(0.12); }
.awaria { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.widok.niskie .awaria { opacity: 1; }
.awaria::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(0deg, rgba(255, 150, 60, 0.2) 0%, rgba(255, 150, 60, 0.06) 22%, transparent 40%);
  mix-blend-mode: normal;
}
.awaria::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.2cqh;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 70, 0.75), transparent);
  filter: blur(6px);
  animation: listwa 2s ease-in-out infinite alternate;
}
@keyframes listwa { from { opacity: 0.35; } to { opacity: 0.9; } }
.widok.przywracanie .tlo-img { animation: zapalanie 1.8s steps(1, end) 1; }
@keyframes zapalanie {
  0% { filter: brightness(0.8) saturate(0.68) sepia(0.12); }
  12% { filter: brightness(1.15) saturate(1); }
  18% { filter: brightness(0.75) saturate(0.7); }
  30% { filter: brightness(1.1) saturate(1); }
  36% { filter: brightness(0.85); }
  50%, 100% { filter: none; }
}

/* --- Punkty (hotspoty) ------------------------------------------------------------------------ */
.punkt {
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 0.6cqw; outline: none; z-index: 2;
}
.punkt.owal { border-radius: 50%; }
.punkt[hidden] { display: none; }
.punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid transparent; transition: border-color var(--t2), box-shadow var(--t2), background-color var(--t2);
}
.punkt:hover::after, .punkt:focus-visible::after, .punkt.uzbrojony::after {
  border-color: rgba(61, 255, 162, 0.85);
  box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.45), inset 0 0 1.4cqw rgba(61, 255, 162, 0.25);
  background-color: rgba(61, 255, 162, 0.06);
}
.punkt.ujawniony::after {
  border-color: rgba(120, 255, 210, 0.95);
  box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.6), inset 0 0 1.6cqw rgba(61, 255, 162, 0.3);
  animation: ujawnij 0.5s var(--krzywa);
}
.punkt.typ-zbadaj.ujawniony::after { border-color: rgba(56, 214, 255, 0.95); box-shadow: 0 0 1.4cqw rgba(56, 214, 255, 0.6), inset 0 0 1.6cqw rgba(56, 214, 255, 0.3); }
@keyframes ujawnij { from { transform: scale(1.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.punkt .podpis-skanu {
  position: absolute; left: 50%; top: -0.4cqw; transform: translate(-50%, -100%);
  font: 600 clamp(11px, 0.95cqw, 17px)/1 var(--font); letter-spacing: 0.05em; white-space: nowrap;
  padding: 0.35em 0.6em; background: rgba(2, 20, 22, 0.88); border: 1px solid rgba(61, 255, 162, 0.6);
  color: var(--tekst); opacity: 0; transition: opacity var(--t2); pointer-events: none;
}
.punkt.ujawniony .podpis-skanu { opacity: 1; }
.punkt.zrobiony::before {
  content: "✓"; position: absolute; right: -0.6cqw; top: -0.6cqw; width: 2cqw; height: 2cqw; display: grid; place-items: center;
  font: 700 1.2cqw/1 var(--font); color: #022; background: var(--neon); border-radius: 50%;
  box-shadow: 0 0 1cqw rgba(61, 255, 162, 0.8); animation: ujawnij 0.4s var(--krzywa);
}
/* Znacznik nawigacji: zawsze widoczny chevron na podłodze lub przy krawędzi. */
.punkt.typ-przejdz { cursor: pointer; }
.punkt .znacznik-nav {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 700 clamp(12px, 1.05cqw, 19px)/1.1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst);
  text-shadow: 0 0 0.6cqw rgba(61, 255, 162, 0.9);
}
.punkt .znacznik-nav i {
  display: block; width: 2.6cqw; height: 2.6cqw; margin: 0 auto 0.3cqw; border: 2px solid var(--neon); border-radius: 50%;
  box-shadow: 0 0 1cqw rgba(61, 255, 162, 0.7); position: relative; animation: puls 1.8s ease-in-out infinite;
}
.punkt .znacznik-nav i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.8cqw; height: 0.8cqw; border: solid var(--neon); border-width: 0 2px 2px 0;
  transform: translate(-60%, -50%) rotate(-45deg);
}
.punkt .znacznik-nav.w-dol i::after { transform: translate(-50%, -70%) rotate(45deg); }
@keyframes puls { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
.punkt.wyrozniony::after { border-color: rgba(61, 255, 162, 0.9); animation: wyroznij 1.4s ease-in-out infinite; }
@keyframes wyroznij { 0%, 100% { box-shadow: 0 0 0.6cqw rgba(61, 255, 162, 0.4); } 50% { box-shadow: 0 0 2cqw rgba(61, 255, 162, 0.9), inset 0 0 1.2cqw rgba(61, 255, 162, 0.3); } }
.nasiono {
  position: absolute; inset: 8%; display: block; pointer-events: none; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #f6ffd0, #9be34a 45%, #3d7a1c 75%);
  box-shadow: 0 0 0.6cqw rgba(170, 255, 120, 0.8); animation: nasiono 4s ease-in-out infinite;
}
@keyframes nasiono { 0%, 80%, 100% { opacity: 0.7; } 88% { opacity: 1; box-shadow: 0 0 1.4cqw rgba(190, 255, 120, 1); } }
/* Błysk przy skanie (decyzja użytkownika 05.10): nasiono rozbłyska i pulsuje ok. 2,5 s, wokół rozchodzą się kręgi. */
.punkt.zablysk .nasiono { animation: nasiono-blysk 0.62s ease-in-out 6; opacity: 1; } /* ok. 3,7 s: dłoń ze skanerem zasłania środek ekranu przez pierwsze ~1,3 s */
@keyframes nasiono-blysk { 0%, 100% { transform: scale(1); box-shadow: 0 0 0.8cqw rgba(190, 255, 120, 0.9); filter: brightness(1); } 50% { transform: scale(1.9); box-shadow: 0 0 2.6cqw 0.6cqw rgba(210, 255, 140, 1); filter: brightness(1.6); } }
.punkt.zablysk::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border: 2px solid rgba(200, 255, 130, 0.95); border-radius: 50%; translate: -50% -50%; pointer-events: none; animation: nasiono-krag 0.9s ease-out 4; }
@keyframes nasiono-krag { from { scale: 0.3; opacity: 1; } to { scale: 2.4; opacity: 0; } }

/* --- Etykieta przy kursorze ------------------------------------------------------------------- */
#etykieta {
  position: absolute; pointer-events: none; transform: translate(1.4cqw, 1.2cqw);
  display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.8em;
  font: 600 clamp(12px, 1.05cqw, 19px)/1 var(--font); letter-spacing: 0.04em; white-space: nowrap;
  background: rgba(2, 18, 20, 0.92); border: 1px solid rgba(61, 255, 162, 0.7); color: var(--tekst);
  box-shadow: 0 0 1cqw rgba(61, 255, 162, 0.25);
}
#etykieta .ik { width: 1.3em; height: 1.3em; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 0.8em; color: var(--neon); }
#etykieta.typ-zbadaj { border-color: rgba(56, 214, 255, 0.8); }
#etykieta.typ-zbadaj .ik { color: var(--cyan); }
#etykieta .podp { color: var(--tekst-2); font-weight: 400; }

/* --- Skan ------------------------------------------------------------------------------------- */
.fala-skanu {
  position: absolute; left: 6%; bottom: -10%; width: 10cqw; height: 10cqw; border-radius: 50%;
  border: 0.35cqw solid rgba(61, 255, 162, 0.9); box-shadow: 0 0 3cqw rgba(61, 255, 162, 0.7), inset 0 0 3cqw rgba(61, 255, 162, 0.5);
  transform: translate(-50%, 50%) scale(0); animation: fala 1.1s var(--krzywa) forwards;
}
@keyframes fala { to { transform: translate(-50%, 50%) scale(26); opacity: 0; border-width: 0.05cqw; } }
.blysk { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* --- Dłonie ----------------------------------------------------------------------------------- */
.dlon { position: absolute; height: 62cqh; width: auto; transition: transform 260ms var(--krzywa), opacity 200ms ease; opacity: 0; will-change: transform; }
.dlon.lewa { transform-origin: 0% 100%; }

/* --- HUD -------------------------------------------------------------------------------------- */
.hud-gora {
  position: absolute; left: 0; right: 0; top: 0; height: 6.2cqh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 1.4cqw; background: linear-gradient(180deg, rgba(1, 12, 14, 0.85), rgba(1, 12, 14, 0)); pointer-events: none;
}
.hud-gora > * { pointer-events: auto; }
/* Lobby: środek górnego paska wolny (banery SELEKT i WFOŚiGW nad oknem); czipy i nasiona pod nazwą sali. */
#hud.w-lobby .hud-gora { background: linear-gradient(90deg, rgba(1, 12, 14, 0.85), rgba(1, 12, 14, 0) 30%, rgba(1, 12, 14, 0) 70%, rgba(1, 12, 14, 0.85)); }
#hud.w-lobby .hud-zasilanie { grid-column: 3; }
#hud.w-lobby .hud-srodek { position: absolute; left: 1.4cqw; top: 6.6cqh; padding: 0.5cqh 0.6cqw; border-radius: 0.6cqw; background: rgba(1, 12, 14, 0.7); }
.hud-lewo { display: flex; align-items: baseline; gap: 0.9cqw; font-size: clamp(11px, 0.95cqw, 17px); letter-spacing: 0.08em; text-transform: uppercase; }
.hud-lewo b { color: var(--neon); font-weight: 700; }
.hud-lewo span { color: var(--tekst-2); }
.hud-czipy { display: flex; gap: 0.7cqw; }
.hud-srodek { display: flex; align-items: center; gap: 1.4cqw; }
.hud-nasiona { display: flex; align-items: center; gap: 0.45cqw; padding: 0.3cqw 0.7cqw; border: 1px solid rgba(190, 255, 120, 0.55); border-radius: 1cqw; background: rgba(2, 20, 12, 0.7); font: 700 clamp(11px, 0.95cqw, 17px)/1 var(--font); color: #d6ff9a; }
.hud-nasiona i { width: 0.9cqw; height: 1.2cqw; min-width: 9px; min-height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #f4ffd0, #9be15d 55%, #4a8f2a); box-shadow: 0 0 0.8cqw rgba(190, 255, 120, 0.8); }
.hud-nasiona.nowe { animation: nasiono-hud 1.2s ease 2; }
@keyframes nasiono-hud { 50% { box-shadow: 0 0 1.6cqw rgba(190, 255, 120, 0.9); transform: scale(1.12); } }
.czip {
  width: 2.5cqw; height: 2.5cqw; position: relative; display: grid; place-items: center;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: rgba(31, 209, 182, 0.18); color: var(--tekst-2); font: 700 0.95cqw/1 var(--font);
}
.czip::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: rgba(2, 16, 18, 0.95); z-index: -1; }
.czip.zdobyty { background: var(--neon); color: #032; box-shadow: 0 0 1cqw var(--neon); }
.czip.zdobyty::before { background: linear-gradient(135deg, #8dffcf, #1fd18f); }
.hud-zasilanie { justify-self: end; display: flex; align-items: center; gap: 0.7cqw; font-size: clamp(11px, 0.9cqw, 16px); letter-spacing: 0.08em; }
.hud-zasilanie .pasek { width: 11cqw; height: 0.9cqh; background: rgba(255, 181, 71, 0.18); border: 1px solid rgba(255, 181, 71, 0.6); position: relative; overflow: hidden; }
.hud-zasilanie .pasek i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--bursztyn), var(--neon)); transition: transform 1.6s var(--krzywa); }
.hud-zasilanie b { min-width: 3.2em; text-align: right; color: var(--bursztyn); font-weight: 700; }
.hud-zasilanie.pelne b { color: var(--neon); }

.hud-akcje { position: absolute; right: 1.4cqw; bottom: 2cqh; display: flex; align-items: flex-end; gap: 0.8cqw; }
.przycisk-hud {
  position: relative; display: grid; place-items: center; gap: 0.2cqh; min-width: 4.6cqw; height: 4.6cqw; padding: 0 0.6cqw;
  background: rgba(3, 26, 28, 0.85); border: 1px solid rgba(31, 209, 182, 0.55); cursor: pointer;
  font: 600 clamp(10px, 0.8cqw, 14px)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst);
  transition: transform var(--t1), box-shadow var(--t2), border-color var(--t2);
}
.przycisk-hud svg { width: 1.7cqw; height: 1.7cqw; }
.przycisk-hud kbd { font: 600 clamp(9px, 0.65cqw, 12px)/1 var(--font); color: var(--tekst-2); }
.przycisk-hud:hover, .przycisk-hud:focus-visible { border-color: var(--neon); box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.35); outline: none; }
.przycisk-hud:active { transform: scale(0.95); }
.przycisk-hud.skan { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; border-width: 2px; border-color: rgba(61, 255, 162, 0.8); }
.przycisk-hud.skan svg { width: 2.4cqw; height: 2.4cqw; color: var(--neon); }
.przycisk-hud.skan .licznik { position: absolute; top: -0.4cqw; right: -0.4cqw; padding: 0.25em 0.45em; font-size: clamp(9px, 0.7cqw, 12px); background: var(--cyan); color: #022; border-radius: 1em; }
.przycisk-hud.wolanie { animation: wolanie 1.2s ease-in-out infinite; }
@keyframes wolanie { 0%, 100% { box-shadow: 0 0 0.6cqw rgba(61, 255, 162, 0.4); } 50% { box-shadow: 0 0 2.6cqw rgba(61, 255, 162, 1); transform: scale(1.06); } }
.przycisk-hud[aria-pressed="true"] { border-color: var(--bursztyn); }

/* Przelot czipu do HUD */
.czip-lot {
  position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; display: grid; place-items: center;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: linear-gradient(135deg, #b5ffe0, #1fd18f); color: #032; font: 700 2.6cqw/1 var(--font);
  filter: drop-shadow(0 0 1.5cqw var(--neon)); z-index: 11; pointer-events: none;
}

/* --- Dialog / napisy -------------------------------------------------------------------------- */
#dialog {
  position: absolute; left: 1.6cqw; bottom: 2cqh; width: min(64cqw, calc(100% - 26cqw)); display: grid; grid-template-columns: auto 1fr; gap: 1.1cqw;
  padding: 1.1cqw 1.3cqw; background: var(--panel); border: 1px solid rgba(31, 209, 182, 0.55);
  box-shadow: 0 0 2cqw rgba(0, 0, 0, 0.5), inset 0 0 2cqw rgba(31, 209, 182, 0.08);
  animation: wejdz var(--t3) var(--krzywa);
}
#dialog[hidden] { display: none; }
@keyframes wejdz { from { opacity: 0; transform: translateY(1.5cqh); } to { opacity: 1; transform: none; } }
#dialog .portret { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; object-fit: cover; box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.45); }
#dialog .portret.mowi { animation: mowi 0.5s ease-in-out infinite alternate; }
@keyframes mowi { to { box-shadow: 0 0 2.2cqw rgba(61, 255, 162, 0.9); } }
#dialog .kto { font: 700 clamp(11px, 0.95cqw, 17px)/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon); margin-bottom: 0.5cqw; }
#dialog .kto .robocza { color: var(--bursztyn); font-weight: 600; letter-spacing: 0.04em; text-transform: none; margin-left: 0.6em; }
#dialog .tekst { font: 400 clamp(14px, 1.22cqw, 22px)/1.42 var(--font); color: var(--tekst); min-height: 2.8em; }
#dialog .stopka { display: flex; justify-content: flex-end; gap: 0.8cqw; margin-top: 0.6cqw; }
#dialog .fala { display: inline-flex; gap: 2px; align-items: center; height: 1em; margin-right: auto; opacity: 0; }
#dialog .fala.gra { opacity: 1; }
#dialog .fala i { width: 3px; height: 30%; background: var(--neon); animation: slupek 0.6s ease-in-out infinite alternate; }
#dialog .fala i:nth-child(2) { animation-delay: 0.15s; } #dialog .fala i:nth-child(3) { animation-delay: 0.3s; } #dialog .fala i:nth-child(4) { animation-delay: 0.45s; }
@keyframes slupek { to { height: 100%; } }
#dialog.bez-napisow .tekst { visibility: hidden; height: 0; min-height: 0; }

/* --- Przyciski (system ruchu) ----------------------------------------------------------------- */
.btn {
  --c: var(--neon);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 44px; padding: 0.75em 1.5em; cursor: pointer;
  font: 600 clamp(12px, 1.02cqw, 19px)/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst);
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  background-color: rgba(4, 34, 32, 0.92);
  background-image: linear-gradient(100deg, transparent 42%, rgba(160, 255, 220, 0.22) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 140% 0; background-repeat: no-repeat;
  animation: przebieg 6s ease-in-out infinite;
  transition: transform var(--t1) var(--krzywa), box-shadow var(--t2), border-color var(--t2), color var(--t2);
  outline: none;
}
.btn::before, .btn::after { content: ""; position: absolute; width: 0.7cqw; height: 0.7cqw; min-width: 8px; min-height: 8px; border: 2px solid var(--c); transition: all var(--t2) var(--krzywa); pointer-events: none; }
.btn::before { left: -4px; top: -4px; border-right: 0; border-bottom: 0; }
.btn::after { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
.btn:hover, .btn:focus-visible { border-color: var(--c); box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 1.2cqw color-mix(in srgb, var(--c) 18%, transparent); }
.btn:hover::before, .btn:focus-visible::before { left: -9px; top: -9px; }
.btn:hover::after, .btn:focus-visible::after { right: -9px; bottom: -9px; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { filter: grayscale(1) brightness(0.7); cursor: not-allowed; animation: none; }
.btn.drugi { --c: var(--cyan); background-color: rgba(3, 22, 30, 0.9); }
.btn.duzy { font-size: clamp(14px, 1.45cqw, 26px); padding: 0.85em 2.2em; }
.btn.blad { animation: drgnij 0.15s linear 4; --c: var(--blad); }
@keyframes przebieg { 0%, 78% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@keyframes drgnij { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pierscien-sukcesu { position: absolute; border: 2px solid var(--neon); border-radius: 50%; pointer-events: none; animation: pierscien 0.7s var(--krzywa) forwards; z-index: 20; }
@keyframes pierscien { from { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }

/* --- Nakładki --------------------------------------------------------------------------------- */
.nakladka { position: absolute; inset: 0; display: grid; place-items: center; }
.nakladka.przyciemnij { background: rgba(0, 6, 8, 0.6); backdrop-filter: blur(2px); animation: pojaw var(--t3) ease; }
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }

.ekran-startu { background: radial-gradient(80% 70% at 50% 40%, rgba(8, 60, 56, 0.55), rgba(0, 0, 0, 0.92)), url("../assets/tla/lobby-1280.webp") center / cover; text-align: center; }
/* Telefony: lżejsze tło ekranu startowego (65 KB zamiast 200 KB; szybszy pierwszy widok, LCP). */
@media (max-width: 900px) { .ekran-startu { background-image: radial-gradient(80% 70% at 50% 40%, rgba(8, 60, 56, 0.55), rgba(0, 0, 0, 0.92)), url("../assets/tla/lobby-720.webp"); } }
.ekran-startu .srodek { display: grid; justify-items: center; gap: 2.2cqh; }
.ekran-startu .logo { width: 50cqw; filter: drop-shadow(0 0 2cqw rgba(61, 255, 162, 0.35)); animation: logo 0.6s var(--krzywa); }
@keyframes logo { from { opacity: 0.15; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.ekran-startu p { margin: 0; color: var(--tekst-2); font-size: clamp(13px, 1.15cqw, 21px); letter-spacing: 0.06em; }
.ekran-startu .przyciski { display: flex; gap: 1.6cqw; flex-wrap: wrap; justify-content: center; }
.ekran-startu .uwaga { font-size: clamp(11px, 0.9cqw, 16px); color: var(--tekst-2); opacity: 0.8; }

/* Prywatność na ekranie startu (rozwijana, bez nakładki) i pytanie „Kto dziś gra?” przy nowej misji (statystyki projektu). */
.start-prywatnosc { position: absolute; left: 2cqw; bottom: 2cqh; max-width: 44cqw; text-align: left; color: var(--tekst-2); font-size: clamp(11px, 0.85cqw, 15px); }
.start-prywatnosc summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.start-prywatnosc summary:hover, .start-prywatnosc summary:focus-visible { opacity: 1; color: var(--tekst); outline: none; text-decoration: underline; text-underline-offset: 4px; }
.start-prywatnosc[open] { padding: 0.6cqw 1cqw; background: var(--panel-2); border: 1px solid rgba(56, 214, 255, 0.5); }
.ekran-startu .start-prywatnosc p { margin: 0.4em 0 0.2em; font-size: inherit; line-height: 1.45; letter-spacing: normal; }
/* Powrót na selekciaki.pl: ekran startu (lewy górny róg, jak „Prywatność” w dolnym) i HOLO-PAD → Ustawienia. */
.start-wyjscie { position: absolute; left: 2cqw; top: 2cqh; display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: var(--tekst-2); font-size: clamp(11px, 0.85cqw, 15px); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; opacity: 0.85; }
.start-wyjscie:hover, .start-wyjscie:focus-visible { opacity: 1; color: var(--tekst); outline: none; text-decoration: underline; text-underline-offset: 4px; }
@container (max-width: 640px) { .start-wyjscie span { display: none; } .start-wyjscie::after { content: "Wyjdź"; } } /* wąska scena: krótko, jak w lekcji 4–5 */
a.btn { text-decoration: none; }
.kto-gra {
  display: grid; justify-items: center; gap: 1.6cqh; width: min(66cqw, 92%); padding: 2.4cqw 2.6cqw;
  background: var(--panel-2); border: 1px solid rgba(56, 214, 255, 0.6); box-shadow: 0 0 3cqw rgba(56, 214, 255, 0.18), inset 0 0 2cqw rgba(56, 214, 255, 0.08);
  animation: pojaw var(--t3) ease;
}
.kto-gra h2 { margin: 0; font-size: clamp(18px, 2cqw, 34px); letter-spacing: 0.06em; }
.kto-odpowiedzi { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; margin: 0.6cqh 0 1cqh; }
.kto-odpowiedzi.klasa .btn { min-width: 8em; }
.kto-etykieta { color: var(--tekst-2); font-size: clamp(12px, 0.95cqw, 17px); letter-spacing: 0.06em; }
.kto-region { min-width: 18em; min-height: 40px; padding: 0.4em 0.8em; font: 500 clamp(13px, 1cqw, 18px)/1.2 var(--font); color: var(--tekst); background: rgba(3, 22, 30, 0.95); border: 1px solid rgba(56, 214, 255, 0.6); }
.kto-region option { color: var(--tekst); background: #04161c; }
.kto-region:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.kto-pomin { min-height: 40px; padding: 0.4em 1.2em; background: none; border: 0; cursor: pointer; color: var(--tekst-2); font: 500 clamp(12px, 0.95cqw, 17px)/1 var(--font); letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 4px; }
.kto-pomin:hover, .kto-pomin:focus-visible { color: var(--tekst); outline: none; }
.kto-pola { display: grid; grid-template-columns: auto minmax(16em, 26em); gap: 1.2cqh 1.2cqw; align-items: center; justify-content: center; text-align: left; }
.kto-szukaj { position: relative; }
.kto-gmina { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0.4em 0.8em; font: 500 clamp(13px, 1cqw, 18px)/1.2 var(--font); color: var(--tekst); background: rgba(3, 22, 30, 0.95); border: 1px solid rgba(56, 214, 255, 0.6); }
.kto-gmina:disabled { opacity: 0.55; }
.kto-gmina:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.kto-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; display: grid; max-height: 36cqh; overflow-y: auto; background: #04161c; border: 1px solid rgba(56, 214, 255, 0.6); border-top: 0; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.5); }
.kto-lista:empty { display: none; }
.kto-opcja { display: grid; gap: 0.15em; min-height: 40px; padding: 0.45em 0.8em; text-align: left; cursor: pointer; background: none; border: 0; border-bottom: 1px solid rgba(56, 214, 255, 0.15); color: var(--tekst); font: 500 clamp(13px, 1cqw, 18px)/1.2 var(--font); }
.kto-opcja span { color: var(--tekst-2); font-size: 0.85em; }
.kto-opcja:hover, .kto-opcja:focus-visible { background: rgba(61, 255, 162, 0.14); outline: none; }
.ekran-startu .kto-brak { margin: 0; padding: 0.6em 0.8em; font-size: clamp(12px, 0.95cqw, 17px); }
.ekran-startu .kto-wybrana { min-height: 1.4em; color: var(--neon); }

.film { background: #000; }
.film video { width: 100%; height: 100%; object-fit: contain; }
.film .pomin { position: absolute; right: 2cqw; bottom: 3cqh; }

.karta {
  position: absolute; right: 3cqw; top: 9cqh; width: 34cqw; padding: 1.8cqw; display: grid; gap: 1cqw;
  background: var(--panel-2); border: 1px solid rgba(56, 214, 255, 0.6); box-shadow: 0 0 3cqw rgba(56, 214, 255, 0.18), inset 0 0 2cqw rgba(56, 214, 255, 0.08);
  animation: karta 0.5s var(--krzywa);
}
@keyframes karta { from { opacity: 0; transform: translateX(3cqw) skewX(-4deg); filter: blur(4px); } to { opacity: 1; transform: none; } }
.karta .nad { font-size: clamp(10px, 0.8cqw, 14px); letter-spacing: 0.14em; color: var(--cyan); text-transform: uppercase; }
.karta h2 { margin: 0; font-size: clamp(16px, 1.6cqw, 28px); letter-spacing: 0.04em; }
.karta .duzy { font-size: clamp(30px, 4.4cqw, 78px); font-weight: 700; line-height: 1; color: var(--neon); text-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.6); }
.karta .podpis { color: var(--tekst-2); font-size: clamp(12px, 1.05cqw, 19px); margin-top: -0.4cqw; }
.karta .tresc { font-size: clamp(13px, 1.15cqw, 21px); line-height: 1.45; }
.karta .zrodlo { font-size: clamp(10px, 0.8cqw, 14px); color: var(--tekst-2); border-top: 1px solid rgba(56, 214, 255, 0.3); padding-top: 0.8cqw; }
.karta .robocza { color: var(--bursztyn); }
.karta .btn { justify-self: end; }

.toast {
  position: absolute; left: 50%; top: 10cqh; transform: translateX(-50%); padding: 0.8cqw 1.4cqw;
  background: var(--panel-2); border: 1px solid var(--neon); font-size: clamp(12px, 1.1cqw, 20px); letter-spacing: 0.04em;
  animation: toast 2.8s ease forwards; pointer-events: none;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -1cqh); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.wybor {
  display: grid; grid-template-columns: auto 1fr; gap: 2cqw; align-items: center; width: 58cqw; padding: 2.2cqw;
  background: var(--panel-2); border: 1px solid rgba(61, 255, 162, 0.6); animation: karta 0.5s var(--krzywa);
}
.wybor img { width: 14cqw; height: 14cqw; border-radius: 50%; }
.wybor h2 { margin: 0 0 0.8cqw; font-size: clamp(18px, 2cqw, 34px); }
.wybor p { margin: 0 0 1.6cqw; font-size: clamp(13px, 1.2cqw, 21px); line-height: 1.45; }
.wybor .przyciski { display: flex; gap: 1.2cqw; flex-wrap: wrap; }

.holopad {
  width: 74cqw; max-height: 82cqh; overflow: auto; padding: 1.8cqw 2cqw; background: var(--panel-2);
  border: 1px solid rgba(61, 255, 162, 0.6); box-shadow: 0 0 3cqw rgba(61, 255, 162, 0.15);
  animation: holopad 0.45s var(--krzywa);
}
@keyframes holopad { from { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(3cqh); } to { opacity: 1; transform: none; } }
.holopad header { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.4cqw; }
.holopad header h2 { margin: 0; font-size: clamp(16px, 1.6cqw, 28px); letter-spacing: 0.1em; color: var(--neon); margin-right: auto; }
.holopad .zakladki { display: flex; gap: 0.6cqw; }
.holopad .zakladki button { background: none; border: 1px solid transparent; padding: 0.5em 0.9em; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(11px, 0.9cqw, 16px); color: var(--tekst-2); }
.holopad .zakladki button[aria-selected="true"] { color: var(--tekst); border-color: rgba(61, 255, 162, 0.6); }
.mapa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.sektor-kafel {
  display: grid; grid-template-columns: auto 1fr; gap: 1cqw; align-items: center; padding: 1.1cqw; text-align: left;
  border: 1px solid rgba(31, 209, 182, 0.35); background: rgba(3, 22, 26, 0.8); font-size: clamp(12px, 1cqw, 18px);
}
.sektor-kafel img { width: 4cqw; height: 4cqw; object-fit: contain; }
.sektor-kafel .nr { font-size: 0.75em; letter-spacing: 0.12em; color: var(--tekst-2); }
.sektor-kafel .st { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; }
.sektor-kafel.dostepny { border-color: var(--neon); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.3); }
.sektor-kafel.dostepny .st span { color: var(--neon); }
.sektor-kafel.zablokowany { opacity: 0.55; filter: grayscale(0.6); }
.sektor-kafel.ukonczony .st span { color: var(--cyan); }
/* Teleport z mapy (odwiedzone sale) */
.sektor-kafel .st { gap: 0.6cqw; flex-wrap: wrap; }
.sektor-kafel.tutaj { border-color: var(--bursztyn); }
.btn.teleport { min-height: 36px; padding: 0.35em 0.9em; font-size: clamp(11px, 0.95cqw, 17px); text-transform: none; letter-spacing: 0.02em; }
.tu-jestes { color: var(--bursztyn) !important; font-weight: 700; text-transform: none; }
.mapa-teleport { display: flex; flex-wrap: wrap; align-items: center; gap: 1cqw; margin-top: 1.6cqh; padding-top: 1.2cqh; border-top: 1px solid rgba(56, 214, 255, 0.3); color: var(--tekst-2); }
.siatka-buta.teleport .teleport-pierscien { width: 14cqw; aspect-ratio: 1; border-radius: 50%; border: 0.5cqw solid var(--cyan); box-shadow: 0 0 4cqw var(--cyan), inset 0 0 3cqw rgba(61, 255, 162, 0.7); animation: teleport-pierscien 1.1s ease-in forwards; }
@keyframes teleport-pierscien { 0% { transform: scale(0.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(6); opacity: 0; border-width: 0.1cqw; } }
.archiwum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1cqw; }
.archiwum .wpis { padding: 1cqw; border: 1px solid rgba(56, 214, 255, 0.35); font-size: clamp(12px, 1cqw, 18px); line-height: 1.4; }
.archiwum .wpis b { display: block; color: var(--cyan); margin-bottom: 0.3em; }
.archiwum .puste { color: var(--tekst-2); }
.ustawienia { display: grid; gap: 1cqw; font-size: clamp(13px, 1.1cqw, 19px); }
.ustawienia label { display: flex; gap: 0.8em; align-items: center; cursor: pointer; }
.ustawienia input { width: 1.2em; height: 1.2em; accent-color: var(--neon); }
.ustawienia-wyjscie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1.2em; margin-top: 0.4cqw; padding-top: 1.2cqw; border-top: 1px solid rgba(56, 214, 255, 0.25); color: var(--tekst-2); font-size: clamp(11px, 0.9cqw, 16px); }

/* Przejście przez śluzę */
.przejscie { background: #000; overflow: hidden; }
.przejscie .drzwi { position: absolute; inset: 0; transform-origin: 50% 46%; }
.przejscie .drzwi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.przejscie .skrzydlo { position: absolute; inset: 0; }
.przejscie .skrzydlo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.przejscie .cel { position: absolute; inset: 0; transform-origin: 50.8% 49.6%; transform: scale(0.78); }
.przejscie .cel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.przejscie .cel.niskie img { filter: brightness(0.8) saturate(0.68) sepia(0.12); }
.przejscie .blysk { background: radial-gradient(circle at 50% 46%, #fff 0%, #dffff3 40%, #9fffe0 100%); }

/* --- Sala S1: wiązka, hologram, ekran danych --------------------------------------------------- */
.wiazka {
  position: absolute; left: 40%; top: 15%; width: 20%; height: 55%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(120, 240, 255, 0.55), rgba(80, 220, 255, 0.12) 70%, rgba(80, 220, 255, 0));
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); mix-blend-mode: screen; transition: opacity 0.5s ease;
}
.wiazka.aktywna { opacity: 1; animation: wiazka 1.2s ease-in-out infinite alternate; }
@keyframes wiazka { to { filter: brightness(1.35); } }
.hologram { position: absolute; left: 50%; top: 40%; width: 15cqw; height: 15cqw; transform: translate(-50%, -50%); pointer-events: none; perspective: 600px; }
.hologram img {
  width: 100%; height: 100%; object-fit: contain; animation: obrot 6s linear infinite, wznies 0.8s var(--krzywa);
  filter: drop-shadow(0 0 1cqw rgba(80, 230, 255, 0.9)) sepia(1) hue-rotate(140deg) saturate(2.2) brightness(1.15); opacity: 0.92;
}
.hologram::after {
  content: ""; position: absolute; inset: -5%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(150, 255, 255, 0.16) 0 2px, transparent 2px 6px);
  mask: radial-gradient(closest-side, #000 60%, transparent); animation: linie 1.4s linear infinite;
}
.hologram .linia-skanu { position: absolute; left: -10%; right: -10%; height: 3px; background: #b9fbff; box-shadow: 0 0 1cqw #7ff; animation: skanuj 1.6s ease-in-out 2; opacity: 0.9; }
@keyframes obrot { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes wznies { from { transform: translateY(8cqh) scale(0.4); opacity: 0; } }
@keyframes linie { to { background-position: 0 12px; } }
@keyframes skanuj { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.ekran-danych {
  position: absolute; left: 19.6%; top: 11.6%; width: 20.2%; height: 31%; padding: 1.2cqw 1.4cqw; display: grid; align-content: center; gap: 0.5cqw;
  background: rgba(2, 24, 30, 0.94); border: 1px solid rgba(56, 214, 255, 0.7); box-shadow: inset 0 0 2cqw rgba(56, 214, 255, 0.15);
  pointer-events: none; animation: ekran 0.6s steps(6, end);
}
@keyframes ekran { from { clip-path: inset(48% 0 48% 0); opacity: 0.3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.ekran-danych .nazwa { font-size: clamp(10px, 0.85cqw, 15px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.ekran-danych .duzy { font-size: clamp(22px, 3cqw, 54px); font-weight: 700; line-height: 1; color: var(--neon); text-shadow: 0 0 1cqw rgba(61, 255, 162, 0.6); }
.ekran-danych .podpis { font-size: clamp(11px, 0.95cqw, 17px); color: var(--tekst); line-height: 1.3; }
.ekran-danych .zrodlo { font-size: clamp(9px, 0.7cqw, 13px); color: var(--tekst-2); }
.licznik-skanu {
  position: absolute; right: 19.4%; top: 11.6%; width: 20.6%; padding: 0.8cqw 1cqw; text-align: center; pointer-events: none;
  background: rgba(2, 24, 30, 0.9); border: 1px solid rgba(61, 255, 162, 0.55); font-size: clamp(11px, 1cqw, 18px); letter-spacing: 0.1em; text-transform: uppercase;
}
.licznik-skanu b { color: var(--neon); font-size: 1.4em; }

/* --- Lobby: postacie w tubach, hologram Wiktora ------------------------------------------------ */
.postac-tuba img { filter: drop-shadow(0 0 0.8cqw rgba(110, 220, 255, 0.55)) saturate(0.9); opacity: 0.93; }
.postac-tuba.podswietl img { filter: drop-shadow(0 0 1.6cqw rgba(61, 255, 162, 0.95)) brightness(1.1); }
.postac-tuba.odeszla { opacity: 0; transform: scale(1.04); filter: blur(4px); }
.wiktor-holo { opacity: 0; }
.wiktor-holo.widoczny { opacity: 1; animation: holo-wejscie 0.9s steps(8, end); }
.wiktor-holo img { mix-blend-mode: screen; filter: drop-shadow(0 0 1.4cqw rgba(80, 200, 255, 0.85)); animation: migotanie 5s infinite; }
.wiktor-holo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(120, 220, 255, 0.14) 0 2px, transparent 2px 5px); animation: linie 1.2s linear infinite;
  mask: linear-gradient(#000 70%, transparent);
}
.wiktor-holo.mowi img { animation: migotanie 5s infinite, mowa 0.35s ease-in-out infinite alternate; }
@keyframes holo-wejscie { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes migotanie { 0%, 92%, 96%, 100% { opacity: 0.94; } 94% { opacity: 0.55; } }
@keyframes mowa { to { filter: drop-shadow(0 0 2.4cqw rgba(120, 230, 255, 1)) brightness(1.12); } }

/* --- Korytarz Rethink (Sektor 1B): billboardy, reklamy na wizjerze, panel ocen ------------------ */
#scena.dialog-nad #dialog { z-index: 11; }
.billboard {
  container-type: size; position: absolute; overflow: hidden; pointer-events: none;
  background: rgba(24, 2, 26, 0.62); border: 2px solid rgba(255, 70, 190, 0.85);
  box-shadow: 0 0 2.4cqw rgba(255, 60, 180, 0.55), inset 0 0 3cqw rgba(255, 60, 180, 0.25);
  animation: bb-migotanie 4.2s infinite;
}
.billboard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(255, 140, 230, 0.12) 0 2px, transparent 2px 5px); animation: linie 1.2s linear infinite;
}
.billboard > div { position: absolute; left: 0; right: 0; }
.bb-gora { top: 0; height: 9%; display: grid; place-items: center; font: 600 5cqw/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #ff8ad8; background: rgba(255, 60, 180, 0.18); }
.bb-obraz { top: 9%; height: 53%; }
.bb-obraz img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-haslo { top: 62%; height: 21%; display: grid; place-items: center; padding: 0 4%; text-align: center; font: 700 7.6cqw/1.05 var(--font); text-transform: uppercase; color: #ffd24a; text-shadow: 0 0 2cqw rgba(255, 190, 40, 0.9); }
.bb-pasek { top: 84%; height: 16%; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 600 5.6cqw/1 var(--font); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; background: linear-gradient(90deg, #ff2d6f, #ff5bb0); }
.bb-pasek b { color: #fff36b; }
.billboard > .bb-badge { left: auto; right: 2%; top: 11%; width: 42%; padding: 3% 2%; text-align: center; font: 700 5.6cqw/1.05 var(--font); text-transform: uppercase; color: #fff; background: #ff2d55; transform: rotate(7deg); box-shadow: 0 0 2cqw rgba(255, 45, 85, 0.9); animation: bb-badge 0.9s ease-in-out infinite alternate; }
.bb-badge b { color: #fff36b; font-size: 1.3em; }
@keyframes bb-badge { to { transform: rotate(7deg) scale(1.07); } }
@keyframes bb-migotanie { 0%, 88%, 92%, 100% { opacity: 1; } 90% { opacity: 0.6; } }
.billboard > .bb-stempel { top: 30%; left: 6%; right: 6%; padding: 3% 2%; text-align: center; font: 700 7cqw/1.1 var(--font); text-transform: uppercase; border: 0.6cqw solid currentColor; opacity: 0; transform: rotate(-8deg) scale(1.4); transition: opacity 0.4s ease, transform 0.4s var(--krzywa); }
.billboard.oceniony > .bb-stempel { opacity: 1; transform: rotate(-8deg) scale(1); background: rgba(0, 0, 0, 0.55); }
.billboard.impuls > .bb-stempel { color: #ffb547; }
.billboard.potrzeba > .bb-stempel { color: #3dffa2; }
.billboard.oceniony .bb-obraz { filter: saturate(0.35) brightness(0.8); }
/* Zgaszony billboard: obraz i hasło zwijają się jak w starym kineskopie, naklejki zostają jako „dowody”. */
.billboard.zgaszony { animation: none; border-color: rgba(120, 140, 150, 0.45); box-shadow: none; background: rgba(4, 10, 12, 0.82); }
.billboard.zgaszony::after { display: none; }
.billboard.zgaszony .bb-obraz, .billboard.zgaszony .bb-haslo, .billboard.zgaszony .bb-gora { opacity: 0; }
.billboard.gasnie .bb-obraz, .billboard.gasnie .bb-haslo { animation: kineskop 0.6s ease-in forwards; opacity: 1; }
@keyframes kineskop { 0% { transform: scale(1); filter: brightness(1); opacity: 1; } 60% { transform: scale(1, 0.02); filter: brightness(3); opacity: 1; } 100% { transform: scale(0, 0.02); opacity: 0; } }
.billboard.zgaszony .bb-pasek, .billboard.zgaszony .bb-badge { filter: saturate(0.4) brightness(0.75); animation: none; }
.billboard.zgaszony > .bb-stempel { top: 38%; }
.blokada-drzwi {
  container-type: size; position: absolute; display: grid; place-items: center; align-content: center; gap: 4%; pointer-events: none;
  background: rgba(30, 12, 0, 0.78); border: 2px solid var(--bursztyn); box-shadow: 0 0 1.6cqw rgba(255, 181, 71, 0.6); text-transform: uppercase; color: var(--bursztyn);
  animation: bb-migotanie 2.4s infinite;
}
.blokada-drzwi b { font: 700 10.5cqw/1 var(--font); letter-spacing: 0.06em; }
.blokada-drzwi span { font: 600 7cqw/1 var(--font); color: var(--tekst); }

/* Reklamy na wizjerze */
.nakladka.wizjer { display: block; background: radial-gradient(70% 70% at 50% 45%, transparent 55%, rgba(255, 30, 140, 0.22)); overflow: hidden; }
.wizjer .zaklocenia {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(255, 80, 200, 0.07) 0 3px, transparent 3px 7px); animation: zaklocenia 0.35s steps(3, end) 3, linie 1s linear infinite;
}
@keyframes zaklocenia { 0% { transform: translateX(-1.5cqw); opacity: 1; } 50% { transform: translateX(1cqw); } 100% { transform: none; } }
.okno-reklamy {
  position: absolute; width: 21cqw; display: grid; background: rgba(28, 4, 30, 0.94); border: 2px solid #ff4fbf;
  box-shadow: 0 0 2.4cqw rgba(255, 60, 180, 0.6), 0 1.4cqw 3cqw rgba(0, 0, 0, 0.6); transition: filter 0.9s ease, opacity 0.9s ease, border-color 0.9s ease;
}
.okno-reklamy.o1 { left: 5cqw; top: 9cqh; rotate: -3deg; }
.okno-reklamy.o2 { left: 39.5cqw; top: 5cqh; rotate: 1.5deg; }
.okno-reklamy.o3 { right: 5cqw; top: 11cqh; rotate: 3deg; }
.or-pasek { display: flex; justify-content: space-between; padding: 0.45cqw 0.8cqw; font: 600 clamp(9px, 0.8cqw, 14px)/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9fe0; background: rgba(255, 60, 180, 0.22); }
.okno-reklamy img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.or-haslo { padding: 0.7cqw 0.8cqw 0.3cqw; text-align: center; font: 700 clamp(13px, 1.35cqw, 24px)/1.1 var(--font); text-transform: uppercase; color: #ffd24a; text-shadow: 0 0 1cqw rgba(255, 190, 40, 0.8); }
.or-kup {
  margin: 0.5cqw 0.9cqw 0.9cqw; min-height: 40px; padding: 0.6em; cursor: pointer; border: 0; font: 700 clamp(12px, 1.15cqw, 20px)/1 var(--font); text-transform: uppercase; letter-spacing: 0.06em;
  color: #2a0018; background: linear-gradient(90deg, #ffd24a, #ff7a3d); box-shadow: 0 0 1.4cqw rgba(255, 160, 60, 0.8); animation: or-kup 0.8s ease-in-out infinite alternate;
}
.or-kup.blad { animation: drgnij 0.15s linear 4; }
@keyframes or-kup { to { box-shadow: 0 0 2.6cqw rgba(255, 160, 60, 1); filter: brightness(1.15); } }
.filtr-rethink {
  position: absolute; left: 50%; bottom: 23cqh; width: 30cqw; translate: -50% 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 1cqw;
  animation: filtr-wolanie 1.3s ease-in-out infinite; outline: none;
}
.filtr-rethink img { width: 100%; display: block; filter: drop-shadow(0 0 1.2cqw rgba(60, 240, 255, 0.7)); }
.filtr-rethink kbd { position: absolute; right: -0.6cqw; top: -0.6cqw; padding: 0.3em 0.55em; font: 700 clamp(11px, 1cqw, 18px)/1 var(--font); color: #022; background: var(--cyan); border-radius: 0.4em; }
.filtr-rethink:hover img, .filtr-rethink:focus-visible img { filter: drop-shadow(0 0 2.4cqw rgba(60, 240, 255, 1)) brightness(1.12); }
.filtr-rethink:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
@keyframes filtr-wolanie { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
.wizjer.filtr-aktywny::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5cqh; background: #9ff; box-shadow: 0 0 3cqw 1cqw rgba(80, 240, 255, 0.8); animation: filtr-linia 0.9s ease-in forwards;
}
@keyframes filtr-linia { to { top: 100%; } }
.wizjer.filtr-aktywny .okno-reklamy { filter: grayscale(1) brightness(0.55) blur(1px); opacity: 0; border-color: var(--cyan); transition-delay: 0.3s; }
.wizjer.filtr-aktywny .filtr-rethink { animation: none; opacity: 0; transition: opacity 0.6s ease 0.3s; }

/* Panel: holo-skaner impulsów marketingowych */
.rethink .rt-panel { width: 90cqw; max-height: 96cqh; display: grid; justify-items: center; gap: 1.4cqh; animation: holopad 0.45s var(--krzywa); }
.rt-baner { width: 30cqw; filter: drop-shadow(0 0 1.4cqw rgba(60, 240, 255, 0.4)); }
.rt-instrukcja { margin: 0; max-width: 70cqw; text-align: center; font: 400 clamp(12px, 1.12cqw, 20px)/1.4 var(--font); color: var(--tekst); }
.rt-karty { display: grid; grid-template-columns: repeat(3, 24cqw); gap: 2.2cqw; transition: opacity 0.45s ease, transform 0.45s ease; }
.rt-karty.zamyka { opacity: 0; transform: scale(0.96); }
.rt-karta {
  display: grid; justify-items: center; align-content: start; gap: 1cqh; padding: 2.4cqw 2cqw 1.8cqw; min-height: 56cqh;
  background: url("../assets/korytarz/panel.webp") center / 100% 100% no-repeat; transition: filter 0.4s ease;
}
.rt-obraz { position: relative; width: 62%; aspect-ratio: 1; }
.rt-obraz > img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid rgba(120, 240, 255, 0.5); }
.rt-tekst { margin: 0; min-height: 4.2em; text-align: center; font: 400 clamp(11px, 1.02cqw, 19px)/1.38 var(--font); color: var(--tekst); }
.rt-odpowiedzi { display: flex; gap: 0.8cqw; }
.rt-odp { width: 9.4cqw; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0.6cqw; outline: none; transition: transform var(--t1) var(--krzywa), filter var(--t2); }
.rt-odp img { width: 100%; display: block; }
.rt-odp:hover, .rt-odp:focus-visible { transform: translateY(-2px) scale(1.04); filter: brightness(1.2) drop-shadow(0 0 0.8cqw rgba(120, 240, 255, 0.8)); }
.rt-odp:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.rt-odp.blad { animation: drgnij 0.15s linear 4; filter: drop-shadow(0 0 0.8cqw rgba(255, 120, 60, 0.9)); }
.rt-odp[disabled] { cursor: default; filter: grayscale(0.85) brightness(0.55); transform: none; }
.rt-odp.wybrany[disabled] { filter: drop-shadow(0 0 1cqw rgba(61, 255, 162, 0.9)); }
.rt-status { min-height: 1.4em; text-align: center; font: 400 clamp(11px, 0.95cqw, 17px)/1.35 var(--font); color: var(--tekst-2); }
.rt-status .ok { color: var(--neon); }
.rt-status .zle { color: var(--blad); }
.rt-stempel {
  position: absolute; left: 4%; right: 4%; top: 36%; padding: 0.4cqw; text-align: center; font: 700 clamp(11px, 1.1cqw, 20px)/1.1 var(--font); text-transform: uppercase;
  border: 3px solid currentColor; background: rgba(0, 0, 0, 0.7); opacity: 0; transform: rotate(-8deg) scale(1.5); pointer-events: none;
}
.rt-stempel.impuls { color: var(--bursztyn); }
.rt-stempel.potrzeba { color: var(--neon); }
.rt-karta.rozwiazana .rt-stempel { opacity: 1; transform: rotate(-8deg) scale(1); transition: opacity 0.35s ease, transform 0.35s var(--krzywa); }
.rt-karta.rozwiazana .rt-obraz > img { filter: saturate(0.4) brightness(0.75); }
.rt-wyjasnienie {
  position: absolute; inset: -3% -14%; padding: 0.9cqw; display: grid; align-content: center; gap: 0.5cqw; overflow: auto;
  background: rgba(30, 14, 4, 0.95); border: 1px solid var(--blad); font: 400 clamp(11px, 0.92cqw, 16px)/1.38 var(--font); color: var(--tekst);
  animation: karta 0.35s var(--krzywa);
}
.rt-wyjasnienie b { color: var(--blad); text-transform: uppercase; letter-spacing: 0.06em; }
.rt-finale { display: grid; justify-items: center; gap: 2cqh; padding: 4cqh 3cqw; animation: karta 0.5s var(--krzywa); }
.rt-gratulacje { margin: 0; font: 700 clamp(20px, 2.8cqw, 50px)/1.15 var(--font); color: var(--neon); text-align: center; text-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.6); }
.rt-pytanie { margin: 0; font: 600 clamp(13px, 1.3cqw, 23px)/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }

/* Odkrycie F-E: prawda czy mit? */
.prawda-mit .twierdzenie { font-size: clamp(14px, 1.3cqw, 23px); line-height: 1.4; }
.prawda-mit .twierdzenie span { display: block; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.4em; }
.wybor-pm { display: flex; gap: 1.2cqw; }
.wybor-pm .btn { flex: 1; font-size: clamp(13px, 1.25cqw, 22px); }
.wybor-pm .btn[disabled] { filter: grayscale(1) brightness(0.6); }
.wybor-pm .btn.poprawny[disabled] { filter: none; --c: var(--neon); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.5); }
.werdykt { display: grid; gap: 0.7cqw; animation: karta 0.4s var(--krzywa); }
.werdykt .ocena { font-size: clamp(12px, 1.05cqw, 19px); letter-spacing: 0.06em; }
.werdykt .ocena.dobrze { color: var(--neon); }
.werdykt .ocena.inaczej { color: var(--bursztyn); }
.werdykt .pytanie { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); font-size: clamp(12px, 1.05cqw, 19px); }

/* --- Sektor 2: sala (sloty tablicy, holo-stół, plakaty), terminal drabiny, terminal warsztatu 3D --- */
.slot-tablicy { position: absolute; display: grid; place-items: center; pointer-events: none; }
.slot-tablicy img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 0 0.6cqw rgba(61, 255, 162, 0.9)); animation: slot-wejscie 0.6s var(--krzywa); }
@keyframes slot-wejscie { from { transform: scale(1.8); opacity: 0; } }
.stol-warsztat { container-type: size; position: absolute; pointer-events: none; }
.stol-warsztat > div { position: absolute; left: 0; right: 0; }
.sw-napis { top: 0; height: 18%; display: grid; place-items: center; align-content: center; text-align: center; font: 700 7cqw/1.1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 2cqw rgba(56, 214, 255, 0.8); background: rgba(2, 24, 30, 0.72); border: 1px solid rgba(56, 214, 255, 0.6); }
.sw-napis small { font-size: 0.62em; color: var(--tekst-2); letter-spacing: 0.1em; }
.sw-but { top: 26%; height: 42%; display: grid; place-items: center; opacity: 0; transition: opacity 0.8s ease; }
.sw-but img { height: 100%; object-fit: contain; filter: drop-shadow(0 0 3cqw rgba(80, 230, 255, 0.9)) sepia(0.4) hue-rotate(140deg) saturate(1.6); animation: sw-unos 3s ease-in-out infinite; }
@keyframes sw-unos { 50% { transform: translateY(-5%); } }
.stol-warsztat.z-butem .sw-but { opacity: 1; }
.stol-warsztat.gotowy .sw-but { opacity: 1; }
.stol-warsztat.gotowy .sw-but img { filter: drop-shadow(0 0 3cqw rgba(61, 255, 162, 0.9)); animation: none; }
.sw-pierscien { top: 66%; height: 12%; left: 8% !important; right: 8% !important; border: 0.8cqw solid rgba(56, 214, 255, 0.85); border-radius: 50%; box-shadow: 0 0 4cqw rgba(56, 214, 255, 0.7), inset 0 0 3cqw rgba(56, 214, 255, 0.5); opacity: 0.55; }
.stol-warsztat.z-butem .sw-pierscien { opacity: 1; animation: sw-puls 1.4s ease-in-out infinite; }
@keyframes sw-puls { 50% { box-shadow: 0 0 8cqw rgba(56, 214, 255, 1), inset 0 0 4cqw rgba(56, 214, 255, 0.8); } }
.sw-blat { top: 74%; height: 26%; background: linear-gradient(180deg, rgba(90, 110, 120, 0.9), rgba(20, 30, 36, 0.95)); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); border-top: 0.6cqw solid rgba(56, 214, 255, 0.8); }
.plakat-s2 { container-type: size; position: absolute; display: grid; place-items: center; align-content: center; gap: 4%; padding: 6%; pointer-events: none; text-align: center;
  background: rgba(3, 26, 22, 0.78); border: 2px solid rgba(61, 255, 162, 0.75); box-shadow: 0 0 2cqw rgba(61, 255, 162, 0.45); }
.plakat-s2::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(120, 255, 200, 0.08) 0 2px, transparent 2px 5px); }
.pl-duzy { font: 700 17cqw/1.05 var(--font); color: var(--neon); text-shadow: 0 0 2cqw rgba(61, 255, 162, 0.8); }
.pl-tytul { font: 600 10cqw/1.15 var(--font); text-transform: uppercase; color: var(--tekst); }

/* Terminal: Drabina GOZ (makieta użytkownika „Zadanie-drabina-GOZ-podglad”) */
.dr-okno {
  position: relative; width: 94cqw; height: 92cqh; display: grid; grid-template-columns: 37cqw 1fr; grid-template-rows: auto 1fr auto; gap: 1.2cqh 2.2cqw;
  padding: 6.5cqh 4.8cqw 5.5cqh; background: url("../assets/s2/okno.webp") center / 100% 100% no-repeat, rgba(2, 18, 22, 0.94); animation: holopad 0.45s var(--krzywa);
}
.dr-okno header { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.4cqw; padding: 0 4cqw 0 0.4cqw; }
.dr-okno h2 { margin: 0; font: 700 clamp(17px, 2cqw, 38px)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst); text-shadow: 0 0 1.4cqw rgba(56, 214, 255, 0.6); }
.dr-okno header p { margin: 0; font: 600 clamp(11px, 1cqw, 18px)/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.dr-zamknij { position: absolute; right: 3.4cqw; top: 4.6cqh; width: 2.8cqw; height: 2.8cqw; min-width: 36px; min-height: 36px; border: 1px solid rgba(56, 214, 255, 0.6); background: rgba(2, 24, 30, 0.9); color: var(--tekst); font-size: clamp(14px, 1.3cqw, 24px); cursor: pointer; }
.dr-zamknij:hover, .dr-zamknij:focus-visible { border-color: var(--cyan); box-shadow: 0 0 1cqw rgba(56, 214, 255, 0.6); outline: none; }
.dr-karty h3 { margin: 0 0 0.8cqh; font: 600 clamp(12px, 1.1cqw, 20px)/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-2); }
.dr-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9cqh 0.9cqw; }
.dr-karta {
  display: grid; justify-items: center; align-content: center; gap: 0.4cqh; padding: 0.6cqh 0.6cqw; min-height: 11.4cqh; cursor: grab; touch-action: none;
  background: rgba(3, 30, 36, 0.92); border: 2px solid rgba(56, 214, 255, 0.55); border-radius: 0.6cqw; color: var(--tekst);
  font: 400 clamp(10px, 0.84cqw, 16px)/1.22 var(--font); text-align: center; transition: transform var(--t1), border-color var(--t2), box-shadow var(--t2), opacity var(--t2);
}
.dr-karta img { height: 5.8cqh; max-width: 90%; object-fit: contain; pointer-events: none; }
.dr-karta:hover, .dr-karta:focus-visible { border-color: var(--cyan); box-shadow: 0 0 1.2cqw rgba(56, 214, 255, 0.55); outline: none; }
.dr-karta.wybrana { border-color: var(--neon); box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.8); transform: translateY(-3px); }
.dr-karta.ulozona { opacity: 0.32; cursor: default; filter: grayscale(0.6); }
.dr-poziomy { display: grid; grid-template-rows: repeat(8, 1fr); gap: 0.7cqh; align-content: stretch; }
.dr-poziom {
  position: relative; padding: 0; border: 0; cursor: pointer; background: center / 100% 100% no-repeat; border-radius: 0.8cqw;
  filter: drop-shadow(0 0 0.5cqw rgba(56, 214, 255, 0.35)); transition: filter var(--t2), transform var(--t1);
}
.dr-poziom:hover, .dr-poziom:focus-visible, .dr-poziom.nad { filter: drop-shadow(0 0 1.2cqw rgba(61, 255, 162, 0.95)) brightness(1.15); outline: none; transform: scale(1.012); }
.dr-poziom.blad { animation: drgnij 0.15s linear 4; filter: drop-shadow(0 0 1.2cqw rgba(255, 120, 60, 1)); }
.dr-poziom.blysk-ok { filter: drop-shadow(0 0 2cqw rgba(61, 255, 162, 1)) brightness(1.3); }
.dr-slot { position: absolute; left: 64.5%; width: 31%; top: 16%; height: 68%; display: flex; align-items: center; justify-content: center; gap: 0.6cqw; }
.dr-slot img { height: 100%; object-fit: contain; filter: drop-shadow(0 0 0.5cqw rgba(255, 255, 255, 0.6)); animation: slot-wejscie 0.5s var(--krzywa); }
.dr-slot b { color: var(--neon); font-size: clamp(14px, 1.4cqw, 26px); text-shadow: 0 0 1cqw rgba(61, 255, 162, 0.9); }
.dr-okno footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4cqw; min-height: 6cqh; padding: 0.8cqh 1.2cqw; background: rgba(2, 20, 24, 0.85); border: 1px solid rgba(56, 214, 255, 0.4); }
.dr-status { margin: 0; flex: 1; font: 400 clamp(12px, 1.05cqw, 19px)/1.4 var(--font); color: var(--tekst); }
.dr-status .ok { color: var(--neon); }
.dr-status .zle { color: var(--blad); }
.dr-stopka { display: flex; gap: 1cqw; }
.dr-duch { position: absolute; left: 0; top: 0; height: 9cqh; pointer-events: none; z-index: 5; filter: drop-shadow(0 0 1.2cqw rgba(61, 255, 162, 0.9)); }
.dr-lot { position: absolute; pointer-events: none; z-index: 5; filter: drop-shadow(0 0 1.4cqw rgba(80, 230, 255, 1)); }

/* Terminal: Warsztat Custom Studio 3D (koncepcja użytkownika „warsztat-wspolny-panel-koncepcja”) */
.ws-okno {
  position: relative; width: 96cqw; height: 94cqh; display: grid; grid-template-columns: 19cqw 1fr 17cqw; grid-template-rows: auto 1fr auto; gap: 1.2cqh 1.4cqw;
  padding: 2cqh 1.8cqw; background: radial-gradient(60% 60% at 50% 45%, rgba(10, 60, 60, 0.6), rgba(2, 14, 18, 0.97)); border: 1px solid rgba(56, 214, 255, 0.5); animation: holopad 0.45s var(--krzywa);
}
.ws-okno header { grid-column: 1 / -1; display: flex; align-items: center; gap: 3cqw; padding-right: 4cqw; }
.ws-okno h2 { margin: 0; font: 700 clamp(16px, 1.9cqw, 34px)/1 var(--font); letter-spacing: 0.05em; color: var(--tekst); }
.ws-kroki { display: flex; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; font: 600 clamp(12px, 1.1cqw, 20px)/1 var(--font); color: var(--tekst-2); }
.ws-kroki li { display: flex; align-items: center; gap: 0.6cqw; }
.ws-kroki i { font-style: normal; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; min-width: 26px; min-height: 26px; border: 2px solid rgba(61, 255, 162, 0.6); border-radius: 50%; }
.ws-kroki li.zrobiony { color: var(--neon); }
.ws-kroki li.zrobiony::after { content: "✓"; }
.ws-kroki li.aktywny, .ws-kroki li:first-child:not(.zrobiony) { color: var(--tekst); }
.ws-kroki li.aktywny i, .ws-kroki li:first-child:not(.zrobiony) i { border-color: var(--neon); box-shadow: 0 0 1cqw rgba(61, 255, 162, 0.7); }
.ws-okno h3 { margin: 0 0 0.8cqh; font: 600 clamp(12px, 1.15cqw, 20px)/1 var(--font); color: var(--tekst); }
.ws-lewa, .ws-prawa { display: flex; flex-direction: column; gap: 0.9cqh; padding: 1.4cqh 1cqw; background: rgba(2, 22, 26, 0.85); border: 1px solid rgba(56, 214, 255, 0.45); border-radius: 0.6cqw; overflow: auto; }
.ws-narzedzie, .ws-akcja, .ws-czesc {
  display: flex; align-items: center; gap: 0.8cqw; min-height: 44px; padding: 0.6cqh 0.8cqw; cursor: pointer; text-align: left;
  background: rgba(4, 34, 38, 0.9); border: 1px solid rgba(56, 214, 255, 0.4); border-radius: 0.5cqw; color: var(--tekst); font: 400 clamp(11px, 1cqw, 18px)/1.2 var(--font);
}
.ws-narzedzie img { width: 4.6cqw; height: auto; }
.ws-narzedzie span { flex: 1; }
.ws-narzedzie .ws-ok { opacity: 0; color: var(--neon); font-size: 1.3em; }
.ws-narzedzie.zrobione .ws-ok { opacity: 1; }
.ws-narzedzie[aria-pressed="true"], .ws-akcja[aria-pressed="true"], .ws-czesc[aria-pressed="true"] { border-color: var(--neon); box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.55); }
.ws-narzedzie:hover, .ws-akcja:hover, .ws-czesc:hover, .ws-narzedzie:focus-visible, .ws-akcja:focus-visible, .ws-czesc:focus-visible { border-color: var(--cyan); outline: none; }
.ws-narzedzie:disabled { cursor: default; }
.ws-narzedzie:disabled:not(.zrobione) { opacity: 0.5; }
.ws-czysc:not(:disabled) { border-color: var(--neon); background: rgba(10, 60, 44, 0.9); }
.ws-akcja:disabled { opacity: 0.45; cursor: default; }
.ws-scena { position: relative; display: grid; }
.ws-canvas { position: absolute; inset: 0 0 13cqh; width: 100%; height: calc(100% - 13cqh); outline: none; touch-action: none; }
.ws-canvas[data-tryb="tool"] { cursor: crosshair; }
.ws-czesci { display: grid; gap: 0.8cqh; }
.ws-platforma { position: absolute; left: 14%; right: 14%; bottom: 17cqh; height: 12cqh; border: 0.4cqw solid rgba(56, 214, 255, 0.75); border-radius: 50%; box-shadow: 0 0 3cqw rgba(56, 214, 255, 0.6), inset 0 0 2cqw rgba(56, 214, 255, 0.4); }
.ws-ladowanie { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tekst-2); font-size: clamp(13px, 1.2cqw, 22px); }
.ws-widok { position: absolute; left: 50%; bottom: 7.4cqh; translate: -50% 0; display: flex; gap: 0.8cqw; }
.ws-widok button { width: 3cqw; height: 3cqw; min-width: 38px; min-height: 38px; border: 1px solid rgba(56, 214, 255, 0.5); background: rgba(2, 24, 30, 0.9); color: var(--tekst); font-size: clamp(14px, 1.4cqw, 24px); cursor: pointer; border-radius: 0.4cqw; }
.ws-status { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; min-height: 3cqh; text-align: center; font: 400 clamp(12px, 1.05cqw, 19px)/1.35 var(--font); color: var(--tekst); }
.ws-personalizacja { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 1.6cqw; align-items: start; padding: 1.2cqh 1.2cqw; background: rgba(2, 22, 26, 0.85); border: 1px solid rgba(56, 214, 255, 0.45); border-radius: 0.6cqw; transition: opacity var(--t3); }
.ws-personalizacja[inert], .ws-czesci[inert] { opacity: 0.35; }
.ws-kolory { display: grid; grid-template-columns: repeat(6, 2.6cqw); gap: 0.6cqw; }
.ws-kolor { width: 2.6cqw; height: 2.6cqw; min-width: 28px; min-height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: var(--k); cursor: pointer; }
.ws-kolor[aria-pressed="true"] { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(61, 255, 162, 0.5), 0 0 1.2cqw rgba(61, 255, 162, 0.9); }
.ws-wzory { display: flex; flex-wrap: wrap; gap: 0.5cqw; }
.ws-wzor { display: grid; justify-items: center; gap: 0.2cqh; min-width: 5.2cqw; min-height: 44px; padding: 0.5cqh 0.4cqw; cursor: pointer; background: rgba(4, 34, 38, 0.9); border: 1px solid rgba(56, 214, 255, 0.4); border-radius: 0.4cqw; color: var(--tekst); font: 400 clamp(10px, 0.82cqw, 15px)/1.1 var(--font); }
.ws-wzor span { font-size: 1.5em; }
.ws-wzor[aria-pressed="true"] { border-color: var(--neon); box-shadow: 0 0 1cqw rgba(61, 255, 162, 0.55); }
.ws-opcje-wzoru h4 { margin: 1cqh 0 0.5cqh; font: 600 clamp(11px, 1cqw, 18px)/1 var(--font); color: var(--tekst-2); }
.ws-kolory.wzoru { grid-template-columns: repeat(12, 2.1cqw); gap: 0.4cqw; }
.ws-kolory.wzoru .ws-kolor { width: 2.1cqw; height: 2.1cqw; min-width: 24px; min-height: 24px; }
.ws-wielkosc { display: flex; align-items: center; gap: 0.8cqw; margin-top: 0.8cqh; font-size: clamp(11px, 0.95cqw, 17px); color: var(--tekst-2); }
.ws-wielkosc input { accent-color: var(--neon); width: 12cqw; }
.ws-final { display: grid; gap: 1cqh; align-self: center; }
.ws-final .btn { font-size: clamp(13px, 1.25cqw, 22px); padding: 1em 1.6em; }

/* --- Przejście S2 → S3: but jako holograficzna siatka ------------------------------------------- */
.siatka-buta { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2cqh; background: rgba(0, 10, 14, 0.55); animation: pojaw 0.3s ease; }
.siatka-buta img { width: 26cqw; filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(130deg) saturate(3) drop-shadow(0 0 2cqw rgba(80, 240, 255, 0.9));
  mask: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 7px), repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px); mask-composite: add;
  animation: siatka-rozpad 1.7s ease-in forwards; }
.siatka-buta p { margin: 0; font: 600 clamp(14px, 1.4cqw, 26px)/1 var(--font); letter-spacing: 0.08em; color: var(--cyan); text-shadow: 0 0 1cqw rgba(56, 214, 255, 0.8); }
@keyframes siatka-rozpad { 0% { transform: scale(1) rotateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(0.4) rotateY(540deg) translateY(-20cqh); opacity: 0; filter: blur(4px); } }

/* --- Sektor 3: holo-panele odkryć w sali -------------------------------------------------------- */
.holo-s3 { container-type: size; position: absolute; display: grid; place-items: center; align-content: center; gap: 4%; padding: 6%; pointer-events: none; text-align: center;
  background: rgba(3, 22, 26, 0.8); border: 2px solid rgba(56, 214, 255, 0.75); box-shadow: 0 0 2cqw rgba(56, 214, 255, 0.45); }
.holo-s3::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(120, 220, 255, 0.08) 0 2px, transparent 2px 5px); }
.holo-s3 .h-tytul { font: 700 11cqw/1.1 var(--font); text-transform: uppercase; color: var(--cyan); }
.holo-s3 .h-duzy { font: 700 20cqw/1 var(--font); color: var(--neon); text-shadow: 0 0 2cqw rgba(61, 255, 162, 0.8); }
.holo-s3 .h-podpis { font: 600 9cqw/1.15 var(--font); color: var(--tekst); }
.holo-s3.automat .h-otwor { width: 50%; height: 26%; border-radius: 50%; border: 0.8cqw solid rgba(61, 255, 162, 0.8); box-shadow: inset 0 0 4cqw rgba(0, 0, 0, 0.9), 0 0 3cqw rgba(61, 255, 162, 0.6); }
.holo-s3.automat .h-duzy { font-size: 15cqw; }
.holo-s3 .h-symbole { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; font: 700 12cqw/1 var(--font); color: var(--tekst); }
.holo-s3 .h-symbole span:last-child { color: #6fe36f; }
.holo-s3.ekran80 .h-duzy { font-size: 40cqw; }

/* --- Terminal „Projekt: Eko-Napój Przyszłości” (makiety użytkownika) ---------------------------- */
.eko-okno { position: relative; width: 96cqw; height: 94cqh; display: grid; grid-template-rows: 1fr; padding: 10.5cqh 3cqw 4cqh;
  background: url("../assets/s3/plansza.webp") center / 100% 100% no-repeat, #021216; animation: holopad 0.45s var(--krzywa); color: var(--tekst); }
.eko-okno header { position: absolute; left: 0; right: 0; top: 0; height: 9.2%; }
.eko-okno header > .eko-lisc { position: absolute; left: 3%; top: 50%; translate: 0 -50%; }
.eko-okno header > h2 { position: absolute; left: 6.4%; top: 50%; translate: 0 -50%; white-space: nowrap; }
.eko-okno h2 { margin: 0; font: 700 clamp(16px, 2.1cqw, 38px)/1 var(--font); }
.eko-okno h2 em { font-style: normal; color: #3ff0a6; }
.eko-lisc { width: 2.6cqw; height: 2.6cqw; background: radial-gradient(circle at 30% 30%, #9dffcf, #1fc27a 60%, #0a6b42); clip-path: path("M0 30 C5 5 25 0 34 0 C34 15 28 32 4 34 Z"); clip-path: polygon(0 100%, 10% 40%, 45% 10%, 100% 0, 85% 50%, 50% 85%); }
.eko-lisc.maly { width: 3cqw; height: 3cqw; flex: none; }
.eko-kroki { position: absolute; left: 61%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.eko-kroki li { position: relative; display: flex; align-items: center; }
.eko-kroki li + li::before { content: ""; width: 3.6cqw; height: 2px; margin: 0 0.7cqw; background: rgba(160, 230, 220, 0.6); }
.eko-kroki i { font-style: normal; display: grid; place-items: center; width: 2.1cqw; height: 2.1cqw; min-width: 22px; min-height: 22px; border: 2px solid rgba(200, 240, 240, 0.7); border-radius: 50%; font: 700 clamp(12px, 1.1cqw, 20px)/1 var(--font); }
.eko-kroki li.aktywny i { border-color: #3ff0a6; box-shadow: 0 0 1.2cqw rgba(63, 240, 166, 0.8); }
.eko-kroki b { display: none; position: absolute; right: -0.55cqw; top: -0.35cqw; color: #032; background: #3ff0a6; border-radius: 50%; width: 1.1cqw; height: 1.1cqw; min-width: 13px; min-height: 13px; place-items: center; font-size: clamp(8px, 0.7cqw, 13px); }
.eko-kroki li.zrobiony b { display: grid; }
.terminal-eko .dr-zamknij { position: absolute; right: 3.4%; top: 50%; translate: 0 -50%; margin: 0; }
.eko-tresc { position: relative; min-height: 0; display: grid; }
.eko-btn { min-height: 44px; padding: 0.7em 2em; cursor: pointer; border: 2px solid #4dffb0; border-radius: 0.5cqw; color: #fff; font: 700 clamp(14px, 1.45cqw, 26px)/1 var(--font);
  background: linear-gradient(180deg, #1c9a63, #0d6a43); box-shadow: 0 0 1.4cqw rgba(77, 255, 176, 0.5), inset 0 0 1cqw rgba(160, 255, 210, 0.3); transition: filter var(--t2), transform var(--t1); }
.eko-btn:hover, .eko-btn:focus-visible { filter: brightness(1.18); outline: 3px solid rgba(160, 255, 220, 0.8); outline-offset: 3px; }
.eko-btn:active { transform: scale(0.97); }
.eko-btn.drugi { background: rgba(2, 24, 30, 0.9); border-color: rgba(56, 214, 255, 0.7); box-shadow: none; }
.eko-btn.duzy { font-size: clamp(16px, 1.9cqw, 34px); }
/* Ekran startowy */
.eko-start { display: grid; grid-template-columns: 22cqw 1fr 22cqw; grid-template-rows: 1fr auto; gap: 1.5cqh 2cqw; padding: 2cqh 5cqw 0; }
.eko-kolumna { display: grid; gap: 2.4cqh; align-content: center; }
.eko-kat { position: relative; display: grid; justify-items: center; gap: 0.6cqh; padding: 1.4cqh 1cqw; border: 2px solid rgba(56, 214, 255, 0.7); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.8); }
.eko-kat i { position: absolute; left: 0.8cqw; top: 0.8cqh; font-style: normal; display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border: 2px solid #3ff0a6; border-radius: 50%; font: 700 clamp(12px, 1.1cqw, 20px)/1 var(--font); }
.eko-kat img { height: 13cqh; max-width: 90%; object-fit: contain; }
.eko-kat span { font: 600 clamp(12px, 1.25cqw, 22px)/1.1 var(--font); }
.eko-podest { position: relative; isolation: isolate; display: flex; min-width: 22cqw; align-items: flex-end; justify-content: center; gap: 2cqw; padding-bottom: 4cqh; }
.eko-podest::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 9cqh; z-index: -1; background: url("../assets/s3/podest.webp") center / 100% 100% no-repeat; }
.eko-podest img { position: relative; height: 40cqh; object-fit: contain; filter: drop-shadow(0 0 1.4cqw rgba(80, 255, 180, 0.35)); }
.eko-podest.dwie img { height: 44cqh; }
.eko-podest.pomaranczowy::after { filter: hue-rotate(-120deg) saturate(1.6); }
.eko-podest.pomaranczowy img { filter: drop-shadow(0 0 1.6cqw rgba(255, 120, 40, 0.9)); }
.eko-powitanie { grid-column: 1 / -1; justify-self: center; display: grid; justify-items: center; gap: 1cqh; padding: 1.6cqh 3cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.85); }
.eko-h { margin: 0; font: 700 clamp(16px, 1.9cqw, 34px)/1.15 var(--font); text-align: center; }
.eko-p { margin: 0; font: 400 clamp(13px, 1.4cqw, 25px)/1.2 var(--font); color: #8fc3ff; }
.eko-przyciski { display: flex; gap: 2cqw; margin-top: 0.6cqh; }
/* Krok: dwa warianty */
.eko-krok { display: grid; grid-template-rows: auto 1fr auto; gap: 1.6cqh; padding: 1cqh 12cqw 0; }
.eko-tytul { justify-self: center; display: grid; justify-items: center; padding: 0.8cqh 4cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.85); }
.eko-tytul p { margin: 0; font: 700 clamp(18px, 2.4cqw, 42px)/1.1 var(--font); }
.eko-tytul em, .eko-krok-naglowek em { font-style: normal; color: #3ff0a6; }
.eko-tytul small { font-size: clamp(12px, 1.2cqw, 22px); color: var(--tekst-2); }
.eko-warianty { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; min-height: 0; }
.eko-wariant { display: grid; grid-template-rows: auto auto auto 1fr auto; justify-items: center; gap: 0.4cqh; padding: 0 1.6cqw 1.8cqh; border: 2px solid rgba(56, 214, 255, 0.75); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.75); min-height: 0; }
.eko-wtag { padding: 0.5cqh 3cqw; font: 700 clamp(11px, 1.05cqw, 19px)/1 var(--font); letter-spacing: 0.06em; background: linear-gradient(180deg, #1b8e5c, #0e5d3c); clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }
.eko-wn { margin: 0.6cqh 0 0; font: 700 clamp(13px, 1.45cqw, 26px)/1.15 var(--font); text-align: center; }
.eko-wo { margin: 0; font-size: clamp(11px, 1.15cqw, 20px); color: var(--tekst-2); text-align: center; }
.eko-wobraz { position: relative; width: 100%; min-height: 0; display: grid; place-items: center; /* przedmiot zawsze na środku, nad przyciskiem wariantu */ padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 0.8cqw; transition: background-color var(--t2); }
.eko-wobraz:hover, .eko-wobraz:focus-visible { background: rgba(63, 240, 166, 0.08); outline: 2px solid rgba(63, 240, 166, 0.7); outline-offset: -2px; }
.eko-wobraz:hover img, .eko-wobraz:focus-visible img { transform: scale(1.04); filter: drop-shadow(0 0 1.8cqw rgba(80, 255, 180, 0.6)); }
.eko-wobraz img { transition: transform var(--t2) var(--krzywa), filter var(--t2); }
.eko-wobraz img { max-height: 32cqh; max-width: 52%; object-fit: contain; filter: drop-shadow(0 0 1.2cqw rgba(80, 220, 255, 0.4)); }
.eko-wik { position: absolute; right: 4%; top: 4%; display: grid; pointer-events: none; place-items: center; width: 6.6cqw; height: 6.6cqw; border: 2px solid rgba(56, 214, 255, 0.75); border-radius: 50%; color: #c9f6ff; background: rgba(2, 24, 30, 0.6); box-shadow: 0 0 1.2cqw rgba(56, 214, 255, 0.35); }
.eko-wik svg { width: 70%; height: 70%; }
.eko-info { justify-self: center; display: flex; align-items: center; gap: 1.2cqw; margin: 0; padding: 0.8cqh 2.4cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.85); font-size: clamp(11px, 1.1cqw, 20px); }
.eko-info i { font-style: normal; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border: 2px solid #3ff0a6; border-radius: 50%; font-weight: 700; }
/* Wynik A (błąd) / B (dobrze) */
.eko-wynik { display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; gap: 1cqh; padding: 2.4cqh 8cqw 0; min-height: 0; }
.eko-krok-naglowek { justify-self: start; margin: 0; font: 700 clamp(17px, 2.2cqw, 38px)/1 var(--font); }
.eko-scena { position: relative; display: flex; align-items: center; justify-content: center; gap: 3cqw; min-height: 0; }
.eko-scena .eko-podest img { height: 30cqh; }
.eko-ostrz { font-size: clamp(40px, 6cqw, 110px); color: #ff7a3d; text-shadow: 0 0 2cqw rgba(255, 110, 40, 0.9); }
.eko-ok { display: flex; align-items: center; gap: 1cqw; font: 700 clamp(18px, 2.4cqw, 42px)/1 var(--font); }
.eko-ok b { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border: 3px solid #3ff0a6; border-radius: 50%; color: #3ff0a6; box-shadow: 0 0 1.6cqw rgba(63, 240, 166, 0.8); }
.eko-etykieta { margin: 0; padding: 0.6cqh 2.4cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.6cqw; background: rgba(2, 20, 24, 0.85); font-size: clamp(12px, 1.3cqw, 23px); }
.eko-wynik.zle .eko-etykieta { border-color: rgba(255, 140, 70, 0.8); }
.eko-wynik.zle .eko-etykieta b { color: #ffb070; }
.eko-wynik.dobrze .eko-etykieta b { color: #3ff0a6; }
.eko-ramka { display: flex; align-items: center; gap: 2cqw; width: 100%; padding: 1.4cqh 2cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.9); }
.eko-ramka p { margin: 0.2cqh 0; font: 400 clamp(12px, 1.15cqw, 21px)/1.38 var(--font); }
.eko-ramka h3 { margin: 0 0 0.4cqh; font: 700 clamp(18px, 2.2cqw, 40px)/1 var(--font); color: #ff8a4d; }
.eko-wynik.zle .eko-ramka { border-color: rgba(255, 120, 60, 0.9); box-shadow: 0 0 1.6cqw rgba(255, 110, 40, 0.4); }
.eko-wykrzyk { flex: none; display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; border: 0.4cqw solid #ff7a3d; border-radius: 50%; font: 700 clamp(28px, 4cqw, 70px)/1 var(--font); color: #ff7a3d; }
/* Zadanie ukończone */
.eko-koniec { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 2cqh 3cqw; padding: 1cqh 3cqw 0; }
.eko-koniec .eko-podest.duzy { grid-row: 1 / 3; align-items: flex-end; }
.eko-koniec .eko-podest img.b { height: 42cqh; }
.eko-koniec .eko-podest img.s { height: 28cqh; }
.eko-ukonczone { align-self: start; display: grid; justify-items: center; padding: 1.6cqh 2cqw; border: 2px solid rgba(56, 214, 255, 0.7); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.85); }
.eko-ukonczone .eko-h { font-size: clamp(22px, 3.4cqw, 60px); }
.eko-ukonczone .eko-h span { color: #fff; }
.eko-ukonczone .eko-h { color: #3ff0a6; }
.eko-ukonczone p:last-child { margin: 0.4cqh 0 0; font-size: clamp(13px, 1.4cqw, 25px); }
.eko-koniec-przyciski { align-self: start; justify-self: center; display: grid; gap: 1.4cqh; justify-items: center; }
.eko-dymek { grid-column: 1 / 2; grid-row: 3; margin-right: -14cqw; padding: 1.6cqh 2cqw; border: 2px solid rgba(56, 214, 255, 0.7); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.9); font: 400 clamp(12px, 1.2cqw, 22px)/1.4 var(--font); }
.eko-wiktor { grid-column: 2; grid-row: 2 / 4; justify-self: end; align-self: end; width: 16cqw; }

/* --- Sektor 4: sala (worek, telemetria), terminale Selekcja i Symulator Bioreaktora --------------- */
.s4-worek { position: absolute; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0.6cqw 0.8cqw rgba(0, 0, 0, 0.6)); }
.h-duzy.s4 { font-size: 26cqw; color: var(--neon); }
.bio-tele { display: grid; gap: 0.5cqh; }
.bio-tele.sala { container-type: size; position: absolute; padding: 5%; align-content: center; background: rgba(3, 22, 26, 0.82); border: 2px solid rgba(56, 214, 255, 0.75); box-shadow: 0 0 2cqw rgba(56, 214, 255, 0.45); pointer-events: none; }
.bio-tele.sala .bt-wiersz { font-size: 8cqw; }
.bt-wiersz { display: flex; align-items: baseline; gap: 0.6em; justify-content: space-between; padding: 0.25em 0.5em; border-bottom: 1px solid rgba(56, 214, 255, 0.25); color: var(--tekst-2); font: 600 clamp(11px, 1cqw, 18px)/1.15 var(--font); }
.bt-wiersz b { color: var(--tekst); font-size: 1.25em; }
.bt-wiersz small { color: var(--bursztyn); font-size: 0.8em; }
.bio-tele.dobre .bt-wiersz b { color: var(--neon); text-shadow: 0 0 1cqw rgba(61, 255, 162, 0.7); }
.bio-tele.dobre .bt-wiersz small { color: var(--neon); }
.bio-tele.pasek { display: flex; gap: 1cqw; }
.bio-tele.pasek .bt-wiersz { border: 1px solid rgba(56, 214, 255, 0.35); border-radius: 0.4cqw; background: rgba(2, 20, 24, 0.85); }
.eko-kroki.trzy li + li::before { width: 5cqw; }
.terminal-bio .eko-okno h2 em { color: #9be15d; }
/* Selekcja */
.bio-selekcja { display: grid; grid-template-columns: 17cqw 1fr 17cqw; grid-template-rows: auto 1fr auto; gap: 1.4cqh 2cqw; padding: 0 3cqw; min-height: 0; }
.bio-tytul { grid-column: 1 / -1; justify-self: center; display: grid; justify-items: center; padding: 0.7cqh 3cqw; border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.8cqw; background: rgba(2, 20, 24, 0.85); }
.bio-tytul p { margin: 0; font: 700 clamp(16px, 2cqw, 36px)/1.1 var(--font); }
.bio-tytul em { font-style: normal; color: #3ff0a6; }
.bio-tytul small { font-size: clamp(11px, 1.1cqw, 20px); color: var(--tekst-2); }
.bio-pojemnik { position: relative; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 0.6cqh; padding: 1cqh 0.6cqw; cursor: pointer; color: var(--tekst);
  background: rgba(2, 20, 24, 0.8); border: 2px solid rgba(56, 214, 255, 0.55); border-radius: 0.8cqw; transition: border-color var(--t2), box-shadow var(--t2), transform var(--t1); min-height: 0; }
.bio-pojemnik.bio { border-color: rgba(160, 110, 60, 0.85); }
.bio-pojemnik.zmieszane { border-color: rgba(170, 170, 170, 0.6); }
.bio-pojemnik img { max-height: 30cqh; max-width: 100%; object-fit: contain; }
.bio-pojemnik > span { font: 700 clamp(13px, 1.4cqw, 24px)/1 var(--font); }
.bio-pojemnik:hover, .bio-pojemnik:focus-visible, .bio-pojemnik.nad { border-color: var(--neon); box-shadow: 0 0 2cqw rgba(61, 255, 162, 0.6); outline: none; transform: scale(1.02); }
.bio-pojemnik.blysk-ok { box-shadow: 0 0 3cqw rgba(61, 255, 162, 1); }
.bio-pojemnik.blad { animation: drgnij 0.15s linear 4; border-color: var(--blad); }
.bio-zawartosc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3cqw; min-height: 3.4cqw; margin: 0; padding: 0; list-style: none; }
.bio-zawartosc img { width: 3.2cqw; height: 3.2cqw; object-fit: contain; }
.bio-worek { position: relative; min-height: 0; }
.bio-worek-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.9; transform: scaleY(0.92); }
.bio-odpad { position: absolute; width: 22%; display: grid; justify-items: center; gap: 0.3cqh; padding: 0.4cqh 0.3cqw; cursor: grab; touch-action: none; border: 2px solid transparent; border-radius: 0.6cqw;
  background: rgba(2, 16, 18, 0.35); color: var(--tekst); rotate: var(--rot); transition: border-color var(--t2), box-shadow var(--t2), scale var(--t1); }
.bio-odpad img { height: 11cqh; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.7)); pointer-events: none; }
.bio-odpad span { font: 600 clamp(10px, 0.9cqw, 16px)/1.1 var(--font); text-align: center; text-shadow: 0 1px 3px #000; }
.bio-odpad:hover, .bio-odpad:focus-visible { border-color: var(--cyan); scale: 1.06; outline: none; }
.bio-odpad.wybrany { border-color: var(--neon); box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.8); scale: 1.08; }
.bio-dol { grid-column: 1 / -1; display: grid; gap: 0.8cqh; }
.bio-status { margin: 0; text-align: center; font: 400 clamp(12px, 1.12cqw, 20px)/1.35 var(--font); }
.bio-status .ok { color: var(--neon); }
.bio-status .zle { color: var(--blad); }
.bio-uwaga { display: flex; gap: 1.4cqw; align-items: center; padding: 1cqh 1.6cqw; border: 2px solid rgba(255, 90, 90, 0.85); border-radius: 0.8cqw; background: rgba(40, 6, 8, 0.92); box-shadow: 0 0 1.6cqw rgba(255, 70, 70, 0.35); }
.bio-uwaga > span { flex: none; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border: 0.35cqw solid #ff5a5a; border-radius: 50%; color: #ff5a5a; font: 700 clamp(20px, 2.6cqw, 46px)/1 var(--font); }
.bio-uwaga h3 { margin: 0 0 0.3cqh; color: #ff6b6b; font: 700 clamp(16px, 1.8cqw, 32px)/1 var(--font); }
.bio-uwaga p { margin: 0; font: 400 clamp(11px, 1.05cqw, 19px)/1.35 var(--font); }
.bio-stopka { display: flex; justify-content: center; gap: 1.6cqw; }
/* Symulator */
.bio-symulator { display: grid; grid-template-columns: 22cqw 1fr 28cqw; grid-template-rows: auto 1fr auto; gap: 1.4cqh 2cqw; padding: 0 3cqw; min-height: 0; }
.bio-lewa, .bio-prawa { display: flex; flex-direction: column; gap: 1cqh; padding: 1.2cqh 1cqw; background: rgba(2, 20, 24, 0.85); border: 1px solid rgba(56, 214, 255, 0.45); border-radius: 0.8cqw; min-height: 0; overflow: auto; }
.bio-lewa h3, .bio-prawa h3 { margin: 0; font: 600 clamp(12px, 1.2cqw, 21px)/1 var(--font); }
.bio-tele.duzy .bt-wiersz { font-size: clamp(13px, 1.35cqw, 24px); padding: 0.6em 0.5em; }
.bio-cylinder { position: relative; justify-self: center; height: 100%; aspect-ratio: 0.62; min-height: 0; }
.bio-cylinder .bio-reaktor { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.bio-warstwy { position: absolute; left: 13%; right: 13%; bottom: 17%; height: 63%; display: flex; flex-direction: column-reverse; }
.bw { position: relative; height: 33.3%; animation: bw-wsyp 0.6s var(--krzywa); }
.bw-tlo { position: absolute; inset: 0; display: flex; overflow: hidden; }
.bw-tlo img { flex: 1; min-width: 0; height: 100%; object-fit: cover; }
.bw span { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; padding: 0.2em 0.6em; border-radius: 0.3em; background: rgba(0, 0, 0, 0.6); white-space: nowrap; font: 700 clamp(10px, 0.95cqw, 17px)/1 var(--font); }
.bw.wymieszana .bw-tlo { filter: saturate(0.75) brightness(0.8); }
@keyframes bw-wsyp { from { transform: translateY(-120%); opacity: 0; } }
.bio-cylinder.nad { filter: drop-shadow(0 0 2cqw rgba(61, 255, 162, 0.9)); }
.bio-cylinder.mieszanie .bio-warstwy { animation: mieszaj 0.35s ease-in-out 4; }
@keyframes mieszaj { 0%, 100% { transform: none; } 25% { transform: translateX(-3%) rotate(-2deg); } 75% { transform: translateX(3%) rotate(2deg); } }
.bio-karta { display: grid; gap: 0.4cqh; text-align: left; padding: 1cqh 1cqw; cursor: pointer; color: var(--tekst); background: rgba(4, 34, 38, 0.92); border: 2px solid rgba(56, 214, 255, 0.5); border-radius: 0.7cqw;
  font: 400 clamp(10px, 0.92cqw, 16px)/1.3 var(--font); transition: border-color var(--t2), box-shadow var(--t2); }
.bio-karta b { font-size: 1.12em; }
.bio-karta small { color: var(--cyan); }
.bk-obrazy { display: flex; gap: 0.4cqw; }
.bk-obrazy img { height: 6cqh; max-width: 30%; object-fit: contain; }
.bio-karta:hover, .bio-karta:focus-visible { border-color: var(--neon); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.5); outline: none; }
.bio-karta.blad { animation: drgnij 0.15s linear 4; border-color: var(--blad); }
.bio-karta[disabled] { opacity: 0.35; cursor: default; }
.bio-slimak { position: absolute; left: 47%; width: 6%; bottom: 17%; height: 66%; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; --obrot: 0deg; }
.bio-slimak i { position: absolute; inset: 0; border-radius: 0.4cqw;
  background: repeating-linear-gradient(calc(25deg + var(--obrot) * 0.05), rgba(200, 220, 225, 0.95) 0 0.5cqw, rgba(90, 110, 120, 0.95) 0.5cqw 1.1cqw), linear-gradient(90deg, #556, #cde 50%, #556);
  box-shadow: 0 0 1cqw rgba(56, 214, 255, 0.6); }
.bio-cylinder.mieszanie .bio-slimak, .bio-mieszadlo-aktywne .bio-slimak { opacity: 1; }
.bio-cylinder.mieszanie .bio-slimak i { animation: slimak 0.35s linear infinite; }
@keyframes slimak { to { background-position: 0 2.2cqw, 0 0; } }
.bio-slimak b { position: absolute; bottom: 0; left: calc(-250% + var(--d) * 60%); width: 0.8cqw; height: 0.8cqw; border-radius: 50%; border: 1px solid rgba(200, 245, 255, 0.9); background: rgba(160, 230, 255, 0.25); opacity: 0; }
.bio-cylinder.mieszanie .bio-slimak b { animation: babelek 1.1s ease-in calc(var(--d) * 0.11s) infinite; }
@keyframes babelek { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-48cqh); opacity: 0; } }
.bio-mieszadlo-pole { display: grid; justify-items: center; gap: 1cqh; padding: 1cqh 0; }
.bio-mieszadlo-pole small { color: var(--tekst-2); text-align: center; line-height: 1.35; }
.bio-pokretlo { position: relative; width: 13cqw; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; outline: none; }
.bio-pokretlo:focus-visible { box-shadow: 0 0 0 3px var(--cyan); }
.bio-pokretlo.chwycone { cursor: grabbing; }
.bp-postep { position: absolute; inset: 0; border-radius: 50%; --p: 0; background: conic-gradient(var(--neon) calc(var(--p) * 360deg), rgba(56, 214, 255, 0.18) 0); mask: radial-gradient(closest-side, transparent 80%, #000 82%); }
.bp-tarcza { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8f1f4, #8a9aa2 45%, #3c474d 100%); box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.6), inset 0 0 1cqw rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(56, 214, 255, 0.6); }
.bp-tarcza::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(0, 0, 0, 0.25) 0 4deg, transparent 4deg 15deg); mask: radial-gradient(closest-side, transparent 86%, #000 88%); }
.bp-uchwyt { position: absolute; left: 50%; top: 10%; width: 22%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fffd0, #1fc27a 60%, #0a6b42); box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.8); }
.bio-widly-pole { display: grid; justify-items: center; gap: 0.6cqh; padding: 1cqh 0; }
.bio-widly { width: 80%; cursor: grab; touch-action: none; filter: drop-shadow(0 0 1cqw rgba(61, 255, 162, 0.5)); position: relative; z-index: 3; }
.bio-widly.chwycone { cursor: grabbing; rotate: -20deg; }
.bio-widly-pole small { color: var(--tekst-2); text-align: center; }
.bio-ok { margin: 0; color: var(--neon); font: 700 clamp(14px, 1.5cqw, 26px)/1.2 var(--font); }
.bio-koniec .bio-cylinder.maly { grid-row: 1 / 3; height: 52cqh; align-self: start; }
.siatka-buta.kostka .kostka-danych { width: 12cqw; height: 12cqw; border: 3px solid var(--cyan); background: repeating-linear-gradient(0deg, rgba(56, 214, 255, 0.35) 0 2px, transparent 2px 8px), rgba(10, 60, 70, 0.6);
  box-shadow: 0 0 4cqw rgba(56, 214, 255, 0.9); animation: kostka 1.7s ease-in forwards; }
@keyframes kostka { 0% { transform: scale(0.4) rotate(0); opacity: 0; } 30% { transform: scale(1) rotate(45deg); opacity: 1; } 100% { transform: scale(0.2) rotate(360deg) translateX(60cqw); opacity: 0; } }

/* --- Sektor 5: stanowisko sortowni (zadanie na grafice, bez okna terminala) i Olejomat --------------- */
.stanowisko-s5 { display: block; overflow: clip; background: #02090b; animation: pojaw var(--t3) ease; }
.s5-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.s5-tlo.rozmyte { filter: blur(6px) brightness(0.42) saturate(0.8); transform: scale(1.06); }
.s5-pasek { position: absolute; z-index: 4; left: 1.6cqw; right: 1.6cqw; top: 1.6cqh; height: 7.4cqh; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.2cqw;
  background: rgba(2, 20, 24, 0.86); border: 1px solid rgba(56, 214, 255, 0.55); border-radius: 0.6cqw; box-shadow: 0 0 1.6cqw rgba(56, 214, 255, 0.25); }
.s5-pasek h2 { margin: 0; font: 700 clamp(15px, 1.8cqw, 32px)/1 var(--font); white-space: nowrap; }
.s5-pasek h2 em { font-style: normal; color: #3ff0a6; }
.s5-licznik { margin-left: auto; padding: 0.4em 0.9em; border: 1px solid rgba(61, 255, 162, 0.6); border-radius: 0.4cqw; font: 700 clamp(12px, 1.2cqw, 21px)/1 var(--font); color: var(--neon); }
.s5-pasek .dr-zamknij { position: static; margin-left: auto; }
.s5-licznik + .dr-zamknij { margin-left: 0; }
/* Pojemniki = przezroczyste przyciski na grafice */
.s5-poj { position: absolute; z-index: 2; padding: 0; cursor: pointer; background: transparent; border: 3px solid transparent; border-radius: 0.8cqw; color: var(--tekst);
  transition: border-color var(--t2), box-shadow var(--t2), background-color var(--t2); }
.s5-poj:hover, .s5-poj:focus-visible, .s5-poj.nad { outline: none; border-color: var(--neon); background-color: rgba(61, 255, 162, 0.12); box-shadow: 0 0 2.4cqw rgba(61, 255, 162, 0.7), inset 0 0 1.6cqw rgba(61, 255, 162, 0.4); }
.s5-poj.podpowiedz { border-color: var(--bursztyn); animation: s5-pulsuj 1s ease-in-out infinite; }
@keyframes s5-pulsuj { 50% { box-shadow: 0 0 2.6cqw rgba(255, 181, 71, 0.9); } }
.s5-poj.blysk-ok { border-color: var(--neon); box-shadow: 0 0 4cqw rgba(61, 255, 162, 1); background-color: rgba(61, 255, 162, 0.25); }
.s5-poj.blad { animation: drgnij 0.15s linear 4; border-color: var(--blad); }
.s5-poj-nazwa { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; width: max-content; max-width: 104%; padding: 0.45em 0.7em; text-align: center;
  background: rgba(2, 18, 22, 0.88); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0.4cqw; font: 700 clamp(11px, 1.12cqw, 20px)/1.1 var(--font); text-shadow: 0 1px 2px #000; }
.s5-poj.pszok .s5-poj-nazwa { border-color: #ff6b5a; color: #ffd2cc; }
.s5-zawartosc { position: absolute; left: 4%; right: 4%; top: 6%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3cqw; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.s5-zawartosc img { width: 3.6cqw; height: 3.6cqw; object-fit: contain; filter: drop-shadow(0 0.2cqw 0.4cqw #000); animation: s5-wpadnij 0.5s var(--krzywa); }
@keyframes s5-wpadnij { from { transform: translateY(-6cqh) scale(1.6); opacity: 0; } }
/* Odpad na taśmie */
.s5-odpad { position: absolute; z-index: 3; top: var(--tasma); left: -12%; width: 13cqw; translate: -50% -100%; display: grid; justify-items: center; gap: 0.3cqh; padding: 0.4cqh 0.3cqw;
  cursor: grab; touch-action: none; color: var(--tekst); background: none; border: 2px solid transparent; border-radius: 0.6cqw; transition: border-color var(--t2), box-shadow var(--t2), scale var(--t1); }
.s5-odpad img { height: 15cqh; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0.5cqw 0.6cqw rgba(0, 0, 0, 0.75)); pointer-events: none; }
.s5-odpad span { min-height: 1.2em; padding: 0.15em 0.5em; border-radius: 0.3em; background: rgba(2, 18, 22, 0.78); font: 600 clamp(10px, 0.95cqw, 17px)/1.15 var(--font); text-align: center; }
.s5-odpad span:empty { visibility: hidden; }
.s5-odpad:hover, .s5-odpad:focus-visible { border-color: var(--cyan); outline: none; scale: 1.05; }
.s5-odpad.wybrany { border-color: var(--neon); box-shadow: 0 0 1.8cqw rgba(61, 255, 162, 0.8); scale: 1.08; }
.s5-odpad.ciagniety { opacity: 0.3; }
.s5-odpad.wraca { animation: s5-wraca 0.5s var(--krzywa); }
@keyframes s5-wraca { 30% { transform: translateY(-3cqh); } }
.s5-duch { height: 15cqh; }
/* Skaner: czerwona linia przesuwa się po odpadzie w bramce */
.s5-laser { position: absolute; z-index: 3; top: calc(var(--tasma) - 21cqh); height: 21cqh; width: 14cqw; translate: -50% 0; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.s5-laser::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5cqh; background: #ff3b4e; box-shadow: 0 0 1.6cqw 0.4cqw rgba(255, 50, 70, 0.9); }
.s5-laser.skanuje { opacity: 1; }
.s5-laser.skanuje::after { animation: s5-linia 0.65s ease-in-out 2 alternate; }
@keyframes s5-linia { to { top: 100%; } }
.s5-skan { position: absolute; z-index: 3; left: 1.6cqw; top: 11cqh; width: 21cqw; display: grid; gap: 0.6cqh; padding: 1.2cqh 1.2cqw;
  background: rgba(2, 20, 24, 0.86); border: 1px solid rgba(56, 214, 255, 0.55); border-radius: 0.6cqw; }
.s5-skan small { font: 700 clamp(10px, 0.95cqw, 17px)/1 var(--font); letter-spacing: 0.12em; color: var(--cyan); }
.s5-skan b { font: 700 clamp(12px, 1.25cqw, 22px)/1.2 var(--font); }
.s5-skan i { height: 0.7cqh; border-radius: 1cqh; background: linear-gradient(90deg, var(--cyan) var(--s5-postep), rgba(56, 214, 255, 0.18) 0); }
.s5-skan.skanuje i { animation: s5-analiza 1.3s linear forwards; }
.s5-skan.skanuje b { font-size: 0; }
.s5-skan.skanuje b::after { content: "Analiza materiału…"; color: var(--tekst-2); font-weight: 400; font-size: clamp(12px, 1.15cqw, 20px); }
.s5-skan.gotowy i { --s5-postep: 100%; background: var(--neon); }
/* Własna nazwa: zarejestrowane --p psuło liczbowe --p w S4 (pokrętło), S6 (dźwignia, miernik). */
@property --s5-postep { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes s5-analiza { to { --s5-postep: 100%; } }
/* Panel komunikatów i wyjaśnień (prawa górna część grafiki, nad maszynami) */
.s5-panel { position: absolute; z-index: 3; right: 1.6cqw; top: 11cqh; width: 52cqw; display: grid; gap: 1cqh; }
.s5-status { margin: 0; padding: 1cqh 1.4cqw; background: rgba(2, 20, 24, 0.88); border: 1px solid rgba(56, 214, 255, 0.5); border-radius: 0.6cqw; font: 400 clamp(12px, 1.18cqw, 21px)/1.4 var(--font); }
.s5-status:empty { display: none; }
.s5-status .ok { color: var(--neon); }
.s5-status .zle { color: var(--blad); }
.s5-wlasciwy { color: var(--bursztyn); font-weight: 700; }
.s5-karta { display: grid; grid-template-columns: auto 1fr; gap: 1cqh 1.4cqw; align-items: center; padding: 1.4cqh 1.4cqw; background: rgba(2, 20, 24, 0.92);
  border: 2px solid rgba(61, 255, 162, 0.7); border-radius: 0.8cqw; box-shadow: 0 0 1.8cqw rgba(61, 255, 162, 0.3); animation: karta 0.4s var(--krzywa); }
.s5-karta img { width: 8cqw; height: 12cqh; object-fit: contain; }
.s5-karta p { margin: 0.3cqh 0; font: 400 clamp(12px, 1.12cqw, 20px)/1.4 var(--font); }
.s5-karta .eko-btn, .s5-karta .bio-stopka { grid-column: 1 / -1; justify-self: end; }
.s5-karta.koniec { grid-template-columns: 1fr; }
.s5-karta.koniec .bio-stopka { justify-self: center; }
.s5-ok { color: var(--tekst); font-weight: 600 !important; }
.s5-ok b { color: var(--neon); }
.s5-wybor b { color: var(--bursztyn); }
/* Olejomat (render użytkownika; przebieg jak w systemie olejomaty.pl) */
.olejomat .ol-maszyna { position: absolute; z-index: 2; left: 4cqw; bottom: 3cqh; height: 84cqh; aspect-ratio: 541 / 1000; }
.ol-maszyna > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 2.4cqw rgba(255, 210, 60, 0.25)); pointer-events: none; }
.ol-drzwi, .ol-qr { position: absolute; padding: 0; border: 3px solid transparent; border-radius: 0.5cqw; background: none; cursor: pointer; }
.ol-drzwi:focus-visible, .ol-qr:focus-visible { outline: none; border-color: var(--cyan); }
.ol-maszyna.czeka-skan .ol-qr { border-color: var(--neon); animation: s5-pulsuj-zielono 1s ease-in-out infinite; }
@keyframes s5-pulsuj-zielono { 50% { box-shadow: 0 0 2.4cqw rgba(61, 255, 162, 0.95); } }
.ol-qr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.4cqh; background: var(--neon); box-shadow: 0 0 1.2cqw var(--neon); opacity: 0; }
.ol-maszyna.skanuje .ol-qr::after { opacity: 1; animation: s5-linia 0.6s ease-in-out 2 alternate; }
.ol-maszyna.otwarte .ol-drzwi, .ol-drzwi.nad { border-color: var(--neon); background: rgba(61, 255, 162, 0.22); box-shadow: 0 0 2.6cqw rgba(61, 255, 162, 0.9), inset 0 0 1.6cqw rgba(0, 0, 0, 0.8); }
.ol-podajnik { position: absolute; overflow: hidden; pointer-events: none; }
.ol-podajnik img { position: absolute; left: 50%; top: 50%; height: 260%; translate: -50% -50%; rotate: 90deg; opacity: 0; }
.ol-maszyna.wydaje .ol-podajnik { overflow: visible; }
.ol-maszyna.wydaje .ol-podajnik img { animation: ol-wydaj 1s var(--krzywa) forwards; }
/* Nowa butelka rozbłyska w podajniku (w miejscu butelki na renderze), bez wyjeżdżania poza maszynę. */
@keyframes ol-wydaj { 0% { opacity: 0; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 2cqw rgba(61, 255, 162, 1)); } 100% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 1cqw rgba(61, 255, 162, 0.8)); } }
.ol-butelka { position: absolute; z-index: 3; left: 32cqw; bottom: 8cqh; height: 30cqh; cursor: grab; touch-action: none; transition: left 0.8s var(--krzywa), bottom 0.8s var(--krzywa), scale 0.8s, opacity 0.8s; }
.ol-butelka > img { height: 100%; filter: drop-shadow(0 0.8cqw 1cqw rgba(0, 0, 0, 0.6)); pointer-events: none; }
.ol-butelka.chwycona, .ol-patelnia.chwycona { cursor: grabbing; transition: none; z-index: 6; }
.ol-butelka.wklada { left: 6.6cqw; bottom: 44cqh; scale: 0.45; opacity: 0; }
.ol-butelka.nad { filter: drop-shadow(0 0 1.8cqw rgba(61, 255, 162, 0.95)); }
.ol-miarka { position: absolute; left: calc(100% + 0.8cqw); bottom: 6%; height: 70%; width: 1cqw; border: 1px solid rgba(255, 220, 120, 0.8); border-radius: 0.5cqw; background: rgba(2, 20, 24, 0.7); display: flex; align-items: flex-end; }
.ol-miarka i { width: 100%; height: 0; border-radius: 0.5cqw; background: linear-gradient(180deg, #ffd65a, #d99510); transition: height 1.9s linear; }
.olejomat.zlewa .ol-miarka i, .olejomat.pelna .ol-miarka i { height: 100%; }
.ol-miarka small { position: absolute; left: 50%; top: 100%; translate: -50% 0.4cqh; white-space: nowrap; font: 600 clamp(10px, 0.85cqw, 15px)/1 var(--font); color: #ffd98a; }
.ol-patelnia { position: absolute; z-index: 4; left: 43cqw; bottom: 9cqh; width: 12cqw; cursor: grab; touch-action: none; transition: left 0.7s var(--krzywa), bottom 0.7s var(--krzywa), rotate 0.7s var(--krzywa); }
.ol-patelnia > img { width: 100%; filter: drop-shadow(0 0.8cqw 1cqw rgba(0, 0, 0, 0.6)); pointer-events: none; }
.olejomat.zlewa .ol-patelnia { left: 34cqw; bottom: 40cqh; rotate: -32deg; }
.ol-strumien { position: absolute; left: 7%; top: 52%; width: 0.6cqw; height: 13cqh; rotate: 32deg; transform-origin: top; border-radius: 1cqw; background: linear-gradient(180deg, #f1b42f, #d99510); opacity: 0; pointer-events: none; }
.olejomat.zlewa .ol-strumien { opacity: 1; transition: opacity 0.3s 0.7s; animation: ol-plyn 0.4s linear infinite; }
@keyframes ol-plyn { 50% { filter: brightness(1.3); transform: scaleX(1.3); } }
.ol-butelka.pojaw, .ol-patelnia.pojaw { animation: karta 0.4s var(--krzywa); }
.ol-punkty { position: absolute; z-index: 5; left: 14cqw; top: 26cqh; padding: 0.4em 0.8em; border: 2px solid var(--neon); border-radius: 0.6cqw; background: rgba(2, 30, 24, 0.9); color: var(--neon);
  font: 700 clamp(16px, 2cqw, 36px)/1 var(--font); box-shadow: 0 0 2cqw rgba(61, 255, 162, 0.6); animation: ol-punkty 1.4s var(--krzywa) forwards; }
@keyframes ol-punkty { from { opacity: 0; transform: translateY(6cqh) scale(0.6); } 60% { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-2cqh); } }
.ol-prawa { position: absolute; z-index: 3; right: 3cqw; top: 12cqh; width: 42cqw; display: grid; gap: 1.6cqh; justify-items: start; padding: 2.2cqh 2cqw;
  background: rgba(2, 20, 24, 0.9); border: 1px solid rgba(56, 214, 255, 0.55); border-radius: 0.8cqw; }
.ol-prawa h3 { margin: 0; font: 700 clamp(16px, 1.9cqw, 34px)/1.15 var(--font); }
.ol-prawa > p { margin: 0; font: 400 clamp(12px, 1.2cqw, 21px)/1.4 var(--font); }
.ol-prawa .s5-status { padding: 0; border: 0; background: none; }
.ol-zbieramy { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; width: 100%; padding: 1.2cqh 1.2cqw; border: 1px solid rgba(111, 227, 111, 0.5); border-radius: 0.6cqw; background: rgba(10, 40, 20, 0.7); }
.ol-zbieramy b { font: 700 clamp(11px, 1.05cqw, 19px)/1.2 var(--font); }
.ol-zbieramy b.tak { color: #6fe36f; }
.ol-zbieramy b.nie { color: var(--blad); }
.ol-zbieramy ul { margin: 0.6cqh 0 0; padding-left: 1.2em; font: 400 clamp(10px, 0.92cqw, 16px)/1.35 var(--font); color: var(--tekst-2); }
.ol-wybory { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; width: 100%; }
.ol-wybor { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1cqw; min-height: 44px; padding: 1.2cqh 1cqw; cursor: pointer; color: var(--tekst);
  background: rgba(4, 34, 38, 0.92); border: 2px solid rgba(56, 214, 255, 0.5); border-radius: 0.7cqw; font: 600 clamp(11px, 1.1cqw, 20px)/1.3 var(--font); text-align: left; }
.ol-wybor span { width: 4.4cqw; height: 4.4cqw; color: var(--cyan); }
.ol-wybor[data-wybor="butelka"] span { color: #6fe36f; }
.ol-wybor svg { width: 100%; height: 100%; }
.ol-wybor:hover, .ol-wybor:focus-visible { outline: none; border-color: var(--neon); box-shadow: 0 0 1.4cqw rgba(61, 255, 162, 0.5); }
.ol-wybor.blad { animation: drgnij 0.15s linear 4; border-color: var(--blad); }
.ol-droga { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8cqw; margin: 0; padding: 0; list-style: none; }
.ol-droga li { position: relative; display: grid; justify-items: center; gap: 0.4cqh; padding: 1cqh 0.8cqw; border: 1px solid rgba(61, 255, 162, 0.6); border-radius: 0.6cqw; background: rgba(4, 34, 38, 0.9);
  font: 600 clamp(11px, 1cqw, 18px)/1.2 var(--font); opacity: 0; animation: ol-krok 0.5s var(--krzywa) calc(var(--n) * 0.45s) forwards; }
.ol-droga li span { font-size: clamp(20px, 2.6cqw, 46px); line-height: 1; }
.ol-droga li span img { height: 1.4em; }
.ol-droga li + li::before { content: "›"; position: absolute; left: -1.3cqw; top: 50%; translate: 0 -50%; color: var(--neon); font-size: 1.6em; }
.ol-droga li:last-child { border-color: var(--neon); box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.5); }
@keyframes ol-krok { from { opacity: 0; transform: translateY(1.5cqh); } to { opacity: 1; transform: none; } }
.olejomat.koniec .ol-prawa { justify-items: center; grid-template-columns: 1fr auto; align-items: end; }
.olejomat.koniec .eko-ukonczone, .olejomat.koniec .eko-dymek, .olejomat.koniec .eko-koniec-przyciski { grid-column: 1; margin: 0; }
.olejomat.koniec .ol-wiktor { grid-column: 2; grid-row: 1 / 4; width: 10cqw; }
/* Zielona fala po włożeniu czipów (scenariusz: przejście do mostka) */
.s5-zielona-fala { position: absolute; inset: 0; background: radial-gradient(circle at 50% 8%, transparent 0, transparent var(--s5-fala), rgba(61, 255, 162, 0.55) calc(var(--s5-fala) + 2%), transparent calc(var(--s5-fala) + 9%)); animation: s5-fala 1.8s ease-out forwards; }
@property --s5-fala { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes s5-fala { from { --s5-fala: 0%; opacity: 1; } to { --s5-fala: 130%; opacity: 0.2; } }
.kostka-danych.zielona { border-color: var(--neon); box-shadow: 0 0 4cqw rgba(61, 255, 162, 0.9); filter: hue-rotate(-40deg); }
/* --- Sektor 6: mostek (hologram na stole, poświata reaktora, zielone miasto za oknem) --------------- */
.s6-holo-stol { pointer-events: none; }
.s6-holo-stol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.6;
  clip-path: ellipse(43% 35% at 50% 55%); transition: opacity 2s ease; } /* okrągły model miasta (maska nie działa w walcu 3D) */
.s6-holo-stol img.zywa { opacity: 0; }
.s6-holo-stol.zywa img.zywa { opacity: 0.85; }
.s6-holo-stol.zywa img.szara { opacity: 0; }
.s6-reaktor-glow { pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: radial-gradient(ellipse closest-side at 50% 58%, rgba(150, 255, 200, 0.55), rgba(40, 220, 130, 0.22) 55%, rgba(40, 220, 130, 0) 100%); }
.s6-reaktor-glow.aktywny { opacity: 1; animation: s6-puls 2.8s ease-in-out infinite; }
@keyframes s6-puls { 50% { filter: brightness(1.35); } }
.s6-okno-zielone { pointer-events: none; opacity: 0; transition: opacity 3.5s ease;
  background: radial-gradient(ellipse closest-side at 50% 85%, rgba(70, 230, 130, 0.55), rgba(120, 240, 170, 0.22) 60%, rgba(120, 240, 170, 0) 100%); }
.s6-okno-zielone.aktywne { opacity: 1; }
/* Holomapa (zadanie na grafice) */
.stanowisko-s6 .s6-tlo-mostek { position: absolute; inset: 0; background: url("../assets/tla/s6-mostek-1920.webp") center / cover; filter: blur(8px) brightness(0.32); transform: scale(1.05); }
.s6-mapa { position: absolute; z-index: 1; right: 0; top: 9cqh; height: 91cqh; aspect-ratio: 16 / 9; transition: filter 2s ease; }
.s6-mapa > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.s6-zywa { clip-path: circle(0% at var(--x) var(--y)); transition: clip-path 2.2s cubic-bezier(.2, .7, .2, 1); }
.s6-zywa.widoczna { clip-path: circle(21% at var(--x) var(--y)); }
.s6-zywa.cala { clip-path: none; opacity: 0; transition: opacity 2.6s ease; }
.s6-zywa.cala.widoczna { opacity: 1; }
.miasto-zywe .s6-mapa { filter: drop-shadow(0 0 3cqw rgba(61, 255, 162, 0.45)); }
.s6-zaklad { position: absolute; z-index: 2; width: 10%; translate: -50% -72%; display: grid; justify-items: center; gap: 0.3cqh; padding: 0.3cqh 0.3cqw; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: 0.8cqw; color: var(--tekst); transition: border-color var(--t2), box-shadow var(--t2), scale var(--t1); }
.s6-zaklad img { width: 100%; filter: grayscale(0.9) brightness(0.75) drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.7)); transition: filter 1.4s ease; pointer-events: none; }
.s6-zaklad span { padding: 0.25em 0.6em; border-radius: 0.3em; background: rgba(2, 18, 22, 0.86); border: 1px solid rgba(56, 214, 255, 0.4); font: 600 clamp(9px, 0.82cqw, 15px)/1.15 var(--font); text-align: center; }
.s6-zaklad:hover, .s6-zaklad:focus-visible, .s6-zaklad.nad { outline: none; border-color: var(--cyan); box-shadow: 0 0 2cqw rgba(56, 214, 255, 0.6); scale: 1.06; }
.s6-zaklad.zywy img { filter: drop-shadow(0 0 1.2cqw rgba(61, 255, 162, 0.85)); }
.s6-zaklad.zywy span { border-color: var(--neon); color: var(--neon); }
.s6-zaklad.podpowiedz { border-color: var(--bursztyn); animation: s5-pulsuj 1s ease-in-out infinite; }
.s6-zaklad.blad { animation: drgnij 0.15s linear 4; border-color: var(--blad); }
.s6-zaklad.blysk img { animation: s6-blysk 1.2s ease; }
@keyframes s6-blysk { 30% { filter: brightness(2) drop-shadow(0 0 3cqw #3dffa2); scale: 1.15; } }
.s6-strumienie { position: absolute; z-index: 4; left: 1.6cqw; top: 11cqh; width: 17.5cqw; display: grid; gap: 1cqh; }
.s6-strumienie h3 { margin: 0; font: 700 clamp(11px, 1.05cqw, 19px)/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.s6-strumien { position: relative; display: grid; grid-template-columns: 5cqw 1fr; align-items: center; gap: 0.6cqw; min-height: 44px; padding: 0.7cqh 0.8cqw; cursor: grab; touch-action: none; text-align: left;
  color: var(--tekst); background: rgba(2, 20, 24, 0.9); border: 2px solid color-mix(in srgb, var(--kolor) 65%, transparent); border-radius: 0.7cqw; transition: box-shadow var(--t2), opacity var(--t2); }
.s6-strumien img { width: 100%; height: 6.5cqh; object-fit: contain; pointer-events: none; }
.s6-strumien span { display: flex; align-items: center; gap: 0.5em; font: 600 clamp(10px, 0.95cqw, 17px)/1.2 var(--font); pointer-events: none; }
.s6-strumien span i { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--kolor); color: var(--kolor); font-style: normal; font-size: 0.85em; }
.s6-gniazdo { position: absolute; right: -0.75cqw; top: 50%; translate: 0 -50%; width: 1.3cqw; height: 1.3cqw; min-width: 12px; min-height: 12px; border-radius: 50%; background: var(--kolor); box-shadow: 0 0 1.2cqw var(--kolor); pointer-events: none; }
.s6-strumien:hover, .s6-strumien:focus-visible { outline: none; box-shadow: 0 0 1.6cqw color-mix(in srgb, var(--kolor) 70%, transparent); }
.s6-strumien.wybrany { box-shadow: 0 0 2.2cqw var(--kolor); border-color: var(--kolor); }
.s6-strumien.polaczony { cursor: default; border-color: var(--kolor); }
.s6-strumien.polaczony span::after { content: "✓"; margin-left: auto; color: var(--neon); }
.s6-linie { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.s6-linie path { fill: none; stroke-linecap: round; }
.petla-tlo { stroke-width: 8; opacity: 0.28; }
.petla-plyw { stroke-width: 3.5; stroke-dasharray: 2 14; animation: s6-plyw 0.9s linear infinite; filter: drop-shadow(0 0 4px currentColor); }
@keyframes s6-plyw { to { stroke-dashoffset: -16; } }
.petla-ciagnieta { stroke-width: 3; stroke-dasharray: 9 7; opacity: 0.95; animation: s6-plyw 0.6s linear infinite; }
.petla-blad { stroke: #ff6b5a; stroke-width: 4; stroke-dasharray: 9 7; animation: s6-zgas 0.9s ease forwards; }
@keyframes s6-zgas { to { opacity: 0; stroke-width: 1; } }
.s6-panel { position: absolute; z-index: 5; right: 7.5cqw; top: 11cqh; width: 44cqw; display: grid; gap: 1cqh; }
.s6-karta { border-color: var(--kolor) !important; box-shadow: 0 0 2cqw color-mix(in srgb, var(--kolor) 45%, transparent) !important; }
.s6-karta img { width: 7cqw; height: 9cqh; }
.s6-rola b { color: var(--kolor); }
.s6-miernik { position: absolute; z-index: 4; right: 1.6cqw; bottom: 4cqh; width: 4.4cqw; height: 36cqh; display: flex; flex-direction: column-reverse; --p: 0.83;
  border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 2.2cqw; background: rgba(2, 20, 24, 0.85); overflow: visible; }
.s6-miernik i { position: absolute; left: 12%; right: 12%; bottom: 3%; height: calc(var(--p) * 94%); border-radius: 1.6cqw; background: linear-gradient(0deg, #1fc27a, #9dffcf); box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.7); transition: height 1.2s cubic-bezier(.2, .7, .2, 1); }
.s6-miernik b { position: absolute; left: 50%; bottom: calc(100% + 0.6cqh); translate: -50% 0; font: 700 clamp(13px, 1.4cqw, 25px)/1 var(--font); color: var(--neon); }
.s6-miernik small { position: absolute; left: 50%; top: calc(100% + 0.6cqh); translate: -50% 0; font: 600 clamp(9px, 0.8cqw, 14px)/1 var(--font); color: var(--tekst-2); text-transform: uppercase; letter-spacing: 0.08em; }
.s6-miernik.pelny { border-color: var(--neon); box-shadow: 0 0 2.4cqw rgba(61, 255, 162, 0.7); }
/* Dźwignia reaktora */
.s6-kolumna { position: absolute; z-index: 2; left: 30cqw; top: 13cqh; width: 15cqw; height: 80cqh; --p: 0; border-radius: 7cqw / 3cqw; border: 3px solid rgba(160, 230, 220, 0.55);
  background: linear-gradient(90deg, rgba(10, 30, 32, 0.95), rgba(40, 70, 70, 0.6) 45%, rgba(10, 30, 32, 0.95)); overflow: hidden; }
.s6-kolumna i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(18% + var(--p) * 82%); background: linear-gradient(0deg, rgba(40, 220, 130, 0.9), rgba(120, 250, 180, 0.75) 70%, rgba(190, 255, 225, 0.95)); box-shadow: 0 0 2cqw rgba(61, 255, 162, 0.6); transition: height 0.15s linear; }
.s6-kolumna b { position: absolute; left: 50%; top: 45%; translate: -50% -50%; font: 700 clamp(18px, 2.6cqw, 46px)/1 var(--font); color: #eafff4; opacity: 0; text-shadow: 0 0 2cqw #3dffa2; }
.uruchomiony .s6-kolumna { animation: s6-start 1.6s ease forwards; }
.uruchomiony .s6-kolumna b { opacity: 1; transition: opacity 0.6s 0.4s; }
@keyframes s6-start { 20% { box-shadow: 0 0 8cqw 2cqw rgba(160, 255, 200, 0.95); filter: brightness(2); } 100% { box-shadow: 0 0 4cqw rgba(61, 255, 162, 0.8); } }
.s6-dzwignia { position: absolute; z-index: 3; left: 52cqw; top: 22cqh; width: 10cqw; height: 62cqh; border-radius: 1cqw; border: 2px solid rgba(56, 214, 255, 0.55); background: rgba(2, 20, 24, 0.9); }
.s6-szczelina { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1cqw; translate: -50% 0; border-radius: 0.5cqw; background: #050c0e; box-shadow: inset 0 0 0.8cqw #000; }
.s6-raczka { position: absolute; left: 50%; bottom: calc(5% + var(--p, 0) * 72%); translate: -50% 0; width: 8cqw; height: 9cqh; border-radius: 1cqw; cursor: grab; touch-action: none; outline: none;
  background: radial-gradient(circle at 35% 30%, #9fffd0, #1fc27a 60%, #0a6b42); box-shadow: 0 0 1.6cqw rgba(61, 255, 162, 0.8), inset 0 -0.6cqh 0 rgba(0, 0, 0, 0.3); transition: bottom 0.25s ease; }
.s6-raczka.chwycona { cursor: grabbing; transition: none; }
.s6-raczka:focus-visible { box-shadow: 0 0 0 3px var(--cyan), 0 0 1.6cqw rgba(61, 255, 162, 0.8); }
.s6-raczka i { position: absolute; left: 50%; top: 100%; width: 1.4cqw; height: 4cqh; translate: -50% 0; background: linear-gradient(90deg, #556, #cde 50%, #556); border-radius: 0 0 0.4cqw 0.4cqw; }
.s6-reaktor-widok .s6-panel { right: 3cqw; width: 34cqw; top: 30cqh; }
/* Kiełkowanie nasion */
.s6-donica { position: absolute; z-index: 2; width: 6%; translate: -50% -80%; display: grid; justify-items: center; padding: 0; cursor: pointer; background: none; border: 2px solid transparent; border-radius: 0.8cqw; color: var(--tekst); }
.s6-donica .donica { width: 100%; filter: drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.6)); pointer-events: none; }
.s6-donica .donica { transition: opacity 0.3s 0.25s; }
.s6-donica .drzewko { position: absolute; left: 50%; bottom: 0; width: 105%; translate: -50% 0; transform: scale(0.55, 0.3); opacity: 0; transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.3, 1.5, .5, 1), opacity 0.3s; pointer-events: none; filter: drop-shadow(0 0 1.2cqw rgba(61, 255, 162, 0.7)); }
.s6-donica.wyrosło .drzewko { transform: scale(1); opacity: 1; }
.s6-donica.wyrosło .donica { opacity: 0; }
.s6-donica span { position: absolute; top: 100%; left: 50%; translate: -50% 0.3cqh; white-space: nowrap; padding: 0.2em 0.5em; border-radius: 0.3em; background: rgba(2, 18, 22, 0.85); font: 600 clamp(9px, 0.8cqw, 14px)/1.1 var(--font); }
.s6-donica.pusta .donica { filter: grayscale(1) brightness(0.85) drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, 0.6)); }
.s6-donica.pusta::after { content: "?"; position: absolute; left: 50%; top: 28%; translate: -50% 0; font: 700 clamp(14px, 1.6cqw, 28px)/1 var(--font); color: var(--bursztyn); text-shadow: 0 0 1cqw rgba(0, 0, 0, 0.9); pointer-events: none; }
.s6-donica.pusta span { color: var(--bursztyn); }
.s6-donica:not(.wyrosło):not(.pusta) { animation: s5-pulsuj-zielono 1.2s ease-in-out infinite; }
.s6-donica:hover, .s6-donica:focus-visible { outline: none; border-color: var(--neon); }
.s6-donica.blad { animation: drgnij 0.15s linear 4; }
/* --- Lobby: banery klienta (zasłona przy pierwszym wejściu, delikatny neon ramki) --------------------- */
.lobby-baner { position: relative; pointer-events: none; }
.lobby-baner .zaslona { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.lobby-baner.wlaczony .zaslona { animation: baner-wlacz 1.3s steps(1, end) forwards; }
@keyframes baner-wlacz { 0% { opacity: 1; } 12% { opacity: 0.15; } 20% { opacity: 0.9; } 34% { opacity: 0; } 42% { opacity: 0.7; } 55%, 100% { opacity: 0; } }
.lobby-baner .neon { position: absolute; inset: 9% 2.4%; border: 2px solid rgba(120, 240, 255, 0.85); border-radius: 1.2cqw;
  box-shadow: 0 0 1.1cqw rgba(56, 214, 255, 0.75), inset 0 0 0.6cqw rgba(56, 214, 255, 0.35); opacity: 0; }
.lobby-baner.baner-wfosigw .neon { border-radius: 0.6cqw; inset: 10% 1.6%; }
.lobby-baner.wlaczony .neon { animation: neon-mruga 7s linear 1.3s infinite; }
/* Lekkie mruganie neonu: jasność ramki 0,55–0,9, krótkie przygaśnięcia; nie zasłania napisów. */
@keyframes neon-mruga { 0%, 100% { opacity: 0.8; } 18% { opacity: 0.72; } 19% { opacity: 0.4; } 20% { opacity: 0.8; } 47% { opacity: 0.68; } 63% { opacity: 0.85; } 64% { opacity: 0.5; } 66% { opacity: 0.85; } 81% { opacity: 0.6; } }
.ruch-ograniczony .lobby-baner.wlaczony .neon { animation: none; opacity: 0.75; }
/* --- Ekran startu: banery klienta ------------------------------------------------------------------ */
.start-sponsor { display: flex; gap: 1.6cqw; justify-content: center; align-items: center; margin-top: 1cqh; }
.start-sponsor img { height: 8.5cqh; border-radius: 0.6cqw; box-shadow: 0 0 1.4cqw rgba(56, 214, 255, 0.45); }
.mapa-certyfikat { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-top: 1.6cqh; padding: 1cqh 1cqw; border: 1px solid var(--neon); border-radius: 0.6cqw; background: rgba(4, 40, 30, 0.6); }
/* --- Certyfikat ---------------------------------------------------------------------------------- */
.cert-okno { width: 94cqw; height: 88cqh; display: grid; grid-template-columns: 27cqw 1fr; gap: 2cqw; padding: 2.4cqh 2cqw; background: var(--panel-2); border: 1px solid var(--neon); border-radius: 0.8cqw; animation: karta 0.5s var(--krzywa); }
.cert-lewa { display: flex; flex-direction: column; gap: 1.1cqh; min-height: 0; }
.cert-lewa h2 { margin: 0; color: var(--neon); font: 700 clamp(18px, 2.2cqw, 38px)/1.1 var(--font); }
.cert-lewa > p { margin: 0; font: 400 clamp(12px, 1.1cqw, 20px)/1.4 var(--font); color: var(--tekst-2); }
.cert-etykieta { margin: 0.6cqh 0 0; font: 600 clamp(11px, 1cqw, 18px)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); }
#cert-imie { min-height: 44px; padding: 0.4em 0.7em; font: 600 clamp(16px, 1.6cqw, 28px)/1.2 var(--font); color: var(--tekst); background: rgba(2, 20, 24, 0.9); border: 2px solid rgba(56, 214, 255, 0.6); border-radius: 0.5cqw; }
#cert-imie:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 1.2cqw rgba(61, 255, 162, 0.5); }
.cert-blad { margin: 0; min-height: 1.2em; color: var(--blad); font: 600 clamp(11px, 1cqw, 18px)/1.2 var(--font); }
.cert-info { margin: 0.4cqh 0 0; font: 400 clamp(11px, 0.95cqw, 17px)/1.35 var(--font); color: var(--tekst-2); }
.cert-formy { display: grid; gap: 0.6cqh; font: 400 clamp(12px, 1.1cqw, 20px)/1.2 var(--font); }
.cert-formy label { display: flex; align-items: center; gap: 0.6em; min-height: 36px; cursor: pointer; }
.cert-formy input { width: 1.2em; height: 1.2em; accent-color: var(--neon); }
.cert-przyciski { display: flex; gap: 1cqw; flex-wrap: wrap; margin-top: 1cqh; }
.cert-status { margin: 0; min-height: 1.3em; font: 400 clamp(11px, 1cqw, 18px)/1.3 var(--font); color: var(--neon); }
.cert-koniec { margin-top: auto; display: flex; gap: 0.8cqw; flex-wrap: wrap; }
.cert-prawa { display: grid; grid-template-rows: 1fr auto; gap: 1.4cqh; min-height: 0; justify-items: center; }
.cert-podglad { max-width: 100%; max-height: 100%; min-height: 0; aspect-ratio: 3508 / 2480; height: 100%; object-fit: contain; border-radius: 0.4cqw; box-shadow: 0 0 2.4cqw rgba(61, 255, 162, 0.35); background: #fbfdf8; }
.cert-sponsor { display: flex; gap: 1.4cqw; align-items: center; }
.cert-sponsor img { height: 7cqh; border-radius: 0.5cqw; }
#druk-certyfikat { display: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.drukuj-certyfikat > *:not(#druk-certyfikat) { display: none !important; }
  body.drukuj-certyfikat { background: #fff !important; }
  body.drukuj-certyfikat #druk-certyfikat { display: block; }
  #druk-certyfikat img { display: block; width: 297mm; height: 210mm; }
}
/* --- Koniec etapu ----------------------------------------------------------------------------- */
.koniec-etapu { text-align: center; display: grid; gap: 1.6cqh; justify-items: center; padding: 3cqw; background: var(--panel-2); border: 1px solid var(--neon); width: 56cqw; animation: karta 0.5s var(--krzywa); }
.koniec-etapu h2 { margin: 0; font-size: clamp(18px, 2.2cqw, 38px); color: var(--neon); letter-spacing: 0.08em; }
.koniec-etapu p { margin: 0; font-size: clamp(13px, 1.2cqw, 21px); line-height: 1.45; }

/* --- Edytor punktów (?edytor=1) --------------------------------------------------------------- */
.edytor .punkt::after { border-color: rgba(255, 0, 200, 0.8) !important; }
.edytor-panel { position: absolute; left: 1cqw; top: 7cqh; z-index: 30; padding: 0.8cqw; background: rgba(30, 0, 30, 0.9); border: 1px solid #f0c; font: 12px/1.4 monospace; color: #fff; max-width: 40cqw; }
.edytor-ramka { position: absolute; border: 2px dashed #f0c; z-index: 29; pointer-events: none; }

/* --- Ograniczenie ruchu ----------------------------------------------------------------------- */
.ruch-ograniczony *, .ruch-ograniczony *::before, .ruch-ograniczony *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
.ruch-ograniczony .plan-tlo, .ruch-ograniczony .plan-przod { transform: translate3d(calc(var(--pan) * (1 - var(--S)) / var(--S) * 100%), 0, 0) scale(1.035) !important; }