/* Playora — wspólny układ strony gry. Schemat jest jeden, dla każdej gry:
   1. <section class="intro">        — strona tytułowa (tytuł, krótki opis, pieczątka)
   2. <div class="game-layout">      — siatka: lewa kolumna = plansza, prawa kolumna = tryby i pokoje
      a) <section class="arena-card">   — plansza/arena (canvas lub boisko) z nakładką startową
      b) <aside class="sidebar">        — panele ustawień trybów (domyślne wartości), a pod nimi
                                          <section class="playora-lobby"> z tworzeniem,
                                          wyszukiwaniem i dołączaniem do pokojów
      c) <section class="controls-card">— klawiszologia; tylko gry czasu rzeczywistego (nieturowe)
   3. <footer>                       — stopka gry
   Klawiszologia siedzi w kolumnie planszy, dopóki gracz nie zacznie meczu. Gra dokłada na
   <body> klasę "in-match", a wtedy klawiszologia znika ze środka i lądzie na samym dole
   (pełna szerokość, pod planszą i panelami). Nagłówek, menu i lobby znikają w meczu tylko tam,
   gdzie gra sama tak zdecyduje (telefon), więc wspólny arkusz ich nie rusza.
   Wszystkie reguły sięgają tylko bezpośrednich dzieci .game-layout — klasa o tej samej nazwie
   wewnątrz planszy (np. .board-panel dla każdej z dwóch plansz Hidden Armady) zostaje własna. */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--playora-sidebar, 320px);
  grid-template-areas:
    "arena tools"
    "legend tools";
  gap: 20px;
  align-items: start;
}
.game-layout > .arena-card, .game-layout > .arena, .game-layout > .board-card, .game-layout > .board-panel { grid-area: arena; min-width: 0; }
.game-layout > .sidebar { grid-area: tools; min-width: 0; }
.game-layout > .controls-card { grid-area: legend; min-width: 0; }
.game-layout .playora-lobby { margin: 0; }
/* Rząd trybów otwiera prawą kolumnę: przyciski dzielą szerokość panelu po równo i nigdy
   nie wychodzą za ramkę — etykieta schodzi pod opis, a nie obok przycisku. */
.mode-row { display: flex; gap: 6px; width: 100%; min-width: 0; }
.mode-row > button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; text-align: center; padding: 9px 5px; white-space: normal;
}
.mode-row > button > small { font-size: 9px; opacity: .72; line-height: 1.25; }
/* Zasady gry mieszkają w kolumnie planszy i ustępują jej miejsca w momencie startu meczu. */
body.in-match .howto-card { display: none; }
/* Mecz trwał: klawiszologia na sam dół, na całą szerokość strony. */
body.in-match .game-layout { grid-template-areas: "arena tools" "legend legend"; }
@media (min-width: 1500px) { .game-layout { --playora-sidebar: 340px; } }
@media (max-width: 1150px) { .game-layout { --playora-sidebar: 280px; gap: 16px; } }
/* Na wąskim ekranie kolumny się układają w jednej: plansza, klawiszologia pod nią, potem tryby i pokoje. */
@media (max-width: 820px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "arena" "legend" "tools"; }
  /* W meczu jest ta sama jedna kolumna: bez tej reguły 1fr zapada się do zera i plansza znika. */
  body.in-match .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "arena" "legend" "tools"; }
}
