/* Makieta: pełny ekran, scena pod spodem, tekst oprowadzania na wierzchu.
   Tło to papier z delikatnym światłem, jak stół w pracowni architektonicznej. */
@font-face{font-family:"Helvena";src:url("/fonts/helvena.woff2") format("woff2");font-weight:200 900;font-display:swap}
:root{--papier:#F6F2EA;--granat:#0F4662;--granat-2:rgba(15,70,98,.72);--turkus:#3FB3B9;--limonka:#D9F03A;--akcja:#C8481A;
  --font:"Helvena",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:radial-gradient(120% 90% at 50% 38%,#FFFDF8 0%,#F3EEE4 55%,#E7E0D2 100%);color:var(--granat);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.makieta{position:relative;width:100vw;height:100dvh}
.scena{position:absolute;inset:0;cursor:grab;touch-action:none}
.scena:active{cursor:grabbing}
.scena canvas{display:block}

/* pasek u góry: stała warstwa nad sceną, etykiety miejsc chowają się pod nim (scena.js) */
.naglowek{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.5rem 2rem;
  min-height:3.5rem;padding:.7rem clamp(1rem,3vw,2.5rem);background:rgba(251,249,244,.9);box-shadow:0 10px 30px -18px rgba(15,70,98,.35);pointer-events:none}
@supports (backdrop-filter:blur(1px)){.naglowek{background:rgba(251,249,244,.74);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}}
.etykiety{z-index:2}.panel{z-index:4}
.auto{margin-top:.9rem;width:100%;min-height:2.75rem;border:0;border-radius:999px;background:var(--limonka);color:var(--granat);font:inherit;font-weight:500;cursor:pointer;transition:transform .2s}
.auto:hover{transform:translateY(-1px)}
.auto[aria-pressed="true"]{background:var(--granat);color:#fff}
.marka{margin:0;font-weight:500;letter-spacing:-.01em}.marka span{font-weight:400;color:var(--granat-2)}
.legenda{margin:0;display:flex;align-items:center;gap:.55rem;font-size:.9375rem;color:var(--granat-2)}
.kropka{width:.8rem;height:.8rem;border-radius:50%;background:var(--turkus);box-shadow:0 0 0 4px rgba(63,179,185,.18)}

/* tilt-shift: płytka głębia ostrości jak na zdjęciu makiety z bliska; ostra jest środkowa strefa kadru */
.ostrosc{position:absolute;left:0;right:0;pointer-events:none;z-index:1}
.ostrosc-g{top:0;height:30%;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}
.ostrosc-d{bottom:0;height:26%;-webkit-mask-image:linear-gradient(transparent,#000 80%);mask-image:linear-gradient(transparent,#000 80%)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.ostrosc{-webkit-backdrop-filter:blur(2.6px);backdrop-filter:blur(2.6px)}}
@media(max-width:44rem){.ostrosc{display:none}}
/* etykiety miejsc: projekcja z 3D, klik przenosi do przystanku */
.etykiety{position:absolute;inset:0;pointer-events:none}
.et{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:none;border:0;padding:0;font:inherit;color:var(--granat);transition:opacity .35s}
.et-t{font-size:.8125rem;font-weight:500;white-space:nowrap;background:rgba(255,253,248,.92);padding:.3rem .65rem;border-radius:999px;box-shadow:0 4px 18px -6px rgba(15,70,98,.35)}
.et-p{width:.7rem;height:.7rem;border-radius:50%;background:var(--limonka);box-shadow:0 0 0 3px rgba(15,70,98,.85),0 0 0 9px rgba(217,240,58,.28)}
.et.akt .et-t{background:var(--granat);color:#fff}
.et.ukryta{opacity:0;pointer-events:none}

/* panel oprowadzania */
.panel{position:absolute;left:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);width:min(27rem,calc(100vw - 2rem));
  background:rgba(255,253,248,.94);border-radius:1.1rem;padding:1.4rem 1.5rem 1.1rem;box-shadow:0 30px 60px -30px rgba(15,70,98,.45)}
@supports (backdrop-filter:blur(1px)){.panel{background:rgba(255,253,248,.82);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}}
.licznik{margin:0 0 .5rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--granat-2);font-variant-numeric:tabular-nums}
.tytul{margin:0;font-size:clamp(1.35rem,2.3vw,1.75rem);font-weight:500;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.tekst{margin:.7rem 0 0;color:var(--granat-2);font-size:.9875rem;line-height:1.5}
.akcje{margin:.9rem 0 0}.akcje[hidden]{display:none}
.tekst,.akcje{transition:opacity .5s ease,transform .5s ease}
.panel.czeka .tekst,.panel.czeka .akcje{opacity:0;transform:translateY(6px)}
.wiecej{display:none}
.klucz{display:none;list-style:none;margin:.9rem 0 0;padding:0;gap:.4rem;flex-direction:column;font-size:.8125rem;color:var(--granat-2)}
.klucz li{display:flex;align-items:center;gap:.55rem}
.klucz .et-p{flex:none;width:.6rem;height:.6rem;margin:0 .1rem}
.panel.przeglad .klucz{display:flex}
.link{font-weight:500;color:var(--granat);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
.kroki{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem}
.kroki button{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:var(--granat);color:#fff;font:inherit;font-size:1rem;cursor:pointer;transition:transform .2s,background-color .2s}
.kroki button:hover{transform:translateY(-1px);background:#0b3a52}
.kroki button:disabled{opacity:.3;cursor:default;transform:none}
.kropki{display:flex;gap:.45rem;list-style:none;margin:0;padding:0;flex:1;justify-content:center}
.kropki button{width:.55rem;height:.55rem;padding:0;border-radius:50%;background:rgba(15,70,98,.22)}
.kropki button[aria-current="step"]{background:var(--granat);width:1.4rem;border-radius:999px}
:focus-visible{outline:2px solid var(--turkus);outline-offset:3px}

.podpowiedz{margin:.85rem 0 0;font-size:.6875rem;letter-spacing:.01em;color:var(--granat-2);opacity:.75;text-align:center}
@media(max-width:44rem){
  .podpowiedz{display:none}
  .panel{left:.75rem;right:.75rem;bottom:.75rem;width:auto;padding:1rem 1.1rem .85rem}
  .tytul{font-size:1.25rem}
  .panel:not(.rozwiniety) .tekst,.panel:not(.rozwiniety) .akcje,.panel:not(.rozwiniety) .klucz{display:none}
  .wiecej{display:inline-flex;align-items:center;min-height:2.75rem;margin:.1rem 0 -.35rem;padding:0;border:0;background:none;color:var(--granat);font:inherit;font-size:.875rem;font-weight:500;text-decoration:underline;text-underline-offset:.3em;cursor:pointer}
  .auto{margin-top:.6rem;min-height:2.6rem}
  .kroki{margin-top:.7rem}
  .legenda{font-size:.8125rem}
  .legenda-dalej{display:none}
  .naglowek{flex-wrap:nowrap}.marka{font-size:.9375rem}.marka span{display:none}
  .et-t{font-size:.75rem}
}
.bez-js{position:absolute;inset:auto 0 50% 0;text-align:center}
/* w ramce na stronie głównej: pasek strony wyżej, więc bez własnego; strona przewija się palcem w pionie */
.osadzona .naglowek{display:none}
.osadzona .scena{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}