:root {
  --violet: #7a00ff;
  --pink: #ff44ff;
  --gold: #ffd166;
  --text: #f8f2ff;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  overflow-x: hidden;
  background: radial-gradient(ellipse at bottom, #2d014d 0%, #000000 100%);
}

/* =========================
  /* HERO */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;       /* ✅ ocupa toda la pantalla */
  overflow: hidden;    /* ✅ evita desbordes */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#hero {
  
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* Efecto orgánico estilo lámpara de lava */
#hero::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    rgba(186, 85, 255, 0.3) 0%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(138, 43, 226, 0.4) 50%,
    rgba(255, 105, 180, 0.3) 75%,
    rgba(186, 85, 255, 0.3) 100%
  );
  animation: auroraMove 12s ease-in-out infinite;
  filter: blur(120px);
  opacity: 0.8;
}

.hero::after {
  animation-delay: -6s;
  transform: rotate(180deg);
}

@keyframes auroraMove {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(180deg) translate(30px, -30px);
  }
  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

/* Partículas flotantes */


@keyframes floatingParticles {
  0% { background-position: 0 0; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}





/* Partículas */
#hero .particles{ position:absolute; inset:0; overflow:hidden; }
#hero .particle{
  position:absolute; width:4px; height:4px; background: rgba(255,215,0,.6); border-radius:50%;
  animation: sparkle 4s linear infinite;
}
@keyframes sparkle{
  0%{ transform: translateY(100vh) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform: translateY(-10vh) rotate(360deg); opacity:0; }
}

/* =========================
   LOGO
   ========================= */
/* === CONTENEDOR HERO GENERAL === */
.hero {
  position: relative;
  text-align: center;

}

/* === LOGO === */
#logo {
  position: relative;
  margin-top: 110px; /* mueve el logo más abajo */
  z-index: 2;
  max-width: 250px; /* opcional: tamaño del logo */
  filter: drop-shadow(0 0 25px rgba(255, 240, 180, 0.9));
  transition: filter 0.3s ease;
}

/* === BIENVENIDO === */
.bienvenido {
  display: block;
  margin: 60px auto 0 auto; /* espacio arriba, centrado */
  max-width: 320px; /* tamaño de la imagen */
  position: relative;
  top: 25px; /* ajuste extra si necesitas */
  z-index: 1;
}


#logo:hover {
  transform: scale(1.05);
}




/* =========================
   TROFEOS
   ========================= */
.trofeo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: #ffd700;
  text-shadow: 0 0 8px #fff7b0, 0 0 16px #ffd700, 0 0 24px #ffb400;
  animation: lanzarTrofeo 1.5s ease-out forwards;
  pointer-events: none;
}

@keyframes lanzarTrofeo {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5); opacity: 0; }
}

/* =========================
   GLASS CARD
   ========================= */
.glass.card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: 28px;
  padding: 30px 20px;
  max-width: 600px;
  margin: auto;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

/* =========================
   MODAL
   ========================= */
.welcome-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* =========================
   NEON TITLE
   ========================= */
.neon {
  font-size: 2.5rem;
  font-weight: 900;
  color: #af2bec;
  position: relative;
  display: inline-block;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #ff2cfb,
    0 0 20px #ff2cfb,
    0 0 40px #ff2cfb,
    0 0 80px #ff2cfb,
    0 0 100px #ff2cfb,
    0 0 200px #ff2cfb;
  animation: neon-flicker 1.5s infinite alternate;
  overflow: hidden;
  cursor: pointer;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.7; }
}

.neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
}

.neon:hover::after { animation: shine 1s forwards; }

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* =========================
   GOLD EFFECT
   ========================= */
.gold {
  background: linear-gradient(45deg, #ffe066, #ffcc00, #ff9900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 200, 0, 0.6),
    0 0 40px rgba(255, 180, 0, 0.5),
    0 0 60px rgba(255, 160, 0, 0.4);
  animation: gold-shine 2s infinite linear;
}

@keyframes gold-shine {
  0% { text-shadow: 0 0 5px #fff8c0, 0 0 10px #ffd700, 0 0 20px #ffae00; }
  50% { text-shadow: 0 0 15px #fff4a0, 0 0 30px #ffd700, 0 0 60px #ffae00; }
  100% { text-shadow: 0 0 5px #fff8c0, 0 0 10px #ffd700, 0 0 20px #ffae00; }
}

/* =========================
   BOTONES
   ========================= */
.btn-whatsapp {
  background: #25d366;  /* verde WhatsApp */
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
}


/* =========================
   FALLING COINS
   ========================= */
#coinLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.coin {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, #ffd700, #ffb400, #cc8c00);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.9),
              0 0 20px rgba(255, 215, 0, 0.6),
              0 0 30px rgba(255, 200, 0, 0.4);
  pointer-events: none;
  z-index: 9999;
}

@keyframes explode {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to { transform: translate(var(--x), var(--y)) scale(0.8); opacity: 0; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  #logo { width: 45vw; max-width: 150px; }

  #hero video { display: none; }
  #hero { background: url('/assets/hero-fallback.jpg') center/cover no-repeat; }


}

@media (min-width: 1025px) {
  #logo { width: 220px; }
}

footer {
  padding: 40px 20px;
  font-size: 0.9rem;
  opacity: 0.7;
}

.bienvenido {
   max-width: 450px; /* tamaño máximo de la imagen */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  position: relative;
  z-index: 2; /* muy importante: por encima del fondo */
  animation: logoFloat 4s ease-in-out infinite; /* animación opcional */
}

/* Animación flotante para dar vida */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-33px);
  }
}
/* Contador de jugadores */
#player-counter{
  position: relative;
  z-index: 3;                /* encima de #hero::after (1) y .cards-container (2) */
  display: block !important; /* por si algún estilo lo oculta */
  margin: 16px auto 0;
  padding: 10px 16px;
  max-width: 90vw;

  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;

  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
  text-align: center;

  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: none;      /* opcional: que no bloquee clicks debajo */
}

@media (max-width: 480px){
  #player-counter{
    font-size: 1rem;
    padding: 8px 12px;
  }
}
#hero .hero-content, #hero .cards-container, #logo { z-index: 2; }
.hidden {
  display: none !important;
}
.modal.cerrar {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* CONTENEDOR PRINCIPAL */
.show-luces {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  pointer-events: none;
  z-index: 0;
}

/* RAYOS DE LUZ */
.luz {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 400px;
  background: linear-gradient(to top, rgba(255, 230, 150, 0.8), rgba(255, 230, 150, 0) 80%);
  transform-origin: bottom center;
  border-radius: 50% 50% 0 0;
  opacity: 0.7;
  animation: moverLuz 6s ease-in-out infinite;
  filter: blur(2px);
}

/* ===== CONTENEDOR DE LOS RAYOS ===== */
.show-lights {
  position: absolute;
  bottom: -80px; /* Más abajo que el logo */
  left: 46.5%;
  transform: translateX(-50%);
  width: 500px;
  height: 650px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ===== CADA RAYO ===== */
.light-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px; /* ancho en la base */
  height: 320px;
  background: radial-gradient(
    ellipse at bottom,
    rgba(255, 255, 210, 0.75) 0%,
    rgba(255, 255, 200, 0.4) 30%,
    rgba(255, 255, 180, 0.15) 70%,
    rgba(255, 255, 150, 0) 100%
  );
  transform-origin: bottom center;
  transform: rotate(var(--start-angle)) scaleY(1.3);
  opacity: 0.7;
  filter: blur(3px);
  border-radius: 50% 50% 0 0;
  animation: moveLight 6s ease-in-out infinite alternate;
}

/* ===== ANIMACIÓN DE MOVIMIENTO ===== */
@keyframes moveLight {
  0% {
    transform: rotate(calc(var(--start-angle) - 10deg)) scaleY(1.3);
    opacity: 0.6;
  }
  50% {
    transform: rotate(calc(var(--start-angle) + 10deg)) scaleY(1.5);
    opacity: 0.9;
  }
  100% {
    transform: rotate(calc(var(--start-angle) - 10deg)) scaleY(1.3);
    opacity: 0.6;
  }
}

/* ===== EFECTO ILUMINACIÓN DEL LOGO ===== */
#logo {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 25px rgba(255, 240, 180, 0.9));
  transition: filter 0.3s ease;
}

#logo:hover {
  filter: drop-shadow(0 0 50px rgba(255, 255, 200, 1));
}


/* ===== FONDO PREMIUM ===== */


/* Contenedor de las cajas */
.gift-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 900;
}

.left-side {
  left: 5%;
}

.right-side {
  right: 5%;
}

/* Caja */
.gift-box {
  width: 100px;
  height: 100px;
  background-image: url('/assets/gift-closed.png'); /* Imagen caja cerrada */
  background-size: cover;
  cursor: pointer;
  animation: shake 1.5s infinite;
  transition: transform 0.5s ease;
}

.gift-box.opened {
  background-image: url('/assets/gift-open.png'); /* Imagen caja abierta */
  animation: none;
  transform: scale(1.5);
  cursor: default;
}

/* Animación sacudir */
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* Modal premio */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: 28px;
  padding: 30px 20px;
  max-width: 600px;
  margin: auto;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

.modal-content h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.modal-content .whatsapp {
  display: inline-block;
  background: #25D366;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 15px;
}

.hidden {
  display: none;
}

/* ===== FONDO AURORA BOREAL ===== */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(ellipse at bottom, #2d014d 0%, #000000 100%);
  position: relative;
}

.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Siempre detrás */
  overflow: hidden;
}

.aurora-bg::before,
.aurora-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    rgba(186, 85, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.2) 25%,
    rgba(138, 43, 226, 0.4) 50%,
    rgba(255, 105, 180, 0.3) 75%,
    rgba(186, 85, 255, 0.3) 100%
  );
  animation: auroraMove 12s ease-in-out infinite;
  filter: blur(120px);
  opacity: 0.8;
}

.aurora-bg::after {
  animation-delay: -6s;
  transform: rotate(180deg);
}

@keyframes auroraMove {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(180deg) translate(30px, -30px);
  }
  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}