/* ==========================================
   Click Effect — 点击暴富特效样式
   所有类使用 ce- 前缀，避免与页面样式冲突
   ========================================== */

/* --- 飘动文字 --- */
.ce-float-text {
  position: fixed;
  pointer-events: none;
  font-size: 22px;
  font-weight: bold;
  z-index: 9999;
  white-space: nowrap;
  text-shadow: 0 0 10px currentColor;
  animation: ce-floatUp 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes ce-floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2) rotate(var(--ce-rotate, 0deg));
  }
  100% {
    opacity: 0;
    transform: translateY(-150px) scale(0.8) rotate(var(--ce-rotate-end, 0deg));
  }
}

/* --- 粒子 --- */
.ce-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9998;
}

.ce-particle.circle {
  animation: ce-particleFly 1.2s ease-out forwards;
}

.ce-particle.heart {
  animation: ce-heartFly 1.5s ease-out forwards;
}

.ce-particle.star {
  animation: ce-starFly 1.3s ease-out forwards;
}

@keyframes ce-particleFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ce-tx), var(--ce-ty)) scale(0);
  }
}

@keyframes ce-heartFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translate(calc(var(--ce-tx) * 0.5), calc(var(--ce-ty) * 0.5)) scale(1.3) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ce-tx), var(--ce-ty)) scale(0) rotate(360deg);
  }
}

@keyframes ce-starFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ce-tx), var(--ce-ty)) scale(0) rotate(720deg);
  }
}

/* --- 金币掉落 --- */
.ce-coin {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  font-size: 24px;
  animation: ce-coinDrop 1.5s ease-in forwards;
}

@keyframes ce-coinDrop {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(100px) rotate(360deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) rotate(720deg) scale(0.5);
  }
}

/* --- 点击波纹 --- */
.ce-ripple {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.5);
  z-index: 9996;
  animation: ce-rippleExpand 0.8s ease-out forwards;
}

@keyframes ce-rippleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
    margin-left: -100px;
    margin-top: -100px;
  }
}

/* --- 连击提示 --- */
.ce-combo {
  position: fixed;
  pointer-events: none;
  font-size: 28px;
  font-weight: bold;
  color: #FF6B6B;
  z-index: 10000;
  animation: ce-comboPop 0.8s ease-out forwards;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
}

@keyframes ce-comboPop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }
  30% {
    opacity: 1;
    transform: scale(1.5) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-60px);
  }
}