/*
  GAME page - "GAME" (1:7) / "Games mobile" (353:321) frames.
  This page has no light-mode design in Figma (the photo backdrop + light
  text only work as a dark, moody scene), so it is intentionally
  theme-invariant - the toggle still exists (and stays in sync with the
  rest of the site) but doesn't change this page's own appearance.
*/

.game-wrapper {
  width: 100%;
  min-height: 100vh; /* preenche a viewport: sem "vazio" verde abaixo do canvas
                        quando a janela é mais alta que a arte ou o zoom < 100% */
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  background: #000;
}
.game {
  position: relative;
  width: 144rem;
  height: 103.6rem;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: top center;
}
.game__bg {
  position: absolute;
  inset: 0;
}
.game__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(
      180deg,
      rgb(0, 0, 0) 0%,
      rgba(102, 102, 102, 0.2) 49.519%,
      rgba(102, 102, 102, 0.1) 60.577%,
      rgba(102, 102, 102, 0) 76.923%
    );
}

/* header text stays constant off-white regardless of site theme */
.game .header__brand-text {
  color: #ebf8e1;
}
.game .header__nav {
  color: #e7f2eb;
}

.game__title {
  position: absolute;
  left: 24rem;
  top: 34.5rem;
  width: 96.1rem;
  color: #fdfdfd;
  font: 600 8rem/8.5rem var(--font-body);
  text-align: justify;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.game__quote {
  position: absolute;
  left: 50%;
  top: 44.4rem;
  transform: translateX(-50%);
  width: 98.3rem;
  text-align: center;
  color: #88d3cf;
  font: 700 2rem/normal var(--font-body);
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.game__quote p {
  margin: 0;
}
.game__desc {
  position: absolute;
  left: 32.7rem;
  top: 50.8rem;
  width: 77.5rem;
  color: #fcfcfd;
  font: 400 2rem/normal var(--font-body);
  text-align: justify;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.game__btn {
  position: absolute;
  left: 50%;
  top: 69.5rem;
  transform: translateX(-50%);
  width: auto;
  padding: 0 4.8rem;
  white-space: nowrap;
  height: 9.1rem;
  border: 0;
  border-radius: 1.5rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  color: #fff;
  font: 400 4rem/5rem var(--font-body);
}
.game__btn img {
  width: 5.2rem;
  height: 5.2rem;
}

/*
  MOBILE LAYOUT — "Games mobile" (353:321), 375px design width, same
  convention as css/responsive.css.
*/
.m-game-wrapper {
  display: none;
}

@media (min-width: 768px) {
  .m-game-wrapper {
    display: none;
  }
}

@media (max-width: 767px) {
  .game-wrapper {
    display: none;
  }
  .m-game-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    background: #000;
  }
  .m-game {
    position: relative;
    width: 37.5rem;
    max-width: 100%;
    height: 87.4rem;
    margin: 0 auto;
    overflow: hidden;
  }
  .m-game__bg {
    position: absolute;
    inset: 0;
  }
  .m-game__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .m-game__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%),
      linear-gradient(
        180deg,
        rgb(0, 0, 0) 0%,
        rgba(102, 102, 102, 0.1) 60.577%,
        rgba(102, 102, 102, 0.2) 76.913%,
        rgba(102, 102, 102, 0) 93.75%
      );
  }

  .m-game .m-header__nav {
    color: #e7f2eb;
  }

  .m-game__title {
    position: absolute;
    left: 50%;
    top: 31.2rem;
    transform: translateX(-50%);
    width: 28.4rem;
    text-align: center;
    color: #fdfdfd;
    font: 600 4rem/normal var(--font-body);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }
  .m-game__quote {
    position: absolute;
    left: 50%;
    top: 42.2rem;
    transform: translateX(-50%);
    width: 28.2rem;
    text-align: center;
    color: #88d3cf;
    font: 700 1.2rem/normal var(--font-body);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }
  .m-game__desc {
    position: absolute;
    left: 50%;
    top: 46.2rem;
    transform: translateX(-50%);
    width: 28.2rem;
    color: #fcfcfd;
    font: 400 1.2rem/normal var(--font-body);
    text-align: justify;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  }

  .m-game__btn {
    position: absolute;
    left: 50%;
    top: 62.3rem;
    transform: translateX(-50%);
    width: auto;
    padding: 0 1.6rem;
    white-space: nowrap;
    height: 3.3rem;
    border: 0;
    border-radius: 1rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: #fff;
    font: 400 1rem/normal var(--font-body);
  }
  .m-game__btn img {
    width: 1.6rem;
    height: 1.6rem;
  }

}

/* ============ TRAILER DE FUNDO ============
   O vídeo fica fixo atrás de tudo (desktop e mobile). A foto de fundo antiga
   (.game__bg / .m-game__bg) continua como plano B até o vídeo realmente
   começar a tocar (body.trailer-ready); se ele falhar, nada muda na página.
   - modo fundo: vídeo mudo + camada escura por cima (.game-trailer__shade)
   - modo cinema (body.is-cinema, depois de 20s parado): o conteúdo dissolve
     e a camada escura some, sobrando só o trailer; quando ele acaba tudo
     volta com a mesma transição. Lógica em js/game.js. */
body {
  background: #000;
}
.game-trailer {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity 1.2s ease;
}
body.trailer-ready .game-trailer {
  opacity: 1;
}
.game-trailer__shade {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.62);
  transition: opacity 1.6s ease;
}
body.is-cinema .game-trailer__shade {
  opacity: 0;
}

.game__bg,
.m-game__bg {
  transition: opacity 1.2s ease;
}
body.trailer-ready .game__bg,
body.trailer-ready .m-game__bg {
  opacity: 0;
}

/* tudo que é conteúdo (header, título, texto, botões) dissolve junto */
.game > *:not(.game__bg),
.m-game > *:not(.m-game__bg) {
  transition: opacity 1.6s ease;
}
body.is-cinema .game > *:not(.game__bg),
body.is-cinema .m-game > *:not(.m-game__bg) {
  opacity: 0;
  pointer-events: none;
}

.game-trailer__sound {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 1.4rem/normal var(--font-body);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.game-trailer__sound[hidden] {
  display: none;
}
body.is-cinema .game-trailer__sound {
  opacity: 1;
  pointer-events: auto;
}

/* Quem pediu menos movimento no sistema (prefers-reduced-motion) não recebe o
   vídeo (js/game.js nem baixa o arquivo): fica só a foto de fundo, sem as
   dissolvências longas. O display:none é uma garantia extra. */
@media (prefers-reduced-motion: reduce) {
  .game-trailer,
  .game-trailer__shade,
  .game__bg,
  .m-game__bg,
  .game > *:not(.game__bg),
  .m-game > *:not(.m-game__bg),
  .game-trailer__sound {
    transition: none;
  }
  .game-trailer {
    display: none;
  }
}