/* ─── Background rings ─── */
@keyframes bgRingPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1);   opacity:.6 }
  50%      { transform:translate(-50%,-50%) scale(1.06); opacity:1  }
}

/* ─── Logo float ─── */
@keyframes floaty {
  0%,100% { transform:translateY(0)    rotate(0deg)   }
  50%      { transform:translateY(-10px) rotate(2deg) }
}

/* ─── Button pulse ─── */
@keyframes pulse {
  0%,100% { box-shadow:0 8px 28px rgba(255,46,99,.45) }
  50%      { box-shadow:0 8px 45px rgba(255,46,99,.75) }
}
.pulse { animation:pulse 2s ease-in-out infinite }

/* ─── Countdown ─── */
@keyframes cdRingPulse {
  0%,100% { transform:scale(1);    opacity:.3 }
  50%      { transform:scale(1.08); opacity:.7 }
}
@keyframes cdNumPop {
  0%   { transform:scale(.4); opacity:0 }
  60%  { transform:scale(1.15) }
  100% { transform:scale(1);  opacity:1 }
}
.cd-num-anim { animation:cdNumPop .45s cubic-bezier(.2,.8,.2,1) }

/* ─── Combo banner ─── */
@keyframes comboPop {
  0%   { transform:translate(-50%,-50%) scale(0);   opacity:0 }
  35%  { transform:translate(-50%,-50%) scale(1.35); opacity:1 }
  65%  { transform:translate(-50%,-50%) scale(1);    opacity:1 }
  100% { transform:translate(-50%,-90%) scale(.8);   opacity:0 }
}

/* ─── Level Up ─── */
@keyframes levelUpAnim {
  0%   { opacity:0; transform:scale(.8) }
  15%  { opacity:1; transform:scale(1.05) }
  70%  { opacity:1; transform:scale(1) }
  100% { opacity:0; transform:scale(1.1) }
}
.level-up-inner {
  text-align:center;
  background:linear-gradient(135deg,rgba(79,195,247,.15),rgba(179,136,255,.15));
  border:2px solid rgba(79,195,247,.4);
  border-radius:24px; padding:28px 40px;
  backdrop-filter:blur(20px);
}
.level-up-inner .lu-emoji { font-size:3.5rem }
.level-up-inner .lu-title {
  font-size:2rem; font-weight:900;
  background:linear-gradient(135deg,#4fc3f7,#b388ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:8px 0 4px;
}
.level-up-inner .lu-sub { font-size:1rem; color:rgba(255,255,255,.6) }

/* ─── Target spawn ─── */
@keyframes targetSpawn {
  0%   { transform:translate(-50%,-50%) scale(0) rotate(-20deg); opacity:0 }
  60%  { transform:translate(-50%,-50%) scale(1.1) rotate(3deg) }
  100% { transform:translate(-50%,-50%) scale(1) rotate(0deg);   opacity:1 }
}
#target.spawning { animation:targetSpawn .35s cubic-bezier(.2,.8,.2,1) }

/* ─── Target shrink warning ─── */
@keyframes targetPulseWarn {
  0%,100% { box-shadow:0 0 20px var(--red), 0 0 50px rgba(255,46,99,.3) }
  50%      { box-shadow:0 0 35px var(--red), 0 0 80px rgba(255,46,99,.6) }
}
.target-warn .ring-1 { animation:targetPulseWarn .4s ease-in-out infinite }

/* ─── Hit burst ─── */
@keyframes hitBurst {
  0%   { transform:translate(-50%,-50%) scale(.2); opacity:1 }
  100% { transform:translate(-50%,-50%) scale(3);  opacity:0 }
}
.hit-burst {
  position:absolute; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,transparent 70%);
  pointer-events:none;
  animation:hitBurst .5s ease-out forwards;
}
.hit-burst.center {
  background:radial-gradient(circle,#fff 0%,var(--red) 40%,transparent 70%);
}
.hit-burst.ring2 {
  background:radial-gradient(circle,#fff 0%,var(--orange) 40%,transparent 70%);
}
.hit-burst.ring3 {
  background:radial-gradient(circle,#fff 0%,var(--yellow) 40%,transparent 70%);
}

/* ─── Score float ─── */
@keyframes scoreFloat {
  0%   { transform:translate(-50%,0)    scale(.5); opacity:0 }
  25%  { transform:translate(-50%,-25px) scale(1.2); opacity:1 }
  100% { transform:translate(-50%,-80px) scale(1);   opacity:0 }
}
.score-float {
  position:absolute; font-size:2rem; font-weight:900;
  text-shadow:0 0 20px currentColor;
  pointer-events:none;
  animation:scoreFloat 1s ease-out forwards;
}

/* ─── Miss mark ─── */
@keyframes missMark {
  0%   { transform:translate(-50%,-50%) scale(.3) rotate(-45deg); opacity:1 }
  100% { transform:translate(-50%,-50%) scale(1.5) rotate(0deg);  opacity:0 }
}
.miss-mark {
  position:absolute; width:36px; height:36px;
  border:3px solid #555; border-radius:50%;
  pointer-events:none;
  animation:missMark .5s ease-out forwards;
}

/* ─── Particles ─── */
@keyframes particle {
  0%   { transform:translate(0,0) scale(1); opacity:1 }
  100% { transform:translate(var(--px),var(--py)) scale(0); opacity:0 }
}
.particle {
  position:absolute; width:6px; height:6px; border-radius:50%;
  pointer-events:none;
  animation:particle .7s ease-out forwards;
}

/* ─── Screen shake ─── */
@keyframes shake {
  0%,100% { transform:translate(0,0) }
  20%      { transform:translate(-5px,3px) }
  40%      { transform:translate(5px,-3px) }
  60%      { transform:translate(-3px,-3px) }
  80%      { transform:translate(3px,3px) }
}
.shake { animation:shake .3s ease }

/* ─── Shot dot used ─── */
@keyframes shotUsed {
  0%   { transform:scale(1.4); background:var(--red) }
  100% { transform:scale(1);   background:rgba(255,255,255,.1) }
}
.shot-dot.just-used { animation:shotUsed .3s ease forwards }

/* ─── HUD combo pulse ─── */
@keyframes comboPulse {
  0%,100% { transform:scale(1) }
  50%      { transform:scale(1.5) }
}
.combo-anim { animation:comboPulse .25s ease }

/* ─── Level card unlock ─── */
@keyframes cardUnlock {
  0%   { transform:scale(.9); opacity:0 }
  60%  { transform:scale(1.05) }
  100% { transform:scale(1);  opacity:1 }
}
.level-card.unlocked { animation:cardUnlock .4s ease }