/* ═══════════════════════════════════════════════
   HAND CRICKET — particles.css
   Ambient + impact particle systems
   ═══════════════════════════════════════════════ */

/* ═══ Ambient floating particles (background) ═══ */
.particles-ambient{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.particles-ambient span{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--accent),transparent);
  opacity:0.15;
  animation: ambientFloat linear infinite;
}
@keyframes ambientFloat{
  0%{transform:translateY(110vh) translateX(0) rotate(0deg);opacity:0;}
  10%{opacity:0.15;}
  90%{opacity:0.15;}
  100%{transform:translateY(-10vh) translateX(40px) rotate(360deg);opacity:0;}
}

/* ═══ Impact burst particles (SIX, OUT, etc.) ═══ */
.particle-burst{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  pointer-events:none;
  z-index:36;
  animation: burstFly .8s var(--ease-decel) forwards;
}
@keyframes burstFly{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0);opacity:0;}
}

/* ═══ Trail particles (following number reveal) ═══ */
.particle-trail{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  pointer-events:none;
  z-index:34;
  animation: trailFade .5s var(--ease-smooth) forwards;
}
@keyframes trailFade{
  0%{opacity:0.8;transform:scale(1);}
  100%{opacity:0;transform:scale(0.3) translateY(10px);}
}

/* ═══ Confetti (win screen) ═══ */
.confetti-piece{
  position:absolute;
  width:8px;height:14px;
  pointer-events:none;
  z-index:36;
  animation: confettiFall 2.5s linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}

/* ═══ Sparkle particles (for milestones) ═══ */
.particle-sparkle{
  position:absolute;
  width:12px;height:12px;
  pointer-events:none;
  z-index:36;
  animation: sparkleAnim .6s var(--ease-bounce) forwards;
}
@keyframes sparkleAnim{
  0%{transform:scale(0) rotate(0deg);opacity:1;}
  50%{transform:scale(1.2) rotate(180deg);opacity:1;}
  100%{transform:scale(0) rotate(360deg);opacity:0;}
}

/* ═══ Ring pulse (for online status, achievements) ═══ */
.ring-pulse{
  position:absolute;
  border:2px solid var(--accent);
  border-radius:50%;
  pointer-events:none;
  animation: ringPulse 1.5s var(--ease-smooth) infinite;
}
@keyframes ringPulse{
  0%{transform:scale(0.8);opacity:1;}
  100%{transform:scale(2);opacity:0;}
}