/* ==========================================================================
   Farmersi 2.0 — Saloon (rozmowy graczy)

   Właściciel: „tabelka przewijana, na górze input […] wypowiedzi innych
   graczy wraz z loginem, w tooltipie godzina i data wysłania".

   Tokeny mają wartości zapasowe, żeby sekcja nie zniknęła, gdyby w danym
   motywie brakowało zmiennej.
   ========================================================================== */

.saloon-lista {
  list-style: none;
  margin: var(--odst-2, 0.5rem) 0 0;
  padding: var(--odst-2, 0.5rem);
  max-height: 22rem;
  overflow-y: auto;
  /* PRAWDZIWE TOKENY PROJEKTU (21.10.2026): `--tlo-pola`, `--obramowanie`
     i `--promien` NIE ISTNIEJĄ w `tokens.css`, więc przeglądarka brała
     wartości zapasowe (szare tło, obcy promień). Teraz lista stoi na papierze,
     jak reszta kart. */
  background: var(--tlo-papier);
  border: 1px solid var(--linia);
  border-radius: var(--promien-m);
  font-size: var(--rozmiar-s, 0.9rem);
  line-height: 1.45;
}

/* Pojedyncza wypowiedź: login wyróżniony, treść zawija się w kolumnie. */
.saloon-wpis {
  padding: 0.15rem 0;
  overflow-wrap: anywhere;
}

.saloon-wpis + .saloon-wpis {
  border-top: 1px solid var(--linia-slaba);
}

.saloon-login {
  font-weight: 700;
  color: var(--akcent, #7b4b21);
}

/* REGRESJA: PRZYWRÓCONE STYLE SALOONU GŁÓWNEGO (28.10.2026).
 *
 * Przy usuwaniu emotikon zniknął cały blok żywych reguł (czas, treść,
 * formularz, pole). Skutek na żywo: pole 230×30, przycisk 92×52, brak
 * odstępu między loginem a godziną („szeryf27.10, 19:40”) — czyli dokładnie
 * to, co zgłosił właściciel i co wyłapał Grok.
 */
.saloon-czas {
  margin-left: 6px;
  font-size: 12px;
  color: var(--tekst-mutowany);
  font-variant-numeric: tabular-nums;
}

.saloon-tresc { color: var(--tekst, inherit); }

.saloon-forma { margin: 0; }

.saloon-pole {
  display: flex;
  gap: var(--odst-2, 0.5rem);
  /* `stretch`, żeby pole i WYŚLIJ miały tę samą wysokość. */
  align-items: stretch;
  width: 100%;
}

.saloon-pole input {
  flex: 1 1 auto;
  min-width: 0;
}

.saloon-pole .przycisk { flex: 0 0 auto; }



.saloon-gosc,
.saloon-pusto {
  margin: var(--odst-2, 0.5rem) 0 0;
  color: var(--tekst-mutowany, #6b5a45);
  font-size: var(--rozmiar-s, 0.9rem);
}

/* Telefon: lista niższa, żeby Saloon nie wypychał „Twoich gier" poza ekran. */
@media (max-width: 47.99rem) {
  .saloon-lista {
    max-height: 15rem;
  }

  .saloon-pole {
    flex-wrap: wrap;
  }

  .saloon-pole input {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   SALOON W ARKUSZU GRY (gra.html) — trzy warianty układu

   Właściciel (instrukcja „SALOON W ARKUSZU GRY", wersja 2): „zakładamy, że to
   będzie długi, ciekawy log — ma być zawsze pod ręką". Dlatego miejsce panelu
   zależy od szerokości ekranu, a nie od kaprysu:
     ≥ 112rem (≈1792 px) — panel po prawej, NAD panelem „Planowane wydatki",
     ≥ 48rem (≈768 px)  — pod przyciskiem „Zapisz decyzje", pełna szerokość,
     < 48rem            — pływająca ikonka + popup na cały ekran.

   REUŻYCIE: lista, wpisy, login, czas, pole i przycisk WYŚLIJ to TE SAME klasy
   co saloon na stronie głównej (`saloon-*`). Ten plik dokłada tylko to, czego
   strona główna nie potrzebuje: nagłówek z licznikiem, wpisy Izzi/botów,
   wpisy systemowe, szybkie teksty i trzy warianty umieszczenia.
   ========================================================================== */

.saloon-gry {
  /* Panel w przepływie (wariant średni) — karta jak reszta arkusza. */
  display: flex;
  flex-direction: column;
  gap: var(--odst-2, 0.5rem);
  padding: var(--odst-3, 0.75rem);
  min-width: 0;
}

/* Nagłówek: tytuł + licznik + zwijanie (duży) / zamknięcie (popup). */
.saloon-gry-naglowek {
  display: flex;
  align-items: center;
  gap: var(--odst-2, 0.5rem);
}

.saloon-gry-tytul {
  margin: 0;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-l, 1.1rem);
  font-weight: 700;
  color: var(--tekst);
}

.saloon-gry-dopisek {
  margin: 0;
  font-size: var(--rozmiar-xs, 0.8rem);
  color: var(--tekst-mutowany, #6b5a45);
}

/* LICZNIK NOWYCH — czerwona pigułka jak przy „moich grach". */
.saloon-gry-licznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--akcent-czerwony, #a83232);
  color: #fff;
  font-size: var(--rozmiar-xs, 0.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.saloon-gry-zwijanie,
.saloon-gry-zamknij {
  margin-left: auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  background: transparent;
  border: 1px solid var(--linia-slaba);
  border-radius: var(--promien-s);
  color: var(--tekst);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.saloon-gry-zwijanie:hover,
.saloon-gry-zwijanie:focus-visible,
.saloon-gry-zamknij:hover,
.saloon-gry-zamknij:focus-visible {
  background: var(--tlo-papier-ciemny);
}

/* Zwijanie ma sens tylko w wariancie dużym; zamknięcie tylko w popupie. */
.saloon-gry-zwijanie { display: none; }
.saloon-gry-zamknij { display: none; }

/* Lista w panelu przewija się WEWNĄTRZ panelu (wymóg instrukcji). */
.saloon-gry-lista {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   WPISY — gracz, Izzi, bot, system, wydarzenie
   -------------------------------------------------------------------------- */

.saloon-gry-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* PRZYCISK „ZAPYTAJ IZZI" Z AWATAREM (28.10.2026).
 *
 * Właściciel: „ikonka »zapytaj izzi« - może wystarczy przycisk z małym
 * awatarem Izziego?”. Twarz Izziego + krótki podpis „IZZI” czyta się szybciej
 * niż dwie linie tekstu, a przycisk nie rozpycha wiersza z polem wpisywania.
 */
.saloon-gry-zapytaj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SAM AWATAR, ALE Z TŁEM (28.10.2026). Właściciel: „przycisk izzi powinien
     mieć jakieś tło, by wyglądał bardziej jak przycisk”. Wcześniej był
     przezroczysty i wyglądał jak sama ikonka obok pola. */
  padding: 0.1rem 0.3rem;
  white-space: nowrap;
  background: var(--tlo-papier-ciemny, #efe2c8);
  border: 1px solid var(--linia-mocna, #7a5a33);
  border-radius: var(--promien-s, 4px);
  cursor: pointer;
}

.saloon-gry-zapytaj:hover {
  background: var(--tlo-papier, #f7ecd6);
}

.saloon-gry-zapytaj-awatar {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
  flex: 0 0 auto;
}

/* WĄSKI PASEK PISANIA, SZEROKIE POLE (28.10.2026).
 *
 * Właściciel: „input tekst również niższy i dużo szerszy. może poszerz całe
 * okienko saloonu?”. Pole bierze całą wolną szerokość (`flex: 1 1 auto`),
 * a przyciski mają stałą, małą szerokość — dzięki temu wpisywanie ma miejsce,
 * a WYŚLIJ i IZZI nie rosną do rozmiaru tekstu.
 */
.saloon-gry-forma .saloon-pole {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.saloon-gry-forma .saloon-pole input {
  flex: 1 1 auto;
  min-width: 0;
  /* Niższe pole: 2.1rem wystarcza na jedną linię tekstu. */
  box-sizing: border-box;
  height: 2.25rem;
  padding: 0.2rem 0.5rem;
}

/* SELEKTORY MOCNIEJSZE — WYŚLIJ NADPISYWAŁ WYSOKOŚĆ (28.10.2026).
 * Zmierzone: WYŚLIJ 44 px, IZZI 36 px, mimo `height` w tej samej regule:
 * `.przycisk--glowny` z components.css ma tę samą specyficzność i wygrywał
 * kolejnością ładowania. Dlatego ścieżka przez `.saloon-pole` (3 klasy). */
.saloon-gry-forma .saloon-pole .przycisk--glowny,
.saloon-gry-forma .saloon-pole .saloon-gry-zapytaj {
  flex: 0 0 auto;
  /* TA SAMA WYSOKOŚĆ (28.10.2026). Właściciel: „przycisk »wyślij« zmniejsz,
     by był takiej wysokości jak przycisk izzi”. */
  /* OBA PRZYCISKI JEDNAKOWEJ WIELKOŚCI (28.10.2026). Właściciel: „przycisk
     izziego - daj ten awatarek większy i oba przyciski jednakowej wielkości”.
     Ta sama wysokość i minimalna szerokość, żeby nie różniły się przy
     zmianie długości etykiety. */
  /* `box-sizing: border-box` KONIECZNE (28.10.2026): bez tego `height`
     dotyczył treści, a padding dokładał 8 px i WYŚLIJ wychodził 44 px
     zamiast 36 px mimo poprawnego `height`. */
  box-sizing: border-box;
  height: 2.25rem;
  /* `min-height` MUSI być nadpisane (28.10.2026): przeglądarka ma globalny
     wymóg 44 px dla przycisków dotykowych, przez co WYŚLIJ był wyższy od IZZI
     mimo identycznego `height`. Na telefonie celowo wracamy do 44 px. */
  min-height: 2.25rem;
  min-width: 3.6rem;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* SZERSZY SALOON (28.10.2026) — właściciel prosił o więcej miejsca na pole
 * i przyciski. Panel dużego układu rośnie o 3rem, a popup telefonu
 * zostaje na 100% szerokości (tam miejsca nie ma). */
@media (min-width: 48rem) {
  .saloon-gry--panel {
    max-width: calc(21rem + 5rem);
  }
}

@media (max-width: 48rem) {
  /* Na telefonie przyciski wracają do 44 px — to minimalny wygodny cel
   * dotykowy; na desktopie wystarczy 36 px (życzenie właściciela). */
  .saloon-gry-forma .saloon-pole .przycisk--glowny,
  .saloon-gry-forma .saloon-pole .saloon-gry-zapytaj {
    min-height: 44px;
  }
}

/* PORTET W SALOONIE (27.10.2026) — jawny rozmiar, bo atrybuty `width`
 * i `height` w JS bywają nadpisywane przez style. Twarze botów mają być
 * czytelne, więc 1.95rem (~31 px) i brak rozmycia przy skalowaniu. */
.saloon-gry-awatar {
  width: 1.95rem;
  height: 1.95rem;
  /* BEZ KÓŁECZKA — jak w wynikach i w intro (27.10.2026). Właściciel:
   * „chyba lepiej nową bez kółka”. Grafiki botów są okrągłe na przezroczystym
   * tle, więc `border-radius` i tło dokładały drugi okrąg. `object-fit:
   * contain`, żeby nic nie obcinało czapki ani kufla. */
  border-radius: 0;
  background: none;
  object-fit: contain;
  flex: 0 0 auto;
}

.saloon-gry-ikona {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--tekst-mutowany, #6b5a45);
}

/* Rola słownie — sam kolor tła nie mówi czytnikowi ekranu, kto pisze. */
.saloon-gry-rola {
  padding: 0 0.3rem;
  border-radius: var(--promien-s);
  background: var(--tlo-papier-ciemny);
  color: var(--tekst-mutowany, #6b5a45);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* IZZI — inny kolor tła (instrukcja pkt 2). */
.saloon-gry-wpis--izzi {
  padding: 0.35rem 0.45rem;
  border-radius: var(--promien-s);
  background: rgba(201, 162, 39, 0.14);
}

/* BOT — inny kolor tła, chłodniejszy od Izzi, żeby nie mylić ich na liście. */
.saloon-gry-wpis--bot {
  padding: 0.35rem 0.45rem;
  border-radius: var(--promien-s);
  background: rgba(90, 107, 122, 0.12);
}

/* WPISY SYSTEMOWE I WYDARZENIA — cienka linia przez całą szerokość. */
.saloon-gry-wpis--system,
.saloon-gry-wpis--wydarzenie {
  padding: 0.3rem 0;
  border-top: 1px solid var(--linia-slaba);
}

.saloon-gry-system {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  text-align: center;
  font-size: var(--rozmiar-xs, 0.8rem);
  color: var(--tekst-mutowany, #6b5a45);
  font-style: italic;
}

.saloon-gry-wpis--wydarzenie .saloon-gry-system {
  font-style: normal;
  color: var(--tekst);
}

/* USUWANIE WŁASNYCH — na desktopie po najechaniu, na telefonie zawsze. */
.saloon-gry-usun {
  margin-left: auto;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
  border-radius: var(--promien-s);
  color: var(--tekst-mutowany, #6b5a45);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  /* Na urządzeniach z myszką chowamy do najechania — lista ma być spokojna. */
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.saloon-gry-wpis:hover .saloon-gry-usun,
.saloon-gry-usun:focus-visible {
  opacity: 1;
}

.saloon-gry-usun:hover {
  color: var(--akcent-czerwony, #a83232);
  background: rgba(168, 50, 50, 0.12);
}

@media (hover: none) {
  /* Telefon: brak najechania, więc przycisk musi być widoczny od razu. */
  .saloon-gry-usun { opacity: 1; }
}

/* --------------------------------------------------------------------------
   /* GOTOWE PYTANIA DO IZZIEGO (28.10.2026).
 *
 * Właściciel: „rząd 2–3 przycisków z ikonką Izziego + tekst pytania,
 * w stylu saloonu (zaokrąglone, drobne, zawijane)”. Bez nowych kolorów —
 * te same zmienne co pigułki szybkich tekstów.
 */
/* JEDEN RZĄD TEKSTÓW POD POLEM (28.10.2026). Szybkie teksty dla sąsiadów
 * i gotowe pytania do Izziego stoją obok siebie — różni je tylko ikonka. */
.saloon-gry-teksty {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: var(--odst-2, 0.5rem);
}

.saloon-gry-gotowe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.saloon-gry-gotowe-pytanie {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  border: 1px solid var(--linia-mocna, #7a5a33);
  border-radius: 999px;
  background: var(--tlo-papier-ciemny, #efe2c8);
  color: var(--tekst, #2b2118);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.saloon-gry-gotowe-pytanie:hover,
.saloon-gry-gotowe-pytanie:focus-visible {
  background: var(--tlo-papier, #f7ecd6);
}

/* Ikonka Izziego — ten sam obrazek co awatar saloonu. */
.saloon-gry-gotowe-ikona {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-image: url('../img/avatars/izzi.png?h=8a29f36b');
  background-size: cover;
  background-position: center;
}

.saloon-gry-gotowe-tekst {
  overflow: hidden;
  text-overflow: ellipsis;
}

SZYBKIE TEKSTY (zamiast emotikon)
   -------------------------------------------------------------------------- */

.saloon-gry-szybkie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--odst-2, 0.5rem);
}

.saloon-gry-szybki {
  padding: 0.25rem 0.55rem;
  min-height: 2rem;
  background: var(--tlo-papier-ciemny);
  border: 1px solid var(--linia-slaba);
  border-radius: 999px;
  color: var(--tekst);
  font-size: var(--rozmiar-xs, 0.8rem);
  font-family: inherit;
  cursor: pointer;
}

.saloon-gry-szybki:hover,
.saloon-gry-szybki:focus-visible {
  border-color: var(--linia-mocna);
  background: var(--tlo-papier);
}

/* Zużyty w tej turze: widoczny, ale nieaktywny — gracz ma widzieć, co już
   wysłał, zamiast szukać tego na liście. */
.saloon-gry-szybki--zuzyty,
.saloon-gry-szybki:disabled {
  opacity: 0.45;
  cursor: default;
  text-decoration: line-through;
}

.saloon-gry-blad {
  margin: var(--odst-2, 0.5rem) 0 0;
}

.saloon-gry-pusto {
  margin: 0;
}

/* --------------------------------------------------------------------------
   WARIANT DUŻY (≥ 112rem): panel po prawej, NAD panelem wydatków
   -------------------------------------------------------------------------- */

@media (min-width: 112rem) {
  .saloon-gry--duzy {
    position: fixed;
    right: 1rem;
    width: 22rem;
    /* `bottom` i `max-height` ustawia JS: panel wydatków zmienia wysokość.
       NAD MENU (20) I PANELEM WYDATKOW (45) - 27.10.2026. */
    z-index: 50;
    background: var(--tlo-papier);
    border: 2px solid var(--linia-mocna);
    border-radius: var(--promien-m);
    box-shadow: var(--cien-2);
    display: flex;
  }

  .saloon-gry--duzy .saloon-gry-zwijanie { display: inline-flex; align-items: center; justify-content: center; }
  .saloon-gry--duzy .saloon-gry-lista { max-height: none; }

  /* ZWINIĘTY: zostaje nagłówek z licznikiem — gracz widzi, że coś przyszło. */
  .saloon-gry--duzy.saloon-gry--zwiniety {
    gap: 0;
    padding-bottom: var(--odst-2, 0.5rem);
  }

  .saloon-gry--duzy.saloon-gry--zwiniety .saloon-gry-dopisek,
  .saloon-gry--duzy.saloon-gry--zwiniety .saloon-gry-lista,
  .saloon-gry--duzy.saloon-gry--zwiniety .saloon-gry-forma,
  .saloon-gry--duzy.saloon-gry--zwiniety .saloon-gry-pusto {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   WARIANT ŚREDNI (48–112rem): pod przyciskiem „Zapisz decyzje", pełna szerokość
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) and (max-width: 111.99rem) {
  .saloon-gry--sredni {
    margin-top: var(--odst-4, 1rem);
    width: 100%;
  }

  .saloon-gry--sredni .saloon-gry-lista {
    max-height: 26rem;
  }
}

/* ZNACZNIK U GÓRY ARKUSZA (wariant średni) — przewija do saloonu. */
/* ZNACZNIK NIE MOŻE PRZESUWAĆ ARKUSZA (27.10.2026).
 *
 * Właściciel: „na wąskim ekranie na desktopie góra arkusza — wydaje mi się, że
 * saloon przesuwa górę w lewo, powstaje puste miejsce. mimo że saloon na samym
 * dole”.
 *
 * Przyczyna: znacznik był `prepend`-owany do `[data-arkusz]`, czyli stawał się
 * PIERWSZYM elementem w przepływie arkusza. Zjadał ~44 px wysokości i przyklejał
 * się do lewej krawędzi — cała góra (miasto,opis, przyciski) zjeżdżała w dół,
 * a nad nią zostawało puste pasmo z samym „Saloon” po lewej.
 *
 * Teraz znacznik wisi w PRAWYM GÓRNYM rogu arkusza (`position: absolute`),
 * więc nie zabiera miejsca w przepływie i nie przesuwa niczego.
 * `[data-arkusz]` dostaje `position: relative` tylko wtedy, gdy trzeba —
 * robi to reguła niżej, więc nie ruszamy arkusza w innych widokach. */
/* ZNACZNIK = TAKI SAM PRZYCISK JAK „INTRO" (27.10.2026).
 *
 * Właściciel: „ten przycisk »saloon« — zrób w takim stylu jak intro i daj obok
 * przycisku intro. by było spójnie”.
 *
 * Znacznik dostaje w JS klasy `przycisk przycisk--maly` i staje obok „intro",
 * więc tutaj zostaje WYŁĄCZNIE odstęp w rzędzie przycisków. Własne tło, ramka
 * i promień były osobnym stylem obok systemu przycisków — to one sprawiały,
 * że plakietka wyglądała „przyklejona" do arkusza. */
/* Wygląd znacznika pochodzi ze WSPÓLNEJ reguły `.arkusz-obraz-przyciski .przycisk`
   w `arkusz.css` (27.10.2026). Tutaj NIE ustawiamy display/gap — to one
   odróżniały „Saloon" od „intro". Klasa `--nowe` (czerwona ramka) zostaje. */
/* Arkusz jest kotwicą dla absolutnego znacznika (tylko na czas jego życia). */
[data-arkusz].ma-znacznik-saloonu,
[data-arkusz]:has(> .saloon-gry-znacznik) {
  position: relative;
}

/* Sam znacznik: prawy górny róg, nad treścią, bez wpływu na układ. */
/* Pozycjonowanie w rogu USUNIĘTE — znacznik stoi obok „intro". */




.saloon-gry-znacznik--nowe {
  border-color: var(--akcent-czerwony, #a83232);
  color: var(--akcent-czerwony, #a83232);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   WARIANT TELEFON (< 48rem): pływająca ikonka + popup na cały ekran
   -------------------------------------------------------------------------- */

.saloon-gry-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--akcent, #8b5a2b);
  color: #fff;
  box-shadow: var(--cien-2);
  cursor: pointer;
  /* NAD PANELEM WYDATKOW (27.10.2026). Panel limitow ma z-index 99,
     wiec ikonka z 95 chowala sie pod nim - widac bylo tylko gorny brzeg.
     Gdy nachodzi na panel, JS i tak ja podnosi, ale sam z-index musi byc
     wyzej, zeby nie zniknela na ulamek sekundy przed przeliczeniem. */
  z-index: 100;
  transition: bottom 150ms ease-out;
}

.saloon-gry-fab--podnies {
  /* Wartość `bottom` ustawia JS — tu tylko sygnał, że jest podniesiona. */
  box-shadow: 0 4px 14px rgba(58, 42, 26, 0.35);
}

.saloon-gry-fab--nowe {
  background: var(--akcent-czerwony, #a83232);
}

.saloon-gry-fab-ikona {
  font-size: 1.4rem;
  line-height: 1;
}

.saloon-gry-fab-licznik {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--akcent-czerwony, #a83232);
  border: 2px solid var(--akcent-czerwony, #a83232);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 47.99rem) {
  .saloon-gry-fab { display: inline-flex; }

  /* MARGINES ZAMIast PODNOSZENIA (27.10.2026).
   *
   * Instrukcja: „ikonka nie może zasłaniać przycisku »Zapisz decyzje« — przy
   * przewinięciu do przycisku podnieś ją wyżej ALBO zostaw margines”.
   *
   * Wybieram margines, bo podnoszenie ikonki zależne od przewijania to wyścig:
   * pozycja liczona w trakcie scrolla bywa nieaktualna, a wtedy ikonka raz
   * zasłania przycisk, raz nie. Rezerwacja miejsca po prawej jest stała i nie
   * zależy od klatki, w której policzyliśmy prostokąty.
   *
   * Wartość 4,5rem = ikonka 3,25rem + 1rem od krawędzi + 0,25rem oddechu. */
  .pasek-gry {
    padding-right: 4.5rem;
  }

  /* Podnoszenie zostaje jako AWARYJNE (bardzo wąskie ekrany, powiększony
     tekst systemowy) — patrz `ustawFab()` w `saloon-gry.js`. */
}

/* POPUP PELNOEKRANOWY (telefon) - ZMIENNA WYSOKOSC (27.10.2026).
 *
 * Wlasciciel: "na mobile jak otwieram klawiature - calosc idzie do gory, brakuje
 * przewijania w pionie i ciagle nie widze wczesniejszych wiadomosci".
 *
 * Przyczyna: popup mial `inset: 0`, czyli wysokosc OKNA, a nie WIDOCZNEGO
 * obszaru. Klawiatura nie zmienia `100dvh`, wiec dolna czesc popupu (pole
 * pisania) wjezdzala pod klawiature, a lista byla przycieta, nie przewijalna.
 *
 * Teraz wysokosc i pozycje bierzemy z `visualViewport` (JS ustawia
 * `--saloon-popup-wys` i `--saloon-popup-gora`). Lista dostaje wlasne
 * przewijanie, wiec miedzy naglowkiem a polem pisania zawsze miesci sie to,
 * co naprawde widac. */
.saloon-gry--popup {
  position: fixed;
  inset: auto;
  top: var(--saloon-popup-gora, 0);
  left: 0;
  right: 0;
  height: var(--saloon-popup-wys, 100dvh);
  max-height: var(--saloon-popup-wys, 100dvh);
  z-index: 120;
  width: 100%;
  margin: 0;
  padding: var(--odst-3, 0.75rem);
  border: 0;
  border-radius: 0;
  background: var(--tlo-papier);
  display: flex;
  flex-direction: column;
  gap: var(--odst-2, 0.5rem);
}

.saloon-gry--popup .saloon-gry-zamknij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saloon-gry--popup .saloon-gry-lista {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.saloon-gry-tlo {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(29, 21, 12, 0.45);
}

/* Blokada przewijania strony pod popupem — inaczej gesty „uciekają" na arkusz. */
body.saloon-gry-popup-otwarty {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .saloon-gry-fab,
  .saloon-gry-usun { transition: none; }
}

/* IZZI NAUCZYCIEL — PODPOWIEDZI PRYWATNE (27.10.2026).
 *
 * Instrukcja właściciela: „Każdy gracz ma w saloonie swojego prywatnego
 * Izzi-nauczyciela […] Wyróżnienie wizualne: awatar Izzi; po najechaniu
 * tooltip »Widoczne tylko dla Ciebie«.”
 *
 * Tło jest to samo co wpisów Izzego (spójność), ale LEWA KRAWĘDŹ jest
 * przerywana — taki wpis nie jest częścią rozmowy graczy i gracz ma to
 * widzieć, nawet nie najeżdżając myszką.
 */
.saloon-gry-wpis--izzi_nauczyciel {
  padding: 0.35rem 0.45rem;
  border-radius: var(--promien-s);
  background: rgba(201, 162, 39, 0.14);
  border-left: 3px dashed rgba(201, 162, 39, 0.75);
}

/* PRYWATNA PODPOWIEDŹ IZZIEGO-NAUCZYCIELA (schemat 62, 27.10.2026).
 *
 * Właściciel: „Wyróżnienie wizualne: awatar Izzi; po najechaniu tooltip
 * »Widoczne tylko dla Ciebie»”. Tło cieplejsze niż zwykły Izzi, żeby gracz
 * odróżnił radę DLA SIEBIE od ogólnego komentarza w dzienniku. */
.saloon-gry-wpis--nauczyciel {
  padding: 0.35rem 0.45rem;
  border-left: 3px solid var(--akcent, #8b5a2b);
  border-radius: var(--promien-s);
  background: rgba(139, 90, 43, 0.1);
}

/* PRZEŁĄCZNIK PODPOWIEDZI IZZIEGO — IKONKA + CHECKBOX (27.10.2026).
 *
 * Właściciel: „i ten przełącznik trzeba zrobić mniejszy. ja bym zrobił ikonkę
 * izzi i checkbox. i w tooltipie »Włącz/wyłącz podpowiedzi Izzi — widoczne
 * tylko dla ciebie«”.
 *
 * Wcześniej był to spory przycisk z napisem — w nagłówku saloonu zajmował
 * więcej miejsca niż tytuł i łamał się na dwie linie („Podpowiedzi Izzi:
 * wł.”). Teraz: mała ikonka Izziego i checkbox, czyli ustawienie, nie akcja.
 * Cały wiersz jest klikalny (label), a checkbox zostaje natywny — działa
 * z klawiatury i z czytnikiem ekranu. */
.saloon-gry-izzi-przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
}

.saloon-gry-izzi-obrazek {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  object-fit: cover;
  /* Bez ramki: ikonka ma być drobna, nie kolejna „plakietka”. */
  flex: 0 0 auto;
}

.saloon-gry-izzi-checkbox {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--akcent, #8b5a2b);
  cursor: pointer;
}

/* DOPISEK „widoczne tylko dla Ciebie" przy prywatnej podpowiedzi Izziego.
   Instrukcja właściciela wymaga WIDOCZNEGO oznaczenia, nie tylko dymka —
   na telefonie nie ma najechania myszką. */
.saloon-gry-prywatne {
  font-style: italic;
  font-size: 0.72rem;
  color: var(--tekst-mutowany, #6b5a45);
}


/* „ZAGRAJ JESZCZE RAZ” POD KOMENTARZEM IZZIEGO (29.10.2026).
 *
 * Właściciel: „pod wpisem Izziego przycisk nowa gra”. To NIE jest część
 * treści wpisu (treść jest czystym tekstem) — osobny pasek pod akapitem,
 * w stylu pozostałych przycisków saloonu i bez nowych kolorów.
 */
.saloon-gry-koniec {
  display: flex;
  justify-content: flex-start;
  margin: 0.35rem 0 0.2rem;
}

.saloon-gry-koniec-nowa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--linia-mocna, #7a5a33);
  border-radius: var(--promien-s, 0.25rem);
  background: var(--tlo-papier-ciemny, #efe2c8);
  color: var(--tekst, #2b2118);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.saloon-gry-koniec-nowa:hover,
.saloon-gry-koniec-nowa:focus-visible {
  background: var(--tlo-papier, #f7ecd6);
}

@media (max-width: 48rem) {
  /* Na telefonie przycisk ma wygodne 44 px, jak inne elementy dotykowe. */
  .saloon-gry-koniec-nowa {
    min-height: 44px;
  }
}

/* LOGIN JAKO PRZYCISK (29.10.2026) — profil gracza z saloonu na index.html.
   Reset wyglądu przycisku, żeby wyglądał jak dotychczasowy login, a nie
   jak przycisk systemowy. */
.saloon-login-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.saloon-login-link:hover,
.saloon-login-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}