/* ============================================================
 * game_action_star.css
 * 星星收集 · 太空火箭牵引光束主题动作特效
 * 仅在 #gamePlay .theme-star 画布内生效，不依赖任何外部资源。
 * z-index 层级：玩家=15 | 光束=14 | 能量弹/星影=17 | 星尘=16 | 闪光/弹出=18~20
 * ============================================================ */

/* ===== 玩家容器：底部居中火箭 ===== */
#gamePlay .theme-star .star-player {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 92px;
  z-index: 30;
  pointer-events: none;
}

/* 火箭主体 emoji */
#gamePlay .theme-star .sp-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(142, 91, 255, 0.55))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  animation: spBodyFloat 2.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes spBodyFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%      { transform: translateX(-50%) translateY(-5px) rotate(2deg); }
}

/* 推进器火焰 */
#gamePlay .theme-star .sp-thruster {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 20px;
  background: linear-gradient(180deg, #fff8b0 0%, #ffb74d 35%, #ff6a3d 65%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  filter: blur(1px);
  animation: spThruster 0.12s ease-in-out infinite alternate;
  z-index: 1;
  opacity: 0.8;
}
@keyframes spThruster {
  0%   { height: 16px; opacity: 0.65; }
  100% { height: 28px; opacity: 0.95; }
}

/* 旋转炮口/能量发射器 */
#gamePlay .theme-star .sp-cannon {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 26px;
  margin-left: -5px;
  transform-origin: 50% 100%;
  z-index: 3;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 炮管 */
#gamePlay .theme-star .sp-cannon::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 20px;
  background: linear-gradient(90deg, #2a1f50, #7a5fff 50%, #2a1f50);
  border-radius: 3px 3px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
/* 炮口能量球 */
#gamePlay .theme-star .sp-cannon::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffffff, #c780fa 45%, #6a3dff 80%);
  box-shadow: 0 0 8px rgba(199, 128, 250, 0.9), 0 0 16px rgba(106, 61, 255, 0.5);
}

/* 收集环（套在炮口位置，星星被吸入此处） */
#gamePlay .theme-star .sp-collector-ring {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(199, 128, 250, 0.65);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(199, 128, 250, 0.45),
              inset 0 0 8px rgba(106, 61, 255, 0.25);
  z-index: 4;
  transition: all 0.22s ease;
}

/* ===== 蓄力状态 ===== */
#gamePlay .theme-star .star-player.charging .sp-body {
  animation: spCharge 0.15s ease-in forwards;
}
@keyframes spCharge {
  0%   { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(0.9); }
}
#gamePlay .theme-star .star-player.charging .sp-cannon::after {
  box-shadow: 0 0 14px rgba(255, 255, 255, 1),
              0 0 28px rgba(199, 128, 255, 0.85),
              0 0 42px rgba(106, 61, 255, 0.4);
}
#gamePlay .theme-star .star-player.charging .sp-collector-ring {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 16px rgba(199, 128, 250, 0.7),
              inset 0 0 12px rgba(106, 61, 255, 0.4);
}

/* ===== 发射后坐 ===== */
#gamePlay .theme-star .star-player.firing .sp-body {
  animation: spFire 0.22s ease-out;
}
@keyframes spFire {
  0%   { transform: translateX(-50%) scale(0.9) translateY(3px); }
  40%  { transform: translateX(-50%) scale(1.06) translateY(-3px); }
  100% { transform: translateX(-50%) scale(1) translateY(0); }
}

/* ===== 收集成功闪光 ===== */
#gamePlay .theme-star .star-player.collecting .sp-body {
  animation: spCollectFlash 0.42s ease-out;
}
@keyframes spCollectFlash {
  0%   { filter: brightness(1) drop-shadow(0 0 14px rgba(142,91,255,0.55)); }
  30%  { filter: brightness(2.8) drop-shadow(0 0 36px rgba(255,255,255,1)) drop-shadow(0 0 60px rgba(199,128,250,0.7)); }
  100% { filter: brightness(1) drop-shadow(0 0 14px rgba(142,91,255,0.55)); }
}
#gamePlay .theme-star .star-player.collecting .sp-collector-ring {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.95),
              0 0 40px rgba(199, 128, 250, 0.6),
              inset 0 0 18px rgba(255, 255, 255, 0.5);
  transform: translateX(-50%) scale(1.5);
}

/* ===== 炮口闪光 ===== */
#gamePlay .theme-star .sp-muzzle-flash {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 28;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(220, 180, 255, 0.85) 28%,
    rgba(142, 91, 255, 0.45) 58%,
    transparent 80%);
  animation: spMuzzleFlash 0.25s ease-out forwards;
}
@keyframes spMuzzleFlash {
  0%   { transform: scale(0.3); opacity: 1; }
  60%  { transform: scale(1.5); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ===== 牵引光束 ===== */
#gamePlay .theme-star .sp-beam {
  position: absolute;
  height: 4px;
  pointer-events: none;
  z-index: 24;
  background: linear-gradient(90deg,
    rgba(199, 128, 250, 0.9) 0%,
    rgba(142, 91, 255, 0.65) 40%,
    rgba(100, 180, 255, 0.4) 70%,
    rgba(255, 255, 255, 0.2) 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(199, 128, 250, 0.6),
              0 0 16px rgba(142, 91, 255, 0.3);
  opacity: 0;
  transition: opacity 0.14s ease, height 0.18s ease;
  transform-origin: 0 50%;
}
#gamePlay .theme-star .sp-beam.active {
  opacity: 1;
  animation: spBeamPulse 0.35s ease-in-out infinite alternate;
}
#gamePlay .theme-star .sp-beam.pulling {
  height: 9px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(220, 180, 255, 0.8) 25%,
    rgba(142, 91, 255, 0.6) 60%,
    rgba(100, 180, 255, 0.25) 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
              0 0 24px rgba(199, 128, 250, 0.5);
  animation: spBeamPull 0.22s ease-in-out infinite alternate;
}
#gamePlay .theme-star .sp-beam.fading {
  opacity: 0 !important;
}
@keyframes spBeamPulse {
  0%   { opacity: 0.65; }
  100% { opacity: 1; }
}
@keyframes spBeamPull {
  0%   { opacity: 0.65; height: 7px; }
  100% { opacity: 1;   height: 11px; }
}

/* ===== 能量弹 ===== */
#gamePlay .theme-star .sp-orb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 27;
  background: radial-gradient(circle at 35% 35%, #ffffff, #c780fa 40%, #6a3dff 80%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
              0 0 20px rgba(199, 128, 250, 0.7),
              0 0 32px rgba(106, 61, 255, 0.4);
  will-change: left, top;
}

/* ===== 被吸入的星星残影 ===== */
#gamePlay .theme-star .sp-star-ghost {
  position: absolute;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  z-index: 27;
  filter: drop-shadow(0 0 10px rgba(255, 230, 100, 1))
          drop-shadow(0 0 20px rgba(255, 200, 60, 0.7));
  will-change: left, top, transform, opacity;
}

/* ===== 星尘粒子 ===== */
#gamePlay .theme-star .sp-dust {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 26;
  background: radial-gradient(circle at 40% 40%, #ffffff, #ffe066 45%, rgba(255, 200, 60, 0) 100%);
  box-shadow: 0 0 4px rgba(255, 230, 100, 0.8);
  animation: spDustFade 0.5s ease-out forwards;
}
@keyframes spDustFade {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dust-dx, 0px), var(--dust-dy, 0px)) scale(0.15); opacity: 0; }
}

/* ===== 收集成功表情弹出 ===== */
#gamePlay .theme-star .sp-collect-pop {
  position: absolute;
  font-size: 34px;
  line-height: 1;
  pointer-events: none;
  z-index: 30;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  animation: spCollectPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes spCollectPop {
  0%   { transform: scale(0.3) translateY(0); opacity: 0; }
  30%  { transform: scale(1.5) translateY(-14px); opacity: 1; }
  100% { transform: scale(1) translateY(-42px); opacity: 0; }
}

/* ===== 目标被光束命中增强 ===== */
#gamePlay .theme-star .star-target.star-beam-hit .star-body {
  filter: brightness(2.5)
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 36px rgba(255, 230, 100, 0.7)) !important;
  transition: filter 0.12s ease-out;
}

/* ===== star-collected 增强（在已有 target-hit 动画上叠加辉光）===== */
#gamePlay .theme-star .star-target.star-collected .star-body {
  animation: spCollectedGlow 0.55s ease-out;
}
@keyframes spCollectedGlow {
  0%   { filter: brightness(1) drop-shadow(0 0 12px rgba(255, 200, 60, 0.85)); }
  35%  { filter: brightness(2.2) drop-shadow(0 0 24px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 40px rgba(255, 230, 100, 0.7)); }
  100% { filter: brightness(1) drop-shadow(0 0 12px rgba(255, 200, 60, 0.85)); }
}

/* ===== reduced-motion：禁用所有动画 ===== */
@media (prefers-reduced-motion: reduce) {
  #gamePlay .theme-star .star-player,
  #gamePlay .theme-star .star-player *,
  #gamePlay .theme-star .sp-beam,
  #gamePlay .theme-star .sp-orb,
  #gamePlay .theme-star .sp-star-ghost,
  #gamePlay .theme-star .sp-dust,
  #gamePlay .theme-star .sp-muzzle-flash,
  #gamePlay .theme-star .sp-collect-pop {
    animation: none !important;
    transition: none !important;
  }
}

/* 专属动作期间保持星星可见，由残影接管吸入动画 */
#gamePlay .theme-star .star-target.target-hit {
  animation: none !important;
  opacity: 1 !important;
}
#gamePlay .theme-star .star-target.target-hit.star-collected {
  opacity: 0.88 !important;
}