/* ============================================================
 * game_action_fish.css
 * 英语说 · 钓鱼达人 — 答对时主题动作特效
 * 鱼竿转向 / 鱼钩鱼线飞向鱼 / 鱼被钓起收线 / 水花气泡
 * 仅在 #gamePlay .theme-fish 画布内生效，不修改任何已有样式。
 * ============================================================ */

/* ---------- 底部玩家：小船 + 渔翁 + 可旋转鱼竿 ---------- */
#gamePlay .theme-fish .fish-player {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 96px;
  height: 72px;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  animation: fish-player-bob 3s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes fish-player-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
  50%      { transform: translateX(-50%) translateY(-4px) rotate(1.5deg); }
}

/* 小船 */
#gamePlay .theme-fish .fish-boat {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 30, 60, 0.35));
  z-index: 1;
}

/* 渔翁 */
#gamePlay .theme-fish .fish-man {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 36px;
  line-height: 1;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 30, 60, 0.3));
}

/* 鱼竿：可旋转细长 DOM，旋转原点在手柄端 */
#gamePlay .theme-fish .fish-rod {
  position: absolute;
  left: 66px;
  top: 44px;
  width: 62px;
  height: 4px;
  transform-origin: 0 50%;
  transform: rotate(-38deg);
  border-radius: 4px;
  background: linear-gradient(90deg, #5a3a1a 0%, #8b5a2b 40%, #c49560 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  z-index: 3;
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* 竿尖小环 */
#gamePlay .theme-fish .fish-rod::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #d4a76a;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* ---------- 鱼线 ---------- */
#gamePlay .theme-fish .fish-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(200,230,255,0.6));
  transform-origin: 0 50%;
  border-radius: 2px;
  z-index: 21;
  pointer-events: none;
  box-shadow: 0 0 2px rgba(255,255,255,0.4);
}

/* ---------- 鱼钩 ---------- */
#gamePlay .theme-fish .fish-hook {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  z-index: 22;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------- 被钓起的鱼（克隆体）---------- */
#gamePlay .theme-fish .fish-catch {
  position: absolute;
  z-index: 23;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(0, 60, 100, 0.35), 0 0 16px rgba(255, 220, 100, 0.6);
  white-space: nowrap;
  will-change: transform, left, top;
}
#gamePlay .theme-fish .fish-catch .fish-word {
  font-size: 14px;
  font-weight: 800;
  color: #006994;
}

/* 命中挣扎 */
#gamePlay .theme-fish .fish-catch.fish-struggle {
  animation: fish-struggle 0.18s ease-in-out 2;
}
@keyframes fish-struggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  25%      { transform: translate(-50%, -50%) rotate(-14deg) scale(1.12); }
  75%      { transform: translate(-50%, -50%) rotate(14deg) scale(1.08); }
}

/* 收线阶段 */
#gamePlay .theme-fish .fish-catch.fish-reeling {
  animation: none;
}

/* 钓起收尾：变成表情弹出 */
#gamePlay .theme-fish .fish-catch.fish-caught-pop {
  animation: fish-caught-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes fish-caught-pop {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
}

/* 覆盖已有 fish-caught 缩放动画：
   - aiming 阶段保持鱼可见+发光，等鱼钩命中；
   - reeling 阶段原目标立即淡出，由克隆体接管收线动画。 */
#gamePlay .theme-fish .fish-target.fish-caught.fish-action-aiming {
  animation: none !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 12px rgba(255, 230, 120, 0.95))
          drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}
#gamePlay .theme-fish .fish-target.fish-caught.fish-action-reeling {
  animation: none !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.15s ease-out;
}

/* ---------- 气泡 💧 ---------- */
#gamePlay .theme-fish .fish-bubble {
  position: absolute;
  font-size: 14px;
  z-index: 22;
  pointer-events: none;
  animation: fish-bubble-rise 0.9s ease-out forwards;
}
@keyframes fish-bubble-rise {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translate(calc(-50% + var(--bx, 0px)), -46px) scale(1); opacity: 0; }
}

/* ---------- 水花 💦 ---------- */
#gamePlay .theme-fish .fish-splash {
  position: absolute;
  font-size: 30px;
  z-index: 25;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.3);
  animation: fish-splash-burst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes fish-splash-burst {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.35) rotate(-12deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.7) rotate(15deg); opacity: 0; }
}

/* ---------- 水面波纹（收线落点）---------- */
#gamePlay .theme-fish .fish-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fish-ripple-expand 0.6s ease-out forwards;
}
@keyframes fish-ripple-expand {
  0%   { width: 6px; height: 6px; opacity: 0.9; }
  100% { width: 54px; height: 18px; opacity: 0; }
}