/* Tunel — nadpisania nad wspólnym assets/css/game.css */

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

.ekran { position: relative; width: 100%; }

/*
 * Wspólny arkusz zakłada kwadratową planszę (`aspect-ratio: 1; max-width: 520px`),
 * a scena tunelu ma 960×420. Bez tych nadpisań widok zostaje ściśnięty do kwadratu.
 */
canvas {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 960 / 420;
  height: auto;
  background: #0e1320;
  border-radius: 16px;
  cursor: pointer;
  touch-action: manipulation;
}

.overlay { border-radius: 16px; }

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

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

.stat__jedn {
  font-size: .72rem;
  color: var(--muted);
}

.stat--bateria { flex: 1 1 200px; }

.pasek {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.pasek__wypelnienie {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width .12s linear;
}

/* Poniżej trzech minut bateria musi kłuć w oczy — to jedyny licznik w tej grze
   i moment, w którym gracz jeszcze może się wycofać cofnięciem ruchu. */
.pasek__wypelnienie--malo { background: linear-gradient(90deg, #fb7185, #ef4444); }

.stat--latarka-lewa { border-color: #fbbf24; box-shadow: 0 0 0 1px #fbbf24 inset; }
.stat--latarka-prawa { border-color: #38bdf8; box-shadow: 0 0 0 1px #38bdf8 inset; }

.status {
  margin: 0;
  min-height: 1.6em;
  font-weight: 700;
  text-align: center;
}

.status--info { color: var(--muted); }
.status--gotowe { color: #4ade80; }
.status--uwaga { color: #fbbf24; }
.status--blad { color: #fb7185; }

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

/* --- dziennik przejść --- */

.dziennik {
  width: 100%;
  max-width: 560px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.dziennik[hidden] { display: none; }

.dziennik__tytul {
  margin: 0 0 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dziennik__lista {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.dziennik__lista li { padding-left: 4px; }

.dziennik__kier {
  display: inline-block;
  min-width: 1.4em;
  font-weight: 800;
  color: var(--sky);
}

.dziennik__kier--wstecz { color: #fbbf24; }
.dziennik__czas { color: var(--muted); }

.dziennik__suma {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-weight: 800;
}

@media (max-width: 560px) {
  .stat__value { font-size: 1.25rem; }
  .dziennik { padding: 12px; }
  .dziennik__lista { font-size: .92rem; }
}

/* Zabezpieczenie na wypadek długiego tekstu w nakładce: treść zaczyna się u góry
   i przewija w obrysie kanwy, zamiast wylewać się na status nad planszą. */
.overlay {
  place-content: center;
  overflow-y: auto;
}