/* ============================================================
   GRA „WIEŻA WARSTW" — style podstrony /gra

   Dokładany PO css/baza.css (jak css/koszyk.css na stronie koszyka).
   Korzysta wyłącznie z tokenów; nie dubluje niczego z baza.css.

   ⚠️ Nie pisz w komentarzach sekwencji kończącej komentarz CSS. Pierwszy taki
   znak kończy komentarz, reszta zdania zostaje w kodzie jako śmieć, a parser
   po błędzie zjada wszystko do najbliższego średnika — RAZEM z następną
   deklaracją. W tym projekcie zdarzyło się to już dwa razy.
   ============================================================ */

/* Atrybut `hidden` przegrywa z każdą regułą autorską ustawiającą `display`
   (to tylko reguła przeglądarki `display: none`). Tu przełączamy nim overlaye
   i formularz, więc bez tego elementy zostawałyby widoczne. Ten sam guardrail
   co w css/koszyk.css. */
[hidden] { display: none !important; }

/* ---------- Nagłówek strony ----------
   Ciaśniejszy rytm niż na pozostałych podstronach treściowych. Tam nad tekstem
   ma być powietrze; tutaj każdy piksel nad planszą spycha ją poniżej krawędzi
   ekranu, a to plansza jest powodem, dla którego ktoś tu wszedł.
   Zmierzone: skrócenie odstępów podnosi planszę o ~60 px, dzięki czemu mieści
   się w całości także przy oknie wysokim na 800 px. */
/* ⚠️ SZERSZA KOLUMNA NIŻ POZOSTAŁE PODSTRONY. Reszta serwisu trzyma 960 px, bo
   to komfortowa szerokość do CZYTANIA. Tutaj treścią jest plansza obok rankingu,
   a nie tekst — na ekranie 1985 px kolumna 960 zostawiała po bokach po 500 px
   pustki i plansza nie miała gdzie urosnąć (zgłoszone przez właściciela).
   Sam `.game` centruje swoje kolumny, więc na bardzo szerokim ekranie treść
   nie rozjeżdża się na całą tę szerokość. */
.kb-main--game { max-width: min(1400px, 100%); }

.kb-main--game > h1 {
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
  margin-bottom: 0.4rem;
}
/* Szeroka kolumna sprawia, że lead mieści się w jednej linii zamiast dwóch —
   to kolejne ~25 px, o które plansza może być wyższa. */
.kb-main--game > .kb-lead {
  margin: 0;
  max-width: 92ch;
}

/* ---------- Plansza ---------- */

/* ⚠️ PLANSZA I RANKING OBOK SIEBIE (zmiana 2026-08-01, zgłoszone przez
   właściciela: „skrolowanie na tej karcie jest męczące"). Wcześniej ranking
   i zasady stały jako osobne sekcje POD grą — strona miała ~1700 px i wynik
   był poza ekranem. Plansza jest pionowa (proporcja 420/640), więc obok niej
   i tak zostawało pusto; teraz to miejsce niesie HUD i tabelę wyników.
   Zasady przeniosły się do nakładki startowej, pod przycisk „Zaczynamy".

   ⚠️ SZEROKOŚĆ PIERWSZEJ KOLUMNY PODAJEMY WPROST, NIE PRZEZ `auto`. Przy `auto`
   ścieżka dopasowuje się do max-content, a max-content planszy liczy się z TREŚCI
   NAKŁADKI (nagłówek, zasady), nie z proporcji canvasu — zmierzone: plansza
   dostawała 302 px zamiast 367, przez co zasady zaczynały się przewijać wewnątrz
   okna gry. To gorsze niż przewijanie strony, bo gracz nie spodziewa się scrolla
   w planszy. Zmienna `--stage-w` jest jednym źródłem tej liczby dla siatki i dla
   samej planszy; 0.656 = 420/640, czyli proporcja toru gry. */
/* ⚠️ `max(320px, …)` TO PODŁOGA, BEZ KTÓREJ NAKŁADKA SIĘ PRZEWIJA. Plansza
   kurczy się razem z wysokością okna, ale tekst zasad nie — przy oknie 600 px
   plansza schodziła do 252 px szerokości, treść nakładki potrzebowała o 73 px
   więcej, niż było miejsca, i wracał scroll w środku gry. Poniżej 320 px
   plansza przestaje więc maleć; strona zaczyna się wtedy przewijać normalnie,
   co przy tak niskim oknie i tak jest nieuniknione. */
.game {
  /* ⚠️ 0.875 = TRACK_W/TRACK_H = 420/480 z js/gra.js. Ta liczba MUSI odpowiadać
     tamtym stałym, inaczej silnik doda czarne marginesy po bokach albo u góry
     (skaluje tor przez `min(w/TRACK_W, h/TRACK_H)`). Przy zmianie proporcji
     w silniku popraw ją tutaj ORAZ w `aspect-ratio` niżej.

     ⚠️ TO JEST SZEROKOŚĆ, A OGRANICZA JĄ WYSOKOŚĆ OKNA (`vh`) — i tak ma być.
     Plansza musi zmieścić się na ekranie w pionie, więc o jej rozmiarze decyduje
     wysokość, a szerokość wynika z proporcji. Dlatego „szersza plansza" to
     zawsze zmiana PROPORCJI w js/gra.js, a nie podniesienie liczb tutaj. */
  /* 68vh, nie 70 — przy 70 plansza wystawała 14 px poniżej krawędzi okna
     wysokiego na 800 px (nagłówek strony zjada ~254 px nad nią). Zmieniając
     tę liczbę, sprawdź, czy `planszaDol` mieści się w oknie przy 800 i 1010 px. */
  --stage-w: max(340px, calc(min(68vh, 760px) * 0.875));
  display: grid;
  /* Kolumna boczna ma SUFIT, a całość jest wyśrodkowana — bez tego na ekranie
     1985 px tabela wyników rozciągałaby się na 700 px i cztery wąskie kolumny
     pływałyby w pustce. */
  grid-template-columns: minmax(0, var(--stage-w)) minmax(0, 30rem);
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
}

.game__side {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vh, 1.25rem);
  min-width: 0;
}

/* ⚠️ WYSOKOŚĆ OGRANICZAMY PRZEZ max-width, NIE przez max-height.
   Pierwsza wersja miała `aspect-ratio: 420/640` + `max-height` — i to nie działa:
   max-height przycina wysokość, ale NIE zwęża pudełka, więc plansza robiła się
   szersza niż wyższa (zmierzone: 638 × 518 zamiast pionowej). Gra rysowała się
   wtedy w wąskim pasku pośrodku, z wielkimi czarnymi marginesami po bokach.
   Ograniczenie szerokości pozwala proporcji policzyć wysokość samodzielnie.
   0.656 = 420 / 640, czyli proporcja toru gry. */
.game__stage {
  position: relative;
  width: 100%;
  /* Sufit obniżony z 72vh/640px, odkąd ranking stoi obok planszy — cała strona
     ma się mieścić bez męczącego przewijania. Ta sama zmienna co w siatce. */
  max-width: var(--stage-w);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--bg-deep);
  /* ⚠️ TO JEST PUNKT ODNIESIENIA DLA TEKSTU W NAKŁADCE. Bez niego napisy miały
     sztywny rozmiar w `rem` i po powiększeniu planszy zostawały takie same,
     przez co ginęły w środku (zgłoszone przez właściciela). `cqw` = 1% szerokości
     TEGO elementu, więc treść rośnie razem z planszą i kurczy się razem z nią. */
  container-type: inline-size;
}

.game__canvasbox {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 480;   /* = TRACK_W / TRACK_H z js/gra.js */
}

/* ⚠️ Rozmiar WYŚWIETLANY ustala CSS, rozmiar BUFORA ustawia JS z uwzględnieniem
   devicePixelRatio. Nie wpisuj tu sztywnych pikseli i nie pozwól JS-owi ustawiać
   inline width/height — to ten sam błąd, który przycinał podgląd 3D. */
.game__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;   /* dotknięcie = ruch w grze, nie zoom strony */
  cursor: pointer;
}
.game__canvas:focus-visible { outline: 2px solid var(--accent-eng); outline-offset: -2px; }

/* ---------- Nakładki (start / koniec) ---------- */

.game__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* ⚠️ Odstępy i padding są ciasne CELOWO — nakładka ma wysokość planszy,
     a mieści nagłówek, opis sterowania, przycisk i pięć zasad. Rozluźnienie
     ich sprawia, że treść zaczyna się przewijać WEWNĄTRZ okna gry, czego
     gracz się nie spodziewa. `overflow-y: auto` jest tylko zaworem
     bezpieczeństwa na bardzo niskie okna, nie planem na co dzień. */
  gap: 0.55rem;
  padding: clamp(0.85rem, 3vw, 1.5rem);
  text-align: center;
  background: rgba(16, 18, 22, 0.9);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

/* ⚠️ BEZ TEGO POMIAR KŁAMIE. Elementy kolumnowego flexa mają domyślnie
   `flex-shrink: 1`, więc przy ciasnocie KURCZĄ SIĘ poniżej wysokości własnej
   treści — tekst wychodzi wtedy poza swoje pudełko i nachodzi na sąsiada,
   a `scrollHeight` kontenera nadal równa się `clientHeight`, bo pudełka się
   zmieściły. Wygląda to jak „mieści się idealnie", a jest nachodzeniem.
   Z `flex-shrink: 0` nadmiar uczciwie zgłasza się jako przewinięcie i da się
   go zmierzyć. */
.game__overlay > * { flex-shrink: 0; }

/* ⚠️ KAŻDY ROZMIAR PODANY DWA RAZY — TO NIE POMYŁKA. Pierwsza deklaracja to
   wartość awaryjna dla przeglądarek bez jednostek kontenerowych (`cqw`): jeśli
   ich nie rozumieją, druga deklaracja jest nieprawidłowa i po cichu odpada,
   a zostaje pierwsza. Dzięki temu nigdzie nie trzeba `@supports`. */
.game__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-size: clamp(0.66rem, 2.1cqw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
/* ⚠️ ROZMIARY W NAKŁADCE SĄ DOBRANE POD WYSOKOŚĆ PLANSZY, nie pod estetykę
   samego nagłówka. Pierwsza wersja miała nagłówek clamp(1.5rem, 4vw, 2.25rem)
   i łamała się na dwie linie, a cała treść zajmowała dokładnie tyle, ile było
   miejsca (zmierzone 557 na 557 px) — czyli zero zapasu. U właściciela, przy
   nieco niższym oknie, nakładka zaczęła się przewijać w środku planszy.
   Teraz nagłówek mieści się w jednej linii, a całość zostawia margines. */
.game__overlay h2 {
  margin: 0;
  font-family: var(--font-display);
  /* Dobrane tak, by „Zbuduj najwyższą wieżę" mieściło się w JEDNEJ linii także
     przy najwęższej planszy (~242 px treści przy oknie 700 px). Dwie linie
     kosztują 30 px, których w nakładce nie ma. */
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-size: clamp(1.05rem, 5.4cqw, 2.1rem);
  line-height: 1.2;
}
.game__how {
  margin: 0;
  max-width: 34ch;
  font-size: 0.78rem;
  font-size: clamp(0.72rem, 2.9cqw, 1.02rem);
  color: var(--text-dim);
  line-height: 1.5;
}
.game__how kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  background: var(--bg-elev);
}

/* Zasady w nakładce startowej — pod przyciskiem. Muszą być ZWIĘZŁE: nakładka
   ma wysokość planszy, a nadmiar zacznie się przewijać w jej wnętrzu, co jest
   gorsze niż przewijanie strony. */
.game__rules {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.72rem;
  font-size: clamp(0.68rem, 2.6cqw, 0.95rem);
  line-height: 1.35;
  color: var(--text-dim);
  max-width: 32ch;
  text-align: left;
}
.game__rules li {
  position: relative;
  padding-left: 0.85rem;
}
.game__rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 1px;
  background: var(--accent-hot);   /* kwadracik = warstwa, motyw serwisu */
}
.game__rules b { color: var(--text); font-weight: 600; }

.game__nolottery {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-size: clamp(0.64rem, 2.1cqw, 0.82rem);
  color: var(--text-faint);
}

/* Przycisk też rośnie z planszą — inaczej na dużym ekranie tonie w nakładce. */
.game__overlay .btn {
  font-size: clamp(0.9rem, 3.1cqw, 1.15rem);
  padding: clamp(0.6rem, 2.1cqw, 0.95rem) clamp(1rem, 4cqw, 1.75rem);
}

.game__result {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1;
}
.game__result strong { font-size: clamp(2.5rem, 9vw, 4rem); color: var(--accent-hot-2); }
.game__result span { font-size: 1rem; color: var(--text-dim); margin-left: 0.35rem; }
.game__sub { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-faint); }

.game__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* ---------- Formularz wyniku ---------- */

.game__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(24rem, 100%);
  text-align: left;
}

.game__field { display: flex; flex-direction: column; gap: 0.3rem; }
.game__field > span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-dim);
}
.game__field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg-elev);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}
.game__field input:focus-visible {
  outline: 2px solid var(--accent-eng);
  outline-offset: 1px;
  border-color: var(--accent-eng);
}

.game__check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-dim);
}
.game__check input { margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--accent-hot); }
.game__check a { color: var(--accent-eng-2); }

.game__status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--accent-eng-2);
  max-width: 34ch;
}
.game__status.is-bad { color: #ff8a7a; }

/* Pułapka na automaty — odsunięta poza ekran, ale NIE `display:none`
   ani `visibility:hidden`: część automatów pomija pola ukryte w ten sposób,
   a wtedy cała pułapka przestaje działać. */
.game__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- HUD ---------- */

/* HUD: rząd kafelków nad tabelą wyników. `auto-fit` sam decyduje, czy zmieszczą
   się cztery w rzędzie, czy dwa na dwa — bez osobnych progów w media queries. */
.game__hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}
.game__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--bg-elev);
}
.game__stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.game__stat strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}

/* ⚠️ STOPKA CIAŚNIEJ NIŻ NA POZOSTAŁYCH PODSTRONACH.
   `baza.css` daje jej `margin-top: clamp(2.5rem, 7vh, 4.5rem)` — na stronie
   z długim tekstem to dobrze wygląda, ale tutaj `7vh` rośnie razem z ekranem:
   przy oknie 1010 px dawało **71 px** odstępu, a pod nim jeszcze 104 px samej
   stopki. Właściciel zgłosił to jako „na 2K dolny pasek zwiększył wysokość" —
   i miał rację, tyle że urósł odstęp, a nie sama stopka. Tu treść kończy się
   planszą, więc powietrza pod nią nie potrzeba. */
.kb-main--game ~ .kb-footer { margin-top: clamp(1.25rem, 2.5vh, 2rem); }

/* ---------- Ranking ---------- */

/* Panel rankingu w kolumnie obok planszy */
.game__panel {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--bg-elev);
  padding: clamp(0.85rem, 2vw, 1.25rem);
}
.game__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
}
.game__panel-note {
  margin: 0.35rem 0 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.5;
}

.board__edition {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-faint);
}
.board__edition #boardMonth { color: var(--text-dim); }

.board {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.25rem;
  font-size: var(--fs-small);
}
.board th,
.board td {
  padding: 0.6rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.board thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.board__place {
  font-family: var(--font-display);
  font-weight: 600;
  width: 2.5rem;
  color: var(--text-dim);
}
.board tbody tr:nth-child(1) .board__place { color: var(--accent-hot); }
.board tbody tr:nth-child(2) .board__place,
.board tbody tr:nth-child(3) .board__place { color: var(--accent-hot-2); }
.board__nick { overflow-wrap: break-word; }
.board__layers,
.board__score { font-family: var(--font-mono); text-align: right; }
.board__score { color: var(--text); font-weight: 600; }
.board tr.is-you { background: rgba(61, 139, 255, 0.08); }
.board__you {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-eng-2);
  border: 1px solid var(--accent-eng);
  border-radius: 0.3rem;
  padding: 0.05rem 0.3rem;
  margin-left: 0.35rem;
}
.board__note {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* ---------- Wąskie ekrany ---------- */

/* Poniżej 860 px kolumna obok planszy robi się węższa niż tabela wyników,
   więc cała kolumna schodzi POD planszę. Kolejność w DOM jest już właściwa
   (plansza → HUD → ranking), więc nic nie trzeba przestawiać. */
@media (max-width: 860px) {
  .game {
    grid-template-columns: 1fr;
    /* Ta sama podłoga co na desktopie — plansza i tak nie przekroczy szerokości
       kolumny, bo ma `width: 100%` obok `max-width`. */
    --stage-w: max(340px, calc(min(68vh, 660px) * 0.875));
  }
}

@media (max-width: 420px) {
  .game__stat { padding: 0.5rem 0.6rem; }
  .game__stat strong { font-size: 1.1rem; }
}

/* Reduced motion: rozgrywka MUSI zostać (to gra zręcznościowa — bez ruchu nie
   istnieje), ale ozdoby już nie. Silnik sam wyłącza stygnięcie warstw i napis
   „IDEALNIE!"; tutaj zdejmujemy rozmycie tła nakładki. */
@media (prefers-reduced-motion: reduce) {
  .game__overlay { backdrop-filter: none; background: rgba(16, 18, 22, 0.96); }
}