/* ===============================
   Super‑casino Win Animation
   Add <link rel="stylesheet" href="casino-win-animation.css"> after your main styles
   =============================== */

/* Override the existing .winning-item style or use together with it */
.winning-item {
  position: relative;
  /* GOLD / NEON glow cycling */
  animation: casinoGlow 0.9s ease-in-out infinite alternate,
             casinoPulse 2.4s ease-in-out infinite,
             casinoRotate 12s linear infinite;
  border: 2px solid #ffd700;              /* bright gold border */
  box-shadow: 0 0 12px #ffae00, 0 0 24px #ff0080, 0 0 32px #ffc400;
  z-index: 90;                            /* stay above neighbours */
}

/* sweeping shine */
.winning-item::before {
  content: "";
  position: absolute;
  top: -20%; left: -50%;
  width: 200%; height: 140%;
  background: linear-gradient(60deg,
              transparent 0%, transparent 45%,
              rgba(255,255,255,0.65) 50%,
              transparent 55%, transparent 100%);
  transform: translateX(-100%) skewX(-25deg);
  animation: shineSweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* subtle firework sparks around */
.winning-item::after {
  content: "";
  position: absolute;
  inset: -8px;               /* extends slightly outside */
  border-radius: 30px;
  background: radial-gradient(circle at center,
              rgba(255, 215, 0, 0.6) 0%,
              rgba(255, 0, 128, 0.0) 70%);
  opacity: 0.55;
  animation: sparkPulse 1.2s ease-in-out infinite alternate;
  pointer-events: none;
  z-index:-1;
}

/* ===== keyframes ===== */
@keyframes casinoGlow {
  0%   { box-shadow: 0 0 12px #ffae00, 0 0 24px #ff0080, 0 0 32px #ffc400; }
  50%  { box-shadow: 0 0 20px #ffc400, 0 0 36px #00e7ff, 0 0 48px #ff007b; }
  100% { box-shadow: 0 0 12px #ffae00, 0 0 24px #ff0080, 0 0 32px #ffc400; }
}

@keyframes casinoPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes casinoRotate {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-25deg); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(120%) skewX(-25deg); opacity: 0; }
}

@keyframes sparkPulse {
  from { opacity: 0.25; }
  to   { opacity: 0.55; }
}