/* Tron — Świetlne Cykle. Oprawa udaje konsolkę z wyświetlaczem VFD. */

.stage--tron { width: min(1000px, 100%); }
body > .game-bar { width: min(1000px, 100%); }

/*
 * Obudowa konsolki. Ekran VFD siedzi w ciemnej ramce z nadrukami wokół — tak jak
 * w oryginale, gdzie stała grafika była wydrukowana na szybce, a świeciły tylko
 * segmenty pod nią.
 */
.konsola {
  position: relative;
  width: 100%;
  padding: 14px 14px 34px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, #1b2228, #0d1114 55%, #151b20);
  border: 1px solid rgba(120, 240, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 18px 44px rgba(0, 0, 0, .55);
}

.konsola__ekran {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #04090b;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, .95), 0 0 0 1px rgba(93, 242, 255, .18);
}

#plansza {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 960 / 600;    /* wspólny arkusz zakłada kwadrat — tu musi być inaczej */
  background: transparent;
  border: 0;
  border-radius: 0;
  touch-action: none;
}

.konsola__nadruk {
  position: absolute;
  bottom: 10px;
  margin: 0;
  font-size: .62rem;
  letter-spacing: .3em;
  color: rgba(93, 242, 255, .38);
  text-transform: uppercase;
}

.konsola__nadruk--lewy { left: 22px; }
.konsola__nadruk--prawy { right: 22px; color: rgba(255, 176, 74, .38); }

/* --- sterowanie dotykowe --- */

.pad {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  user-select: none;
}

/* Krzyżak pojawia się tylko na dotyku — myszką gra się klawiaturą. */
@media (pointer: coarse) {
  .pad { display: flex; }
}

.pad__krzyzak {
  position: relative;
  width: 156px;
  height: 156px;
  flex: none;
}

.pad__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: rgba(93, 242, 255, .85);
  background: rgba(93, 242, 255, .08);
  border: 1px solid rgba(93, 242, 255, .3);
  border-radius: 12px;
  touch-action: none;
}

.pad__btn:active { background: rgba(93, 242, 255, .28); }

.pad__btn--gora  { top: 0; left: 52px; }
.pad__btn--dol   { bottom: 0; left: 52px; }
.pad__btn--lewo  { top: 52px; left: 0; }
.pad__btn--prawo { top: 52px; right: 0; }

.pad__boost {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  font: inherit;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  color: #06121a;
  background: radial-gradient(circle at 35% 30%, #b8fbff, #35c9e0 60%, #1a8ea3);
  border: 1px solid rgba(184, 251, 255, .6);
  box-shadow: 0 0 22px rgba(93, 242, 255, .45);
  touch-action: none;
}

.pad__boost:disabled {
  filter: grayscale(.75) brightness(.55);
  box-shadow: none;
}

/* Telefon w poziomie: oprawa musi się skurczyć, żeby plansza zmieściła się w całości */
@media (orientation: landscape) and (max-height: 560px) {
  body > .game-bar { padding: 6px 14px; }
  body > .game-bar h1 { font-size: .95rem; }
  .stage { padding-bottom: 8px; gap: 8px; }
  .konsola { padding: 8px 8px 8px; border-radius: 14px; }
  .konsola__nadruk { display: none; }
  .hint { display: none; }

  .pad {
    position: fixed;
    inset: auto 0 0 0;
    padding: 0 14px 10px;
    pointer-events: none;
    background: none;
  }
  .pad__krzyzak, .pad__boost { pointer-events: auto; }
  .pad__krzyzak { width: 132px; height: 132px; }
  .pad__btn { width: 44px; height: 44px; }
  .pad__btn--gora, .pad__btn--dol { left: 44px; }
  .pad__btn--lewo, .pad__btn--prawo { top: 44px; }
  .pad__boost { width: 84px; height: 84px; }
}