/**
 * ============================================
 * wordit.art 粒子特效系统
 * 版本: v2.5
 * 更新: 2026-04-08
 * ============================================
 * 
 * 使用方式:
 * 1. 在HTML中创建粒子容器: <div id="particle-container"></div>
 * 2. 调用对应效果函数触发粒子
 */

/* ============================================
   粒子容器
   ============================================ */

#particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* ============================================
   基础粒子样式
   ============================================ */

.particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 星星粒子 */
.particle--star {
  width: 20px;
  height: 20px;
  background: var(--gold-400);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 圆形粒子 */
.particle--circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* 方形粒子 */
.particle--square {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* 钻石粒子 */
.particle--diamond {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}

/* ============================================
   粒子颜色
   ============================================ */

.particle--gold { background: var(--gold-400); box-shadow: 0 0 6px var(--gold-500); }
.particle--green { background: var(--green-400); box-shadow: 0 0 6px var(--green-500); }
.particle--blue { background: var(--primary-400); box-shadow: 0 0 6px var(--primary-500); }
.particle--pink { background: var(--pink-400); box-shadow: 0 0 6px var(--pink-500); }
.particle--purple { background: #A855F7; box-shadow: 0 0 6px #8B5CF6; }

/* ============================================
   粒子动画
   ============================================ */

/* 爆发散开 */
@keyframes particleExplode {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot));
    opacity: 0;
  }
}

/* 上浮消失 */
@keyframes particleFloatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.5);
    opacity: 0;
  }
}

/* 下落 */
@keyframes particleFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 螺旋上升 */
@keyframes particleSpiral {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: 
      translate(calc(var(--tx) * 2), -150px) 
      rotate(720deg) 
      scale(0);
    opacity: 0;
  }
}

/* ============================================
   特效样式类
   ============================================ */

/* 答对特效 */
.effect-correct {
  animation: particleExplode 0.8s ease-out forwards;
}

/* 连击特效 */
.effect-combo {
  animation: particleSpiral 1s ease-out forwards;
}

/* 通关特效 */
.effect-clear {
  animation: particleFall 2s ease-in forwards;
}

/* 金币收集 */
.effect-coin {
  animation: particleFloatUp 0.6s ease-out forwards;
}

/* ============================================
   连击标识
   ============================================ */

.combo-indicator {
  position: fixed;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--gold-500);
  text-shadow: 
    0 0 10px var(--gold-glow),
    0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 1000;
  animation: comboPop 0.8s var(--ease-bounce) forwards;
}

@keyframes comboPop {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ============================================
   胜利彩带
   ============================================ */

.confetti {
  position: absolute;
  width: 10px;
  height: 20px;
  animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   金币飞入钱包动画
   ============================================ */

.coin-fly {
  position: fixed;
  width: 30px;
  height: 30px;
  background: var(--gold-400);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold-500);
  pointer-events: none;
  z-index: 1001;
  animation: coinFly 0.8s ease-in-out forwards;
}

@keyframes coinFly {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* ============================================
   技能/道具光效
   ============================================ */

.skill-glow {
  position: absolute;
  border-radius: 50%;
  animation: skillGlow 1s ease-out forwards;
}

@keyframes skillGlow {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
    box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0);
  }
}