/* ─── Player fullscreen in-page ─── */
:root {
  --game-transition-ms: 480ms;
  --game-transition-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.app-shell {
  transition: transform var(--game-transition-ms) var(--game-transition-ease);
  will-change: transform;
}

.game-player {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000;
  transform: translateX(100%);
  transition: transform var(--game-transition-ms) var(--game-transition-ease);
  will-change: transform;
}

.game-player[hidden] {
  display: none !important;
  pointer-events: none;
}
.game-player:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.game-player__shell {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
}

.game-player__home {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(8, 10, 16, 0.45);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.game-player__home:hover {
  background: rgba(0, 230, 138, 0.22);
  border-color: rgba(0, 230, 138, 0.45);
  transform: scale(1.04);
}

.game-player__home:active {
  transform: scale(0.96);
}

.game-player__home--inline {
  position: static;
  margin-top: var(--space-md);
}

.game-player__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.game-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.game-player.is-ready .game-player__frame {
  opacity: 1;
  visibility: visible;
}

.game-player__loader,
.game-player__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #050508;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.game-player.is-ready .game-player__loader,
.game-player.is-error .game-player__loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-player__error {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
}

.game-player.is-error .game-player__error {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.game-player__error p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 20rem;
}

/* ─── 4 quadrados → centro ─── */
.game-player__cubes {
  --gp-spread: 1.4rem;
  --gp-size: 1.15rem;
  width: calc(var(--gp-spread) * 2 + var(--gp-size));
  height: calc(var(--gp-spread) * 2 + var(--gp-size));
}

.game-player__cubes--paused .game-player__cube {
  animation-play-state: paused;
  opacity: 0.45;
}

.game-player__cubes-spin {
  position: relative;
  width: 100%;
  height: 100%;
}

.game-player__cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gp-size);
  height: var(--gp-size);
  margin: calc(var(--gp-size) / -2) 0 0 calc(var(--gp-size) / -2);
  border: 2px solid;
  background: transparent;
  box-shadow: 0 0 14px currentColor;
  will-change: transform;
}

.game-player__cube--1 {
  border-color: #00d4ff;
  color: rgba(0, 212, 255, 0.65);
  animation: gp-cube-close-1 1.35s ease-in-out infinite;
}

.game-player__cube--2 {
  border-color: #00e8ff;
  color: rgba(0, 232, 255, 0.65);
  animation: gp-cube-close-2 1.35s ease-in-out infinite;
}

.game-player__cube--3 {
  border-color: #00ff9d;
  color: rgba(0, 255, 157, 0.65);
  animation: gp-cube-close-3 1.35s ease-in-out infinite;
}

.game-player__cube--4 {
  border-color: #7dff68;
  color: rgba(125, 255, 104, 0.65);
  animation: gp-cube-close-4 1.35s ease-in-out infinite;
}

@keyframes gp-cube-close-1 {
  0%, 100% {
    transform: translate(calc(var(--gp-spread) * -1), calc(var(--gp-spread) * -1)) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(0, 0) rotate(180deg) scale(0.75);
  }
}

@keyframes gp-cube-close-2 {
  0%, 100% {
    transform: translate(var(--gp-spread), calc(var(--gp-spread) * -1)) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(0, 0) rotate(-180deg) scale(0.75);
  }
}

@keyframes gp-cube-close-3 {
  0%, 100% {
    transform: translate(var(--gp-spread), var(--gp-spread)) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(0, 0) rotate(180deg) scale(0.75);
  }
}

@keyframes gp-cube-close-4 {
  0%, 100% {
    transform: translate(calc(var(--gp-spread) * -1), var(--gp-spread)) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(0, 0) rotate(-180deg) scale(0.75);
  }
}

body.is-game-playing {
  overflow: hidden;
}

body.is-game-active .app-shell {
  transform: translateX(-100%);
}

body.is-game-active .game-player {
  transform: translateX(0);
}

body.is-game-exiting .app-shell {
  transform: translateX(0);
}

body.is-game-exiting .game-player {
  transform: translateX(100%);
}

/* —— Navegação jogos.php (entrada pela direita) —— */
html.is-browse-return-pending .app-shell {
  transform: translateX(-100%);
}

body.is-browse-opening .app-shell {
  transform: translateX(-100%);
}

body.page-games-browse.is-browse-entering .app-shell {
  transform: translateX(100%);
}

body.page-games-browse.is-browse-active .app-shell,
body.is-browse-returned .app-shell {
  transform: translateX(0);
}

/* —— Navegação perfil / VIP: sem animação (conteúdo troca instantânea; chrome fixo) —— */

body.is-browse-opening,
html.is-browse-return-pending,
body.page-games-browse.is-browse-entering {
  overflow: hidden;
}

html.is-browse-return-pending .app-shell,
body.is-browse-opening .app-shell,
body.page-games-browse.is-browse-entering .app-shell,
body.page-games-browse.is-browse-active .app-shell,
body.is-browse-returned .app-shell {
  transition-duration: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .game-player {
    transition-duration: 0.01ms;
  }
}
@media (min-width: 768px) {
  .game-player__cubes {
    --gp-spread: 1.65rem;
    --gp-size: 1.3rem;
  }
}