/* ===================== ESTILOS PARA SHARED SPA Y TRANSICIONES ===================== */

/* Contenedor principal SPA */
#spa-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}

/* Vista base - todas las vistas están superpuestas */
.spa-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100vw) translateZ(0);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s;
  will-change: opacity, transform;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  contain: layout style paint;
  content-visibility: auto;
}

/* Vista activa - visible */
.spa-view.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all;
  transform: translateX(0) translateZ(0);
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
  content-visibility: visible;
}

/* Vista saliendo (hacia izquierda) - transición normal (adelante) */
.spa-view.exiting {
  opacity: 0;
  visibility: visible;
  transform: translateX(-100vw) translateZ(0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s;
}

/* Vista entrando (desde derecha) - transición normal (adelante) */
.spa-view.entering {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateZ(0);
  pointer-events: all;
  z-index: 2;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s;
  content-visibility: visible;
}

/* Vista saliendo (hacia derecha) - transición hacia atrás (retroceso) */
.spa-view.exiting-backward {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translateX(100vw) translateZ(0) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0.5s !important;
}

/* Vista entrando (desde izquierda) - transición hacia atrás (retroceso) */
.spa-view.entering-backward {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) translateZ(0) !important;
  pointer-events: all !important;
  z-index: 2 !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s linear 0s !important;
  content-visibility: visible !important;
}

/* ====== FONDO SPA (#particles-js-spa) ======
   Partículas reales vía particles.js (shared_spa_particles.js): más ligero que
   el doble pseudo animado anterior. El gradiente del body sigue visible. */

#particles-js-spa {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

#particles-js-spa canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ====== FONDO ANIMADO CSS — QR y otras .particles-bg (no SPA) ====== */

#particles-js-qr,
.particles-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  /* visible: el ::before a 200% queda parcialmente fuera; hidden recortaba suaves
     brillos en bordes; no afecta al scroll (capa fixed) */
  overflow: visible !important;
}

/* --- Capa 1: Gradiente líquido --- */
#particles-js-qr::before,
.particles-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 25% 20%,  rgba(43, 87, 231, 0.32)  0%, transparent 52%),
    radial-gradient(ellipse at 75% 80%,  rgba(201, 108, 230, 0.26) 0%, transparent 52%),
    radial-gradient(ellipse at 55% 35%,  rgba(1, 74, 173, 0.18)   0%, transparent 48%),
    radial-gradient(ellipse at 40% 70%,  rgba(216, 105, 229, 0.14) 0%, transparent 42%);
  animation: joggo-liquid 65s ease-in-out infinite;
  will-change: transform;
}

/* --- Capa 2: Partículas / estrellas --- */
#particles-js-qr::after,
.particles-bg::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  opacity: 0.68;
  background-image:
    radial-gradient(2px 2px at  4%  8%, rgba(255,255,255,0.95) 50%, transparent),
    radial-gradient(2px 2px at 33%  5%, rgba(255,255,255,0.78) 50%, transparent),
    radial-gradient(2px 2px at 62% 18%, rgba(255,255,255,0.65) 50%, transparent),
    radial-gradient(2px 2px at 89% 32%, rgba(255,255,255,0.82) 50%, transparent),
    radial-gradient(2px 2px at 27% 85%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2px 2px at 74% 55%, rgba(255,255,255,0.88) 50%, transparent),
    radial-gradient(2px 2px at 96% 72%, rgba(255,255,255,0.95) 50%, transparent),
    radial-gradient(2px 2px at 48% 42%, rgba(255,255,255,0.92) 50%, transparent),
    radial-gradient(2.5px 2.5px at  9% 45%, rgba(255,255,255,0.78) 50%, transparent),
    radial-gradient(2.5px 2.5px at 40% 22%, rgba(255,255,255,0.82) 50%, transparent),
    radial-gradient(2.5px 2.5px at 79% 11%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2.5px 2.5px at 37% 92%, rgba(255,255,255,0.78) 50%, transparent),
    radial-gradient(2.5px 2.5px at 66% 78%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(2.5px 2.5px at 92% 48%, rgba(255,255,255,0.65) 50%, transparent),
    radial-gradient(3px 3px at 13% 72%, rgba(255,255,255,0.58) 50%, transparent),
    radial-gradient(3px 3px at 57% 88%, rgba(255,255,255,0.48) 50%, transparent),
    radial-gradient(3px 3px at 83% 20%, rgba(255,255,255,0.58) 50%, transparent),
    radial-gradient(3.5px 3.5px at 19% 34%, rgba(255,255,255,0.42) 50%, transparent),
    radial-gradient(4px   4px   at 76% 44%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(3.5px 3.5px at 44% 76%, rgba(255,255,255,0.40) 50%, transparent),
    radial-gradient(2px 2px at  7% 18%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2px 2px at 44% 12%, rgba(255,255,255,0.80) 50%, transparent),
    radial-gradient(2px 2px at 71%  8%, rgba(255,255,255,0.66) 50%, transparent),
    radial-gradient(2px 2px at 91% 18%, rgba(255,255,255,0.78) 50%, transparent),
    radial-gradient(2px 2px at 18% 95%, rgba(255,255,255,0.64) 50%, transparent),
    radial-gradient(2px 2px at 52% 78%, rgba(255,255,255,0.70) 50%, transparent),
    radial-gradient(2px 2px at 82% 62%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2.5px 2.5px at 47% 18%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2px 2px at 93% 92%, rgba(255,255,255,0.66) 50%, transparent),
    radial-gradient(2.5px 2.5px at 26% 58%, rgba(255,255,255,0.63) 50%, transparent),
    radial-gradient(2px 2px at 67% 24%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2px 2px at  2% 42%, rgba(255,255,255,0.65) 50%, transparent),
    radial-gradient(2px 2px at 98% 56%, rgba(255,255,255,0.70) 50%, transparent),
    radial-gradient(2px 2px at 28% 14%, rgba(255,255,255,0.70) 50%, transparent),
    radial-gradient(2px 2px at 56% 62%, rgba(255,255,255,0.72) 50%, transparent),
    radial-gradient(2.5px 2.5px at 77% 22%, rgba(255,255,255,0.68) 50%, transparent),
    radial-gradient(2px 2px at 49% 96%, rgba(255,255,255,0.63) 50%, transparent),
    radial-gradient(2px 2px at 22% 50%, rgba(255,255,255,0.62) 50%, transparent),
    radial-gradient(2px 2px at 38% 29%, rgba(255,255,255,0.70) 50%, transparent),
    radial-gradient(2.5px 2.5px at 85%  7%, rgba(255,255,255,0.68) 50%, transparent);
  background-size: 100% 50%;
  background-repeat: repeat-y;
  animation: joggo-stars 85s linear infinite;
  will-change: transform;
}

@keyframes joggo-liquid {
  0%, 100% { transform: translate3d(0,     0,     0) rotate(0deg);    }
  33%      { transform: translate3d(-14%, 10%,  0) rotate(2.8deg);    }
  66%      { transform: translate3d(12%,  -12%, 0) rotate(-2.2deg);    }
}

@keyframes joggo-stars {
  from { transform: translate3d(0, 0,    0); }
  to   { transform: translate3d(0, -50%, 0); }
}

/* --- Temporizador: mantiene aurora simple (popup pequeño) --- */
.temporizador-particles {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.temporizador-particles::before,
.temporizador-particles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.temporizador-particles::before {
  width: 65vmax;
  height: 65vmax;
  top: -20%;
  right: -12%;
  background: radial-gradient(circle, rgba(201,108,230,0.16) 0%, rgba(162,89,255,0.06) 40%, transparent 70%);
  animation: aurora-1 22s ease-in-out infinite;
}

.temporizador-particles::after {
  width: 55vmax;
  height: 55vmax;
  bottom: -18%;
  left: -8%;
  background: radial-gradient(circle, rgba(56,152,255,0.13) 0%, rgba(1,74,173,0.05) 40%, transparent 70%);
  animation: aurora-2 28s ease-in-out infinite;
}

@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-12%, 18%) scale(1.10); }
  50%      { transform: translate(8%, 6%) scale(0.92); }
  75%      { transform: translate(15%, -10%) scale(1.05); }
}

@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(14%, -12%) scale(1.08); }
  50%      { transform: translate(-8%, -18%) scale(0.94); }
  75%      { transform: translate(-12%, 10%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  #particles-js-qr::before,
  #particles-js-qr::after,
  .particles-bg::before,
  .particles-bg::after,
  .temporizador-particles::before,
  .temporizador-particles::after {
    animation: none;
  }
}

/* Contenedores dentro de las vistas */
.spa-view .container,
.spa-view .core-container {
  position: relative;
  z-index: 1;
}

/* Vistas ocultas */
.spa-view:not(.active):not(.entering):not(.entering-backward):not(.exiting):not(.exiting-backward) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100vw) translateZ(0);
  display: flex;
}

/* ===================== VISIBILIDAD DE ELEMENTOS ===================== */

/* Cuando una vista está activa, todos sus elementos deben ser visibles */
.spa-view.active .container,
.spa-view.active .core-container,
.spa-view.active .logo,
.spa-view.active .logo-container,
.spa-view.active .main-heading,
.spa-view.active .login-form,
.spa-view.active .game-list,
.spa-view.entering .container,
.spa-view.entering .core-container,
.spa-view.entering .logo,
.spa-view.entering .logo-container,
.spa-view.entering .main-heading,
.spa-view.entering .login-form,
.spa-view.entering .game-list {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hardware acceleration para elementos internos */
.spa-view .container,
.spa-view .core-container,
.spa-view .logo,
.spa-view .main-heading,
.spa-view h1,
.spa-view h2 {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===================== SCROLL SIN BARRA PARA VISTAS DE JUGADOR (MÓVIL) ===================== */
/* Permitir scroll pero ocultar la barra de scroll en las vistas de jugador */
#view-intro-jugador.spa-view,
#view-espera-jugador.spa-view,
#view-frase-jugador.spa-view,
#view-espera-frases-jugador.spa-view,
#view-yonunca-jugador.spa-view,
#view-yonunca-final-jugador.spa-view,
#view-intro-jugador.spa-view.active,
#view-espera-jugador.spa-view.active,
#view-frase-jugador.spa-view.active,
#view-espera-frases-jugador.spa-view.active,
#view-yonunca-jugador.spa-view.active,
#view-yonunca-final-jugador.spa-view.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  justify-content: flex-start !important;
}

/* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */
#view-intro-jugador.spa-view::-webkit-scrollbar,
#view-espera-jugador.spa-view::-webkit-scrollbar,
#view-frase-jugador.spa-view::-webkit-scrollbar,
#view-espera-frases-jugador.spa-view::-webkit-scrollbar,
#view-yonunca-jugador.spa-view::-webkit-scrollbar,
#view-yonunca-final-jugador.spa-view::-webkit-scrollbar,
#view-intro-jugador.spa-view.active::-webkit-scrollbar,
#view-espera-jugador.spa-view.active::-webkit-scrollbar,
#view-frase-jugador.spa-view.active::-webkit-scrollbar,
#view-espera-frases-jugador.spa-view.active::-webkit-scrollbar,
#view-yonunca-jugador.spa-view.active::-webkit-scrollbar,
#view-yonunca-final-jugador.spa-view.active::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ===================== VISIBILIDAD ESPECÍFICA PARA VISTAS YONUNCA ===================== */
/* Intro view */
#view-intro.spa-view.active .logo-container_intro,
#view-intro.spa-view.active .logo_intro,
#view-intro.spa-view.active .container,
#view-intro.spa-view.active .qr-container,
#view-intro.spa-view.active .game-info,
#view-intro.spa-view.entering .logo-container_intro,
#view-intro.spa-view.entering .logo_intro,
#view-intro.spa-view.entering .container,
#view-intro.spa-view.entering .qr-container,
#view-intro.spa-view.entering .game-info {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Frase view */
#view-frase.spa-view.active .logo-container_frase,
#view-frase.spa-view.active .logo_frase,
#view-frase.spa-view.active .phrase,
#view-frase.spa-view.active #lottie-container,
#view-frase.spa-view.entering .logo-container_frase,
#view-frase.spa-view.entering .logo_frase,
#view-frase.spa-view.entering .phrase,
#view-frase.spa-view.entering #lottie-container {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Game view */
#view-game.spa-view.active .logo-container_game,
#view-game.spa-view.active .logo_game,
#view-game.spa-view.active .container,
#view-game.spa-view.active .phrase,
#view-game.spa-view.entering .logo-container_game,
#view-game.spa-view.entering .logo_game,
#view-game.spa-view.entering .container,
#view-game.spa-view.entering .phrase {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Stats-likes view */
#view-stats-likes.spa-view.active .logo-container_stats_likes,
#view-stats-likes.spa-view.active .logo_stats_likes,
#view-stats-likes.spa-view.active h1,
#view-stats-likes.spa-view.active .frase-container,
#view-stats-likes.spa-view.active h2,
#view-stats-likes.spa-view.active .reiniciar,
#view-stats-likes.spa-view.entering .logo-container_stats_likes,
#view-stats-likes.spa-view.entering .logo_stats_likes,
#view-stats-likes.spa-view.entering h1,
#view-stats-likes.spa-view.entering .frase-container,
#view-stats-likes.spa-view.entering h2,
#view-stats-likes.spa-view.entering .reiniciar {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Autor solo visible cuando tiene clase .show (después de que termine la frase) */
#view-stats-likes.spa-view.active h3.show,
#view-stats-likes.spa-view.entering h3.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Optimización específica para vistas de jugador */
#view-intro-jugador.spa-view.entering,
#view-espera-jugador.spa-view.entering,
#view-frase-jugador.spa-view.entering,
#view-espera-frases-jugador.spa-view.entering,
#view-yonunca-jugador.spa-view.entering,
#view-yonunca-final-jugador.spa-view.entering {
  transform: translateX(0) translateZ(0);
}

#view-intro-jugador.spa-view.exiting,
#view-espera-jugador.spa-view.exiting,
#view-frase-jugador.spa-view.exiting,
#view-espera-frases-jugador.spa-view.exiting,
#view-yonunca-jugador.spa-view.exiting,
#view-yonunca-final-jugador.spa-view.exiting {
  transform: translateX(-100vw) translateZ(0);
}

/* Bingo / Rulo: misma caja que cualquier .spa-view (100% × 100% de #spa-container) */
#view-bingo-embed.spa-view.joggo-game-embed-view,
#view-rulo-embed.spa-view.joggo-game-embed-view {
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
  background: linear-gradient(90deg, #014aad, #c96ce6);
}

#view-bingo-embed.spa-view.joggo-game-embed-view::before,
#view-rulo-embed.spa-view.joggo-game-embed-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #014aad, #c96ce6);
  transition: opacity 0.18s ease;
}

#view-bingo-embed.spa-view.joggo-game-embed-view.is-loading::before,
#view-rulo-embed.spa-view.joggo-game-embed-view.is-loading::before {
  opacity: 1;
}

#view-bingo-embed.spa-view.joggo-game-embed-view.is-loaded::before,
#view-rulo-embed.spa-view.joggo-game-embed-view.is-loaded::before {
  opacity: 0;
}

/* Iframe llena el área útil de la vista (equivalente a ocupar todo el viewport del contenedor SPA) */
.joggo-game-embed-view .joggo-game-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  margin: 0;
  display: block;
  box-sizing: border-box;
  /* Mismo gradiente por defecto que SPA / index de Bingo-Rulo (evita parche violeta #1c0055) */
  background: linear-gradient(90deg, #014aad, #c96ce6);
  background-attachment: fixed;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.joggo-game-embed-view .joggo-game-embed-iframe.is-loading {
  opacity: 0;
}

.joggo-game-embed-view .joggo-game-embed-iframe.is-loaded {
  opacity: 1;
}