/* ==========================================================================
   Warriors — pełnoekranowe tło dopasowane do każdego viewportu
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  /* dvh uwzględnia chowający się pasek adresu na mobile */
  min-height: 100dvh;
  background-color: #000;
  overflow: hidden;
  /* zapobiega efektowi "gumki" przy przewijaniu na iOS */
  overscroll-behavior: none;
}

/* Warstwa tła — trzyma się viewportu niezależnie od treści strony */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #000;
}

/* Obraz wypełnia cały ekran, zachowując proporcje (nadmiar jest przycinany).
   Wojownik jest wyśrodkowany w kadrze, więc `center` działa i w pionie,
   i w poziomie — na wąskich ekranach obcinane są boki (dym), nie postać. */
.bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Ekrany bardzo wąskie (telefony w pionie): kadr trzymamy nieco wyżej,
   żeby hełm i tors zostały w polu widzenia. */
@media (orientation: portrait) and (max-aspect-ratio: 3 / 4) {
  .bg__img {
    object-position: center 40%;
  }
}