/*
 * game_action_balloon.css
 * 气球大作战：弓箭手射箭命中特效
 * 仅作用于 #gamePlay .theme-balloon，新建文件，不修改已有样式。
 * 层级：玩家 20 / 武器 25 / 飞行物 26 / 命中特效 30
 */

/* ========== 弓箭手玩家 ========== */
#gamePlay .theme-balloon .balloon-archer {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 92px;
  height: 18%;
  min-height: 76px;
  max-height: 118px;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  user-select: none;
}

#gamePlay .theme-balloon .archer-hero {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  font-size: clamp(40px, 12.5vw, 56px);
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22));
  z-index: 1;
  transition: transform 0.12s ease;
}

#gamePlay .theme-balloon .balloon-archer.is-aiming .archer-hero {
  transform: translateX(-50%) rotate(-4deg) translateY(-2px);
}

#gamePlay .theme-balloon .balloon-archer.is-firing .archer-hero {
  animation: balloonActionHero 0.16s ease;
}

@keyframes balloonActionHero {
  0%   { transform: translateX(-50%) rotate(-4deg) translateY(-2px); }
  50%  { transform: translateX(-50%) rotate(4deg) translateY(2px) scale(0.98); }
  100% { transform: translateX(-50%) rotate(-4deg) translateY(-2px); }
}

#gamePlay .theme-balloon .archer-weapon {
  position: absolute;
  left: calc(50% + 2px);
  bottom: 14%;
  width: 56px;
  height: 54px;
  transform: rotate(0deg);
  transform-origin: 50% 82%;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

#gamePlay .theme-balloon .archer-bow {
  position: absolute;
  inset: 0;
  border: 4px solid #a05a24;
  border-right-color: transparent;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 220, 160, 0.18), transparent 60%);
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.22),
              0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
}

#gamePlay .theme-balloon .archer-string {
  position: absolute;
  right: 6px;
  top: 8%;
  bottom: 8%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(#5c3310, #2d1707);
  transform-origin: 100% 50%;
  transition: transform 0.1s ease;
}

#gamePlay .theme-balloon .balloon-archer.is-drawing .archer-string {
  transform: translateX(-13px) scaleX(0.7);
}

#gamePlay .theme-balloon .balloon-archer.is-firing .archer-string {
  transform: translateX(0) scaleX(1);
  transition-duration: 0.05s;
}

#gamePlay .theme-balloon .balloon-archer.is-firing .archer-bow {
  transform: scale(0.94);
  transition-duration: 0.05s;
}

#gamePlay .theme-balloon .archer-ready-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff9c4, #ffd54f 55%, #ff9800);
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.85);
  opacity: 0;
  transform: translate(12px, -50%) scaleX(0.35);
  transform-origin: 100% 50%;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

#gamePlay .theme-balloon .archer-ready-arrow::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #ff9800;
}

#gamePlay .theme-balloon .balloon-archer.is-drawing .archer-ready-arrow {
  opacity: 1;
  transform: translate(-8px, -50%) scaleX(1);
}

#gamePlay .theme-balloon .balloon-archer.is-firing .archer-ready-arrow {
  opacity: 0;
  transform: translate(14px, -50%) scaleX(0.3);
  transition-duration: 0.05s;
}

/* ========== 飞行箭 ========== */
#gamePlay .theme-balloon .balloon-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 8px;
  z-index: 26;
  pointer-events: none;
  transform-origin: 0 50%;
  filter: drop-shadow(0 0 7px rgba(255, 230, 120, 0.95));
  will-change: transform;
}

#gamePlay .theme-balloon .arrow-shaft {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 29px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fffde7, #ffd54f 55%, #fb8c00);
}

#gamePlay .theme-balloon .arrow-fletch {
  position: absolute;
  left: -3px;
  top: -2px;
  width: 9px;
  height: 7px;
  background: linear-gradient(135deg, #ff5252, #ff80ab);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#gamePlay .theme-balloon .arrow-head {
  position: absolute;
  right: -2px;
  top: -2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid #fb8c00;
  filter: drop-shadow(0 0 2px #fff59d);
}

#gamePlay .theme-balloon .balloon-trail {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 25;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffec80 45%, rgba(255, 152, 0, 0) 72%);
  box-shadow: 0 0 10px rgba(255, 230, 120, 0.9);
  transform: translate(-50%, -50%);
  animation: balloonActionTrail 0.32s ease-out forwards;
}

@keyframes balloonActionTrail {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
}

/* ========== 命中爆破 ========== */
#gamePlay .theme-balloon .balloon-boom,
#gamePlay .theme-balloon .balloon-shock,
#gamePlay .theme-balloon .balloon-shard,
#gamePlay .theme-balloon .balloon-spark,
#gamePlay .theme-balloon .balloon-puff {
  position: absolute;
  pointer-events: none;
  z-index: 30;
}

#gamePlay .theme-balloon .balloon-boom {
  font-size: clamp(36px, 12vw, 52px);
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  animation: balloonActionBoom 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes balloonActionBoom {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-15deg); }
  38%  { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(8deg); }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(0.9) rotate(-8deg); }
}

#gamePlay .theme-balloon .balloon-shock {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 120, 180, 0.35),
              0 0 22px rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
  animation: balloonActionShock 0.34s ease-out forwards;
}

@keyframes balloonActionShock {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

#gamePlay .theme-balloon .balloon-shard {
  width: 9px;
  height: 13px;
  border-radius: 3px 4px 2px 4px;
  background: var(--ba-color, #ff6b6b);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  animation: balloonActionShard 0.5s ease-out forwards;
}

@keyframes balloonActionShard {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ba-tx)), calc(-50% + var(--ba-ty))) rotate(var(--ba-rot)) scale(0.4); }
}

#gamePlay .theme-balloon .balloon-spark {
  font-size: 18px;
  line-height: 1;
  color: #fff59d;
  text-shadow: 0 0 8px #ffd54f;
  transform: translate(-50%, -50%);
  animation: balloonActionSpark 0.5s ease-out forwards;
}

@keyframes balloonActionSpark {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0); }
  45%  { opacity: 1; transform: translate(calc(-50% + calc(var(--ba-tx) * 0.55)), calc(-50% + calc(var(--ba-ty) * 0.55))) scale(1.25) rotate(180deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ba-tx)), calc(-50% + var(--ba-ty))) scale(0.3) rotate(360deg); }
}

#gamePlay .theme-balloon .balloon-puff {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  animation: balloonActionPuff 0.4s ease-out forwards;
}

@keyframes balloonActionPuff {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ba-tx)), calc(-50% + var(--ba-ty))) scale(2.2); }
}

/* ========== 与已有气球结构兼容：命中前稳住，命中时爆破 ========== */
#gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit {
  animation: balloonActionTargetHold 0.85s linear forwards !important;
  opacity: 1 !important;
}

#gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit .balloon-body {
  animation: balloonActionTargetReady 0.8s ease forwards !important;
}

#gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit.balloon-pop .balloon-body {
  animation: balloonActionPop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

#gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit.balloon-pop .balloon-string {
  animation: balloonActionString 0.3s ease forwards !important;
}

@keyframes balloonActionTargetHold {
  0%, 100% { transform: rotate(0); opacity: 1; }
}

@keyframes balloonActionTargetReady {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes balloonActionPop {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  40%  { transform: scale(1.35) rotate(10deg); opacity: 1; }
  100% { transform: scale(0.1) rotate(45deg); opacity: 0; }
}

@keyframes balloonActionString {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.6; }
  100% { transform: translateY(16px) scaleY(0.2); opacity: 0; }
}

/* ========== 减少动态偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  #gamePlay .theme-balloon .balloon-archer,
  #gamePlay .theme-balloon .balloon-archer *,
  #gamePlay .theme-balloon .balloon-arrow,
  #gamePlay .theme-balloon .balloon-trail,
  #gamePlay .theme-balloon .balloon-boom,
  #gamePlay .theme-balloon .balloon-shock,
  #gamePlay .theme-balloon .balloon-shard,
  #gamePlay .theme-balloon .balloon-spark,
  #gamePlay .theme-balloon .balloon-puff,
  #gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit,
  #gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit .balloon-body,
  #gamePlay .theme-balloon.balloon-action-ready .balloon-target.target-hit .balloon-string {
    transition-duration: 0.04s !important;
    animation-duration: 0.16s !important;
  }
}