/* =========================================
   BAZA / TYPO
========================================= */
:root {
  --bg: #111;
  --panel-bg: #ffffff;
  --panel-brd: #d3d3d3;
  --shadow: 0 5px 10px rgba(0,0,0,.55);
  --text: #111;
  --muted: #6b7280;

  /* Hotspoty */
  --hs-info:  #22c55e; /* green */
  --hs-modal: #f59e0b; /* amber */

  /* globalny mnożnik skali HS (mobile: 0.75) */
  --hs-scale: 1;

  /* LINK HOTSPOT */
  --hs-link-img: url("../img/templates/default-img/nav-arrow.png");
  --hs-link-w:   80px;
  --hs-link-h:   30px;
  
  /* INFO & MODAL HOTSPOT — grafiki */
  --hs-info-img:  url("../img/templates/default-img/hs-info.png");
  --hs-pin-city-img: url("../img/templates/default-img/hs-pin-city.png");
  --hs-bike-img: url("../img/templates/default-img/hs-bike.png");
  --hs-pin-city-size: 60px;
  --hs-info-w:    38px;
  --hs-info-h:    38px;

  --hs-modal-img: url("../img/templates/default-img/hs-modal.png");
  --hs-modal-w:   38px;
  --hs-modal-h:   38px;

  /* HS: GRAPHIC */
  --hs-graphic-img: url("../img/templates/default-img/hs-foto.png");
  --hs-graphic-w:   40px;
  --hs-graphic-h:   40px;
  
  /* HS: VIDEO */
  --hs-video-img: url("../img/templates/default-img/hs-video.svg");
  --hs-video-w:   40px;
  --hs-video-h:   40px;

  
  /* Belki */
  --tb-h:      64px;  /* dół */
  --topbar-h:  72px;  /* góra – JS wpisze realną */
  
  --accent: #1566a8;                  /* żółty jak obramowanie aktywnej miniatury */
  --line: rgba(255,255,255,.12);      /* delikatna linia */

  /* ========= MODAL – WSPÓLNE ZMIENNE (domyślnie „light”) ========= */
  --modal-bg: #ffffff;                      /* tło okna */
  --modal-fg: var(--text);                  /* tekst wewnątrz */
  --modal-border: var(--panel-brd);         /* obramowanie */
  --modal-radius: 4px;                      /* zaokrąglenie */
  --modal-padding: 12px 14px;               /* odstępy w środku */
  --modal-overlay: transparent;             /* tu brak overlayu — modal jest samodzielnym panelem */
  --modal-header-weight: 600;

  /* przyciski w obrębie modala (np. .modal-close) */
  --modal-btn-bg: #b4231a;
  --modal-btn-fg: #ffffff;
  --modal-btn-bg-hover: #000000;
  --modal-btn-fg-hover: #ffffff;

  /* akcenty pomocnicze (np. delikatne linie) */
  --modal-line: var(--line);
}

* { box-sizing: border-box; }

/* KLUCZOWE: sztywne przypięcie appki do viewportu */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;          /* zero scrolla */
  overscroll-behavior: none; /* blokada "odbicia" strony (rubber-band), gdy scroll wewnątrz modala dojedzie do granicy */
  background: var(--bg);
}

body, button, select {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  font-weight: 400;
}

/* Panorama wypełnia okno */
#pano {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Fix pod czarny "flash" w Chrome (hardware overlay dla canvasu WebGL) —
   ten sam trik co przy .modal video (patrz niżej). Wyłącza promocję canvasu
   do osobnej warstwy sprzętowej, która czasem miga czernią przy zmianie
   ramki (np. gdy kursor wyjeżdża poza okno przeglądarki, a strona ma scroll). */
#pano canvas {
  filter: opacity(0.9999);
  will-change: filter;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================================
   GÓRNY PANEL (opcjonalny, legacy)
========================================= */
#ui {
  position: absolute; z-index: 10; top: 10px; left: 10px;
  background: var(--panel-bg);
  padding: 6px 8px;
  border: 1px solid var(--panel-brd);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; gap: 6px;
}
#ui select, #ui button {
  font: inherit; padding: 6px 8px;
  border: 1px solid var(--panel-brd);
  border-radius: 6px; background: #fff;
}
#ui button { cursor: pointer; }

/* =========================================
   HOTSPOTY — kotwiczenie kompatybilne z Marzipano
   (Marzipano pozycjonuje .hs, my kotwiczymy .hs-i)
========================================= */

/* Wrapper pozycjonowany przez Marzipano – BEZ transform tutaj */
.hs {
  position: absolute;
  /* zmienne kotwicy dla potomka .hs-i */
  --hs-anchor-x: 50%;   /* 0% lewa, 50% środek, 100% prawa */
  --hs-anchor-y: 50%;   /* 0% góra, 50% środek, 100% dół  */
  --hs-offset-x: 0px;   /* dodatkowe pikselowe przesunięcie */
  --hs-offset-y: 0px;
}

/* Właściwa grafika hotspotu – tu kotwiczymy względem .hs */
.hs-i {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 2px solid #fff;
  background: #1566a8;
  cursor: pointer;
}

/* Typy bazowe – wersja „kolorowa kropka” (gdy nie używasz grafiki) */
.hs.hs-info  .hs-i { background: var(--hs-info); }
.hs.hs-modal .hs-i { background: var(--hs-modal); }

/* Ikony wewnętrzne dla wariantów bazowych (kropka) */
.hs-i::before {
  content: "";
  display: block;
  width: 14px; height: 14px;
  margin: 0 auto;
  background: #fff;
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  transform: translateY(5px);
}
.hs.hs-info .hs-i::before  {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Z"/></svg>');
}
.hs.hs-modal .hs-i::before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20 7H4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm0 10H4V9h16v8ZM7 5h10v2H7z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20 7H4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm0 10H4V9h16v8ZM7 5h10v2H7z"/></svg>');
}



/* ========= WARIANTY „GRAFIKA ZE SKALĄ” (nadpisują bazowe) ========= */

/* Wspólne właściwości wszystkich hotspot-grafik */
.hs.hs-link .hs-i,
.hs.hs-info .hs-i,
.hs.hs-modal .hs-i,
.hs.hs-graphic .hs-i,
.hs.hs-video .hs-i {
  display: block !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.hs.hs-link .hs-i::before,
.hs.hs-info .hs-i::before,
.hs.hs-modal .hs-i::before,
.hs.hs-graphic .hs-i::before,
.hs.hs-video .hs-i::before { content: none !important; display: none !important; }

/* Wymiary i ikona per typ */
.hs.hs-link .hs-i    { width: calc(var(--hs-link-w)    * var(--hs-scale)) !important; height: calc(var(--hs-link-h)    * var(--hs-scale)) !important; background-image: var(--hs-link-img)    !important; cursor: pointer; }
.hs.hs-info .hs-i    { width: calc(var(--hs-info-w)    * var(--hs-scale)) !important; height: calc(var(--hs-info-h)    * var(--hs-scale)) !important; background-image: var(--hs-info-img)    !important; cursor: default; }
.hs.hs-modal .hs-i   { width: calc(var(--hs-modal-w)   * var(--hs-scale)) !important; height: calc(var(--hs-modal-h)   * var(--hs-scale)) !important; background-image: var(--hs-modal-img)   !important; cursor: pointer; }
.hs.hs-graphic .hs-i { width: calc(var(--hs-graphic-w) * var(--hs-scale)) !important; height: calc(var(--hs-graphic-h) * var(--hs-scale)) !important; background-image: var(--hs-graphic-img) !important; cursor: pointer; }
.hs.hs-video .hs-i   { width: calc(var(--hs-video-w)   * var(--hs-scale)) !important; height: calc(var(--hs-video-h)   * var(--hs-scale)) !important; background-image: var(--hs-video-img)   !important; cursor: pointer; }

/* ========= Modyfikatory kotwicy ========= */
.hs--center { --hs-anchor-x: 50%; --hs-anchor-y: 50%; }     /* domyślnie */
.hs--bottom { --hs-anchor-x: 50%; --hs-anchor-y: 100%; }    /* dół-środek */
.hs--top    { --hs-anchor-x: 50%; --hs-anchor-y: 0%; }
.hs--left   { --hs-anchor-x: 0%;  --hs-anchor-y: 50%; }
.hs--right  { --hs-anchor-x: 100%;--hs-anchor-y: 50%; }

/* Pinezka – czubek w punkcie */
.hs--pin { --hs-anchor-x: 50%; --hs-anchor-y: 100%; --hs-offset-y: 2px; }

/* Hotspot zawsze ma własny stacking context */
.hs { position: relative; z-index: 1; pointer-events: none; }
.hs > .hs-i { pointer-events: auto; }

/* Hoverowany hotspot jest NA WIERZCHU – jego dymek nie będzie przykryty innymi */
.hs:hover { z-index: 9999; }

/* Pseudo-element dymka nie łapie kursora, więc nie „zabija” hovera pod spodem */
.hs .hs-i::after,
.hs .hs-i::before { pointer-events: none; }


.hs .hs-i{
  transform:
    translate(
      calc(-1 * var(--hs-anchor-x) + var(--hs-offset-x)),
      calc(-1 * var(--hs-anchor-y) + var(--hs-offset-y))
    )
    translateZ(0);
  backface-visibility: hidden;
}
/* tylko jeśli używasz gdzieś filter: drop-shadow(...) na HS */
.hs .hs-i { filter: none; }            /* albo przesuń drop-shadow na statyczny sprite */



/* =========================================
   MODAL — BAZA + SZABLONY KOLORYSTYKI
   (domyślnie „light” jak dotychczas)
========================================= */
.modal {
  position: fixed;
  z-index: 100000;
  left: 50vw; top: 50vh;
  transform: translate(-50%, -50%);
  width: 640px; height: 420px;
  max-width: 92vw; max-height: 80vh;
  overflow: auto;
  background: var(--modal-bg);
  color: var(--modal-fg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  box-shadow: var(--shadow);
  display: none;
}
/* PÓŁPRZEZROCZYSTY BACKDROP POD MODALEM (23% czerni) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.53);
  z-index: 99990;          /* poniżej .modal (100000), powyżej reszty UI */
  display: none;           /* JS przełącza na block przy otwartym modalu */
  pointer-events: auto;
}

.modal-header {
  font-weight: var(--modal-header-weight);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  align-items: start;
  padding-top: 3px;
}

.modal--auto {
  width: auto; height: auto;
  max-width: 40vw; max-height: 88vh;
  overflow: visible; padding: 8px 10px;
  min-width: 600px;
}
.modal--auto #modalTitle {
    padding-left: 10px;
    width: 100%;
	padding-right: 10px;
	max-width: 590px;
}
span#modalTitle {
    font-size: 1.2em;
}
div#modalBody {
    padding: 0px;
}
.modal-desc {
    padding: 10px;
}

/* ==== TEMATY (nakładane jako druga klasa na .modal) ==== */
/* Jasny – 1:1 jak dotychczas (opcjonalny alias) */
.modal.is-theme-light {
  --modal-bg: #ffffff;
  --modal-fg: var(--text);
  --modal-border: var(--panel-brd);
  --modal-btn-bg: #b4231a;
  --modal-btn-fg: #ffffff;
  --modal-btn-bg-hover: #000000;
  --modal-btn-fg-hover: #ffffff;
  --modal-line: var(--line);
}

/* Ciemny (grafit) */
.modal.is-theme-dark {
  --modal-bg: #0f1117;
  --modal-fg: #e5e7eb;
  --modal-border: #1f2330;
  --modal-btn-bg: #374151;
  --modal-btn-fg: #e5e7eb;
  --modal-btn-bg-hover: #111827;
  --modal-btn-fg-hover: #ffffff;
  --modal-line: rgba(255,255,255,.12);
}

/* Granatowo-niebieski */
.modal.is-theme-blue {
  --modal-bg: #0c1220;
  --modal-fg: #cfe2ff;
  --modal-border: #1b2a4b;
  --modal-btn-bg: #2563eb;
  --modal-btn-fg: #ffffff;
  --modal-btn-bg-hover: #0b4ddc;
  --modal-btn-fg-hover: #ffffff;
  --modal-line: rgba(96,165,250,.35);
}

/* obraz w modalu (help/info/graphic) */
.modal .fit-image {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: min(80vh, 600px);
    object-fit: contain;
    margin: 0 auto;
}

/* podpis pod zdjęciem */
.modal .modal-caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  opacity: .85;
}

/* wideo w modalu (spójne z obrazem) */
.modal video {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
  background: #000;
  border: 0px solid var(--modal-line);
  border-radius: 4px;
}

.modal-close {
  border: 0;
  background: var(--modal-btn-bg);
  color: var(--modal-btn-fg);
  width: 36px;
  height: auto;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
  font-size: 25px;
  line-height: 0.8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
}
.modal-close:hover { background: var(--modal-btn-bg-hover); color: var(--modal-btn-fg-hover); }



.modal { pointer-events: auto; }

/* === Modal MAPY (ciemny motyw; zachowujemy Twoje nadpisania) === */
#modal.modal--map {
  width: 900px; height: 600px; max-width: 92vw; max-height: 92vh;
  background: #141414; color: #fff; border: 1px solid #1f1f1f;
  display: flex; flex-direction: column; overflow: hidden;
}
#modal.modal--map .modal-header { background: transparent; border-bottom: 1px solid #1f1f1f; }
#modal.modal--map #modalTitle { color: #fff; }
#modal.modal--map #modalBody  { color: #eaeaea; flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
#modal.modal--map #mapWrap    { position: absolute; inset: 0; width: 100%; height: 100%; }

/* piny poi-pin */
.poi-pin{
  position:relative;width:30px;height:30px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.25);border:2px solid #fff;
}
.poi-pin::after{
  content:attr(data-txt);position:absolute;inset:0;display:grid;place-items:center;
  transform:rotate(45deg);color:#fff;font-weight:700;font-size:13px;
}
.pin-zielony{background:#2e7d32;} .pin-niebieski{background:#1565c0;} .pin-czerwony{background:#c62828;}
.pin-pomaranczowy{background:#ef6c00;} .pin-zolty{background:#f6c10e;} .pin-fioletowy{background:#7b1fa2;}
.pin-szary{background:#9a9a9a;}
.pin-niebieski-2{background:#174880;}



/* lista miniaturek */
.thumb-list { 
padding: 6px 4px; 
display: flex; 
flex-direction: column; gap: 2px; }

/* MINIATURY */
.thumb {
  position: relative; display: block;
  width: calc(100% - 4px);
  margin: 2px;
  padding: 0;
  border: 5px solid #2f2f2f;
  background: #111;
  cursor: pointer;
  border-radius: 0 !important;
  outline: none;
}
.thumb::before { content:""; display:block; padding-top:55.5556%; } /* 18:10 */
.thumb img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:block; border-radius:0 !important;
}
.thumb .t-meta {
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.60); color:#fff;
  padding:6px 8px; border-radius:0 !important;
}
.thumb .t-title {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 600;
}
.thumb .t-sub   { display:none; }
.thumb:hover { outline: 5px solid #fff; outline-offset: -5px; }
.thumb.active { outline: 5px solid #1566a8; outline-offset: -5px; }
.thumb.active:hover { outline-color: #fff; }

/* =========================================
   TOOLBAR (dół) – pełna szerokość
========================================= */
#toolbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--tb-h);
  z-index: 950;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  background: rgb(9 39 111 / 60%);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 0 !important;
}

/* =========================================
   STOPKA (credit) – lewy róg toolbara
========================================= */
.toolbar-credit {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  pointer-events: auto;
  cursor: default;
  opacity: 0.5;
  transition: opacity 0.22s ease;
  line-height: 1.25;
  z-index: 1;
}
.toolbar-credit:hover {
  opacity: 1;
}
.toolbar-credit .tc-l1,
.toolbar-credit .tc-l2 {
  display: block;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  user-select: none;
  -webkit-user-select: none;
}

/* MOBILE: patrz sekcja poniżej (767.98px) */

/* reset przycisków, żeby nie było szarego pola przed inicjalizacją JS */
#toolbar .tb {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  border-radius: 0 !important;
  width: auto !important; /* szerokość nadaje JS */
}
#toolbar .tb::-moz-focus-inner { border: 0; padding: 0; }

#toolbar .tb img,
#toolbar .tb svg {
  display: block;
  width: var(--tb-size, 22px);
  height: var(--tb-size, 22px);
  object-fit: contain;
  background: transparent;
}

/* =========================================
   TOPBAR (górna belka) – pełna szerokość
========================================= */
#topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    /* Wysokość desktopu nie może zależeć od --topbar-h: ta zmienna jest
       wynikiem pomiaru i po wyjściu z mobile utrwalałaby mobilny wymiar. */
    height: 72px;
    z-index: 955;
    display: flex;
    align-items: center;
    background: rgb(18 18 61 / 80%);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
}

/* Wnętrze bez grida (desktop) – absolutne bloki */
#topbar .topbar-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* LEWA: logo */
#topbar .top-left{
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; min-width: 0;
  justify-content: flex-start;
  padding-left: 5px;
}
#topbar .top-left img {
  height: calc(var(--topbar-h) - 20px);
  width: auto;
  display: block;
}

/* startowo chowamy logo; JS odsłania po załadowaniu */
#topLogo { visibility: hidden; }

/* PRAWA */
#topbar .top-right{
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; min-width: 0;
  justify-content: flex-end;
  padding-right: 10px;
}
#topbar .top-right .top-btn{
  appearance: none; border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: #fff; border-radius: 3px;
  height: 32px; padding: 0 10px; cursor: pointer;
}
#topbar .top-right .top-btn:hover{ background: rgba(255,255,255,.06); }

/* ŚRODEK – tytuł + info (desktop: absolutnie pośrodku) */
#topbar .top-center{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#topSceneTitle{
  margin:0;
  font-weight:700;
  font-size:20px;
  line-height:1;
  color:#fff;
  text-align:center;
  pointer-events: none;
  max-width: min(80vw, 1200px);
  overflow: unset;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Przycisk „i” (desktop) */
#topbar .top-center .top-info-btn {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: auto;
    height: 28px;
    border-radius: 2px;
    background: #2e6cc5;
	/*background: linear-gradient(to bottom, #1f233c 0%, #21539b 75%, #21539b 100%);*/
    border: 1px solid rgb(33 83 155);
    /* box-shadow: 0 2px 8px rgba(0,0,0,.35); */
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    color: #2e6cc5;
    min-width: 28px;
}
#topbar .top-center .top-info-btn:hover::before {
  /*content: "i";*/
  color: currentColor;
  transition: color .9s ease;
}
#topbar .top-center .top-info-btn:hover {
    background: #ffffff;
    border: 1px solid #e1e1e1;
}



#topbar .top-center .top-info-btn::before {
    content: "i";
    display: block;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 28px;
    font-family: "Montserrat", system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size: 1.3em;
    margin-top: -0px;
}


/* =========================================
   PANO NAV: Poprzedni / Następny
========================================= */
:root { --sidebar-offset: 0px; }

.pano-nav{
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 940;
  width: 42px; height: 80px;
  border: 0; border-radius: 0px;
  background: rgba(20,20,24,.55);
  cursor: pointer;
  padding: 0;
  outline: none;
  will-change: background, box-shadow, transform;
  transition: background .98s ease;
}
.pano-nav:hover,
.pano-nav:focus{
  background: rgba(20,20,24,1);
  transform: translateY(-50%) scale(1);
}
.pano-nav:active{ transform: translateY(-50%) scale(0.98); }
.pano-nav:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.4);
}
.pano-nav::before{
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: #fff;
  mask: center / 38px 38px no-repeat;
  -webkit-mask: center / 38px 38px no-repeat;
}
.pano-nav.prev{ left: calc(var(--sidebar-offset) + 0px); }
.pano-nav.prev::before{
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
}
.pano-nav.next{ right: 0px; }
.pano-nav.next::before{
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 7.41 13.17 12 8.59 16.59 10 18l6-6-6-6-1.41 1.41z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8.59 7.41 13.17 12 8.59 16.59 10 18l6-6-6-6-1.41 1.41z"/></svg>');
}

.langbar{display:flex;gap:6px}
.langbar .lang{border:1px solid #2a2f3a;background:#161a22;color:#cfd6df;border-radius:2px;padding:6px 10px;cursor:pointer}
.langbar .lang.is-active{background:#f6c90e;color:#000;border-color:#f6c90e}

.langbar .lang {
    border-radius: 2px;
    padding: 2px 4px;
}

/* KOMPAS */
#compass {
  position: fixed !important;
  right: 14px !important;
  bottom: 80px !important;
  width: 80px !important;
  height: 80px !important;
  z-index: 20;
  cursor: auto !important;
  opacity: 0.5;
}
#compass:hover { opacity: 0.9; }
#compass img{
  width: auto !important;
  height: 100% !important;
  display: block;
}

/* =========================================
   LOADER SCENY (per-scena)
========================================= */
:root{
  --loader-w: 440px;
  --loader-h: 12px;
  --loader-bg: rgba(255,255,255,.75);
  --loader-fill: #1566a8;
  --loader-text: #fff;
  --loader-radius: 3px;
  /*--loader-shadow: 0 6px 24px rgba(0,0,0,.35);*/
  --loader-gap: 8px;
}

#sceneLoader{
  position: fixed;
  left: 50%;
  bottom: calc(var(--tb-h) + 14px);
  transform: translateX(-50%);
  z-index: 960;
  display: none;
  pointer-events: none;
}

#sceneLoader .loader-inner{
  display: flex;
  flex-direction: column;          /* tytuł NAD paskiem */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  backdrop-filter: blur(2px);
  background: rgba(20,20,24,.65);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: var(--loader-shadow);
}

#sceneLoader .loader-title{
  color: var(--loader-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  width: var(--loader-w);
  max-width: 88vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  margin: 0;
}

#sceneLoader .loader-bar{
  width: var(--loader-w);
  max-width: 88vw;
  height: var(--loader-h);
  background: var(--loader-bg);
  border-radius: var(--loader-radius);
  overflow: hidden;
}

#sceneLoader .loader-fill{
  width: 0%;
  height: 100%;
  background: var(--loader-fill);
  border-radius: var(--loader-radius);
  transition: width .18s ease;
}

#sceneLoader .loader-label{
  min-width: 48px;
  text-align: center;
  color: var(--loader-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}

/* =========================================
   MOBILE: skalowanie HS
========================================= */
@media (max-width: 768px) and (orientation: portrait){
  :root { --hs-scale: .75; }
}

/* =========================
   MOBILE (pion): header 2-rzędowy
========================= */
@media (max-width: 768px) and (orientation: portrait) {

  button.tb { height: 35px !important; }

  .thumb .t-title { font-size: 11px; line-height: 1.15; }

  #compass { width: 60px !important; height: 60px !important; }

  /* Topbar = 2 rzędy */
  #topbar .topbar-inner{
    display: grid;
    grid-template-rows: auto auto;      /* 1: logo/prawa, 2: tytuł */
    grid-template-columns: 1fr 1fr 1fr; /* (dla rzędu 1) */
    align-items: center;
    height: 100%;
  }

  /* Odpięcie absolute w mobile */
  #topbar .top-left,
  #topbar .top-right,
  #topbar .top-center{
    position: static;
    inset: auto;
    transform: none;
  }

  /* RZĄD 1 */
  #topbar .top-left  { grid-row: 1; grid-column: 1 / 3; justify-content: flex-start; padding-left: 10px; }
  #topbar .top-right { grid-row: 1; grid-column: 3 / 4; justify-content: flex-end;  padding-right: 10px; }

  /* RZĄD 2: tytułowy pasek */
  #topbar .top-center{
    grid-row: 2; grid-column: 1 / 4;
    padding: 6px 10px 8px 10px;
    background: rgba(20,20,24,.98);
    border-top: 1px solid rgba(255,255,255,.12);
    display: block;
    pointer-events: auto;
  }

  /* wrapper 3 kolumny: [i] [tytuł] [placeholder] */
  #topbar .top-center .top-title-wrap{
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* „i” – lewa kolumna */
  #topInfoBtn{
    grid-column: 1;
    width: 28px; height: 28px;
    border-radius: 3px;
    margin: 0;
    justify-self: start;
    align-self: center;
    position: static;
  }

  /* Tytuł – środek i WYŚRODKOWANIE */
  #topSceneTitle{
    grid-column: 2;
    text-align: center;
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    width: 100%;
  }

  /* Prawy placeholder – szerokość jak „i” */
  #topbar .top-center .top-title-wrap::after{
    content: "";
    grid-column: 3;
    width: 28px; height: 28px;
    display: block;
    justify-self: end;
  }
  
.hs-i:hover::after {
    text-align: center;
    white-space: normal;
    min-width: 225px;
    max-width: 60vw;
}
  
}

/* =========================
   MOBILE HEADER (<=768px)
========================= */
@media (max-width: 768px) {
  #topbar {
    height: auto; /* naturalna wysokość – JS wpisze ją do --topbar-h */
    padding-bottom: 0;
  }
  #topbar .topbar-inner { height: auto; }

  /* Wyłącz absolutne centrowanie środka */
  #topbar .top-center { position: static; }

  /* Pasek tytułu */
  #topbar .top-title-wrap {
    display: grid;
    grid-template-columns: 40px 1fr 40px; /* [i] | tytuł | spacer */
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #0f1117;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 8px 10px;
  }

  /* „i” – po LEWEJ */
  #topInfoBtn.top-info-btn {
    grid-column: 1;
    justify-self: start;
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    width: 28px; height: 28px;
    border-radius: 3px;
    background: #2b2f39;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: none;
  }
  #topInfoBtn.top-info-btn::before { line-height: 28px; }

  /* Tytuł – na środku, może się zawijać */
#topSceneTitle.top-title {
    grid-column: 2;
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
}

  /* Symetryczny „spacer” po prawej */
  #topbar .top-title-wrap::after {
    content: "";
    grid-column: 3;
    justify-self: end;
    width: 28px; height: 28px;
  }

  /* Sidebar startuje pod całym headerem */
  .sidebar { top: var(--topbar-h) !important; }
}

/* MOBILE: logo ograniczenia */
@media (max-width: 768px) {
  #topbar .top-left,
  #topbar .top-right { height: auto; }

  #topbar .top-left { padding: 8px; }

  #topbar .top-left img {
    display: block;
    height: auto;
    width: auto;
    max-height: 75px;
    max-width: 48vw;
  }
}

/* Tooltips CSS dla paska i przycisku "i" */
#tb-tip {
  position: fixed;
  z-index: 10001;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  background: rgba(51,51,51,.92);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
  display: none;
  width: auto;
  max-width: 80vw;
  white-space: nowrap;
  box-sizing: border-box;
  transform: translate(-50%, -45px);
  left: -9999px; top: -9999px;
}

#toolbar { position: fixed; overflow: visible; isolation: isolate; }
#topbar  { position: fixed; overflow: visible; isolation: isolate; }

/* nośniki: przyciski mają kontekst pozycjonowania */
#toolbar .tb,
#topInfoBtn { 
position: relative; 
}

#navPrev,
#navNext { 
position: fixed;
}

/* Jedyny kontrakt tooltipa w spacerze: data-tip.
   Jeden tooltip jest montowany bezpośrednio w body, więc stan ani opacity
   kontrolki nie mogą wpływać na jego widoczność. */
#navPrev[data-tip],
#navNext[data-tip] { position:fixed; }
/* Przycisk informacji jest celowo pod tytułem; nie może wejść do normalnego
   przepływu i zmienić wysokości wrappera tytułu. */
#topInfoBtn[data-tip] { position:absolute; }
[data-tip]:not(#fundingToggle)::after,
#fundingToggle[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  transform: translateX(-50%);
  background: var(--tpl-tooltip-bg, rgba(1,0,0,.92));
  color: var(--tpl-tooltip-text, #fff);
  font-size: 14px;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid var(--tpl-tooltip-border, transparent);
  box-shadow: 0 0px 2px rgba(0,0,0,.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10002;
}

/* Pokazanie jest wspólne dla wszystkich tooltipów. */
[data-tip]:not(#fundingToggle):hover::after,
[data-tip]:not(#fundingToggle):focus-visible::after,
#fundingToggle[data-tip]:hover::before,
#fundingToggle[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* HS: obniżenie dymka względem wspólnego tooltipa (zostaje bez zmian) */
.hs .hs-i[data-tip]::after {
    bottom: calc(100% + 7px);
    max-width: 360px !important;
    text-wrap: auto;
    width: max-content;
    text-align: center;
    transform: translateX(-50%) translateY(-4px);
    transition: opacity .12s ease;
}

/* HS: mniejszy „skok” przy pokazaniu (zostaje bez zmian) */
.hs .hs-i:hover::after,
.hs .hs-i:focus-visible::after {
  transform: translateX(-50%) translateY(-4px);
}


/* 1) standard: nad przyciskiem, ale wyżej o +6px względem defaultu */
#topInfoBtn[data-tip]::after,
#audioBtn[data-tip]::after,
#hsToggleBtn[data-tip]::after {
  bottom: calc(100% - 80px); 
  transform: translateX(-50%); 
}

/* 1a) jeśli chcesz zachować ten sam „skok” przy hoverze co globalnie: */
#topInfoBtn[data-tip]:hover::after,
#topInfoBtn[data-tip]:focus-visible::after,
#audioBtn[data-tip]:hover::after,
#audioBtn[data-tip]:focus-visible::after,
#hsToggleBtn[data-tip]:hover::after,
#hsToggleBtn[data-tip]:focus-visible::after {
  transform: translateX(-50%) translateY(-8px);
}




/* Mobile: ukryj podpisy miniatur (nazwa + ID) poniżej 768px */
@media (max-width: 767.98px) {
  #sidebar .thumb .t-meta,
  #sidebar .thumb .t-title,
  #sidebar .thumb .t-sub {
    /*/display: none !important;*/
  }

  /* Opcjonalnie: dociśnij obrazek, jeśli był padding pod podpisy */
  #sidebar .thumb {
    padding-bottom: 0;
  }
  
.sidebar {
    width: 280px;
    max-width: 44vw;
}
  
}




/* ===== Firefox (Gecko) ===== */
@-moz-document url-prefix() {
  #sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--tpl-scrollbar, #393f69) transparent;
  }
  #sidebar:hover {
    scrollbar-color: var(--tpl-scrollbar-hover, var(--accent)) transparent;
  }
}

/* ===== Miniatury: pełna szerokość, bez obcięć ===== */
.thumb {
  width: 100%;
  margin: 0;                 /* równe krawędzie z boków */
  border: 4px solid #2f2f2f; /* lub 5px jeśli wolisz grubiej */
}
.thumb::before {             /* proporcje kadru */
  padding-top: 56.25%;       /* 16:9 (zmień na 55.5556% dla 18:10) */
}
 /* delikatny bufor pod overlay z tytułem */
.thumb .t-meta { padding: 6px 8px; }

 */
#sidebar {
  /* niech scrollbar nie zmienia layoutu i nie wpływa na inne warstwy */
  scrollbar-gutter: stable both-edges;
  contain: paint;              /* odcina malowanie w obrębie sidebara */
  will-change: scroll-position;
  backface-visibility: hidden; /* docięcie artefaktów podczas animacji */
}

/* WebKit scrollbar – bez kolorowania narożników/toru (zero czarnych wstawek) */
#sidebar::-webkit-scrollbar { width: 16px; height: 16px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb {
  background-color: #343a46;
  border-radius: 10px;
  border: 4px solid transparent; /* „miękkie” krawędzie */
  background-clip: padding-box;
}
#sidebar::-webkit-scrollbar-corner { background: transparent; }

/* Dodatkowo (opcjonalnie): brak „przeskoku” przy pojawianiu się scrolla */

/* === 2) Warstwy, które nie mogą „migotać” przy ruchu sidebara === */
/* Warstwy, które izolujemy – BEZ ruszania transformów w modalu */
#topbar,
#toolbar {
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

/* now mody */

/* dokładnie element <video> w modalu */
.modal video {
  filter: opacity(0.9999);        /* wizualnie bez zmian, ale zabrania overlay */
  will-change: filter;
  transform: translateZ(0);       /* własna warstwa */
  backface-visibility: hidden;
}


/*/ 

/* ===== Lektor (audio) – przycisk w topbarze ===== */
#audioBtn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  border-radius: 4px;
  height: 36px;
  padding: 0 10px;
  cursor: pointer;
  display: none;           /* domyślnie ukryty, pokaże JS jeśli jest plik audio */
  align-items: center;
  gap: 8px;
}
#audioBtn:hover { background: rgba(255,255,255,.06); }
#audioBtn.is-active { background: rgba(255,255,255,.12); }

/* Ikona głośnika / pauzy – wewnątrz przycisku */
#audioBtn .ico {
  width: 18px; height: 18px; display: inline-block; background: #fff;
  mask: center/18px 18px no-repeat; -webkit-mask: center/18px 18px no-repeat;
}
#audioBtn .lbl { font-weight: 600; font-size: 13px; }

#audioBtn .ico--play  { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M8 5v14l11-7z"/></svg>'); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M8 5v14l11-7z'/></svg>"); }
#audioBtn .ico--pause { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>"); }

/* W wersji mobile 2-rzędowej niech siedzi po LEWEJ obok logo */
@media (max-width: 768px) {
  #audioBtn { height: 32px; }
}





/* Lektor (audio) – przycisk w PRAWEJ części topbara */
#audioBtn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  border-radius: 4px;
  height: 36px;
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;         /* WIDOCZNY od razu */
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
#audioBtn:hover { background: rgba(255,255,255,.06); }
#audioBtn.is-active { background: rgba(255,255,255,.12); }
#audioBtn.is-disabled { opacity: .45; cursor: not-allowed; }
#audioBtn.is-disabled {
    opacity: .45;
    cursor: not-allowed !important;
    display: none;
}

#audioBtn .ico {
  width: 18px; height: 18px; display: inline-block; background: #fff;
  mask: center/18px 18px no-repeat; -webkit-mask: center/18px 18px no-repeat;
}
#audioBtn .lbl { font-weight: 600; font-size: 13px; }

#audioBtn .ico--play  { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M8 5v14l11-7z"/></svg>'); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M8 5v14l11-7z'/></svg>"); }
#audioBtn .ico--pause { mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>"); }

@media (max-width: 990px) { #audioBtn { height: 32px; } }

/* (zostaw) fix pod video-modal – to już masz */
.modal video { filter: opacity(0.9999); will-change: filter; transform: translateZ(0); backface-visibility: hidden; }

/* lang */
/* ===== Lang dropdown ===== */
.langbar { position: relative; display: inline-block; }
.langdd { position: relative; display: inline-block; }
.langdd-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:26px; padding:0; border:0; background:transparent; cursor:pointer;
  border-radius:4px; outline:none;
}
.langdd-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(245,212,66,.6); }
.langdd-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 210px;
    background: #0f141b;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
	box-shadow: none;
    padding: 6px;
    z-index: 50;
}
.langdd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
    border-radius: 2px;
    text-align: left;
}
.langdd-item:hover { background: rgba(255,255,255,.06); }
.langdd-item[aria-selected="true"] {
    background: rgb(117 190 255 / 18%);
}
.langdd-name { font-size: 14px; line-height: 1.3; }

.flag-img { display:block; object-fit:cover; }
.flag-img--rounded {
    border-radius: 2px;
}
.langdd {
  position: relative;
  display: inline-block;
}
.langdd::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 10px;          /* szerokość mostu */
  /* background: rgba(255,0,0,.1);  <- debug */
}
.langdd-menu { top: calc(100% + 8px); }



/* Hover-to-open tylko na desktopie (ma pointer i hover) */
@media (hover: hover) and (pointer: fine) {
  .langdd:hover .langdd-menu,
  .langdd:focus-within .langdd-menu {
    display: block !important;   /* nadpisuje [hidden] z UA */
  }
}


/* hold */
/* Mobile: ukryj podpisy miniatur poniżej 768px */
@media (max-width: 767.98px) {
  #sidebar .thumb .t-meta,
  #sidebar .thumb .t-title,
  #sidebar .thumb .t-sub { display: none !important; }
}

/* Tooltip dla long-press na miniaturze */
.thumb-tip {
    position: fixed;
    z-index: 1000;
    max-width: min(80vw, 250px);
    padding: 8px 10px;
    border-radius: 2px;
    background: rgb(15 20 27 / 85%);
    border: 1px solid rgba(255,255,255,.12);
    /* box-shadow: 0 10px 30px rgba(0,0,0,.45); */
    color: #e5e7eb;
    font-size: 14px;
    line-height: 1.35;
    pointer-events: none;
    transform: translate(-50%, -8px);
    white-space: normal;
    word-break: break-word;
    text-align: center;
}
.thumb-tip__sub {
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: #9aa0a6;
}


/* mini map */
/* Tooltip miniatury na mapie (Leaflet) */
.leaflet-tooltip.map-tip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.leaflet-pane.leaflet-tooltip-pane {
    width: 250px;
}


.map-tip-box {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  max-width: min(70vw, 340px);
  padding: 8px;
  background: rgba(15,20,27,0.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  /*box-shadow: 0 10px 30px rgba(0,0,0,.45);*/
  color: #e5e7eb;
}

.map-tip-img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  background: #111;
}

.map-tip-title {
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
}
.map-tip-title {
    font-size: 13px !important;
    font-family: 'Montserrat';
}

/* Przełącznik niezależnych warstw w mapie spaceru. */
#modal.modal--map .leaflet-control-layers {
  border: 1px solid rgba(15,20,27,.38);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
#modal.modal--map .leaflet-control-layers-toggle {
  width: 30px;
  height: 30px;
}
#modal.modal--map .leaflet-control-layers-expanded {
  padding: 7px 9px 7px 7px;
  color: #1f2937;
  font: 600 12px/1.35 'Montserrat', Arial, sans-serif;
}
#modal.modal--map .leaflet-control-layers-selector {
  margin: 0 6px 0 0;
  vertical-align: -1px;
}
#modal.modal--map .map-layer-control__title {
  display:block;
  margin: 0 0 6px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(31,41,55,.18);
  color: #4b5563;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#modal.modal--map .map-layer-control__title--action {
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  position:relative;
}
#modal.modal--map .map-layer-control__title--action:hover,
#modal.modal--map .map-layer-control__title--action:focus-visible {
  color:#111827;
  outline:none;
}
/* Nie używamy opacity na rodzicu: tooltip jest jego pseudo-elementem i musi
   pozostać w pełni czytelny także wtedy, gdy sama grupa jest wyłączona. */
#modal.modal--map .map-layer-control__title--action.is-all-hidden { color:rgba(75,85,99,.55); }
#modal.modal--map .map-layer-control__section + .map-layer-control__title {
  margin-top:8px;
}
#modal.modal--map .map-layer-control__section label {
  display:block;
}
#modal.modal--map .map-layer-control__section label + label {
  margin-top:5px;
}
#modal.modal--map .leaflet-control-layers label + label {
  margin-top: 5px;
}

/* error modal */
.modal-desc.error {
    min-width: 500px;
    max-width: 40vw;
}

/* ===== MODAL SKINS ===== */
#modal { /* baza, jeśli potrzebujesz */
  /* nic nie zmieniam – masz swoje style bazowe */
}

/* Helper: elementy wewnętrzne, które najczęściej kolorujemy */
#modal .modal-desc,
#modal .modal-caption,
#modal #mapWrap { /* powierzchnie kontentu */ }

#modal .modal-header,
#modal .modal-footer { /* jeśli masz header/footer */ }

/* Neutral (domyślna) */
#modal.modal--skin-neutral {
  --m-bg: #1c1f27; --m-fg: #e5e7eb; --m-brd: rgba(255,255,255,.12);
  --m-accent: #8b949e;
  --m-link: #cc0000;
}

/* Dark */
#modal.modal--skin-dark {
  --m-bg: #0f1218; --m-fg: #e6edf3; --m-brd: rgba(255,255,255,.14);
  --m-accent: #a5b4fc;
  --m-link: #cc0000;
}

/* Light */
#modal.modal--skin-light {
  --m-bg: #ffffff; --m-fg: #111827; --m-brd: rgba(0,0,0,.12);
  --m-accent: #2563eb;
  --m-link: #cc0000;
}

/* Blue */
#modal.modal--skin-blue {
  --m-bg: #1566a8; --m-fg: #dbeafe; --m-brd: rgba(147,197,253,.25);
  --m-accent: #60a5fa;
  --m-link: #ffffff;
}

/* White */
#modal.modal--skin-white {
  --m-bg: #f9fafb; --m-fg: #0f172a; --m-brd: rgba(0,0,0,.10);
  --m-accent: #111827;
  --m-link: #cc0000;
}

/* Black */
#modal.modal--skin-black {
  --m-bg: #000000; --m-fg: #e5e7eb; --m-brd: rgba(255,255,255,.18);
  --m-accent: #9ca3af;
}

/* Danger (np. błędy) */
#modal.modal--skin-danger {
  --m-bg: #a61f1f; --m-fg: #ffffff; --m-brd: #ef7777;
  --m-accent: #ffd2d2;
  --m-link: #ffffff;
}

/* Wspólne mapowanie zmiennych na realne elementy */
/* === Skórki: TYLKO modale opisowe, bez mapy === */
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption,
#modal:not(.modal--map)[class*="modal--skin-"] .fit-image {
  background: var(--m-bg);
  color: var(--m-fg);
}

#modal:not(.modal--map)[class*="modal--skin-"] {
  border: 1px solid var(--m-brd);
  background: var(--m-bg);
  color: var(--m-fg);
}

#modal:not(.modal--map)[class*="modal--skin-"] h1,
#modal:not(.modal--map)[class*="modal--skin-"] h2,
#modal:not(.modal--map)[class*="modal--skin-"] h3 {
  color: var(--m-fg);
}

/* Linki tylko w treści opisu / podpisie, nie w mapie */
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc a,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption a {
  color: var(--m-link);
  font-weight: 800;
  text-decoration: none;
  background-color: #e9e9e9;
  padding: 4px 10px;
  border-radius: 2px;
}
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc a:hover,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption a:hover {
  color: var(--m-bg);
  background-color: #414141;
}
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc a::before,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption a::before {
  content: "";
}
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc a.alink::before,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption a.alink::before {
  content: "link: ";
  color: var(--m-accent);
  font-weight: normal;
}
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc a:hover::before,
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption a:hover::before {
  color: #989898 !important;
}

/* Podpis pod zdjęciem (tylko w modalach opisowych) */
#modal:not(.modal--map)[class*="modal--skin-"] .modal-caption {
  border-top: 1px solid var(--m-brd);
  padding: 10px 12px;
  font-size: 12px;
  color: color-mix(in oklab, var(--m-fg) 88%, #000 2%);
}

/* Wariant błędu (tylko opisowe) */
#modal:not(.modal--map)[class*="modal--skin-"] .modal-desc.error {
  border-left: 3px solid var(--m-accent);
  padding-left: 12px;
}

/* (opcjonalnie) doprecyzowanie dla mapy: neutralne tło */
#modal.modal--map #mapWrap {
  background: transparent;
  color: inherit;
}







/* ===== Toolbar (rozmiary + ikony) ===== */
:root { --tb-size: 22px; }
#toolbar .tb {
  padding:0; margin:0; border:0; background:transparent; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tb-size); height:var(--tb-size);
}
#toolbar .tb img, #toolbar .tb svg {
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ===== Flagi w dropdownie językowym ===== */
.flag-img { display:block; }
.flag-img--rounded { border-radius:2px; }

/* ===== Modal: warianty layoutu ===== */
.modal.modal--auto { display:block; }
.modal.modal--auto #modalBody { height:auto; overflow:visible; }

.modal.modal--map { display:flex; flex-direction:column; overflow:hidden; }
.modal.modal--map #modalBody {
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
}
#mapWrap { position:absolute; inset:0; width:100%; height:100%; }

/* ===== Modal: treści i komunikaty ===== */
.modal video {
  width:100%; height:auto; display:block; background:#000;
}

.modal-caption { padding:10px 0 0; font-size:13px; color:#9aa3b2; }
.modal-msg { padding:12px; font-size:14px; }
.modal-msg--muted { color:#6b7280; }
.modal-error { padding:12px; font-size:14px; color:#fca5a5; }
.modal-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:8px; }

/* ===== Loader ===== */
#sceneLoader { display:none; }
#sceneLoader .loader-fill { width:0%; transition:width .15s linear; }

/* ===== Tooltip miniatur (long-press) ===== */
.thumb-tip {
  position: fixed;
  z-index: 9999;
  transform: none;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 8px 10px;
  background: rgb(15 20 27 / 92%);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  pointer-events: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
}
.thumb-tip__sub { display:block; opacity:.75; font-size:11px; margin-top:2px; }

/* ===== (opcjonalnie) helper do ukrywania ===== */
.hidden { display:none !important; }



/* BYŁO – to powoduje pętlę */

/* MA BYĆ – brak pętli: obrazek ma height:auto i tylko limit */
#topbar .top-left img {
    height: auto;
    /* max-height: calc(var(--topbar-h) - 20px); */
    width: auto;
    display: block;
}

@media (max-width: 768px) {
  #topbar .top-left img {
    max-height: 56px; /* lub 60–75px – jak wolisz */
  }
}
/* upewnij się, że pasek ładowania jest nad BlackFade */
#sceneLoader { position: absolute; z-index: 3; }

/* Hotspoty są elementami DOM nad kanwą. Nie pokazuj ich, dopóki silnik nie
   narysuje widocznych ścian nowej panoramy. */
body.is-loading-scene #pano .hs { visibility: hidden; }




/* Treść modala: pionowy scroll, max 400px */
.modal-scrollbox {
  max-height: 400px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px; /* żeby nie „podskakiwał” tekst przy pojawieniu się paska */
}

/* Przy długich akapitach – wygodniejsza typografia */
.modal-desc p { margin: 0 0 10px; }
.modal-desc ul, .modal-desc ol { margin: 8px 0 12px 22px; }
.modal-desc a { color: #1d4ed8; text-decoration: underline; }
.modal-desc b, .modal-desc strong { font-weight: 700; }

/* Opis: zwykły natywny scroll, stylowany jak lista miniatur (#sidebar). */
.modal-desc-shell {
  position: relative;
  max-height: min(70vh, 600px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* nie przepuszczaj scrolla dalej po dojechaniu do granicy */
}
.modal-desc-shell:focus { outline: none; }
.modal-desc-shell::-webkit-scrollbar { width: 17px; }
.modal-desc-shell::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 6px;
}
.modal-desc-shell::-webkit-scrollbar-thumb {
  background-color: var(--tpl-modal-scrollbar, #393f69);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
.modal-desc-shell.is-scrollbar-hovered::-webkit-scrollbar-thumb {
  background-color: var(--tpl-modal-scrollbar-hover, var(--accent));
}
.modal-desc-shell::-webkit-scrollbar-button,
.modal-desc-shell::-webkit-scrollbar-button:single-button,
.modal-desc-shell::-webkit-scrollbar-button:start,
.modal-desc-shell::-webkit-scrollbar-button:end,
.modal-desc-shell::-webkit-scrollbar-button:vertical:start:decrement,
.modal-desc-shell::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
}
.modal-desc-shell::-webkit-scrollbar-corner { background: transparent; }
@-moz-document url-prefix() {
  .modal-desc-shell {
    scrollbar-width: thin;
    scrollbar-color: var(--tpl-modal-scrollbar, #393f69) transparent;
  }
  .modal-desc-shell.is-scrollbar-hovered {
    scrollbar-color: var(--tpl-modal-scrollbar-hover, var(--accent)) transparent;
  }
}
.modal-desc {
  padding-right: 8px;
  line-height: 1.4em;
}
/* NADPIS - NIE USUWAĆ*/
.modal--auto #modalTitle {
    max-width: 100%;
}
.modal-desc {
    max-width: 100%;
}

.modal-desc img { 
width: 100%;
max-width: 100%; 
height: auto; 
display: block; margin: 12px 0; }

/* Hotspot „Opis”: opcjonalny układ obrazu po lewej i tekstu po prawej. */
.modal-desc.modal-desc--image-left {
  display:grid !important;
  grid-template-columns:minmax(0, 45%) minmax(0, 1fr);
  column-gap:18px;
  align-items:start;
}
.modal-desc.modal-desc--image-left > .modal-desc-image-loader--side {
  grid-column:1;
  grid-row:1;
  width:100%;
  min-width:0;
  margin:0;
  align-self:start;
}
.modal-desc.modal-desc--image-left > .modal-desc-image-side-text {
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.modal-desc.modal-desc--image-left > .modal-desc-image-loader--side img {
  width:100%;
  max-height:min(68vh, 560px);
  object-fit:contain;
}

/* Na telefonie dwa wąskie słupki byłyby nieczytelne. Zachowujemy świadomie
   wybrany wariant „obraz po lewej”, ale prezentujemy go kolejno: cały pionowy
   kadr nad opisem. Wysokość zdjęcia nie zabiera całego modala; opis zostaje
   dostępny w jego zwykłym przewijanym obszarze. */
@media (max-width: 680px) {
  .modal-desc.modal-desc--image-left {
    display:flex !important;
    flex-direction:column;
    gap:14px;
  }
  .modal-desc.modal-desc--image-left > .modal-desc-image-loader--side,
  .modal-desc.modal-desc--image-left > .modal-desc-image-side-text {
    width:100%;
    min-width:0;
  }
  .modal-desc.modal-desc--image-left > .modal-desc-image-loader--side {
    display:flex;
    justify-content:center;
  }
  .modal-desc.modal-desc--image-left > .modal-desc-image-loader--side img {
    width:auto;
    max-width:100%;
    height:auto;
    max-height:44vh;
    max-height:44dvh;
    object-fit:contain;
  }
}

.modal-desc-image-loader {
  position: relative;
  display: block;
  min-height: 92px;
  margin: 12px 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--modal-fg, #1f2937) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--modal-fg, #1f2937) 16%, transparent);
}

.modal-desc-image-loader::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -12px 0 0 -12px;
  border: 2px solid color-mix(in srgb, var(--modal-fg, #1f2937) 24%, transparent);
  border-top-color: var(--modal-fg, #1f2937);
  border-radius: 50%;
  animation: modal-desc-image-spin .75s linear infinite;
}

.modal-desc-image-loader img {
  position: relative;
  z-index: 1;
  margin: 0;
  opacity: 0;
  transition: opacity .15s ease;
}

.modal-desc-image-loader.is-loaded {
  min-height: 0;
  border-color: transparent;
  background: transparent;
}

.modal-desc-image-loader.is-loaded::before,
.modal-desc-image-loader.is-error::before {
  display: none;
}

.modal-desc-image-loader.is-loaded img { opacity: 1; }

.modal-desc-image-loader.is-error img { display: none; }

.modal-desc-image-error {
  display: block;
  padding: 34px 12px;
  color: color-mix(in srgb, var(--modal-fg, #1f2937) 72%, transparent);
  font-size: 13px;
  text-align: center;
}

@keyframes modal-desc-image-spin { to { transform: rotate(360deg); } }

.modal-desc > *:first-child { margin-top: 0; }

.description-page-break { display: none; }
#modal.modal--description-pending #modalBody {
  position: relative;
  min-height: 120px;
}
#modal.modal--description-pending .modal-desc-shell { visibility: hidden; }
#modal.modal--description-pending #modalBody::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--m-fg, var(--modal-fg)) 22%, transparent);
  border-top-color: var(--m-accent, var(--accent));
  border-radius: 50%;
  animation: modal-desc-image-spin .75s linear infinite;
  pointer-events: none;
}
#modal.modal--paged {
  width: min(40vw, 800px);
  min-width: min(600px, 90vw);
  max-width: 90vw;
  max-height: 88vh;
  overflow: hidden;
}
#modal.modal--paged #modalBody { min-width: 0; overflow: hidden; }
#modal.modal--paged .modal-desc-shell {
  height: min(54vh, 500px);
  max-height: none !important;
  overflow: hidden;
}
#modal.modal--paged .modal-desc {
  box-sizing: border-box;
  padding: 10px;
  overflow-wrap: anywhere;
}
#modal.modal--paged .description-page-view { height: 100%; overflow: hidden; touch-action: pan-y; }
#modal.modal--paged .description-page-view.is-overflow { overflow-y: auto; overscroll-behavior-y: contain; }
#modal.modal--paged .description-page-measurer {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
}
#modal.modal--paged .modal-desc-image-loader img {
  width: 100%;
  max-height: calc(min(54vh, 500px) - 52px);
  object-fit: contain;
}
.description-page-nav { margin: 4px 0 0; color: var(--m-fg, var(--modal-fg)); }
.description-page-nav[hidden] { display: none; }
.description-page-controls { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 38px; }
.description-page-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--m-brd, var(--modal-border));
  border-radius: 3px;
  background: var(--modal-btn-bg);
  color: var(--modal-btn-fg);
  cursor: pointer;
}
.description-page-controls button:hover:not(:disabled) { background: var(--modal-btn-bg-hover); color: var(--modal-btn-fg-hover); }
.description-page-controls button:disabled { opacity: .25; cursor: default; }
.description-page-controls button span { font-size: 27px; line-height: 1; transform: translateY(-1px); }
.description-page-count { min-width: 62px; text-align: center; font-size: 13px; font-weight: 600; }
.description-page-nav.is-timed-single .description-page-controls { display: none; }
.description-page-progress { height: 5px; margin-top: 7px; background: var(--m-brd, var(--modal-border)); }
.description-page-progress--time-only { margin-top: 8px; }
.description-page-progress-fill { display: block; height: 100%; background: var(--tpl-description-progress, var(--m-accent, var(--accent))); transition: width .1s linear; }
.path-audio-player {
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin: 12px 0 8px;
  padding: 4px 9px;
  border: 1px solid var(--tpl-audio-player-border, var(--m-brd, var(--modal-border)));
  border-radius: 4px;
  background: var(--tpl-audio-player-bg, color-mix(in srgb, var(--m-fg, var(--modal-fg)) 7%, transparent));
  color: var(--tpl-audio-player-text, var(--m-fg, var(--modal-fg)));
}
.path-audio-player__toggle {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.path-audio-player__toggle:hover { color: var(--tpl-audio-player-accent, var(--m-accent, var(--accent))); }
.path-audio-player__toggle:focus-visible,
.path-audio-player__seek:focus-visible { outline: 2px solid var(--tpl-audio-player-accent, var(--m-accent, var(--accent))); outline-offset: 2px; }
.path-audio-player__time { flex: 0 0 38px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.path-audio-player__seek { flex: 1 1 auto; min-width: 54px; height: 24px; margin: 0; accent-color: var(--tpl-audio-player-accent, var(--m-accent, var(--accent))); cursor: pointer; }
.path-audio-player__seek:disabled { opacity: .45; cursor: default; }
.path-audio-player + audio[hidden] { display: none; }
@media (max-width: 768px) {
  #modal.modal--paged { width: 92vw; min-width: 0; max-width: 92vw; }
  #modal.modal--paged .modal-desc-shell { height: min(50vh, 420px); }
  #modal.modal--paged .modal-desc-image-loader img { max-height: calc(min(50vh, 420px) - 52px); }
}


/* Ikona PLAY/PAUSE narysowana w CSS */
#modalAudioBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 25px;
    margin-right: 5px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.06);
    color: #111;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
    margin-top: -1px;
}

/* sama ikona */
#modalAudioBtn::before{
  content:"";
  display:block;
  /* PLAY = trójkąt z borderów */
  width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* PAUSE = dwie kreski z gradientu */
#modalAudioBtn.is-active::before{
  width: 12px; height: 12px;
  border: 0;
  background: linear-gradient(
    90deg,
    currentColor 0 40%,
    transparent 40% 60%,
    currentColor 60% 100%
  );
  border-radius: 1px;
}

/* stany */
#modalAudioBtn:hover { background: rgba(0,0,0,.70); color: #f1f1f1; }
#modalAudioBtn:active { transform: translateY(1px) scale(.98); }
#modalAudioBtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }

/* ciemne skórki modala */
.modal--skin-dark #modalAudioBtn,
.modal--skin-black #modalAudioBtn,
.modal--skin-blue  #modalAudioBtn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
}
.modal--skin-dark #modalAudioBtn:hover,
.modal--skin-black #modalAudioBtn:hover,
.modal--skin-blue  #modalAudioBtn:hover{
  background: rgba(255,255,255,.16);
}

/* jeśli w środku miałeś <span class="ico"> z wcześniejszych wersji — ukryj go */
#modalAudioBtn .ico { display:none; }

button#modalAudioBtn {
    margin-left: auto;
}




/* Mobile: modal na pełną szerokość, scroll wewnątrz treści */
@media (max-width: 768px){
.modal--auto {
    width: 100vw;
    max-width: 90vw;
    min-width: 0;
    margin: 0px;
}
  .modal-scrollbox{
    max-height: min(70vh, 400px); /* na bardzo niskich ekranach niech nie wyjdzie poza okno */
  }
.modal-desc-shell {
    max-height: min(70vh, 420px);
}
.modal-desc {
    font-size: 0.9em;
}
span#modalTitle {
    font-size: 1.0em;
}
.modal--auto #modalTitle {
    padding-top: 3px;
}

}

@media (max-width: 990px) {
  .modal { width: 92vw; height: auto; max-height: 82vh; }
  .modal-desc-shell {max-height: 75vh !important;}
}

/* Opisy hotspotów na telefonie mogą wykorzystać nieco więcej wysokości. */
@media (max-width: 768px) {
  #modal.modal--auto { max-height: 85vh; }
}


/* === Anti-cutoff dla tooltipów przy krawędziach ekranu ===
   Działa dla każdego elementu z .edge-left / .edge-right i data-tip */
.edge-left[data-tip]::after {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-8px) !important; /* bez przesunięcia X */
}

.edge-right[data-tip]::after {
  left: auto !important;
  right: 0 !important;
  transform: translateY(-8px) !important; /* bez przesunięcia X */
}



/* =========================
   Globalny przełącznik HS
   (klasa .hs-off na :root = ukryj i zablokuj hotspoty)
========================= */

/* Płynne zanikanie przy zmianie stanu (opcjonalnie) */
.hs { transition: opacity .15s ease; }

/* Gdy globalnie OFF: hotspoty niewidoczne i nieklikalne */
:root.hs-off .hs {
  opacity: 0;
  pointer-events: none;
}

/* =========================
   Przycisk ikonowy w topbarze
========================= */
.top-right .top-btn--icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.top-right .top-btn--icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtelny stan wyłączony przycisku (opcjonalnie) */
#hsToggleBtn.is-off { opacity: .8; }

/* =========================
   Ścieżki ikon (konfigurowalne w CSS)
========================= */
:root {
  --hs-icon-on:  url("../img/templates/default-img/nav-hs-on.png");
  --hs-icon-off: url("../img/templates/default-img/nav-hs-off.png");
}

/* Bazowa ikona w przycisku */
#hsToggleBtn .ico {
  width: 22px;
  height: 22px;
  display: inline-block;
  background: center / contain no-repeat var(--hs-icon-on);
}

/* Gdy globalnie HS są wyłączone → podmień tylko obraz */
:root.hs-off #hsToggleBtn .ico {
  background-image: var(--hs-icon-off);
}

/* (Opcjonalnie) Bez animacji dla użytkowników z preferencją redukcji ruchu */
@media (prefers-reduced-motion: reduce) {
  .hs { transition: none; }
}

/* uniwersalnie dla wszystkich typów z klasą*/
.hs.hs-link.nav-red .hs-i {
	background-image: url("../img/templates/default-img/nav-arrow-red.svg") !important;
}
.hs.hs-link.nav-up .hs-i {
    background-image: url("../img/templates/default-img/nav-arrow-up.png") !important;
    width: 90px !important;
    height: 60px !important;
}
.hs-hidden .hs-i {
    max-width: 20px !important;
	max-height: 10px !important;
	    cursor: default !important;
		opacity: 0.24;
}
.hs.hs-hidden .hs-i[data-tip]::after {
    display: none !important;
}


/* Ustawienia kotwicy dla pinezki hs-pin1 – dół-środek */
.hs.hs-pin1 {
  --hs-anchor-x: 50%;
  --hs-anchor-y: 100%;
  --hs-offset-y: 2px;   /* dostrój: 0…4px zależnie od „czubka” w SVG/PNG */
}
.hs.hs-link.hs-pin1 .hs-i,
.hs.hs-info.hs-pin1 .hs-i,
.hs.hs-modal.hs-pin1 .hs-i {
    background-image: url("../img/templates/default-img/hs-pin1b.svg") !important;
    height: 60px !important;
    filter: drop-shadow(0 0 1px #101010) !important;
}

.hs.hs-info.hs-pin2 .hs-i {
	background-image: url("../img/templates/default-img/hs-pin2.svg") !important;
	height: 60px !important;
}

.hs.mini > .hs-i {
  max-width: 36px !important;
  max-height: 36px !important;
}

/* jeśli chcesz tylko dla modali (typ 'modal') */
.hs.hs-modal.modax .hs-i {
  
}
.hs.hs-link.hs-hidden .hs-i {
    display: none !important;
}
.hs.hs-link.hs-hidden.link .hs-i {
    display: block !important;
}

.hs.hs-info .hs-i {
	background-image: url("../img/templates/default-img/hs-pin2.svg") !important;
}

/* Ta podmieniona ikona jest pinezką. Przy powrocie do kółka zmień anchor-y na 50%. */
.hs.hs-info[class="hs hs-info"] {
  --hs-anchor-x: 50%;
  --hs-anchor-y: 100%;
  --hs-offset-y: 0px;
}
/* To samo dla hotspota Opis stylowanego wyłącznie ikoną Info. */
.hs.hs-modal.hs-info[class="hs hs-modal hs-info"] {
  --hs-anchor-x: 50%;
  --hs-anchor-y: 100%;
  --hs-offset-y: 0px;
}
/* Osobny wariant miejskiej ikony opisowej; grafika zostanie dodana później. */
.hs.hs-info-city {
  --hs-anchor-x: 50%;
  --hs-anchor-y: 50%;
  --hs-offset-y: 0px;
}

/* Miejska pinezka: jej dolny czubek pozostaje w punkcie panoramy. */
.hs.hs-pin-city {
  --hs-anchor-x: 50%;
  --hs-anchor-y: 100%;
  --hs-offset-y: 0px;
}
.hs.hs-pin-city .hs-i {
  width: calc(var(--hs-pin-city-size) * var(--hs-scale)) !important;
  height: calc(var(--hs-pin-city-size) * var(--hs-scale)) !important;
  background-image: var(--hs-pin-city-img) !important;
}
.hs.hs-bike .hs-i {
	background-image: var(--hs-bike-img) !important;
}

/* =========================
   SIDEBAR (miniatury)
   — naprawa „opadania” przy zwijaniu
   — jeden spójny zestaw reguł (ID #sidebar)
========================= */

:root { --sidebar-w: 260px; }

#sidebar {
  position: fixed;
  left: 0;
  top: var(--topbar-h);
  bottom: var(--tb-h);
  width: var(--sidebar-w);
  max-width: 44vw;
  background: rgba(20,20,61,.85);
  transform: translateX(0);                 /* tylko X — bez Y */
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  border-radius: 0 !important;
  z-index: 900;

  /* stabilizacja layoutu podczas animacji / hoverów */
  will-change: transform;
  contain: layout paint;                    /* bez wpływu na zewnętrzny layout */
  backface-visibility: hidden;
  transform: translateZ(0);                 /* własna warstwa */

  /* pasek przewijania ma stałe miejsce i szerokość */
  scrollbar-gutter: stable;                 /* nie both-edges */
  overflow-anchor: none;                    /* brak „podskoków” */
}

/* stan zwinięty — tylko transform X */
#sidebar.collapsed { transform: translateX(-100%); }

/* nagłówek sidebara */
#sidebar .sidebar-head {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 600;
  color: #fff;
  font-size: 0.9em;
  min-height: 36px;
}

/* Przycisk toggle — fixed, zawsze widoczny, jeździ razem z sidebar */
.sidebar-toggle-btn {
    position: fixed;
    left: var(--sidebar-w);
    top: var(--topbar-h);
    width: 22px;
    height: 52px;
    z-index: 901;
    cursor: pointer;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.15);
    /* border-top: 1px solid rgba(255,255,255,.15); */
    border-radius: 0 0px 6px 0;
    /* box-shadow: 3px 2px 10px rgba(0,0,0,.55); */
    transition: left .28s cubic-bezier(.2,.7,.2,1), background .15s ease;
}
.collapse-toggle-btn {
  background: #0c1240c4;
}
.collapse-toggle-btn:hover {
  background: var(--accent);
}

/* Dotyk nie zostawia aktywnego wyglądu po wykonaniu akcji. */
.collapse-toggle-btn.touch-released,
.collapse-toggle-btn.touch-released:hover,
.collapse-toggle-btn.touch-released:focus {
  background: var(--tpl-sidebar-toggle-bg, #0c1240c4) !important;
}

.pano-nav.touch-released,
.pano-nav.touch-released:hover,
.pano-nav.touch-released:focus {
  background: var(--tpl-nav-bg, rgba(20,20,24,.55)) !important;
  transform: translateY(-50%);
  box-shadow: none;
}

#navPrev.touch-released::after,
#navNext.touch-released::after {
  opacity: 0 !important;
  transform: translateX(-50%) !important;
}

#fundingToggle.touch-released::before {
  opacity: 0 !important;
  transform: translateX(-50%) !important;
}

/* ikona strzałki wyłącznie przez ::after + mask */
.collapse-toggle-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,.9);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M15 6l-6 6 6 6V6z"/></svg>') center/16px 16px no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M15 6l-6 6 6 6V6z"/></svg>') center/16px 16px no-repeat;
}

/* sidebar zwinięty → left: 0, strzałka w prawo */
#sidebar.collapsed ~ #sidebarToggle { left: 0; }
#sidebar.collapsed ~ #sidebarToggle::after {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 6l6 6-6 6V6z"/></svg>') center/16px 16px no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 6l6 6-6 6V6z"/></svg>') center/16px 16px no-repeat;
}

/* lista miniaturek */
#sidebar .thumb-list {
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* miniatury – bez zmian w wymiarach na hover/active */
#sidebar .thumb {
  position: relative; display: block;
  width: calc(100% - 4px);
  margin: 2px;
  padding: 0;
  border: 4px solid #2f2f2f;
  background: #111;
  cursor: pointer;
  border-radius: 0 !important;
  outline: none;
}
#sidebar .thumb::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
#sidebar .thumb img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:block; border-radius:0 !important;
}
#sidebar .thumb .t-meta {
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.60); color:#fff;
  padding:6px 8px; border-radius:0 !important;
}
#sidebar .thumb .t-title { font-size:12px; line-height:1.15; font-weight:600; }
#sidebar .thumb .t-sub   { display:none; }
#sidebar .thumb:hover    { outline: 4px solid #fff; outline-offset: -4px; }
#sidebar .thumb.active   { outline: 4px solid #1566a8; outline-offset: -4px; }
#sidebar .thumb.active:hover { outline-color: #fff; }

/* ===== Scrollbar (spójny, bez „puchnięcia” na hover) ===== */
/* WebKit */
#sidebar::-webkit-scrollbar { width: 16px; height: 16px; }
#sidebar::-webkit-scrollbar-track { background: transparent; border-left: 1px solid rgba(255,255,255,.12); }
#sidebar::-webkit-scrollbar-thumb {
  background-color: #393f69;
  border-radius: 10px;
  border: 4px solid transparent;    /* stały „margines” */
  background-clip: padding-box;
}
/* hover: tylko kolor — BEZ zmiany border/szerokości */
#sidebar:hover::-webkit-scrollbar-thumb { background-color: var(--accent); }
#sidebar::-webkit-scrollbar-button { display: none; }
#sidebar::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
@-moz-document url-prefix() {
  #sidebar { scrollbar-width: thin; scrollbar-color: var(--tpl-scrollbar, #393f69) transparent; }
  #sidebar:hover { scrollbar-color: var(--tpl-scrollbar-hover, var(--accent)) transparent; }
}

/* Mobile: ta sama logika, jedynie max-szerokość */
@media (max-width: 768px) {
  #sidebar { max-width: 39vw; }

  #sidebar .sidebar-head {
    font-size: 0.7em;
  }

  /* na mobile sidebar może być węższy niż --sidebar-w */
  .sidebar-toggle-btn {
    left: min(var(--sidebar-w), 39vw);
  }
  #sidebar.collapsed ~ #sidebarToggle {
    left: 0;
  }
}


/* === MOBILE: stopka pod przyciskami w jednej linii === */
@media (max-width: 767.98px) {
  #toolbar {
    flex-wrap: wrap;
    height: auto;
    align-content: center;
    column-gap: 8px;
    row-gap: 5px;
    padding: 6px 8px;
  }
  #toolbar .tb {
    transform: translateY(0);
  }
  .toolbar-credit {
    position: static;
    transform: none;
    order: 99;
    width: calc(100% + 16px);
    flex: 0 0 calc(100% + 16px);
    margin: 0 -8px -6px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    align-self: stretch;
    padding: 5px 0;
    background: rgba(5, 9, 22, 0.33);
    border: 0;
    opacity: 1;
    display: flex;
  }
  .toolbar-credit .tc-l1,
  .toolbar-credit .tc-l2 {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    transition: color .22s ease;
  }
  .toolbar-credit:hover .tc-l1,
  .toolbar-credit:hover .tc-l2,
  .toolbar-credit:focus-within .tc-l1,
  .toolbar-credit:focus-within .tc-l2,
  .toolbar-credit:active .tc-l1,
  .toolbar-credit:active .tc-l2 {
    color: #fff;
  }
  .toolbar-credit .tc-l1::after {
    content: "\00a0";
  }

}

/* =========================
   PPM — mini menu kontekstowe
========================== */
#ctxMenu.ctx {
    position: fixed;
    z-index: 99999;
    display: none;
    min-width: 240px;
    max-width: min(90vw, 360px);
    background: rgba(0,0,0,.84);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    padding: 8px 0 2px;
    font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow: hidden;
}
#ctxMenu * { box-sizing: border-box; }

/* Nagłówek: logo nad tytułem i opisem */
#ctxMenu .ctx-header {
    padding: 0px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.34);
    margin-bottom: 0px;
}

#ctxMenu .ctx-logo {
    display: block;
    height: auto;
    max-width: 180px;
    object-fit: contain;
    margin: 0 0px 6px -8px;
}
#ctxMenu .ctx-logo.is-hidden { display: none; }

#ctxMenu .ctx-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opis (max 3 linie z wielokropkiem) */
#ctxMenu .ctx-desc {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

#ctxMenu .ctx-items { padding: 4px 0; }

#ctxMenu .ctx-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#ctxMenu .ctx-item:hover,
#ctxMenu .ctx-item:focus-visible {
  background: rgba(255,255,255,.08);
  outline: none;
}
#ctxMenu .ctx-item:active {
  background: rgba(255,255,255,.14);
}

#ctxMenu .ctx-sep {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 1px 8px;
}


/* ========== Toast „skopiowano” ========== */
.toast-copy{
  position: fixed;
  font-family: "Montserrat" !important;
  text-align: center !important;
  top: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  opacity: 0;
  padding: 8px 12px;
  background: rgba(0,100,0,.84);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  box-shadow: 0 0px 6px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  font: 13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  z-index: 100000;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast-copy.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* =========================================
   BANER POWROTU — pod topbarem, prawa strona
========================================= */
.home-banner {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(18, 18, 61, 0.82);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-left: 1px solid rgba(255,255,255,.12);
  border-radius: 0 0 0 6px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.home-banner:hover {
  background: #fff;
  color: #12123d;
  text-decoration: none;
}
.home-banner__txt i,
.modal-home-bar__link i { margin-right:5px; }
.home-banner[hidden] { display: none !important; }

@media (max-width: 767.98px) {
.home-banner {
    max-width: 44.6vw;
    justify-content: flex-end;
    padding: 9px 11px;
    text-align: right;
    white-space: normal;
    line-height: 1.4;
}
  .home-banner__txt {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* =========================================
   PASEK POWROTU — na dole modalu info
========================================= */
.modal-home-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-top: 1px solid var(--panel-brd, #d3d3d3);
  background: #fff;
}
.modal-home-bar__link {
  display: inline-flex;
  align-items: center;
  color: var(--accent, #1566a8);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 18px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.modal-home-bar__link:hover {
  background: var(--accent, #1566a8);
  color: #fff;
  text-decoration: none;
}

/* =========================================
   INTERACT — banner dofinansowania i powitanie
========================================= */
:root {
  --funding-h: 0px;
  --funding-motion: 560ms cubic-bezier(.65, 0, .35, 1);
}
#fundingBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: var(--funding-expanded-h, 12vh);
  transition: height var(--funding-motion);
}
#fundingBanner.is-collapsed { height: 0; }
#fundingBanner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 180ms ease;
}
#fundingBanner.is-collapsed img { opacity: 0; }
#toolbar,
#compass,
#sceneLoader {
  transition: bottom var(--funding-motion);
}
body.has-funding #toolbar { bottom: var(--funding-h); }
body.has-funding #compass { bottom: calc(80px + var(--funding-h)) !important; }
body.has-funding #sceneLoader { bottom: calc(var(--tb-h) + var(--funding-h) + 38px); }
body.has-funding #sidebar {
  bottom: calc(var(--tb-h) + var(--funding-h));
  transition: transform .28s cubic-bezier(.2,.7,.2,1), bottom var(--funding-motion);
}
#fundingToggle.sidebar-toggle-btn {
  top: auto;
  left: 50%;
  bottom: calc(var(--tb-h) + var(--funding-h));
  width: 52px;
  height: 22px;
  border-radius: 6px 6px 0 0;
  transform: translateX(-50%);
  z-index: 949;
  border: 1px solid rgba(255,255,255,.2);
  border-bottom: 0;
  transition: bottom var(--funding-motion), left .28s cubic-bezier(.2,.7,.2,1), background .15s ease;
}
#fundingToggle.sidebar-toggle-btn::after { transform: rotate(-90deg); }
#fundingToggle.sidebar-toggle-btn.is-collapsed::after { transform: rotate(90deg); }

/* Nagłówek grupy mapy jest wersalikami i boldem; dymek ma pozostać
   identyczny ze wspólnym tooltipem paska narzędzi. */
#modal.modal--map .map-layer-control__title--action[data-tip]::after {
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
}
/* Mobilne przeglądarki potrafią zaokrąglić sąsiadujące fixedy w różne strony.
   Jednopikselowe zachodzenie usuwa widoczne szczeliny bez zmiany wymiarów UI. */
@media (max-width: 768px) {
  #sidebar {
    top: calc(var(--topbar-h) - 1px) !important;
    bottom: calc(var(--tb-h) - 1px);
  }

  body.has-funding #sidebar {
    bottom: calc(var(--tb-h) + var(--funding-h) - 1px);
  }

  #sidebarToggle.sidebar-toggle-btn {
    top: calc(var(--topbar-h) - 1px);
  }

  .home-banner {
    top: calc(var(--topbar-h) - 1px);
    border-radius: 0 0 0 6px;
    border-bottom: 0;
  }

  #fundingToggle.sidebar-toggle-btn {
    bottom: calc(var(--tb-h) + var(--funding-h) - 1px);
  }

  #topbar {
    border-bottom: 0 !important;
  }

  #toolbar {
    border-top: 0 !important;
  }
@media (max-width: 768px) {
  .modal-home-bar__link {
    font-size: 12px;
  }
  
}
}

.modal-funding-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--modal-funding-height, 12vh);
  overflow: hidden;
  box-sizing: border-box;
}
.modal-funding-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#path-player { position:relative;display:inline-flex;align-items:center;flex:0 0 auto;color:var(--tpl-topbar-text,#fff); }
#path-player[hidden] { display:none; }
#path-player button { position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;font-size:18px;color:inherit;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:3px;cursor:pointer; }
#path-player .path-player-toggle { width:36px;height:36px; }
#path-player-menu { position:absolute;right:-6px;top:calc(100% + 8px);display:flex;gap:5px;padding:6px;background:var(--tpl-sidebar-bg,rgba(15,20,27,.96));backdrop-filter:blur(4px);border:1px solid var(--tpl-topbar-border,rgba(255,255,255,.12));border-radius:3px;box-shadow:none;z-index:50; }
#path-player-menu { background:rgb(from var(--tpl-sidebar-bg, rgb(15 20 27)) r g b / .96); }
#path-player-menu[hidden] { display:none; }
#path-player button:disabled { opacity:.4; }
#path-player button:disabled { opacity:1;color:color-mix(in srgb, currentColor 40%, transparent);border-color:color-mix(in srgb, currentColor 40%, transparent); }
#path-player button.active { background:var(--tpl-sidebar-toggle-hover,var(--accent)); }
#topbar .top-right #path-player .path-player-toggle.active {
  background:var(--tpl-sidebar-toggle-hover,var(--accent));
  color:#fff;
}
#path-player button:hover:not(:disabled):not(.active) { background:rgba(255,255,255,.06); }
@media (hover: hover) and (pointer: fine) {
  #path-player::after { content:"";position:absolute;right:0;top:100%;width:100%;height:8px; }
  #path-player:hover #path-player-menu { display:flex !important; }
}
#modal.modal--path-choice { width:min(680px,92vw);min-width:0;max-width:92vw;padding:var(--modal-padding); }
#modal.modal--path-choice #modalBody { padding:8px 10px 12px; }
.path-choice-label { display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:600; }
.path-choice-label > i { color:var(--tpl-accent,var(--m-accent)); }
.path-choice-list { display:grid;gap:6px; }
.path-choice-route { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:5px 9px;text-align:left;overflow-wrap:anywhere;font-size:16px;font-weight:600;line-height:1.25;color:var(--path-route-text,#fff);background:var(--path-route-color,#1566a8);border:0;border-radius:3px;cursor:pointer; }
.path-choice-route:hover,.path-choice-route:focus-visible { background:#174a72;color:#fff;outline:none; }
.path-choice-route > span:not(.path-choice-active) { flex:1 1 auto;min-width:0; }
.path-choice-active { display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;color:#fff;background:#198754;border-radius:2px; }
.path-choice-active[aria-hidden="true"] { visibility:hidden; }
.path-choice-route i { display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;font-size:15px;border:1px solid currentColor;border-radius:3px; }
.path-choice-active i { width:auto;height:auto;font-size:12px;border:0; }
@media(max-width:768px) { .path-choice-route { font-size:15px; } }
.path-choice-controls { display:flex;justify-content:center;gap:5px;margin-top:16px; }
.path-choice-controls button { display:grid;place-items:center;width:34px;height:34px;padding:0;font-size:18px;color:var(--m-fg,var(--modal-fg));background:transparent;border:1px solid var(--m-brd,var(--modal-border));border-radius:3px;cursor:pointer; }
.path-choice-controls button:hover:not(:disabled):not(.active),.path-choice-controls button:focus-visible { background:color-mix(in srgb,var(--m-fg,var(--modal-fg)) 7%,transparent); }
.path-choice-controls button.active { background:var(--tpl-accent,var(--m-accent));color:#fff; }
/* Nie używamy opacity na wyłączonym przycisku: pseudo-element wspólnego
   tooltipa jest jego dzieckiem wizualnym i również zostałby przygaszony.
   Sam przycisk pozostaje wyraźnie nieaktywny przez kolor ikony i obramowania. */
.path-choice-controls button:disabled {
  opacity:1;
  color:color-mix(in srgb,var(--m-fg,var(--modal-fg)) 40%,transparent);
  border-color:color-mix(in srgb,var(--m-brd,var(--modal-border)) 40%,transparent);
  cursor:default;
}
#path-player [data-tip]::after { top:calc(100% + 18px);bottom:auto; }
#path-player .path-player-toggle[data-tip]::after { top:calc(100% + 62px);bottom:auto;left:50%; }
#path-player .path-player-toggle[aria-expanded="true"][data-tip]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}
#path-active-panel {
  position:fixed;
  z-index:100001;
  top:0;
  left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:38px;
  transform:translateX(-50%);
  color:var(--tpl-topbar-text,#fff);
  pointer-events:auto;
  transition:width 220ms ease;
}
#path-active-panel[hidden] { display:none; }
#path-active-panel.is-open { width:min(300px,calc(100vw - 24px)); }
.path-active-panel__content {
  order:1;
  width:100%;
  max-height:0;
  box-sizing:border-box;
  padding:0 7px;
  overflow:hidden;
  color:#182033;
  background:#fff;
  border:0 solid rgba(24,32,51,.18);
  border-bottom:0;
  border-radius:0 0 3px 3px;
  opacity:0;
  transition:max-height 220ms ease,padding 220ms ease,opacity 160ms ease,border-width 220ms ease;
}
#path-active-panel.is-open .path-active-panel__content {
  max-height:145px;
  padding:7px;
  border-width:0 1px 0;
  opacity:1;
}
.path-active-panel__heading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:18px;
  padding:0 2px 5px;
  color:#182033;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.path-active-panel__heading i { font-size:13px; }
.path-active-panel__name {
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  color:var(--path-route-text,#fff);
  background:var(--path-route-color,#1566a8);
  border-radius:2px;
}
.path-active-panel__controls { display:flex;justify-content:center;gap:5px;margin-top:7px; }
.path-active-panel__controls button,
.path-active-panel__toggle {
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:30px;
  padding:0;
  color:#182033;
  font-size:16px;
  background:transparent;
  border:1px solid rgba(24,32,51,.2);
  border-radius:3px;
  cursor:pointer;
}
.path-active-panel__controls button.active,
.path-active-panel__toggle.active { background:var(--tpl-sidebar-toggle-hover,var(--accent));color:#fff; }
.path-active-panel__controls button:disabled { opacity:1;color:color-mix(in srgb,currentColor 40%,transparent);border-color:color-mix(in srgb,currentColor 40%,transparent);cursor:default; }
.path-active-panel__controls button.active:disabled { color:#fff;border-color:transparent; }
.path-active-panel__controls button:hover:not(:disabled):not(.active),
.path-active-panel__toggle:hover:not(.active) { background:#f1f3f6; }
.path-active-panel__toggle {
  order:2;
  width:38px;
  height:18px;
  border-radius:0 0 3px 3px;
  background:#fff;
  border-color:rgba(24,32,51,.2);
  font-size:10px;
  transition:background 160ms ease,color 160ms ease;
}
#path-active-panel:not(.is-open) .path-active-panel__toggle { border-radius:0 0 3px 3px; }
#path-active-panel.is-open .path-active-panel__toggle { border-top:0; }
#path-active-panel .path-active-panel__toggle[data-tip]::after {
  top:calc(100% + 8px);
  bottom:auto;
  transform:translateX(-50%);
}
#path-active-panel .path-active-panel__toggle[data-tip]:hover::after,
#path-active-panel .path-active-panel__toggle[data-tip]:focus-visible::after {
  transform:translateX(-50%);
}
@media(max-width:768px) {
  #path-active-panel.is-open { width:min(280px,calc(100vw - 20px)); }
}
@media(min-width:769px) { body:has(#path-player:not([hidden])) #topSceneTitle { max-width:calc(100vw - var(--path-title-space,480px));overflow-wrap:anywhere; } }

/* Mobilny topbar: zwarte, rowne przyciski ikonowe. Flaga pozostaje prostokatna. */
@media (max-width: 768px) and (orientation: portrait) {
  #topbar .top-right { gap: 5px; }
  #topbar .top-right .top-btn,
  #topbar .top-right .top-btn--icon,
  #topbar .top-right #audioBtn,
  #topbar .top-right #hsToggleBtn,
  #topbar .top-right #path-player .path-player-toggle {
    box-sizing: border-box;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 4px !important;
  }

  #topbar .top-right #audioBtn .lbl { display: none; }

  #topbar .top-right #audioBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  #topbar .top-right #audioBtn .ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    mask-size: 22px 22px;
    -webkit-mask-size: 22px 22px;
  }
}

/* Jeden wspólny tooltip spaceru. Jest rodzeństwem całego interfejsu, nie
   potomkiem przycisku, więc opacity/filter/disabled hosta go nie przygasi. */
#wm-shared-tooltip {
  position:fixed;
  left:0;
  top:0;
  z-index:100002;
  max-width:min(80vw,360px);
  padding:6px 8px;
  box-sizing:border-box;
  color:var(--wm-tooltip-text,var(--tpl-tooltip-text,#fff));
  background:var(--wm-tooltip-bg,var(--tpl-tooltip-bg,rgba(1,0,0,.92)));
  border:1px solid var(--wm-tooltip-border,var(--tpl-tooltip-border,transparent));
  border-radius:3px;
  box-shadow:0 0 2px rgba(0,0,0,.35);
  font-size:14px;
  line-height:1.3;
  font-family:inherit;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  text-align:center;
  overflow-wrap:anywhere;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;
}
#wm-shared-tooltip.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .12s ease,transform .12s ease;
}

/* Poprzednie dymki były pseudo-elementami hosta. Wyłączamy wyłącznie ich
   funkcję tooltipa; ::after finansowania nadal zachowuje ikonę rozwijania. */
[data-tip]:not(#fundingToggle)::after,
#fundingToggle[data-tip]::before {
  content:none !important;
  display:none !important;
}