/* Baza wypadowa — mapa przewijana w bok, interfejs nad nią.

   Grafika ma proporcję 21:9, więc przy wysokości telefonu jest około pięciu
   ekranów szeroka. Wysokość ustawiamy na 100% okna, szerokość leci sama
   z proporcji — dzięki temu procentowe współrzędne znaczników zgadzają się
   z grafiką na każdym telefonie, bez przeliczania w kodzie. */

#baza{
  position:fixed;inset:0;z-index:20;background:#02040a;overflow:hidden;
  height:100dvh;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}

/* --- przewijane okno mapy --- */
.mapa-okno{
  position:absolute;inset:0;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.mapa-okno::-webkit-scrollbar{display:none}
.mapa-plansza{position:relative;height:100%;width:max-content}
.mapa-tlo{display:block;height:100%;width:auto;max-width:none}
.mapa-pyl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* --- lokacja: sprite + tabliczka pod nim ---
   Sprite stoi PODSTAWĄ w punkcie (x, y) z danych, stąd przesunięcie o własną
   szerokość w bok i całą wysokość w górę. Szerokość podana w procentach TŁA,
   więc skala trzyma się mapy na każdym telefonie. */
.mapa-punkt{
  position:absolute;transform:translate(-50%,-100%);z-index:2;
  appearance:none;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;display:flex;flex-direction:column;align-items:center;
}
/* Bryła: sprite plus jego cień. Cień musi być OSOBNY, bo usuwanie tła
   zabiera obiektowi także cień rzucany na podłoże — bez niego budynki
   wyglądają, jakby wisiały nad posadzką. */
.mapa-bryla{position:relative;display:block;width:100%}
.mapa-cien{
  position:absolute;left:6%;right:6%;bottom:-1.5%;height:15%;
  pointer-events:none;
  background:radial-gradient(closest-side,rgba(2,6,14,.72),rgba(2,6,14,.28) 62%,transparent 100%);
}
/* Sprite'y powstały osobno, więc są jaśniejsze i bardziej nasycone niż tło.
   Filtr sprowadza je do jednej tonacji ze sceną — bez tego widać wyklejankę. */
.mapa-obiekt{
  position:relative;display:block;width:100%;height:auto;pointer-events:none;
  filter:brightness(.9) saturate(.86) contrast(1.03);
}
.mapa-plyta{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  margin-top:-6px;padding:4px 11px 5px;white-space:nowrap;
  background:linear-gradient(160deg,rgba(10,26,42,.94),rgba(5,14,24,.96));
  border:1px solid rgba(94,231,255,.4);border-radius:3px;
  box-shadow:0 4px 18px rgba(2,4,10,.8);
}
.mapa-plyta b{
  font-size:10.5px;font-weight:800;letter-spacing:.22em;color:#dbeefa;
}
.mapa-plyta i{
  font-style:normal;font-size:8px;font-weight:700;letter-spacing:.18em;color:#4c7d95;
}

/* Cytadela jest jedynym otwartym miejscem — ma być widoczna od razu. */
.mapa-punkt.glowny{z-index:3}
.mapa-punkt.glowny .mapa-plyta{
  border-color:#5ee7ff;box-shadow:0 0 26px rgba(94,231,255,.35),0 4px 18px rgba(2,4,10,.8);
}
.mapa-punkt.glowny .mapa-plyta b{color:#5ee7ff;font-size:12px}

/* Zamknięte są przygaszone, ale WIDOCZNE — mają kusić, nie znikać.
   POWÓD: krycie sprite'a jest stałe (klasa, nie animacja), więc zamrożone
   renderowanie niczego nie chowa. */
.mapa-punkt.zamkniety .mapa-obiekt{opacity:.62;filter:saturate(.55) brightness(.8)}
.mapa-punkt.zamkniety .mapa-plyta{
  border-color:rgba(94,231,255,.16);background:rgba(5,14,24,.8);
}
.mapa-punkt.zamkniety .mapa-plyta b{color:#6f8fa2}
.mapa-punkt.zamkniety .mapa-plyta i{color:#3f6076}

/* --- interfejs nad mapą --- */
/* POWÓD: szept WREN to dekoracja o niewidocznym stanie spoczynkowym; krycie
   ustawia KOD klasą, przejście tylko je wygładza, a gniazdo ma stałą
   wysokość, więc pojawienie się tekstu niczego nie przesuwa. */
.baza-szept{
  margin:9px 0 0;min-height:34px;text-align:center;
  font-size:12px;line-height:1.45;color:#8fc4da;
  text-shadow:0 2px 10px rgba(2,4,10,.95);
  opacity:0;transition:opacity .25s ease;
}
.baza-szept.widoczny{opacity:1}

@media (prefers-reduced-motion:reduce){
  .mapa-pyl{display:none}
}