/* ── Win celebrations (confetti, fireworks, gold burst) ── */
.celebration-layer {
  position: fixed;
  inset: 0;
  z-index: 2800;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.celebration-layer.active {
  opacity: 1;
  visibility: visible;
}

.celebration-layer[hidden] {
  display: none !important;
}

.cel-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 193, 7, 0.35) 0%, transparent 55%);
  opacity: 0;
  animation: cel-flash-in 0.5s ease-out forwards;
}

.tier-big .cel-flash,
.tier-jackpot .cel-flash {
  animation: cel-flash-big 0.8s ease-out forwards;
}

.tier-jackpot .cel-flash {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 193, 7, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 30% 60%, rgba(124, 77, 255, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 70% 55%, rgba(229, 57, 53, 0.2) 0%, transparent 35%);
}

@keyframes cel-flash-in {
  0% { opacity: 0; transform: scale(0.9); }
  30% { opacity: 1; }
  100% { opacity: 0.15; transform: scale(1.05); }
}

@keyframes cel-flash-big {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0.2; }
}

.cel-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(120vw, 900px);
  height: min(120vw, 900px);
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 193, 7, 0.08) 15deg,
    transparent 30deg,
    rgba(255, 193, 7, 0.06) 45deg,
    transparent 60deg,
    rgba(255, 193, 7, 0.08) 75deg,
    transparent 90deg,
    rgba(255, 193, 7, 0.06) 105deg,
    transparent 120deg,
    rgba(255, 193, 7, 0.08) 135deg,
    transparent 150deg,
    rgba(255, 193, 7, 0.06) 165deg,
    transparent 180deg,
    rgba(255, 193, 7, 0.08) 195deg,
    transparent 210deg,
    rgba(255, 193, 7, 0.06) 225deg,
    transparent 240deg,
    rgba(255, 193, 7, 0.08) 255deg,
    transparent 270deg,
    rgba(255, 193, 7, 0.06) 285deg,
    transparent 300deg,
    rgba(255, 193, 7, 0.08) 315deg,
    transparent 330deg,
    rgba(255, 193, 7, 0.06) 345deg,
    transparent 360deg
  );
  animation: cel-rays-spin 8s linear infinite;
  opacity: 0;
}

.celebration-layer.active .cel-rays {
  animation: cel-rays-in 0.6s ease-out forwards, cel-rays-spin 10s linear 0.6s infinite;
}

@keyframes cel-rays-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  to { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cel-rays-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.cel-particles {
  position: absolute;
  inset: 0;
}

.cel-confetti {
  position: absolute;
  top: -12px;
  border-radius: 1px;
  background: var(--cel-color, #ffc107);
  opacity: 0;
  animation: cel-confetti-fall var(--cel-dur, 2.5s) ease-in var(--cel-delay, 0s) forwards;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.cel-confetti:nth-child(3n) { border-radius: 50%; }
.cel-confetti:nth-child(5n) { transform: skewX(-12deg); }

@keyframes cel-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    opacity: 0.9;
    transform: translateY(110vh) translateX(var(--cel-drift, 0)) rotate(var(--cel-rot, 360deg));
  }
}

.cel-coin {
  position: absolute;
  top: -24px;
  font-size: clamp(14px, 3vw, 22px);
  color: var(--gold, #ffc107);
  text-shadow: 0 0 8px rgba(255, 193, 7, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: cel-coin-fall var(--cel-dur, 2.8s) ease-in var(--cel-delay, 0s) forwards;
}

@keyframes cel-coin-fall {
  0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
  70% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(105vh) translateX(var(--cel-drift, 0)) rotate(540deg) scale(0.6);
  }
}

.cel-firework {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cel-color, #ffc107);
  opacity: 0;
  animation: cel-firework-burst 1.1s ease-out var(--cel-delay, 0s) forwards;
  box-shadow:
    0 0 0 0 var(--cel-color),
    0 0 0 0 var(--cel-color);
}

@keyframes cel-firework-burst {
  0% {
    opacity: 1;
    transform: scale(0.2);
    box-shadow:
      0 0 0 0 var(--cel-color),
      0 -28px 0 -2px var(--cel-color),
      28px 0 0 -2px var(--cel-color),
      0 28px 0 -2px var(--cel-color),
      -28px 0 0 -2px var(--cel-color),
      20px -20px 0 -3px var(--cel-color),
      20px 20px 0 -3px var(--cel-color),
      -20px 20px 0 -3px var(--cel-color),
      -20px -20px 0 -3px var(--cel-color);
  }
  40% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 12px 4px var(--cel-color),
      0 -42px 0 0 var(--cel-color),
      42px 0 0 0 var(--cel-color),
      0 42px 0 0 var(--cel-color),
      -42px 0 0 0 var(--cel-color),
      30px -30px 0 0 var(--cel-color),
      30px 30px 0 0 var(--cel-color),
      -30px 30px 0 0 var(--cel-color),
      -30px -30px 0 0 var(--cel-color);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
    box-shadow:
      0 0 20px 2px transparent,
      0 -55px 0 -4px transparent,
      55px 0 0 -4px transparent,
      0 55px 0 -4px transparent,
      -55px 0 0 -4px transparent,
      40px -40px 0 -4px transparent,
      40px 40px 0 -4px transparent,
      -40px 40px 0 -4px transparent,
      -40px -40px 0 -4px transparent;
  }
}

.cel-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  text-align: center;
  padding: clamp(16px, 4vw, 28px) clamp(24px, 6vw, 48px);
  min-width: min(92vw, 420px);
  opacity: 0;
  animation: cel-banner-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.tier-jackpot .cel-banner {
  animation: cel-banner-jackpot 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

@keyframes cel-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cel-banner-jackpot {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-3deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(1deg); }
  75% { transform: translate(-50%, -50%) scale(0.98) rotate(0deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.cel-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.65rem, 2.2vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(255, 193, 7, 0.95);
  text-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
  margin-bottom: 6px;
  animation: cel-pulse 1.2s ease-in-out 0.5s infinite;
}

.cel-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 12vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8e1 0%, #ffc107 35%, #ff8f00 70%, #ffc107 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 193, 7, 0.45));
  margin: 0;
}

.tier-jackpot .cel-title {
  font-size: clamp(2.6rem, 13vw, 5rem);
  animation: cel-title-shimmer 2s ease-in-out 0.8s infinite;
}

@keyframes cel-title-shimmer {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 193, 7, 0.45)); }
  50% { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 193, 7, 0.85)); }
}

.cel-sub {
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  color: rgba(240, 243, 246, 0.9);
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.cel-amount {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.8rem);
  font-weight: 600;
  color: #00e676;
  margin-top: 10px;
  text-shadow:
    0 0 20px rgba(0, 230, 118, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.6);
  animation: cel-amount-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}

@keyframes cel-amount-bounce {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.cel-shine {
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.25) 48%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.25) 52%,
    transparent 60%
  );
  animation: cel-shine-sweep 2.2s ease-in-out 0.6s infinite;
  pointer-events: none;
}

@keyframes cel-shine-sweep {
  0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(120%) skewX(-12deg); opacity: 0; }
}

.cel-sparkle {
  position: absolute;
  top: 50%;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: #ffc107;
  text-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
  animation: cel-sparkle-spin 2s ease-in-out infinite;
}

.cel-sparkle-l { left: -8px; transform: translateY(-50%); }
.cel-sparkle-r { right: -8px; transform: translateY(-50%); animation-delay: 0.5s; }

@keyframes cel-sparkle-spin {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2) rotate(180deg); }
}

@keyframes cel-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-layer *,
  .celebration-layer.active .cel-rays {
    animation: none !important;
  }
  .cel-banner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .cel-flash { opacity: 0.15; }
}