/**
 * SlotMachine 2026 — Estilos de la animación de sorteo (EDICIÓN ÉPICA)
 * =====================================================================
 * Diseño: fullscreen overlay, glow dinámico, motion blur, ambient light,
 *         intro countdown, flash de cámara, particle burst
 * Mobile-first, a prueba de bugs visuales, optimizado para grabaciones
 */

/* ── OVERLAY FULLSCREEN ──────────────────────────────────────── */
#slotSection {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
#slotSection.slot-visible {
  opacity: 1;
}
#slotSection.fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}

/* ── FOTO DEL PREMIO (arriba del slot) ─────────────────────── */
/* Mismo ancho que .slot-wrap, cuadrada 1:1 */
.slot-premio-photo {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 12px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.2), 0 0 0 2px rgba(245,196,0,.25);
  animation: slotPremioFade .6s ease both;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.slot-premio-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@keyframes slotPremioFade {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── WRAPPER CENTRAL ─────────────────────────────────────────── */
.slot-wrap {
  width: 100%;
  max-width: 520px;
  background:
    linear-gradient(160deg, #8b0a5a 0%, #d01a7d 35%, #b01060 70%, #8b0a5a 100%);
  border-radius: 22px;
  padding: 20px 16px;
  text-align: center;
  box-shadow:
    0 28px 80px rgba(208,26,125,.5),
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 0 100px rgba(208,26,125,.25),
    0 0 30px rgba(245,196,0,.1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}

/* ── INTRO COUNTDOWN ─────────────────────────────────────────── */
.slot-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(160deg, rgba(139,10,90,.92) 0%, rgba(208,26,125,.88) 50%, rgba(176,16,96,.92) 100%);
  border-radius: 20px;
}
.slot-intro-label {
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
}
.slot-intro-number {
  font-size: clamp(72px, 18vw, 120px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 0 40px rgba(245,196,0,.5),
    0 0 80px rgba(208,26,125,.4),
    0 4px 20px rgba(0,0,0,.3);
  min-height: 1.1em;
  background: linear-gradient(180deg, #fff 0%, #f5c400 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.slot-intro-number.ya {
  font-size: clamp(48px, 12vw, 80px);
  background: linear-gradient(180deg, #fff 0%, #ffd700 50%, #f5c400 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes slotIntroPop {
  0%   { transform: scale(0.2) rotate(-8deg); opacity: 0; filter: blur(8px); }
  40%  { transform: scale(1.2) rotate(2deg); opacity: 1; filter: blur(0); }
  60%  { transform: scale(0.92) rotate(-1deg); }
  80%  { transform: scale(1.04) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}
@keyframes slotIntroPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 40px rgba(245,196,0,.5), 0 0 80px rgba(208,26,125,.4); }
  50% { transform: scale(1.05); text-shadow: 0 0 60px rgba(245,196,0,.7), 0 0 120px rgba(208,26,125,.6); }
}

/* ── AMBIENT LIGHT ───────────────────────────────────────────── */
.slot-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 85%, rgba(255,255,255,.18), transparent 55%);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.slot-ambient.on {
  opacity: 1;
}

/* ── TÍTULO ──────────────────────────────────────────────────── */
.slot-title {
  color: rgba(255,255,255,.65);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── DISPLAY ─────────────────────────────────────────────────── */
.slot-display {
  height: 72px;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.32);
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.12);
  transition:
    border-color .7s ease,
    box-shadow .7s ease;
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.06);
  flex-shrink: 0;
}



.slot-display::before,
.slot-display::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* height removido — se ajusta solo al contenido */
  z-index: 1;
  pointer-events: none;
}
.slot-display::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(139,10,90,.98), transparent);
  border-radius: 16px 16px 0 0;
}
.slot-display::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(139,10,90,.98), transparent);
  border-radius: 0 0 16px 16px;
}

/* Glow ganador — OPTIMIZADO: usa transform/opacity en lugar de box-shadow animado */
.slot-display.winner-glow {
  border-color: rgba(255,255,255,.95);
  box-shadow:
    0 0 60px rgba(255,255,255,.35),
    inset 0 0 24px rgba(255,255,255,.15),
    0 0 0 1.5px rgba(255,255,255,.55);
}
/* Capa pseudo-elemento para el pulso — anima opacity, no box-shadow */
.slot-display.winner-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.4);
  opacity: 0;
  pointer-events: none;
  animation: slotWinnerPulse 1.8s ease-in-out infinite;
}
@keyframes slotWinnerPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

/* ── INNER ───────────────────────────────────────────────────── */
.slot-inner {
  will-change: transform;
  transform: translateY(0);
}

/* ── ITEMS ───────────────────────────────────────────────────── */
.slot-item {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
  padding: 0 16px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
  word-break: break-word;
  hyphens: auto;
}

/* Item ganador — MUCHO más grande y destacado */
.slot-item.winner-item {
  font-size: clamp(28px, 7vw, 42px);
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 30px rgba(245,196,0,.6),
    0 0 60px rgba(208,26,125,.4),
    0 2px 8px rgba(0,0,0,.3);
  letter-spacing: .5px;
  line-height: 0.9;
}

/* Items previos al ganador — transición suave de tamaño */
.slot-item.winner-pre {
  font-size: clamp(22px, 5.5vw, 32px);
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 0 15px rgba(245,196,0,.3),
    0 0 30px rgba(208,26,125,.2),
    0 2px 6px rgba(0,0,0,.25);
  letter-spacing: .3px;
}

/* ── RESULTADO ───────────────────────────────────────────────── */
.slot-resultado {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 14px 20px;
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.4);
  display: none;
  animation: slotResultFade .6s cubic-bezier(.4,0,.2,1) both;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slot-resultado-emoji {
  font-size: 20px;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
  animation: slotTrophyBounce 1s ease-in-out infinite;
}
.slot-resultado-label {
  color: var(--yellow, #F5C400);
  margin-right: 8px;
  text-shadow: 0 0 10px rgba(245,196,0,.4);
}

@keyframes slotResultFade {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slotTrophyBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-8deg); }
  75% { transform: translateY(-1px) rotate(5deg); }
}

/* ── DNI DEL GANADOR ─────────────────────────────────────────── */
.slot-dni {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-align: center;
  /* padding removido */
  display: none;
  animation: slotResultFade .5s ease both;
  animation-delay: .2s;
}

/* ── SCANLINES (div interno, no pseudo-elemento para evitar colisión) ── */
.slot-scanlines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 14px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,.06) 2px,
    rgba(255,255,255,.06) 4px
  );
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  #slotSection {
    padding: 14px;
  }
  .slot-wrap {
    padding: 32px 18px 28px;
    border-radius: 18px;
    gap: 14px;
  }
  .slot-display {
    height: 88px;
    border-radius: 14px;
  }
  .slot-item {
    height: 88px;
    font-size: clamp(15px, 5.2vw, 21px);
    padding: 0 14px;
  }
  .slot-display::before,
  .slot-display::after {
    height: 26px;
  }
  .slot-intro-number {
    font-size: clamp(48px, 16vw, 80px);
  }
  .slot-resultado {
    font-size: 13px;
    padding: 12px 16px;
  }
}

@media (min-width: 768px) {
  .slot-wrap {
    max-width: 480px;
    /* padding removido en desktop */
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .slot-inner {
    transition: transform 1s cubic-bezier(.4,0,.2,1);
  }
  .slot-display.winner-glow {
    animation: none;
  }
  #slotSection {
    transition: opacity .2s ease;
  }
  .slot-intro-number {
    animation: none !important;
  }
  .slot-resultado-emoji {
    animation: none;
  }
}