/* === Canvas 全屏渲染层 === */
#fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 9998;
}
/* === ⭐（CSS clip-path） === */
.click-star {
  position: absolute;
  width: 35px;
  height: 35px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 1;
}
.click-star::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star-shrink-bounce 0.55s cubic-bezier(0.55, 0.05, 0.67, 0.19) forwards;
}
/* 二段缩小 */
/* ⭐粒子 */
.click-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
  will-change: transform, opacity;
}
/* ⭐轨迹 */
.particle-trail {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--trail-color, rgba(255,200,220,0.9));
  opacity: 1;
  transform: scale(1);
  z-index: 9998;
  animation: trail-fade 0.4s linear forwards;
}
/* ⭐缩小动画 */
/* 粒子尾迹淡出 */
@-moz-keyframes star-shrink-bounce {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.25);
    clip-path: circle(22% at 50% 50%);
  }
  60% {
    transform: scale(0.38);
    clip-path: circle(30% at 50% 50%);
  }
  80% {
    transform: scale(0.18);
    clip-path: circle(15% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-webkit-keyframes star-shrink-bounce {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.25);
    clip-path: circle(22% at 50% 50%);
  }
  60% {
    transform: scale(0.38);
    clip-path: circle(30% at 50% 50%);
  }
  80% {
    transform: scale(0.18);
    clip-path: circle(15% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-o-keyframes star-shrink-bounce {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.25);
    clip-path: circle(22% at 50% 50%);
  }
  60% {
    transform: scale(0.38);
    clip-path: circle(30% at 50% 50%);
  }
  80% {
    transform: scale(0.18);
    clip-path: circle(15% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@keyframes star-shrink-bounce {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.25);
    clip-path: circle(22% at 50% 50%);
  }
  60% {
    transform: scale(0.38);
    clip-path: circle(30% at 50% 50%);
  }
  80% {
    transform: scale(0.18);
    clip-path: circle(15% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-moz-keyframes star-shrink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.2);
    clip-path: circle(22% at 50% 50%);
  }
  65% {
    transform: scale(0.3);
    clip-path: circle(30% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-webkit-keyframes star-shrink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.2);
    clip-path: circle(22% at 50% 50%);
  }
  65% {
    transform: scale(0.3);
    clip-path: circle(30% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-o-keyframes star-shrink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.2);
    clip-path: circle(22% at 50% 50%);
  }
  65% {
    transform: scale(0.3);
    clip-path: circle(30% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@keyframes star-shrink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.2);
    clip-path: circle(22% at 50% 50%);
  }
  65% {
    transform: scale(0.3);
    clip-path: circle(30% at 50% 50%);
  }
  100% {
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}
@-moz-keyframes trail-fade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
@-webkit-keyframes trail-fade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
@-o-keyframes trail-fade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes trail-fade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}