/* ==========================================================================
   Farmersi 2.0 — mapa.css
   Mapa epoki: malowany JPG z 1.0 jako tło + NAŁOŻONE ikony miast w SVG.
   Decyzja: nie rysujemy mapy od zera wektorowo (stracilibyśmy klimat
   malowanej mapy z 1.0), ale ikony robimy w SVG — są ostre na 375 px,
   klikalne, dostępne z klawiatury i mają prawdziwy tekst (nie tooltip
   w title="", jak w 1.0).
   ========================================================================== */

.mapa-scena {
  position: relative;
  /* Pełna szerokość kontenera — mapa to najładniejsza grafika w serwisie,
     nie ma powodu jej ograniczać. */
  width: 100%;
  margin: 0 auto;
  /* Proporcja oryginału 1200×800 (3:2) — dzięki temu pozycje w % są wierne. */
  aspect-ratio: 3 / 2;
  background-color: #cfe2ea;
  border: 2px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  overflow: hidden;
  box-shadow: var(--cien-2);
}

.mapa-obraz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Siatka kartograficzna — subtelna, żeby mapa czytała się jak atlas. */
.mapa-scena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(58, 42, 26, 0.07) 0 1px,
      transparent 1px 5%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(58, 42, 26, 0.07) 0 1px,
      transparent 1px 8.5%
    );
  mix-blend-mode: multiply;
}

/* --- Znacznik miasta ----------------------------------------------------- */

.znacznik {
  position: absolute;
  /* x/y w % ustawiane inline z danych oznaczają ŚRODEK PINIEZKI.
     translate(-50%,-50%) przesuwa znacznik o pół jego szerokości i wysokości;
     ponieważ padding jest symetryczny (patrz `::after` niżej), środek pola
     treści — czyli ikony — wypada dokładnie na x/y. */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}

/* Pole dotyku 44×44 px. Pinezka ma na 375 px tylko ~22 px, więc dokładamy
   przezroczysty kwadrat wyśrodkowany na ikonie. Jest osobnym elementem,
   a nie paddingiem, żeby nie powiększał znacznika i nie rozjeżdżał kotwicy
   (nazwa miasta też jest poza układem — patrz `.znacznik-nazwa`). */
.znacznik::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Skalowanie robimy na samej ikonie, nie na całym znaczniku — inaczej
   przez `transform: scale()` nazwa powiększa się razem z ikoną. */
.znacznik:hover,
.znacznik:focus-visible {
  z-index: 5;
}

.znacznik:hover .znacznik-ikona,
.znacznik:focus-visible .znacznik-ikona,
.znacznik[data-aktywny="tak"] .znacznik-ikona {
  transform: translateY(-4px) scale(1.18);
}

.znacznik-ikona {
  width: 1.35rem;
  height: 1.7rem;
  /* To tutaj, nie na linku, jest kotwica pozycji pinezki. */
  transform: translateY(-4px);
  filter: drop-shadow(0 2px 2px rgba(50, 30, 8, 0.5));
  transform-origin: 50% 50%;
  transition: transform var(--czas-szybki) var(--krzywa);
}

@media (min-width: 44rem) {
  .znacznik-ikona {
    width: 1.6rem;
    height: 2rem;
  }
}

/* Nazwa miasta POD pinezką. `position: absolute` jest konieczne: w układzie
   powiększałaby wysokość znacznika, a wtedy translate(-50%,-50%) przesuwałoby
   samą ikonę w górę i pinezka schodziłaby z kropki na mapie. */
.znacznik-nazwa {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
  font-family: var(--font-tresc);
  /* Właściciel: „zwiększ czcionkę do 0.85rem — będzie lepiej widać te miasta
     na mapie", a potem: „na telefony te etykietki możesz zrobić mniejsze, bo
     faktycznie mało miejsca na mapie. na desktopie fajnie to już wygląda".
     Dlatego rozmiar zależy od szerokości ekranu: na 375 px mapa ma tylko
     341 px, więc podpis ma ~9,5 px, a od ~560 px wzwyż jest już pełne 0.85rem.
     Zmienną trzymamy osobno, żeby wariant `--maly` mógł się do niej odnieść. */
  --rozmiar-nazwy: clamp(0.6rem, 2.6vw, 0.85rem);
  font-size: var(--rozmiar-nazwy);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #241a10;
  /* Półprzezroczyste tło — właściciel: „białe tło pod nazwami miast — możesz
     zrobić półprzezroczyste jak poprzednio? teraz zbyt białe". Podpisy nie
     nachodzą już na siebie (pilnuje tego `rozmiescNazwy()`), więc może być
     lekko przezroczyste i nie zasłaniać malowanej mapy. */
  background: rgba(251, 246, 233, 0.62);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.3;
  /* Delikatna obwódka utrzymuje czytelność nad ciemnymi fragmentami mapy. */
  text-shadow:
    0 0 2px rgba(251, 246, 233, 0.9),
    0 0 2px rgba(251, 246, 233, 0.9);
}

/* Nazwy pokazujemy ZAWSZE, także na 375 px — właściciel: „widzę, że na mobile
   etykietki nie są widoczne, dopiero po kliknięciu na pinezkę — może poprawisz?"
   Miejsce wokół pinezki wybiera `rozmiescNazwy()` w `mapa.js`: domyślnie pod
   pinezką, a gdy tam koliduje z inną nazwą albo z pinezką — nad, z prawej,
   z lewej. Poniżej warianty tego samego podpisu. */

.znacznik-nazwa--gora {
  top: auto;
  bottom: 100%;
  margin: 0 0 1px;
}

.znacznik-nazwa--prawo {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin: 0 0 0 4px;
}

.znacznik-nazwa--lewo {
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  margin: 0 4px 0 0;
}

/* Narożniki — ostatnia szansa, gdy w pionie i poziomie nie ma miejsca. */
.znacznik-nazwa--dol-prawo {
  top: 100%;
  left: 100%;
  transform: none;
  margin: 1px 0 0 4px;
}

.znacznik-nazwa--dol-lewo {
  top: 100%;
  left: auto;
  right: 100%;
  transform: none;
  margin: 1px 4px 0 0;
}

.znacznik-nazwa--gora-prawo {
  top: auto;
  bottom: 100%;
  left: 100%;
  transform: none;
  margin: 0 0 1px 4px;
}

.znacznik-nazwa--gora-lewo {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 100%;
  transform: none;
  margin: 0 4px 1px 0;
}

/* Druga szansa dla nazw, którym zabrakło miejsca — mniejsza czcionka
   (decyduje o tym `rozmiescNazwy()` w `mapa.js`). Rozmiar liczony od
   `--rozmiar-nazwy`, żeby na telefonie i na desktopie zmniejszał się
   proporcjonalnie. */
.znacznik-nazwa--maly {
  font-size: calc(var(--rozmiar-nazwy) * 0.85);
}

/* Dla tej nazwy nie było już miejsca na mapie — pokazuje ją dopiero
   wskazanie pinezki (klawiatura, kursor, dotyk). */
.znacznik-nazwa--ukryta {
  display: none;
}

.znacznik:hover .znacznik-nazwa--ukryta,
.znacznik:focus-visible .znacznik-nazwa--ukryta,
.znacznik[data-aktywny="tak"] .znacznik-nazwa--ukryta {
  display: block;
}

/* Pinezka pod kursorem jest nad sąsiadami — razem z nazwą. */
.znacznik:hover,
.znacznik:focus-visible,
.znacznik[data-aktywny="tak"] {
  z-index: 6;
}

/* Kolory znaczników = legenda z 1.0 (wypalona w JPEG-u, tutaj prawdziwa). */
.znacznik--normalne .znacznik-ikona {
  color: #c9a227; /* gry normalne — żółty/amber */
}

.znacznik--szybkie .znacznik-ikona {
  color: #7d4fa8; /* gry szybkie — fiolet */
}

.znacznik--druzynowe .znacznik-ikona {
  color: #4f8f3a; /* gry drużynowe — zieleń */
}

.znacznik--pojedynek .znacznik-ikona {
  color: #4f9aa8; /* gry pojedyncze — błękit */
}

.znacznik--eksperymentalne .znacznik-ikona {
  color: #2f8f88; /* gry eksperymentalne — morski */
}

.znacznik--niedostepne .znacznik-ikona {
  color: #8f2f2f; /* miasta niedostępne — ciemna czerwień */
}

/* Miasto treningowe dostaje dodatkowy pierścień — wyróżnienie na mapie. */
.znacznik--trening .znacznik-ikona {
  color: #a83232;
}

.znacznik--trening::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.9rem;
  height: 1.9rem;
  transform: translate(-50%, calc(-50% - 4px));
  border: 2px dashed rgba(168, 50, 50, 0.75);
  border-radius: var(--promien-krag);
  pointer-events: none;
}

/* Znacznik poza epoką (miasto istnieje w danych, ale nie w tym roku). */
.znacznik[data-niedostepne="tak"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Legenda -------------------------------------------------------------- */

/* RAMKA MAPY = scena + legenda w jednym pudełku (25.10.2026).
   Właściciel: „legendę zwęź trochę i przenieś do góry na dół mapy, na
   półprzezroczystym tle". Wcześniej legenda stała w OSOBNYM wierszu pod mapą
   i zajmowała całą szerokość — a cztery krótkie pozycje nie potrzebują
   połowy ekranu. Teraz ramka jest punktem odniesienia dla legendy, która leży
   NA dolnej krawędzi mapy. */
.mapa-ramka {
  position: relative;
}

.legenda {
  /* NA MAPIE, PRZY DOLNEJ KRAWĘDZI, WYŚRODKOWANA. `absolute` + `translateX`
     zamiast `left/right`, bo legenda ma być szeroka NA SWOJĄ TREŚĆ, nie na
     całą mapę. */
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  z-index: 2;

  display: flex;
  /* JEDNA LINIA (25.10.2026). Cztery krótkie pozycje zmieściły się w dwóch
     wierszach tylko dlatego, że `flex-wrap` łamał je przy 465 px — a legenda
     w dwóch liniach wygląda jak dwie osobne plakietki. Na telefonie łamanie
     zostaje (patrz media query niżej), bo tam jedna linia nie ma szans. */
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--odst-1) var(--odst-3);

  /* ZWĘŻONA: mniejszy padding i ciaśniejsze odstępy. `width: max-content`
     pilnuje, żeby nie rozciągnęła się na całą mapę; `max-width` chroni
     wąskie ekrany. */
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.4rem 0.7rem;

  /* PÓŁPRZEZROCZYSTE TŁO: mapa pod spodem ma być widoczna, ale tekst
     czytelny. `backdrop-filter` rozmywa to, co pod spodem — bez niego cienkie
     napisy na górach i rzekach zlewałyby się z tłem legendy. */
  background: rgba(243, 233, 209, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(120, 92, 52, 0.45);
  border-radius: var(--promien-m);
  box-shadow: 0 2px 8px rgba(40, 26, 10, 0.22);
  font-size: var(--rozmiar-xs);
}

/* Na wąskim ekranie legenda nie może zasłaniać połowy mapy — zmniejszamy
   kropki i odstępy, a zawijanie i tak rozłoży pozycje w dwie linie. */
@media (max-width: 30rem) {
  .legenda {
    /* Na telefonie JEDNA LINIA jest niemożliwa — wracamy do zawijania. */
    flex-wrap: wrap;
    gap: 0.15rem 0.7rem;
    padding: 0.3rem 0.55rem;
    bottom: 0.4rem;
    font-size: 0.68rem;
  }
}

.legenda-pozycja {
  display: flex;
  align-items: center;
  gap: var(--odst-2);
  /* POZYCJA NIE MOŻE SIĘ ŚCISKAĆ (25.10.2026). Przy `nowrap` na rodzicu
     przeglądarka kurczyła pozycje i łamała ICH TREŚĆ w środku („gra
     pojedynkowa" w dwóch liniach), przez co legenda znów miała 52 px
     wysokości. `flex: 0 0 auto` + `nowrap` trzymają każdą pozycję w całości. */
  flex: 0 0 auto;
  white-space: nowrap;
}

.legenda-kropka {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--promien-krag);
  border: 1.5px solid rgba(50, 30, 8, 0.55);
  flex: 0 0 auto;
}

/* --- Panel szczegółów miasta (zamiast tooltipu z 1.0) -------------------- */

/* Kotwica „#mapa" przy przełączaniu lat. Przyklejona nawigacja zasłoniłaby
   początek sekcji, więc odsuwa się ją o jej wysokość (zmierzone: 118 px na
   375 px, 60 px od 40rem). Dzięki temu po kliknięciu w rok widać od razu
   „Wybierz miasteczko" i mapę. */
.sekcja--mapa {
  scroll-margin-top: 7.75rem;
}

@media (min-width: 40rem) {
  .sekcja--mapa {
    scroll-margin-top: 4.25rem;
  }
}

.panel-miasta {
  /* Panel jest pełnej szerokości i sam dzieli się na trzy kolumny. */
  margin-top: var(--odst-4);
  background: var(--tlo-papier);
  border: 2px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  padding: var(--odst-4);
  box-shadow: var(--cien-2);
}

.panel-miasta[hidden] {
  display: none;
}

.panel-miasta-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odst-2);
  margin-bottom: var(--odst-3);
  padding-bottom: var(--odst-2);
  border-bottom: 1px solid var(--linia);
}

/* NAZWA MIASTA NAD KOLUMNAMI (właściciel: „nazwa miasta nad tabelę jako h2”).
   Wcześniej siedziała w `<h3>` w nagłówku panelu — teraz jest nagłówkiem
   poziomu 2, bo panel to samodzielna sekcja z własną treścią. */
.panel-miasta-nazwa {
  margin: 0;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-xl);
}

/* --- PANEL MIASTA: DWIE KOLUMNY JAK NA STRONIE MIASTA (23.10.2026) --------
   Właściciel: „z lewej te parametry co na stronie miasta, z prawej tabela
   z najlepszymi graczami — też jak na stronie miasta, ale tylko top 5”.
   Lewa kolumna to `tabela--parametry` (te same klasy co na stronie miasta),
   więc wygląd arkusza jest identyczny bez kopiowania stylów.
   -------------------------------------------------------------------------- */

.panel-miasta-kolumny {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--odst-4);
  align-items: start;
}

/* Na wąskim ekranie kolumny idą jedna pod drugą (charakterystyka → gracze).
   Bez tego tabela z loginami rozpychała panel i strona przewijała się
   w poziomie na telefonie. */
@media (max-width: 40rem) {
  .panel-miasta-kolumny {
    grid-template-columns: 1fr;
    gap: var(--odst-3);
  }
}

.panel-miasta-kolumna {
  min-width: 0; /* grid item nie może być szerszy niż kolumna */
}

.panel-miasta-podtytul {
  margin: 0 0 var(--odst-2);
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-s);
  color: var(--tekst);
}

/* PLACEHOLDER „wkrótce” — miasto jest w katalogu mapy, ale nie ma wiersza
   w bazie. Właściciel: „jak miasta nie ma w bazie (większość) to placeholder
   »wkrótce«”. Pustych tabel nie rysujemy, bo wyglądają jak błąd wczytywania. */
.panel-miasta-wkrotce {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--odst-2);
  padding: var(--odst-5) var(--odst-3);
  text-align: center;
  background: var(--tlo-papier-ciemny);
  border: 1px dashed var(--linia-mocna);
  border-radius: var(--promien-m);
}

.panel-miasta-wkrotce-napis {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--rozmiar-l);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akcent);
}

/* --- Siatka miast pod mapą ------------------------------------------------ */

.kafel-miasta {
  display: flex;
  flex-direction: column;
  gap: var(--odst-1);
  padding: var(--odst-3);
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-s);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--czas-szybki) var(--krzywa),
    box-shadow var(--czas-szybki) var(--krzywa);
}

.kafel-miasta:hover {
  border-color: var(--akcent);
  box-shadow: var(--cien-1);
  text-decoration: none;
}

.kafel-miasta-nazwa {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-m);
  font-weight: 700;
  color: var(--akcent);
}

.kafel-miasta-param {
  font-family: var(--font-liczby);
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

/* Poziomy pasek epok pod mapą */
.epoki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-2);
  align-items: center;
}

/* --------------------------------------------------------------------------
   NAGŁÓWEK SEKCJI MAPY + NAWIGACJA MIĘDZY LATAMI
   Właściciel: „»Wybierz miasteczko« daj na środek. dodaj nawigację: w 1832
   z prawej od »Wybierz miasteczko« daj ikonkę »1848 >>« z przełączeniem na
   1848 rok. w roku 1848 — z lewej przejście na 1832, a z prawej dalej do
   1869. i w roku 1869 przejście w lewo na 1848."
   -------------------------------------------------------------------------- */

.sekcja-naglowek--mapa {
  /* Nazwa na środku, przejścia na lata po bokach. Kolumny mają nazwy, więc
     kolejność w HTML nie ma znaczenia — a na 375 px układ zmienia się
     w dwa rzędy (nazwa, a pod nią strzałki). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "wstecz srodek dalej";
  align-items: center;
  gap: var(--odst-2);
}

.sekcja-naglowek--mapa .sekcja-naglowek-srodek {
  grid-area: srodek;
  text-align: center;
}

.nawigacja-lat {
  display: flex;
  gap: var(--odst-1);
}

/* Poprzedni rok po LEWEJ od nazwy, następny po PRAWEJ — dzięki temu
   przejście „w tył" i „w przód" zawsze siedzi po tej samej stronie ekranu. */
.nawigacja-lat--wstecz {
  grid-area: wstecz;
  justify-content: flex-start;
}

.nawigacja-lat--dalej {
  grid-area: dalej;
  justify-content: flex-end;
}

.nawigacja-lat-link {
  white-space: nowrap;
}

/* Na wąskim ekranie nazwa u góry, a pod nią oba przejścia w jednym rzędzie
   (poprzedni rok do lewej krawędzi, następny do prawej). */
@media (max-width: 39.99rem) {
  .sekcja-naglowek--mapa {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "srodek srodek"
      "wstecz dalej";
  }
}

/* --------------------------------------------------------------------------
   JEDNA WYSOKOŚĆ STRONY DLA KAŻDEGO ROKU
   Właściciel: „najlepiej by strona zachowała tą samą wysokość - będziemy
   widzieć, jak mapa i zestaw miast się zmieniają, a reszta bez zmian."

   Mapa ma stałą proporcję (3:2) w każdej epoce, więc sama z siebie się nie
   rusza. Różnice biorą się z legendy (raz 2 pozycje, raz 4 — na 375 px to
   jedna albo dwie linie) i z tabeli parametrów — dlatego dajemy im minimalną
   wysokość, taką jak najwyższy wariant. Reszta sekcji jest identyczna.
   -------------------------------------------------------------------------- */

/* WYSOKOŚĆ LEGENDY NIE RUSZA JUŻ UKŁADU (25.10.2026).
   Wcześniej legenda stała w przepływie pod mapą, więc jej wysokość (dwie linie
   na 375 px, jedna od 44rem) przesuwała resztę strony i wymagała `min-height`,
   żeby każda epoka miała TĘ SAMĄ wysokość. Teraz legenda jest NAKŁADKĄ na
   mapie, więc nie zajmuje miejsca w przepływie i `min-height` tylko dodawał
   pusty pas pod treścią (52 px przy jednej linii!). */
.legenda {
  min-height: 0;
}

.panel-miasta {
  min-height: 17.5rem;
}