/* Podróż 3D: płótno przypięte do ekranu, nad nim cienka warstwa (marka, menu, myśli, etykiety, mapa, panel).
   Tokeny na górze; świat zmienia głównie --akcent i --cieply. Krój: Fraunces + JetBrains Mono (zmień pod markę). */
:root{
  --noc:#0a1315;
  --panel:rgba(10,19,21,.93);
  --atrament:#eef0e8;
  --szarosc:#a3b0aa;
  --akcent:#a8dccd;
  --cieply:#ffd58a;
  --linia:rgba(168,220,205,.28);
  --wolny:#6cc68f;
  --zajety:#d48a74;
  --f-glowa:"Fraunces",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--noc)}
body{margin:0;background:var(--noc);color:var(--atrament);font-family:var(--f-glowa);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
body.zablokowane{overflow:hidden}
h1,h2,h3,p,dl,dd,ul{margin:0}
a{color:var(--akcent);text-underline-offset:.22em}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--akcent);outline-offset:3px}

#swiat{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
.tor{height:900vh}
.blysk{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,246,220,.95),rgba(255,228,170,.5) 35%,rgba(255,220,160,0) 70%)}
.blysk.pach{animation:pach .55s ease-out}
@keyframes pach{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}

.hud{transition:opacity .3s}
body.koniec .hud{opacity:0;pointer-events:none}

.gora{position:fixed;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding-top:max(18px,env(safe-area-inset-top,0px));padding-bottom:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(to bottom,rgba(6,12,14,.55),rgba(6,12,14,0))}
.marka{display:grid;gap:.1rem;text-decoration:none;color:var(--atrament);font-size:1.25rem;font-weight:500;line-height:1.1;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.marka span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--akcent);font-weight:400}
.menu{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}
.menu button{cursor:pointer;min-height:40px;padding:0 .8rem;border:1px solid var(--linia);background:rgba(8,16,18,.55);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px)}
.menu button:hover{border-color:var(--akcent);color:var(--akcent)}

.mysli{position:fixed;z-index:2;pointer-events:none;left:max(5vw,calc(env(safe-area-inset-left,0px) + 16px));top:22svh;width:min(30rem,44vw);display:grid}
.mysl{grid-area:1/1;opacity:0;text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)}
.mysl h1{font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.mysl p{max-width:34ch;margin-top:.9rem;font-size:1.08rem;color:#f4f2ea}
.mysl .mysl-duza{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.12;margin:0;max-width:20ch;text-wrap:balance}
.mysl .znak{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#f4f2ea;margin:0 0 .6rem}

.etykiety{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.etykieta{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;display:grid;justify-items:center;gap:.15rem;
  padding:.35rem .6rem .4rem;border:1px solid rgba(255,213,138,.45);background:rgba(8,14,16,.62);backdrop-filter:blur(4px);
  transform:translate(-50%,-100%);opacity:0;transition:border-color .2s,background .2s;white-space:nowrap}
.etykieta .et-grupa{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cieply)}
.etykieta .et-nazwa{font-size:1rem;line-height:1.15}
.etykieta::after{content:"";position:absolute;left:50%;bottom:-9px;width:1px;height:8px;background:rgba(255,213,138,.6)}
.etykieta.blisko .et-nazwa{font-size:1.25rem}
.etykieta.aktywna,.etykieta:hover{border-color:var(--cieply);background:rgba(40,28,10,.72)}

.legenda{position:fixed;z-index:2;left:max(16px,env(safe-area-inset-left,0px));bottom:max(46px,calc(env(safe-area-inset-bottom,0px) + 40px));margin:0;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:#e6ebe4;text-shadow:0 1px 8px rgba(0,0,0,.7);max-width:calc(100% - 32px)}
.legenda .dotyk{display:none}
.mapa{position:fixed;z-index:2;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom,0px));width:min(30rem,46vw)}
.mapa-tor{position:relative;height:1px;background:rgba(238,240,232,.35)}
.mapa-postep{position:absolute;left:0;top:0;height:1px;background:var(--akcent);width:0}
.mapa button{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;background:none;cursor:pointer}
.mapa button::before{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--noc);border:1px solid var(--cieply)}
.mapa button.minieta::before{background:var(--cieply)}

.panel{position:fixed;z-index:6;top:0;right:0;bottom:0;width:min(31rem,100%);overflow-y:auto;background:var(--panel);
  border-left:1px solid var(--linia);backdrop-filter:blur(10px);
  padding-top:max(22px,env(safe-area-inset-top,0px));padding-bottom:max(28px,env(safe-area-inset-bottom,0px));
  padding-left:28px;padding-right:max(28px,env(safe-area-inset-right,0px));animation:wjazd .35s ease-out}
@keyframes wjazd{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.panel-zamknij{cursor:pointer;min-height:42px;padding:0 .9rem;border:1px solid var(--linia);background:none;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.6rem}
.panel-zamknij:hover{border-color:var(--akcent);color:var(--akcent)}
.panel section{display:grid;gap:1rem}
.panel .znak{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cieply)}
.panel h2{font-weight:400;font-size:2.1rem;line-height:1.08;text-wrap:balance}
.panel h2:focus{outline:none}

.bez-lotu{position:relative;z-index:4;background:var(--noc);border-top:1px solid var(--linia);padding-block:clamp(56px,8vw,104px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bez-lotu-w{max-width:60rem;margin-inline:auto;display:grid;gap:1.4rem}
/* film sali: widzi go tylko ten, komu spacer nie ruszył (brak WebGL), więc ładuje się dopiero na żądanie */
.film-sali{width:100%;aspect-ratio:16/9;border:1px solid var(--linia);border-radius:2px;background:#000;display:block}
.bez-lotu h2{font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.05}
.bez-lotu p{color:var(--szarosc);max-width:60ch}
.spis{display:flex;flex-wrap:wrap;gap:.5rem}
.spis button{cursor:pointer;min-height:44px;padding:0 1rem;border:1px solid var(--linia);background:none;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.spis button:hover{border-color:var(--akcent);color:var(--akcent)}
.stopka{font-family:var(--f-mono);font-size:.7rem;color:var(--szarosc);letter-spacing:.06em}


/* bez WebGL: zostaje lista i panele */
body.bez-3d #swiat,body.bez-3d .hud,body.bez-3d .tor{display:none}

@media (max-width:760px){
  .gora{flex-direction:column;gap:.6rem}
  .menu{justify-content:flex-start}
  .menu button{min-height:36px;padding:0 .45rem;font-size:.62rem;letter-spacing:.06em}
  .mysli{top:auto;bottom:16svh;width:auto;right:max(16px,env(safe-area-inset-right,0px));left:max(16px,env(safe-area-inset-left,0px))}
  .mysl h1{font-size:2.3rem}
  .mysl p{font-size:.98rem}
  .mapa{width:auto;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));transform:none;bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 34px))}
  .legenda{font-size:.62rem;bottom:max(64px,calc(env(safe-area-inset-bottom,0px) + 58px))}
  .legenda .mysz{display:none}
  .legenda .dotyk{display:inline}
  .panel{top:auto;height:82svh;width:100%;border-left:0;border-top:1px solid var(--linia);
    padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));animation-name:wjazd-dol}
  @keyframes wjazd-dol{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .blysk.pach{animation:none}
  .panel{animation:none}
}