/* Celebrity Death Pool :: FX Add-on (drop-in)
   Include AFTER your existing styles.css
*/

/* Confetti canvas */
.cdp-confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:6000;
  display:none;
}

/* Screen shake */
@keyframes cdp_shake{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  10%{transform:translate3d(-2px,1px,0) rotate(-0.2deg)}
  20%{transform:translate3d(3px,-1px,0) rotate(0.2deg)}
  30%{transform:translate3d(-4px,2px,0) rotate(-0.3deg)}
  40%{transform:translate3d(4px,-2px,0) rotate(0.3deg)}
  50%{transform:translate3d(-3px,1px,0) rotate(-0.2deg)}
  60%{transform:translate3d(3px,-1px,0) rotate(0.2deg)}
  70%{transform:translate3d(-2px,1px,0) rotate(-0.15deg)}
  80%{transform:translate3d(2px,-1px,0) rotate(0.15deg)}
  90%{transform:translate3d(-1px,0,0) rotate(-0.05deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
body.cdp-shake{animation:cdp_shake 420ms ease both}

/* Top #1 highlight */
.cdp-top1{
  position:relative;
  border-color:rgba(255,217,92,0.55)!important;
  background:rgba(255,217,92,0.10)!important;
  box-shadow:0 10px 22px rgba(255,217,92,0.18);
}
.cdp-top1::before{
  content:"🏆";
  position:absolute;
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
@keyframes cdp_pulseOnce{0%{transform:scale(1)}35%{transform:scale(1.02)}100%{transform:scale(1)}}
.cdp-pulseOnce{animation:cdp_pulseOnce 520ms ease both}

/* Timer pulse + danger (adds classes, doesn't replace your timer style) */
@keyframes cdp_timerPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.cdp-pulse{animation:cdp_timerPulse 900ms ease-in-out infinite}
.cdp-danger{text-shadow:0 0 18px rgba(255,92,92,0.35)}

/* Masked word reveal pop */
@keyframes cdp_revealPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.cdp-revealPop{animation:cdp_revealPop 420ms ease both}