/* ============================================================================
   LOBBY GIER OCZEKUJĄCYCH (23.10.2026)
   ============================================================================
   Komponent używa dwóch miejsc: `nowa-gra.html` (wszystkie miasta) i
   `mapa-*.html` (filtr epoki). Ze strony miasta lobby zostało USUNIĘTE
   decyzją właściciela: „tam tylko wizytówka miasta i statystyki”.

   UKŁAD KARTY GRY — TRZY RÓWNE KOLUMNY (poprawka 23.10.2026):
     lewa  — grafika miasta + KTRÓTKI opis (dawna „specyfika”),
     środek — nazwa + plakietka statusu + plakietka celu z dymkiem
              + cztery parametry (liczba graczy, PD, długość, przeliczenie),
     prawa — zapisani gracze i przycisk CTA.
   Wcześniej lewa kolumna miała sztywne 10 rem, przez co karta wyglądała
   nierówno, a obrazek był miniaturką.

   ZASADY: wygląd z systemu (papier, tokeny), ZERO paska postępu
   („progres bar niepotrzebnie dałeś”), animacje ≤250 ms wyłączane przez
   `prefers-reduced-motion`.
   -------------------------------------------------------------------------- */

.lobby {
  margin-top: var(--odst-4);
}

/* Akapit wprowadzający pod h1 na `nowa-gra.html` (23.10.2026). Właściciel
   podyktował treść; styl ma być spokojny, bez ramki — to zapowiedź, nie karta. */
.lobby-wstep {
  max-width: 75ch;
  margin: 0 0 var(--odst-4);
  font-size: var(--rozmiar-s);
  line-height: 1.6;
  color: var(--tekst);
}

/* --- LISTA ---------------------------------------------------------------- */

.lobby-lista {
  display: grid;
  gap: 0.7rem;
}

/* Karta gry: trzy kolumny 40 / 40 / 20 (23.10.2026). Właściciel: „gry
   oczekujące - 3 kolumny jednakowe - lepiej byłoby np 40-40-20, czyli prawą
   węższą zrobić. wizualnie będzie lepiej.” Prawa kolumna to tylko gracze
   i jeden przycisk, więc nie potrzebuje tyle miejsca co opis i parametry.
   `minmax(0, …)` jest istotne — bez tego długi login rozepchnie kolumnę. */
.lobby-wiersz {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 0.9rem 1.1rem;
  align-items: stretch;
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--linia);
  border-radius: var(--promien-m);
  padding: 0.8rem 1rem 0.9rem;
}

/* Wiersz gry, do której gracz JEST zapisany. POPRAWKA 23.10.2026:
   właściciel zapytał „dlaczego ramki z lewej mają różny kolor?” — lewa
   krawędź była akcentowana dla zapisanego, mocna dla treningowej i zwykła
   dla reszty, co wyglądało jak przypadkowa paleta. Teraz **wszystkie wiersze
   mają jedną krawędź** (`--linia`), a „jesteś zapisany” niesie **plakietka**
   i delikatniejsze tło. */
.lobby-wiersz--zapisany {
  background: var(--tlo-papier-ciemny);
}

/* Wiersz gry treningowej — rozpoznawalny po plakietce „TRENINGOWA”,
   nie po kolorze ramki (patrz wyżej). */
.lobby-wiersz--trening {
  background: var(--tlo-papier);
}

/* LEWA kolumna: obrazek + krótki opis. */
.lobby-wiersz-lewa {
  min-width: 0;
}

.lobby-obraz {
  display: block;
  /* GRAFIKA NIE MOŻE BYĆ PRZYCIĘTA (23.10.2026). Właściciel: „obrazki na górze
     są lekko przycięte”. Przyczyna: `width: 100%` + `max-height` + `object-fit:
     cover` — przeglądarka rozciągała obrazek na szerokość kolumny, a potem
     przycinała to, co nie mieściło się w limicie wysokości.
     Teraz: szerokość NATURALNA, tylko ograniczona do kolumny (`max-width: 100%`),
     wysokość auto, limit wysokości nadal działa — ale przez `max-height`
     na obrazku o naturalnych proporcjach, więc NIC nie jest obcinane.
     Grafika miasta ma przezroczyste brzegi, więc „contain" nie zostawia
     żadnego widocznego pasa tła. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 13rem;
  object-fit: contain;
  /* GRAFIKA BEZ RAMKI (23.10.2026). Właściciel: „grafika miasta BEZ ramki
     (bez border, border-radius, cienia — ma leżeć czysto)”. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Krótki opis („charakterystyka miasta”) — teraz w ŚRODKOWEJ kolumnie
   (23.10.2026). Właściciel: „krótki opis przenieś do środkowej kolumny,
   poprzedź »charakterystyka miasta:« i dalej pogrubieniem”. Treść jest
   pogrubiona, bo to najważniejsza informacja o mieście w tej karcie. */
.lobby-charakterystyka {
  margin: 0 0 0.45rem;
  font-size: var(--rozmiar-s);
  line-height: 1.45;
}

.lobby-charakterystyka-etykieta {
  color: var(--tekst-mutowany);
}

.lobby-charakterystyka-tresc {
  color: var(--tekst);
  font-weight: 700;
}

/* Stara klasa zostaje dla zgodności (render już jej nie używa). */
.lobby-opis-krotki {
  margin: 0.45rem 0 0;
  font-size: var(--rozmiar-xs);
  line-height: 1.5;
  color: var(--tekst-mutowany);
}

/* ŚRODEK: nazwa, plakietki, parametry. */
.lobby-wiersz-srodek {
  min-width: 0;
}

.lobby-wiersz-tytul {
  margin: 0 0 0.35rem;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-m);
  line-height: 1.25;
}

.lobby-znacznik {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  font-family: var(--font-tekst);
  font-size: var(--rozmiar-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tekst);
  background: var(--tlo-papier);
  border: 1px solid var(--linia-mocna);
  border-radius: 999px;
  vertical-align: middle;
}

/* Zamknięte testy — jedyny wariant, który musi „krzyczeć”, bo decyduje
   o tym, kto może wejść. */
.lobby-znacznik--zamkniete {
  border-color: var(--akcent);
  color: var(--akcent);
}

.lobby-znacznik--trening {
  background: var(--tlo-papier-ciemny);
}

/* --- PLAKIETKA CELU („cel: majątek”) -------------------------------------- */

/* Jedna plakietka z dymkiem zamiast ramki + powtórzonego zdania.
   Właściciel: „obok ramki powtarzasz »zgromadzić jak największy majątek«
   — jak dajesz krótką wersję, to długiej już nie”. */
.lobby-cel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
}

.lobby-cel-etykieta {
  padding: 0.1rem 0.5rem;
  font-family: var(--font-tekst);
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--akcent);
  background: var(--tlo-papier);
  border: 1px solid var(--akcent);
  border-radius: var(--promien-s);
}

/* --- PARAMETRY GRY ------------------------------------------------------- */

/* CIAŚNIEJ NIŻ DOTĄD (23.10.2026). Właściciel: „wiersze parametrów ciaśniej
   (mniejszy line-height/odstęp niż dziś)”, bo karta ma się mieścić na
   ekranie telefonu bez przewijania w poziomie. */
.lobby-wiersz-parametry {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  font-size: var(--rozmiar-s);
}

.lobby-parametr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1.35;
}

.lobby-parametr-etykieta {
  color: var(--tekst-mutowany);
}

.lobby-parametr-wartosc {
  color: var(--tekst);
}

/* --- PRAWA KOLUMNA: GRACZE + CTA ----------------------------------------- */

.lobby-wiersz-prawa {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.lobby-wiersz-gracze-tytul {
  margin: 0;
  font-size: var(--rozmiar-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tekst-mutowany);
}

.lobby-wiersz-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-size: var(--rozmiar-s);
}

.lobby-wiersz-brak {
  margin: 0;
  color: var(--tekst-mutowany);
  font-size: var(--rozmiar-xs);
}

/* „JESTEŚ ZAPISANY" jako plakietka (23.10.2026). Właściciel: „dlaczego ramki
   z lewej mają różny kolor?” — wyróżnienie zapisanego gracza przenosimy
   z ramki na wyraźną plakietkę, bo kolor krawędzi niósł dwa różne znaczenia. */
.lobby-wiersz-jestem {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 0.1rem 0.5rem;
  font-size: var(--rozmiar-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--akcent);
  background: var(--tlo-papier);
  border: 1px solid var(--akcent);
  border-radius: 999px;
}

/* „WYPISZ SIĘ" Z GRY OCZEKUJĄCEJ (26.10.2026).
   Właściciel: „przycisk »dołącz« ma się zamienić na »wypisz się«”.
   Stoi pod etykietą „JESTEŚ ZAPISANY", na całą szerokość kolumny — tak samo
   jak „Dołącz", żeby oba stany wyglądały jak ta sama akcja, a nie jak
   przypadkowy drobiazg. */
.lobby-wiersz-wypisz {
  align-self: stretch;
  width: 100%;
  margin-top: 0.35rem;
}

.lobby-wiersz-dolacz {
  align-self: stretch;
  width: 100%;
  margin-top: 0.35rem;
}

/* --- SEKCJA „NOWA ROZGRYWKA” (dół strony) -------------------------------- */

/* Wyśrodkowany blok pod listą (23.10.2026). Właściciel: „POD listą,
   wycentrowany: h2 »Nowa rozgrywka« i przycisk »Załóż nową grę«”.
   Po kliknięciu przycisk znika (`hidden`), a panel rozwija się pod nim. */
/* ODSTĘP POD PRZYCISKIEM (23.10.2026). Właściciel: „pod przyciskiem »Załóż
   nową grę« dodaj wolne miejsce”. Sekcja stoi na końcu strony, więc bez tego
   przycisk dotykał stopki i wyglądał jak ucięty. */
.lobby-nowa {
  margin: var(--odst-5) 0 0;
  padding-bottom: var(--odst-5);
  text-align: center;
}

/* Komunikat dla gościa zamiast formularza (23.10.2026). */
.lobby-zacheta {
  margin: 0;
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
}

/* Nagłówek „Nowa rozgrywka:" jest dziś OSOBNYM .sekcja-naglowek (23.10.2026),
   dlatego dawna klasa nie ma już zastowania — usunięta, żeby nie sugerowała,
   że coś jeszcze jej używa. */

.lobby-nowa-przycisk {
  display: inline-block;
}

/* --- ANIMACJE ------------------------------------------------------------
   Właściciel: „traktuj to jak aplikację, a nie stronę”. Wszystkie przejścia
   są krótkie (≤250 ms) i oparte na `opacity`/`transform`, więc nie powodują
   przeliczania layoutu ani „skakania” treści. `prefers-reduced-motion`
   wyłącza je w całości na końcu pliku. */

@keyframes lobby-wejscie {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lobby-wiersz--wejscie {
  animation: lobby-wejscie 220ms ease-out both;
}

/* Świeżo dołączona gra — krótkie podświetlenie, potem wiersz wraca do
   zwykłego wyglądu. */
@keyframes lobby-podswietlenie {
  0% {
    box-shadow: 0 0 0 0 rgb(139 58 30 / 0);
  }
  35% {
    box-shadow: 0 0 0 3px rgb(139 58 30 / 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(139 58 30 / 0);
  }
}

.lobby-wiersz--podswietlony {
  animation: lobby-podswietlenie 900ms ease-out both;
}

/* Podgląd miasta w formularzu podmienia się z krótkim przejściem (140 ms). */
.lobby-wizytowka--zmiana {
  animation: lobby-wizytowka 140ms ease-out both;
}

@keyframes lobby-wizytowka {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

/* Miasto bez grafiki w manifeście — kafelek zamiast zepsutego obrazka. */
.lobby-obraz--brak,
.lobby-wizytowka-obraz--brak {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: 0.5rem;
  text-align: center;
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
  background: var(--tlo-papier);
  border: 1px dashed var(--linia);
  border-radius: var(--promien-s);
}

/* --- PANEL „ZAŁÓŻ NOWĄ GRĘ” ---------------------------------------------- */

.lobby-panel {
  margin-top: var(--odst-4);
  /* PŁYNNE ROZWIJANIE (23.10.2026) — klasa `.lobby-panel--pokaz` tylko
     doprowadza do stanu końcowego. */
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  opacity: 0;
  transform: translateY(-4px);
}

.lobby-panel--pokaz {
  opacity: 1;
  transform: translateY(0);
}

/* UKŁAD TRZECH KOLUMN — TAK SAMO JAK KARTA GRY (23.10.2026).
   Właściciel: „sekcja ustawień w tym samym układzie 3 kolumn co karta gry:
   lewa obrazek + krótki opis, środek parametry do ustawienia, prawa
   »Załóż grę oczekującą«”. */
.lobby-formularz {
  background: var(--tlo-papier);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien-m);
  box-shadow: var(--cien-2);
  padding: 1rem 1.25rem 1.15rem;
  display: grid;
  gap: var(--odst-3);
}

.lobby-formularz--ustawienia {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  text-align: left;
  /* ODSTĘP POD ROZWINIĘTYM PANELEM (23.10.2026). Właściciel: „pod panelem
     z nową rozgrywką przydałoby się trochę miejsca.” Bez tego przyciski
     „Załóż grę oczekującą” i „Anuluj” dotykały stopki. */
  margin-bottom: var(--odst-6);
}

.lobby-f-lewa,
.lobby-f-srodek,
.lobby-f-prawa {
  min-width: 0;
}

.lobby-f-podglad-grafika img {
  /* Ten sam problem co na liście: width: 100% + cover przycinał grafikę.
     Tutaj też ma być CAŁA widoczna, bez rozciągania ponad naturalny rozmiar. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 13rem;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.lobby-f-prawa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Miasto — karty do wyboru (radio), bo miast może być kilka. */
.lobby-miasta {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--odst-3);
}

.lobby-miasto {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.55rem 0.75rem;
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-s);
  cursor: pointer;
}

/* MIASTO W ZAMKNIĘTYCH TESTACH (23.10.2026). Kafelek jest KLIKALNY (podgląd
   ma działać — właściciel: „widzą, ale jeszcze niedostępne”), ale wygląda
   na wygaszony, żeby różnica była widoczna bez czytania plakietki. */
.lobby-miasto--zablokowane {
  background: var(--tlo-papier-ciemny);
  border-style: dashed;
}

.lobby-miasto--zablokowane .lobby-miasto-nazwa {
  color: var(--tekst-mutowany);
}

/* Komunikat blokady przy przycisku „Załóż grę oczekującą”. Ma być czytelny,
   ale nie krzyczeć — to informacja, nie błąd walidacji. */
.lobby-blokada-miasta {
  margin: 0 0 0.6rem;
  font-size: var(--rozmiar-xs);
  line-height: 1.45;
  color: var(--tekst-mutowany);
}

.przycisk[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.lobby-miasto-opis {
  display: grid;
  gap: 0.1rem;
  font-size: var(--rozmiar-s);
}

.lobby-miasto-nazwa {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-m);
}

.lobby-miasto-szczegoly {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

.lobby-wizytowka-tytul {
  margin: 0 0 0.35rem;
  font-size: var(--rozmiar-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tekst-mutowany);
}

/* --- CELE I PRZELICZENIE ------------------------------------------------- */

.lobby-cele,
.lobby-przeliczenia {
  margin: 0 0 var(--odst-3);
  padding: 0.75rem 1rem 0.85rem;
  border: 1px solid var(--linia);
  border-radius: var(--promien-s);
  background: var(--tlo-papier);
}

.lobby-cele legend,
.lobby-przeliczenia legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.lobby-wybor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0;
  font-size: var(--rozmiar-s);
}

.lobby-wybor-uwaga {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
  font-style: italic;
}

.lobby-przeliczenia-wybory {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* OZNACZENIE „SZYBKA" PRZY INTERWALE (26.10.2026).
   Właściciel: „jeśli przeliczenia co 5 minut, to wtedy maile nie idą,
   natomiast push tak”. Gracz wybiera świadomie, więc plakietka jest widoczna,
   ale nie krzyczy — mała, w kolorze akcentu, obok wartości. */
.lobby-wybor-szybka {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.15rem;
  padding: 0 0.35rem;
  font-size: var(--rozmiar-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--akcent);
  border: 1px solid var(--akcent);
  border-radius: 999px;
}

/* --- KOMUNIKATY ---------------------------------------------------------- */

/* Komunikat NAD listą (23.10.2026) — pogrubiony, bo to potwierdzenie akcji
   („Gra oczekująca założona…”), a nie zwykła informacja. */
.lobby-komunikat-nad {
  margin: 0 0 var(--odst-3);
  padding: 0.55rem 0.85rem;
  font-size: var(--rozmiar-s);
  font-weight: 700;
  color: var(--tekst);
  background: var(--tlo-papier-ciemny);
  border: 1px solid var(--linia-mocna);
  border-left: 4px solid var(--akcent);
  border-radius: var(--promien-s);
}

/* Stan ładowania przycisku (spinner obok etykiety) — bez zmiany szerokości
   przycisku, żeby układ nie „skakał” po kliknięciu. */
.lobby-przycisk--laduje {
  position: relative;
  opacity: 0.8;
  cursor: progress;
}

.lobby-komunikat {
  margin: var(--odst-3) 0 0;
  font-size: var(--rozmiar-s);
}

.lobby-komunikat--blad {
  color: var(--akcent);
  font-weight: 600;
}

.lobby-ladowanie,
.lobby-pusto {
  margin: 0;
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
}

/* --- TABLET -------------------------------------------------------------- */

/* Między 600 a 900 px trzy równe kolumny są za ciasne na parametry
   i przycisk — obrazek ląduje nad środkiem, a prawa kolumna pod nim. */
@media (max-width: 56rem) {
  .lobby-wiersz {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }

  .lobby-wiersz-prawa {
    grid-column: 1 / -1;
  }

  .lobby-formularz--ustawienia {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }

  .lobby-f-prawa {
    grid-column: 1 / -1;
  }

  /* WYBÓR MIASTA NAD SZCZEGÓŁAMI (23.10.2026) — przy 10 miastach kafelki
     potrzebują miejsca, więc na średnich ekranach idą po dwa w rzędzie. */
  .lobby-miasta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- WYBÓR MIASTA NAD SEKCJĄ SZCZEGÓŁÓW (23.10.2026) ----------------------
   Właściciel: „wybór miasta trzeba dać nad sekcją ze szczegółami rozgrywki
   […] załóżmy że będzie 10 miast. i już tam się nie pomieszczą”. Dlatego
   miasta mają własną sekcję z siatką kafelków, a nie pionową listę w kolumnie
   formularza. */
.lobby-wybor-miasta {
  margin: var(--odst-4) 0 0;
  text-align: left;
}

.lobby-wybor-tytul {
  margin: 0 0 var(--odst-2);
  font-size: var(--rozmiar-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tekst-mutowany);
}

/* Kafelki miast: automatyczna liczba kolumn, więc 2 miasta nie rozciągają się
   na całą szerokość, a 10 miast zajmie 3–4 rzędy bez rozjeżdżania layoutu. */
.lobby-miasta {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.lobby-miasto:has(input:checked) {
  border-color: var(--linia-mocna);
  background: var(--tlo-papier-ciemny);
}

/* --- TELEFON ------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Jedna kolumna: obraz, pod nim parametry, na końcu CTA. */
  .lobby-wiersz {
    grid-template-columns: 1fr;
    padding: 0.7rem 0.8rem 0.8rem;
  }

  .lobby-formularz--ustawienia {
    grid-template-columns: 1fr;
    padding: 0.8rem 0.75rem 0.9rem;
  }

  .lobby-obraz,
  .lobby-f-podglad-grafika img {
    max-height: 12rem;
  }

  .lobby-wiersz-dolacz,
  .lobby-nowa-przycisk {
    width: 100%;
  }
}

/* --- OGRANICZONE ANIMACJE -------------------------------------------------
   Kto w systemie ma włączone „ograniczenie animacji”, dostaje wersję
   statyczną: bez przejść, bez podświetleń, bez wjeżdżania wierszy. */
@media (prefers-reduced-motion: reduce) {
  .lobby-wiersz--wejscie,
  .lobby-wiersz--podswietlony,
  .lobby-wizytowka--zmiana,
  .lobby-panel,
  .lobby-panel--pokaz {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}