/* ==========================================================================
   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.
     Uwaga: translate(-50%,-50%) siedzi na IKONIE, nie na linku — inaczej
     przezroczysty padding (cel dotyku 44 px) przesunąłby środek pinezki. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Pole dotyku 44x44 px jest wymagane, ale pinezka na 322 px mapie ma
     tylko ~22 px. Niewidzialny padding + ujemny margines powiększają cel
     dla palca, nie zmieniając wyglądu. */
  padding: 11px;
  margin: -11px;
  border: none;
  background: none;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}

/* 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;
  }
}

.znacznik-nazwa {
  font-family: var(--font-tresc);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #241a10;
  /* Lekko przezroczyste tło — nazwy miast nachodzą na podpisy z mapy,
     więc tło musi przepuszczać treść pod spodem. */
  background: rgba(251, 246, 233, 0.62);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.5;
}

/* Na 375 px mapa ma ~322 px szerokości, więc etykiety 9 miast nachodzą
   na siebie (zmierzone: 14 kolizji). Pokazujemy samą nazwę miasta
   wskazanego lub aktywnego, a pełną listę dajemy pod mapą. */
.znacznik-nazwa {
  display: none;
}

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

@media (min-width: 44rem) {
  .znacznik-nazwa {
    display: block;
    font-size: 0.6875rem;
  }
}

/* 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: 11px;
  left: 50%;
  width: 1.9rem;
  height: 1.9rem;
  transform: translate(-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 -------------------------------------------------------------- */

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odst-2) var(--odst-4);
  padding: var(--odst-3) var(--odst-4);
  background: var(--tlo-papier-ciemny);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  font-size: var(--rozmiar-xs);
}

.legenda-pozycja {
  display: flex;
  align-items: center;
  gap: var(--odst-2);
}

.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) -------------------- */

.panel-miasta {
  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);
}

.panel-miasta-nazwa {
  margin: 0;
  font-size: var(--rozmiar-l);
}

/* --- 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;
}