/* ===================== TEMA NAVIDAD ===================== */

/* ===================== FUENTE JOGGO ===================== */
@font-face {
  font-family: 'Joggo-Font';
  src: url('/01_Yo_nunca/src/fuentes/ChauPhilomeneOne-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* ===================== OCULTAR PARTÍCULAS EN NAVIDAD ===================== */
body.navidad-theme #particles-js,
body.navidad-theme #tsparticles,
body.navidad-theme #particles-js-spa,
body.navidad-theme #particles-js-qr,
body.navidad-theme .particles-bg,
body.navidad-theme .temporizador-particles {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===================== LOTTIES NAVIDEÑOS EN GAMES ===================== */

/* Árbol de Navidad - izquierda centrado verticalmente */
body.navidad-theme .navidad-christmas-tree-container {
  position: fixed !important;
  left: 5vw !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: min(20vw, 300px) !important;
  height: auto !important;
  z-index: 100 !important;
  pointer-events: none !important;
}

/* Santa volando - animación cruzando la pantalla */
body.navidad-theme .navidad-santa-container {
  position: fixed !important;
  top: 12vh !important;
  left: -25vw !important;
  width: min(25vw, 320px) !important;
  height: auto !important;
  z-index: 99 !important;
  pointer-events: none !important;
  animation: santa-fly 20s linear infinite !important;
}

@keyframes santa-fly {
  0% {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
  }
  5% {
    opacity: 1 !important;
  }
  95% {
    opacity: 1 !important;
  }
  100% {
    transform: translateX(150vw) !important;
    opacity: 0 !important;
  }
}

/* Happy Santa - esquina inferior derecha */
body.navidad-theme .navidad-happy-santa-container {
  position: fixed !important;
  bottom: 2vh !important;
  right: 2vw !important;
  width: min(18vw, 220px) !important;
  height: auto !important;
  z-index: 100 !important;
  pointer-events: none !important;
}

/* Estrellas fugaces container */
body.navidad-theme .navidad-shooting-stars-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Estrella fugaz individual */
body.navidad-theme .navidad-shooting-star {
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  background: white !important;
  border-radius: 50% !important;
  box-shadow: 
    0 0 6px 2px rgba(255, 255, 255, 0.8),
    0 0 12px 4px rgba(255, 255, 255, 0.4) !important;
  animation: shooting-star 3s linear infinite !important;
}

body.navidad-theme .navidad-shooting-star:nth-child(1) {
  top: 15% !important;
  animation-delay: 0s !important;
}

body.navidad-theme .navidad-shooting-star:nth-child(2) {
  top: 35% !important;
  animation-delay: 1s !important;
}

body.navidad-theme .navidad-shooting-star:nth-child(3) {
  top: 55% !important;
  animation-delay: 2s !important;
}

body.navidad-theme .navidad-shooting-star:nth-child(4) {
  top: 75% !important;
  animation-delay: 0.5s !important;
}

@keyframes shooting-star {
  0% {
    left: -5% !important;
    opacity: 0 !important;
  }
  10% {
    opacity: 1 !important;
  }
  90% {
    opacity: 1 !important;
  }
  100% {
    left: 105% !important;
    opacity: 0 !important;
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  body.navidad-theme .navidad-christmas-tree-container {
    width: min(25vw, 180px) !important;
    left: 2vw !important;
  }
  
  body.navidad-theme .navidad-santa-container {
    width: min(30vw, 200px) !important;
    top: 8vh !important;
  }
  
  body.navidad-theme .navidad-happy-santa-container {
    width: min(22vw, 150px) !important;
    bottom: 1vh !important;
    right: 1vw !important;
  }
}

/* Aplicar solo cuando el tema Navidad este activo */
html.navidad-theme,
body.navidad-theme {
  /* Gradiente de fondo principal para Navidad */
  background: linear-gradient(45deg, rgb(44, 0, 8) 0%, rgb(220, 20, 60) 30%, rgb(0, 0, 0) 100%) !important;
  background-attachment: fixed !important;
  
  /* Efectos de fondo adicionales */
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f9fafb;
}

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

/* ===================== NIEVE (DETRÁS DE ELEMENTOS, DELANTE DEL FONDO) ===================== */
body.navidad-theme::before,
html.navidad-theme body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px),
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px),
    radial-gradient(circle at 90% 25%, rgba(255, 255, 255, 0.3) 2px, transparent 2px) !important;
  background-size: 15vw 15vh, 12vw 12vh, 15vw 15vh, 12vw 12vh, 15vw 15vh !important;
  animation: snow-drift 18s ease-in-out infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.navidad-theme::after,
html.navidad-theme body::after {
  content: '' !important;
  position: fixed !important;
  top: -100vh !important;
  left: 0 !important;
  width: 100vw !important;
  height: 300vh !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px) !important;
  background-size: 6vw 6vh, 8vw 8vh !important;
  animation: snowfall-down 15s linear infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

@keyframes snow-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
  }
  50% {
    transform: translate3d(2vw, 2vh, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
  }
}

@keyframes snowfall-down {
  0% {
    transform: translateY(0);
    opacity: 0.2;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0.2;
  }
}

/* ===================== ESTRELLAS FUGACES DE NAVIDAD ===================== */
.navidad-shooting-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.navidad-shooting-star {
  position: absolute;
  width: 0.8vw;
  height: 0.8vw;
  min-width: 6px;
  min-height: 6px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow:
    0 0 1vw rgba(255, 255, 255, 1),
    0 0 2vw rgba(255, 255, 255, 0.8),
    0 0 3vw rgba(255, 255, 255, 0.6),
    0 0 4vw rgba(255, 255, 255, 0.4);
  animation: navidad-star-core 1.6s ease-in-out infinite alternate;
}

.navidad-shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 55%;
  transform: translateY(-50%);
  width: 12vw;
  height: 0.4vh;
  min-height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0));
  filter: blur(0.1vw);
  border-radius: 0.4vh;
  opacity: 0.9;
}

@keyframes navidad-star-core {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.navidad-shooting-star:nth-child(1) {
  top: 15%;
  animation: star-shoot-1 8s linear infinite;
}

.navidad-shooting-star:nth-child(2) {
  top: 40%;
  animation: star-shoot-2 10s linear infinite;
}

.navidad-shooting-star:nth-child(3) {
  top: 70%;
  animation: star-shoot-3 12s linear infinite;
}

.navidad-shooting-star:nth-child(4) {
  top: 55%;
  animation: star-shoot-4 9s linear infinite;
}

@keyframes star-shoot-1 {
  0% { left: -20px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110vw; opacity: 0; }
}

@keyframes star-shoot-2 {
  0% { left: -40px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110vw; opacity: 0; }
}

@keyframes star-shoot-3 {
  0% { left: -60px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110vw; opacity: 0; }
}

@keyframes star-shoot-4 {
  0% { left: -80px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110vw; opacity: 0; }
}

/* ===================== EFECTOS EN BOTONES ===================== */
body.navidad-theme .btn, 
body.navidad-theme button,
body.navidad-theme input[type="button"],
body.navidad-theme input[type="submit"] {
  position: relative;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3) !important;
  transition: all 0.3s ease !important;
}

body.navidad-theme .btn:hover, 
body.navidad-theme button:hover,
body.navidad-theme input[type="button"]:hover,
body.navidad-theme input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(220, 20, 60, 0.5) !important;
  filter: brightness(1.1) !important;
}

/* ===================== EFECTOS EN TARJETAS/CONTENEDORES ===================== */
body.navidad-theme .card,
body.navidad-theme .container,
body.navidad-theme .panel,
body.navidad-theme .box {
  position: relative;
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(220, 20, 60, 0.3) !important;
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* ===================== CONTENEDOR PRINCIPAL TRANSPARENTE ===================== */
body.navidad-theme .container {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===================== LISTA DE JUEGOS TRANSPARENTE ===================== */
body.navidad-theme .game-list {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===================== BOTONES DE JUEGO NAVIDAD ===================== */
body.navidad-theme .game-btn {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  color: #dc143c !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4) !important;
  backdrop-filter: blur(5px) !important;
  transition: all 0.3s ease !important;
}

body.navidad-theme .game-btn:hover {
  background: rgba(220, 20, 60, 0.2) !important;
  border-color: #dc143c !important;
  color: #ff6b9d !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(220, 20, 60, 0.6) !important;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.8) !important;
}

/* ===================== TÍTULO PRINCIPAL NAVIDAD ===================== */
body.navidad-theme .main-title {
  color: #dc143c !important;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
  font-weight: bold !important;
  position: relative !important;
}

body.navidad-theme .main-title::after {
  content: '🎄';
  position: absolute;
  right: -40px;
  top: 0;
  font-size: 0.8em;
  animation: navidad-bounce 2s ease-in-out infinite;
}

@keyframes navidad-bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(5deg); }
}

/* ===================== HEADER TRANSPARENTE ===================== */
body.navidad-theme .header-container {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===================== BOTÓN DE AJUSTES NAVIDAD ===================== */
body.navidad-theme .settings-btn {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  color: #dc143c !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4) !important;
  backdrop-filter: blur(5px) !important;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

body.navidad-theme .settings-btn:hover {
  background: rgba(220, 20, 60, 0.2) !important;
  border-color: #dc143c !important;
  color: #ff6b9d !important;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.8) !important;
  z-index: 9999 !important;
}

/* ===================== DROPDOWN NAVIDAD ===================== */
body.navidad-theme .dropdown {
  position: fixed !important;
  top: 2vh !important;
  right: 1vw !important;
  z-index: 10000 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(100vw - 2vw) !important;
  max-height: calc(100vh - 4vh) !important;
}

body.navidad-theme .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: calc(100vw - 4vw) !important;
  max-height: calc(100vh - 8vh) !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, 0.9) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 10001 !important;
}

body.navidad-theme .dropdown-item {
  color: #dc143c !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  padding: 0.8rem 1rem !important;
  transition: all 0.3s ease !important;
}

body.navidad-theme .dropdown-item:hover {
  background: rgba(220, 20, 60, 0.2) !important;
  color: #ff6b9d !important;
  text-shadow: 0 0 5px rgba(220, 20, 60, 0.8) !important;
}

/* ===================== TEXTO DE INSTRUCCIONES NAVIDAD ===================== */
body.navidad-theme .instructions-text {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* ===================== EFECTOS EN TÍTULOS ===================== */
body.navidad-theme h1,
body.navidad-theme h3,
body.navidad-theme .title,
body.navidad-theme .heading {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  color: #dc143c !important;
  font-weight: bold !important;
  position: relative;
}

body.navidad-theme h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  color: #fff8e1 !important;
  font-weight: bold !important;
  position: relative;
}

/* ===================== EFECTOS EN INPUTS ===================== */
body.navidad-theme input,
body.navidad-theme textarea,
body.navidad-theme select {
  border: 2px solid rgba(220, 20, 60, 0.5) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: #dc143c !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

body.navidad-theme input:focus,
body.navidad-theme textarea:focus,
body.navidad-theme select:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.5) !important;
  outline: none !important;
}

/* ===================== EFECTOS EN ENLACES ===================== */
body.navidad-theme a {
  color: #fff8e1 !important;
  text-decoration: none !important;
  position: relative;
  transition: all 0.3s ease !important;
}

body.navidad-theme a:hover {
  color: #ffd4e5 !important;
  text-shadow: 0 0 5px rgba(220, 20, 60, 0.8) !important;
}

body.navidad-theme a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #dc143c;
  transition: width 0.3s ease;
}

body.navidad-theme a:hover::after {
  width: 100%;
}

/* ===================== QR CONTAINER NAVIDAD ===================== */
body.navidad-theme .qr-container {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

body.navidad-theme .qr-text {
  color: #dc143c !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ===================== YONUNCA FRASE NAVIDAD ===================== */
body.navidad-theme .phrase {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 2px solid rgba(220, 20, 60, 0.8) !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  padding: 3vw;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  body.navidad-theme .navidad-shooting-star {
    width: 4px;
    height: 4px;
  }
}

/* ===================== BINGO - BOMBOPAGE NAVIDAD ===================== */

/* Árbol de Navidad en Bingo */
body.navidad-theme .navidad-christmas-tree-bingo {
  position: absolute;
  left: 41%;
  transform: translateX(-50%);
  bottom: 10vh;
  width: min(20vw, 240px);
  height: auto;
  z-index: 1000;
  pointer-events: none;
}

/* Santa volando en Bingo */
body.navidad-theme .navidad-santa-container {
  position: fixed;
  top: 15vh;
  left: -20vw;
  width: min(28vw, 360px);
  height: auto;
  z-index: 1001;
  pointer-events: none;
  animation: navidad-santa-flight 25s linear infinite;
}

@keyframes navidad-santa-flight {
  0% { transform: translate3d(-120vw, 0, 0); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translate3d(120vw, 0, 0); opacity: 0; }
}

/* Bombo navideño */
body.navidad-theme .bombo-fondo {
  border-color: #ffd700 !important;
  background: radial-gradient(circle, #1a472a 0%, #0d260d 65%) !important;
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.4) !important;
  transform: scale(1.3) !important;
}

/* Bombo más grande */
body.navidad-theme .bombo-wrapper {
  transform: scale(1.25) !important;
}

body.navidad-theme .number-ball {
  background: radial-gradient(circle, #ff6b6b 0%, #dc143c 70%) !important;
  color: #ffffff !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4) !important;
}

/* Bola de bingo grande */
body.navidad-theme .bola-bingo {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 20%, transparent 50%),
              linear-gradient(135deg, #dc143c 0%, #8b0000 50%, #4a0000 100%) !important;
  border: 3px solid #ffd700 !important;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.4),
    inset 0 -2px 10px rgba(0, 0, 0, 0.3),
    inset 0 2px 6px rgba(255, 255, 255, 0.4) !important;
}

body.navidad-theme .numero-bingo {
  color: #fff8e1 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Bolas del historial */
body.navidad-theme .bola-historial {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
              linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%) !important;
  color: #1a1a1a !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Tablero del bingo - más compacto y profesional */
body.navidad-theme .grid-tablero {
  gap: 0.3vw !important;
  transform: scale(0.85) !important;
}

body.navidad-theme .tablero-completo {
  transform: scale(0.9) !important;
}

/* Tablero del bingo - más grande y con fuente Joggo */
body.navidad-theme .tablero-wrapper {
  transform: scale(1.2) !important;
  transform-origin: top right !important;
}

body.navidad-theme .grid-tablero {
  gap: 0.5vw !important;
}

body.navidad-theme .celda-tablero {
  font-family: 'Joggo-Font', 'ChauPhilomeneOne-Italic', sans-serif !important;
  min-width: 3.5vw !important;
  min-height: 3.5vw !important;
  padding: 0.6vw !important;
  font-weight: bold !important;
}

/* Árbol de Navidad específico para Bingo */
body.navidad-theme .navidad-christmas-tree-bingo {
  position: absolute !important;
  left: 41% !important;
  transform: translateX(-50%) !important;
  bottom: 10vh !important;
  width: min(20vw, 240px) !important;
  height: auto !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  margin-bottom: 12vh !important;
}

/* Santa volando - más pequeño y con posición variable */
body.navidad-theme .navidad-santa-container {
  position: fixed !important;
  left: -15vw !important;
  width: min(18vw, 200px) !important;
  height: auto !important;
  z-index: 1001 !important;
  pointer-events: none !important;
  animation: navidad-santa-flight 20s linear infinite !important;
}

/* Variantes de posición vertical para Santa */
body.navidad-theme .navidad-santa-container.santa-top {
  top: 5vh !important;
}
body.navidad-theme .navidad-santa-container.santa-mid {
  top: 35vh !important;
}
body.navidad-theme .navidad-santa-container.santa-bottom {
  top: 65vh !important;
}

@keyframes navidad-santa-flight {
  0% {
    transform: translateX(0) !important;
    opacity: 0 !important;
  }
  5% {
    opacity: 1 !important;
  }
  95% {
    opacity: 1 !important;
  }
  100% {
    transform: translateX(135vw) !important;
    opacity: 0 !important;
  }
}

body.navidad-theme .celda-tablero {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.9) 0%, rgba(13, 38, 13, 0.9) 100%) !important;
  border: 2px solid rgba(220, 20, 60, 0.6) !important;
  color: #fff8e1 !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(220, 20, 60, 0.2) !important;
}

body.navidad-theme .celda-tablero:hover {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.9) 0%, rgba(26, 71, 42, 0.9) 100%) !important;
  border-color: #ffd700 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
}

body.navidad-theme .celda-tablero.marcado {
  background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
  border: 3px solid #ffd700 !important;
  color: #fff8e1 !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  animation: navidad-celda-brillar 2s ease-in-out infinite alternate !important;
}

@keyframes navidad-celda-brillar {
  0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5); }
  100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5); }
}

/* Botones del bingo */
body.navidad-theme .boton-comenzar-tablero {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 3px solid #ffd700 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.5) !important;
}

body.navidad-theme .boton-comenzar-tablero:hover {
  background: linear-gradient(135deg, #006400 0%, #013220 100%) !important;
  box-shadow: 0 6px 20px rgba(34, 139, 34, 0.7) !important;
}

body.navidad-theme .boton-pausa {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 3px solid #ffd700 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.navidad-theme .boton-pausa:hover {
  background: linear-gradient(135deg, #006400 0%, #013220 100%) !important;
}

body.navidad-theme .reiniciar {
  background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
  border: 3px solid #ffd700 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.5) !important;
}

body.navidad-theme .reiniciar:hover {
  background: linear-gradient(135deg, #8b0000 0%, #4a0000 100%) !important;
  box-shadow: 0 6px 20px rgba(220, 20, 60, 0.7) !important;
}

body.navidad-theme .boton-atras {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Popups de celebración */
body.navidad-theme .popup-celebracion {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.95) 0%, rgba(13, 38, 13, 0.95) 100%) !important;
  border: 3px solid #ffd700 !important;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
}

body.navidad-theme .popup-celebracion-titulo {
  color: #ffd700 !important;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}

/* Historial */
body.navidad-theme .historial {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.navidad-theme .titulo-texto {
  color: #ffd700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Settings button */
body.navidad-theme .settings-button {
  background: rgba(26, 71, 42, 0.8) !important;
  border: 2px solid #ffd700 !important;
}

/* Modal temporizador */
body.navidad-theme .temporizador-overlay {
  background: linear-gradient(45deg, rgba(44, 0, 8, 0.95) 0%, rgba(220, 20, 60, 0.9) 30%, rgba(0, 0, 0, 0.95) 100%) !important;
}

body.navidad-theme .temporizador-container {
  background: rgba(26, 71, 42, 0.8) !important;
  border: 3px solid #ffd700 !important;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4) !important;
}

body.navidad-theme .temporizador-display {
  color: #ffd700 !important;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;
}

body.navidad-theme .temporizador-btn-cerrar {
  background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
}

/* ===================== BINGO - CARTON MOVIL NAVIDAD ===================== */

/* Pantalla cartón */
body.navidad-theme .pantalla-carton {
  background: linear-gradient(45deg, rgb(44, 0, 8) 0%, rgb(220, 20, 60) 30%, rgb(0, 0, 0) 100%) !important;
  min-height: 100vh !important;
}

/* Título */
body.navidad-theme .titulo-img-carton-movil {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) !important;
}

/* Contenedor de apodo */
body.navidad-theme .apodo-container {
  background: rgba(26, 71, 42, 0.7) !important;
  border: 2px solid rgba(220, 20, 60, 0.6) !important;
  border-radius: 1.5vh !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3) !important;
}

body.navidad-theme .apodo-label {
  color: #fff8e1 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.navidad-theme .apodo-input {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 2px solid rgba(220, 20, 60, 0.5) !important;
  color: #fff8e1 !important;
}

body.navidad-theme .apodo-input:focus {
  border-color: #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

body.navidad-theme .btn-enviar-apodo {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.5) !important;
}

body.navidad-theme .btn-enviar-apodo:hover {
  background: linear-gradient(135deg, #006400 0%, #013220 100%) !important;
  box-shadow: 0 6px 20px rgba(34, 139, 34, 0.7) !important;
}

/* Banner de apodo */
body.navidad-theme .banner-apodo-jugador,
body.navidad-theme .bottom-banner {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.95) 0%, rgba(139, 0, 0, 0.95) 100%) !important;
  border-top: 3px solid #ffd700 !important;
  box-shadow: 0 -4px 15px rgba(255, 215, 0, 0.3) !important;
}

body.navidad-theme .banner-apodo-jugador strong,
body.navidad-theme .bottom-banner strong {
  color: #ffd700 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important;
}

/* Botones añadir/quitar cartón */
body.navidad-theme .btn-add-carton {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
}

body.navidad-theme .btn-remove-carton {
  background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
}

/* Cartón container */
body.navidad-theme .carton-container {
  background: rgba(26, 71, 42, 0.4) !important;
  border: 2px solid rgba(220, 20, 60, 0.5) !important;
  border-radius: 1.5vh !important;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.3) !important;
}

body.navidad-theme .carton {
  background: rgba(26, 71, 42, 0.5) !important;
  border: 2px solid #ffd700 !important;
}

/* Celdas del cartón móvil */
body.navidad-theme .celda {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.9) 0%, rgba(13, 38, 13, 0.9) 100%) !important;
  border: 1px solid rgba(220, 20, 60, 0.5) !important;
  color: #fff8e1 !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.navidad-theme .celda.marcada {
  background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

body.navidad-theme .celda.vacia {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Popups ganador/perdedor */
body.navidad-theme .popup-ganador,
body.navidad-theme .ganador-popup {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.95) 0%, rgba(13, 38, 13, 0.95) 100%) !important;
  border: 3px solid #ffd700 !important;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
}

body.navidad-theme .popup-ganador-titulo,
body.navidad-theme .ganador-title {
  color: #ffd700 !important;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}

body.navidad-theme .ganador-btn {
  background: linear-gradient(135deg, #228b22 0%, #006400 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #ffffff !important;
}

body.navidad-theme .popup-perdedor {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.95) 0%, rgba(139, 0, 0, 0.95) 100%) !important;
  border: 3px solid #ffd700 !important;
}

body.navidad-theme .error-bingo-popup {
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.95) 0%, rgba(139, 0, 0, 0.95) 100%) !important;
  border: 3px solid #ffd700 !important;
}

/* Overlay fin partida */
body.navidad-theme .overlay-fin-partida {
  background: rgba(0, 0, 0, 0.8) !important;
}

body.navidad-theme .mensaje-fin-partida {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.95) 0%, rgba(13, 38, 13, 0.95) 100%) !important;
  border: 3px solid #ffd700 !important;
  color: #fff8e1 !important;
}

body.navidad-theme .mensaje-fin-partida h2 {
  color: #ffd700 !important;
}

/* Bingo free cards */
body.navidad-theme .bingo-free-cards-box {
  background: linear-gradient(135deg, rgba(26, 71, 42, 0.8) 0%, rgba(13, 38, 13, 0.8) 100%) !important;
  border: 2px solid #ffd700 !important;
}

body.navidad-theme .bingo-free-cards-title .shimmer {
  color: #ffd700 !important;
}

/* ===================== ESTILOS GAMES VIEW NAVIDAD (SPA) ===================== */

/* Santa volando: 50% más grande en SPA */
body.navidad-theme .navidad-santa-container {
  width: min(42vw, 540px) !important;
  animation: navidad-santa-flight-games 25s linear infinite;
}

@keyframes navidad-santa-flight-games {
  0% {
    transform: translate3d(-100vw, -50%, 0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translate3d(100vw, -50%, 0);
    opacity: 0;
  }
}

/* Happy Santa en esquina inferior derecha */
body.navidad-theme .navidad-happy-santa-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(20vw, 250px);
  height: auto;
  z-index: 1001;
  pointer-events: none;
}

/* Logo oculto en Navidad en vista games */
body.navidad-theme #logo-fixed-games {
  display: none !important;
}

/* Lista de juegos transparente */
body.navidad-theme .game-list {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  position: relative;
  z-index: 10;
}

/* Lettering de la pantalla de games */
body.navidad-theme .Lettering {
  position: relative;
  z-index: 10;
}

/* Botones de juego Navidad */
body.navidad-theme .game-btn {
  background: rgb(6 145 6 / 90%) !important;
  border: 3px solid rgb(0, 0, 0) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  position: relative;
  z-index: 10;
  font-weight: bold !important;
}

body.navidad-theme .game-btn:hover {
  background: rgba(1, 50, 32, 0.8) !important;
  border-color: rgba(0, 100, 0, 0.9) !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(0, 100, 0, 0.7) !important;
  transform: translateY(-2px) !important;
}

/* Header transparente */
body.navidad-theme .header-container {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  z-index: 9998 !important;
}

/* Botón de ajustes Navidad */
body.navidad-theme .settings-btn {
  background: rgba(1, 50, 32, 0.8) !important;
  border: 2px solid rgba(0, 100, 0, 0.9) !important;
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

body.navidad-theme .settings-btn:hover {
  background: rgba(0, 100, 0, 0.9) !important;
  border-color: rgb(34, 139, 34) !important;
  color: white !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
  z-index: 9999 !important;
}

/* Dropdown Navidad */
body.navidad-theme .dropdown-menu {
  background: rgba(1, 50, 32, 0.95) !important;
  border: 2px solid rgba(0, 100, 0, 0.9) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.6) !important;
  backdrop-filter: blur(20px) !important;

}

body.navidad-theme .dropdown-item {
  color: rgb(255, 215, 0) !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  padding: 0.8rem 1rem !important;
  transition: all 0.3s ease !important;
  font-weight: bold !important;
}

body.navidad-theme .dropdown-item:hover {
  background: rgba(0, 100, 0, 0.4) !important;
  color: rgb(255, 223, 0) !important;
}

/* Texto de instrucciones Navidad */
body.navidad-theme .instructions-text {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Árbol de Navidad container */
body.navidad-theme .navidad-christmas-tree-container {
  position: fixed;
  left: 18%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(25vw, 400px);
  height: min(25vw, 400px);
  z-index: 1000;
  pointer-events: none;
}

/* Core container transparente */
body.navidad-theme .core-container {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===================== ESTILOS ESPECÍFICOS PARA BINGO NAVIDAD ===================== */

/* Tablero completo - celdas verdes navideñas */
body.navidad-theme .celda-tablero {
  background: linear-gradient(135deg, rgba(1, 50, 32, 0.9) 0%, rgba(0, 100, 0, 0.8) 100%) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  color: #fff8e1 !important;
  font-weight: bold !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    0 0 10px rgba(0, 100, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

body.navidad-theme .celda-tablero:hover {
  background: linear-gradient(135deg, rgba(0, 100, 0, 0.95) 0%, rgba(1, 50, 32, 0.9) 100%) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 0 15px rgba(255, 215, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Celdas marcadas - estilo navideño destacado (dorado) */
body.navidad-theme .celda-tablero.marcado {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.95) 0%, rgba(184, 134, 11, 0.9) 50%, rgba(139, 115, 85, 0.9) 100%) !important;
  border: 3px solid rgba(255, 215, 0, 1) !important;
  color: #1a1a1a !important;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
  animation: navidad-celda-brillar 2s ease-in-out infinite alternate !important;
  text-shadow: none !important;
}

@keyframes navidad-celda-brillar {
  0% {
    box-shadow: 
      0 0 15px rgba(255, 215, 0, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: 
      0 0 25px rgba(255, 215, 0, 0.9),
      0 4px 12px rgba(0, 0, 0, 0.5),
      inset 0 2px 4px rgba(255, 255, 255, 0.5);
  }
}

/* Botón Comenzar - estilo navideño verde */
body.navidad-theme .boton-comenzar-tablero,
body.navidad-theme .boton-comenzar {
  background: linear-gradient(135deg, rgb(34, 139, 34) 0%, rgb(0, 100, 0) 100%) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.5) !important;
  font-weight: bold !important;
}

body.navidad-theme .boton-comenzar-tablero:hover,
body.navidad-theme .boton-comenzar:hover {
  background: linear-gradient(135deg, rgb(0, 100, 0) 0%, rgb(1, 50, 32) 100%) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 0, 0.7) !important;
  transform: translateY(-2px) !important;
}

/* Botón Pausar - estilo navideño verde */
body.navidad-theme .boton-pausa {
  background: linear-gradient(135deg, rgb(34, 139, 34) 0%, rgb(0, 100, 0) 100%) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.5) !important;
  font-weight: bold !important;
}

body.navidad-theme .boton-pausa:hover {
  background: linear-gradient(135deg, rgb(0, 100, 0) 0%, rgb(1, 50, 32) 100%) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 0, 0.7) !important;
  transform: translateY(-2px) !important;
}

/* Botón Volver a juegos - estilo navideño verde */
body.navidad-theme .boton-atras {
  background: linear-gradient(135deg, rgb(34, 139, 34) 0%, rgb(0, 100, 0) 100%) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(1, 50, 32, 0.5) !important;
  font-weight: bold !important;
}

body.navidad-theme .boton-atras:hover {
  background: linear-gradient(135deg, rgb(0, 100, 0) 0%, rgb(1, 50, 32) 100%) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 0 6px 20px rgba(0, 100, 0, 0.7) !important;
  transform: translateY(-2px) !important;
}

/* Bolas del historial - estilo navideño dorado con fuente Joggo */
body.navidad-theme .bola-historial {
  font-family: 'Joggo-Font', 'ChauPhilomeneOne-Italic', sans-serif !important;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 20%, transparent 50%), 
              linear-gradient(135deg, rgb(212, 175, 55) 0%, rgb(184, 134, 11) 50%, rgb(139, 115, 85) 100%) !important;
  color: #fff8e1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
}

/* Número del bombo con fuente Joggo */
body.navidad-theme .bombo-numero,
body.navidad-theme .numero-bombo {
  font-family: 'Joggo-Font', 'ChauPhilomeneOne-Italic', sans-serif !important;
}

/* Botón Reiniciar Juego - posición fija izquierda */
body.navidad-theme .reiniciar {
  position: fixed !important;
  bottom: 3vh !important;
  left: 2vw !important;
  z-index: 1200 !important;
  background: linear-gradient(135deg, rgb(220, 20, 60) 0%, rgb(139, 0, 0) 100%) !important;
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.5) !important;
  font-weight: bold !important;
}

body.navidad-theme .reiniciar:hover {
  background: linear-gradient(135deg, rgb(139, 0, 0) 0%, rgb(100, 0, 0) 100%) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow: 0 6px 20px rgba(220, 20, 60, 0.7) !important;
  transform: scale(1.05) !important;
}

/* Footer */
body.navidad-theme .footer__copy {
  color: rgba(255, 255, 255, 0.7) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}