/*
 * Tramwaj — nadpisania nad wspólnym assets/css/game.css
 *
 * DWA UKŁADY, nie jeden skalowany. Na dużym ekranie wskaźniki leżą NA planszy
 * w jej rogach, tak jak w kabinie. Na telefonie w pionie (klasa `tryb-telefon`
 * nadawana przez game.js) plansza staje się pionowa, a wskaźniki schodzą POD
 * nią, gdzie mają całą szerokość ekranu i mogą być czytelne.
 *
 * Sterowanie zostaje w obu układach na planszy — kciuki sięgają tam naturalnie,
 * a przeniesienie go pod planszę kosztowałoby wysokość, której na telefonie nie
 * ma. Dlatego kanwa ma własny kontener `.ekran`: sterowanie i nakładka kotwiczą
 * się do niego, a nie do całej kolumny.
 *
 * Wcześniej był tu jeden blok @media, który wszystko na telefonie ZMNIEJSZAŁ.
 * To było odwrócenie problemu: mały ekran potrzebuje większych etykiet, nie
 * mniejszych — tylko ułożonych inaczej.
 */

body {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*
 * Wskaźniki muszą siedzieć w rogach KANWY, nie kontenera. `.board-wrap` jest
 * wyśrodkowaną siatką i na szerokim ekranie bywa szerszy od planszy, więc
 * potrzebny jest pośredni element o tej samej szerokości co canvas.
 */
.plansza {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.ekran { position: relative; }

/*
 * Wspólny arkusz zakłada kwadrat (`aspect-ratio: 1; max-width: 520px`), a tu
 * plansza ma 960×600 albo 480×600 na telefonie. Bez tych nadpisań widok miasta
 * zostaje ściśnięty do kwadratu. Logika liczy w metrach i skaluje je stałą PX;
 * za dopasowanie do okna odpowiada wyłącznie CSS.
 */
canvas {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 960 / 600;
  height: auto;
  background: #171d2b;
  border-radius: 16px;
  touch-action: none;
  outline: none;
}

/* --- wskaźniki --- */

.hud,
.nawig {
  position: absolute;
  top: 12px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11, 15, 26, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(3px);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.hud { right: 12px; text-align: right; }
.nawig { left: 12px; }

.hud__poz {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 8px;
}

.hud__opis {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud__val {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  min-width: 2.6ch;
  text-align: right;
}

.hud__jedn {
  font-size: .72rem;
  color: var(--muted);
  min-width: 3ch;
  text-align: left;
}

/* przekroczona prędkość i ujemne punkty muszą kłuć w oczy */
.hud__val--alarm { color: #fb7185; }
.hud__val--ostrzezenie { color: #fbbf24; }

.nawig__linia {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nawig__odl {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.nawig__kom {
  font-size: .82rem;
  font-weight: 700;
  color: var(--sky);
  min-height: 1.2em;
}

.nawig__kom--pilne { color: #fbbf24; }

/* --- nastawnik --- */

.nastawnik {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(11, 15, 26, .72);
  border: 1px solid var(--line);
  pointer-events: none;
}

.nastawnik__poz {
  width: 26px;
  padding: 6px 0 5px;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.nastawnik__poz--wybrana { color: #0b0f1a; border-color: transparent; }
.nastawnik__poz--jazda.nastawnik__poz--wybrana { background: #4ade80; }
.nastawnik__poz--zero.nastawnik__poz--wybrana { background: #cbd5e1; }
.nastawnik__poz--ham.nastawnik__poz--wybrana { background: #fbbf24; }
.nastawnik--awaryjny .nastawnik__poz--ham { background: #fb7185; color: #0b0f1a; border-color: transparent; }

/* --- przyciski dotykowe --- */

.dotyk {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.dotyk__btn {
  width: 58px;
  height: 58px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  background: rgba(11, 15, 26, .72);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.dotyk__btn:active { background: var(--surface-hi); transform: translateY(1px); }
.dotyk__btn--stop { font-size: .82rem; color: #fb7185; }

.overlay { border-radius: 16px; }

.overlay .przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* --- podsumowanie na ekranie końcowym --- */

.podsumowanie {
  display: grid;
  gap: 2px;
  width: min(420px, 82vw);
  margin: 4px auto 8px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.podsumowanie__grupa {
  margin-top: 8px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.podsumowanie__wiersz {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}

.podsumowanie__wiersz--suma {
  margin-top: 8px;
  border-bottom: none;
  border-top: 2px solid var(--line);
  padding-top: 8px;
  font-weight: 800;
  font-size: 1.1rem;
}

.podsumowanie__plus { color: #4ade80; }
.podsumowanie__minus { color: #fb7185; }

/* =====================================================================
   TRYB TELEFONU — plansza pionowa, wskaźniki pod nią
   ===================================================================== */

body.tryb-telefon .plansza {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.tryb-telefon canvas {
  max-width: 100%;
  aspect-ratio: 480 / 600;
}

/* wskaźniki wychodzą z rogów planszy w normalny przepływ pod nią */
body.tryb-telefon .hud,
body.tryb-telefon .nawig {
  position: static;
  padding: 0;
  background: none;
  border: none;
  backdrop-filter: none;
  border-radius: 0;
}

body.tryb-telefon .hud {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}

body.tryb-telefon .hud__poz {
  display: block;
  padding: 7px 3px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

body.tryb-telefon .hud__opis {
  display: block;
  font-size: .58rem;
  letter-spacing: .04em;
}

body.tryb-telefon .hud__val {
  display: inline;
  font-size: 1.35rem;
  min-width: 0;
}

body.tryb-telefon .hud__jedn {
  display: inline;
  min-width: 0;
  margin-left: 2px;
  font-size: .62rem;
}

body.tryb-telefon .nawig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 0 2px;
}

body.tryb-telefon .nawig__linia { font-size: .66rem; }
body.tryb-telefon .nawig__odl { font-size: 1.1rem; }

/* komunikat dostaje całą szerokość: to jedyna rzecz, na którą gracz reaguje */
body.tryb-telefon .nawig__kom {
  flex: 1 1 100%;
  font-size: .95rem;
}

/* sterowanie zostaje na planszy, ale urasta do rozmiaru kciuka */
body.tryb-telefon .dotyk { right: 10px; bottom: 10px; gap: 10px; }

body.tryb-telefon .dotyk__btn {
  width: 68px;
  height: 68px;
  font-size: 1.35rem;
  border-radius: 18px;
}

body.tryb-telefon .dotyk__btn--stop { font-size: .95rem; }

body.tryb-telefon .nastawnik { left: 10px; bottom: 10px; gap: 4px; padding: 8px; }

body.tryb-telefon .nastawnik__poz {
  width: 32px;
  padding: 9px 0 8px;
  font-size: .78rem;
}

body.tryb-telefon .tylko-duzy { display: none; }
body.tryb-telefon .hint { font-size: .84rem; }

/* =====================================================================
   TELEFON W POZIOMIE — układ jak na komputerze, tylko plansza ograniczona
   wysokością okna, żeby cała się mieściła bez przewijania
   ===================================================================== */

@media (orientation: landscape) and (max-height: 560px) {
  .plansza { max-width: min(960px, calc((100dvh - 96px) * 1.6)); }
  .dotyk__btn { width: 62px; height: 62px; }
  .hint { display: none; }
}

/* Nakładka na telefonie: plansza ma tu ~460 px wysokości, a podsumowanie bywa
   dłuższe — musi dać się przewinąć zamiast wystawać poza kanwę. */
body.tryb-telefon .overlay {
  place-content: start center;
  padding: 14px;
  overflow-y: auto;
}

body.tryb-telefon .overlay__title { font-size: 1.35rem; }
body.tryb-telefon .overlay__text { font-size: .85rem; }
body.tryb-telefon .podsumowanie { width: min(420px, 88%); }
body.tryb-telefon .podsumowanie__wiersz { padding: 2px 0; font-size: .9rem; }