/* ==============================================================================
   魚リアクション - 海の世界
   ============================================================================== */

.fish-reaction {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
  border-radius: 10px;
  margin-top: 6px;
  overflow: hidden;
}

/* ==============================================================================
   海のシーン
   ============================================================================== */

.ocean-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 泡 */
.bubbles {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 泡はリアクションがある時に表示 */
.fish-reaction:not([data-creature-type="none"]) .bubble {
  opacity: 1;
}

.bubble-1 { left: 10%; width: 6px; height: 6px; animation: bubble-rise-1 5s ease-in-out infinite 0.3s; }
.bubble-2 { left: 30%; width: 4px; height: 4px; animation: bubble-rise-2 7s ease-in-out infinite 2.1s; }
.bubble-3 { left: 50%; width: 5px; height: 5px; animation: bubble-rise-3 6s ease-in-out infinite 4.7s; }
.bubble-4 { left: 70%; width: 3px; height: 3px; animation: bubble-rise-4 8s ease-in-out infinite 1.3s; }
.bubble-5 { left: 85%; width: 5px; height: 5px; animation: bubble-rise-5 5.5s ease-in-out infinite 6.2s; }

@keyframes bubble-rise-1 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  10% { transform: translateY(-10px) translateX(2px) scale(1); opacity: 0.7; }
  90% { transform: translateY(-120px) translateX(4px) scale(0.6); opacity: 0.2; }
}

@keyframes bubble-rise-2 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  15% { transform: translateY(-15px) translateX(-2px) scale(1); opacity: 0.6; }
  85% { transform: translateY(-110px) translateX(-2px) scale(0.5); opacity: 0.1; }
}

@keyframes bubble-rise-3 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  12% { transform: translateY(-12px) translateX(3px) scale(1); opacity: 0.65; }
  88% { transform: translateY(-100px) translateX(2px) scale(0.55); opacity: 0.15; }
}

@keyframes bubble-rise-4 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  8% { transform: translateY(-8px) translateX(-3px) scale(1); opacity: 0.55; }
  92% { transform: translateY(-115px) translateX(-3px) scale(0.45); opacity: 0.1; }
}

@keyframes bubble-rise-5 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  18% { transform: translateY(-18px) translateX(2px) scale(1); opacity: 0.6; }
  86% { transform: translateY(-105px) translateX(3px) scale(0.52); opacity: 0.12; }
}

/* 海藻 */
.seaweed {
  position: absolute;
  bottom: 0;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.seaweed-left { left: 8px; }
.seaweed-right { right: 8px; }

/* 海藻は群れ以上で表示 */
.fish-reaction[data-creature-type="school"] .seaweed,
.fish-reaction[data-creature-type="swarm"] .seaweed,
.fish-reaction[data-creature-type="shark"] .seaweed,
.fish-reaction[data-creature-type="whale"] .seaweed {
  opacity: 1;
}

.seaweed-blade {
  width: 6px;
  background: linear-gradient(to top, #15803d, #22c55e);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom center;
  animation: seaweed-sway 3s ease-in-out infinite;
}

.seaweed-left .blade-1 { height: 30px; animation-delay: 0s; }
.seaweed-left .blade-2 { height: 45px; animation-delay: 0.3s; }
.seaweed-left .blade-3 { height: 25px; animation-delay: 0.6s; }

.seaweed-right .blade-1 { height: 28px; animation-delay: 0.2s; }
.seaweed-right .blade-2 { height: 40px; animation-delay: 0.5s; }
.seaweed-right .blade-3 { height: 22px; animation-delay: 0.8s; }

@keyframes seaweed-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ==============================================================================
   個別の魚（1-9匹）- SVGベースの魚
   ============================================================================== */

.swimming-fish-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* individual タイプの時に表示 */
.fish-reaction[data-creature-type="individual"] .swimming-fish-group {
  opacity: 1;
}

.swimming-fish {
  position: absolute;
  width: 28px;
  height: 20px;
  animation: fish-swim 8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* data-fish-count に応じて魚を表示 */
.fish-reaction[data-fish-count="1"] .swimming-fish-1,
.fish-reaction[data-fish-count="2"] .swimming-fish-1,
.fish-reaction[data-fish-count="2"] .swimming-fish-2,
.fish-reaction[data-fish-count="3"] .swimming-fish-1,
.fish-reaction[data-fish-count="3"] .swimming-fish-2,
.fish-reaction[data-fish-count="3"] .swimming-fish-3,
.fish-reaction[data-fish-count="4"] .swimming-fish-1,
.fish-reaction[data-fish-count="4"] .swimming-fish-2,
.fish-reaction[data-fish-count="4"] .swimming-fish-3,
.fish-reaction[data-fish-count="4"] .swimming-fish-4,
.fish-reaction[data-fish-count="5"] .swimming-fish-1,
.fish-reaction[data-fish-count="5"] .swimming-fish-2,
.fish-reaction[data-fish-count="5"] .swimming-fish-3,
.fish-reaction[data-fish-count="5"] .swimming-fish-4,
.fish-reaction[data-fish-count="5"] .swimming-fish-5,
.fish-reaction[data-fish-count="6"] .swimming-fish-1,
.fish-reaction[data-fish-count="6"] .swimming-fish-2,
.fish-reaction[data-fish-count="6"] .swimming-fish-3,
.fish-reaction[data-fish-count="6"] .swimming-fish-4,
.fish-reaction[data-fish-count="6"] .swimming-fish-5,
.fish-reaction[data-fish-count="6"] .swimming-fish-6,
.fish-reaction[data-fish-count="7"] .swimming-fish-1,
.fish-reaction[data-fish-count="7"] .swimming-fish-2,
.fish-reaction[data-fish-count="7"] .swimming-fish-3,
.fish-reaction[data-fish-count="7"] .swimming-fish-4,
.fish-reaction[data-fish-count="7"] .swimming-fish-5,
.fish-reaction[data-fish-count="7"] .swimming-fish-6,
.fish-reaction[data-fish-count="7"] .swimming-fish-7,
.fish-reaction[data-fish-count="8"] .swimming-fish-1,
.fish-reaction[data-fish-count="8"] .swimming-fish-2,
.fish-reaction[data-fish-count="8"] .swimming-fish-3,
.fish-reaction[data-fish-count="8"] .swimming-fish-4,
.fish-reaction[data-fish-count="8"] .swimming-fish-5,
.fish-reaction[data-fish-count="8"] .swimming-fish-6,
.fish-reaction[data-fish-count="8"] .swimming-fish-7,
.fish-reaction[data-fish-count="8"] .swimming-fish-8,
.fish-reaction[data-fish-count="9"] .swimming-fish-1,
.fish-reaction[data-fish-count="9"] .swimming-fish-2,
.fish-reaction[data-fish-count="9"] .swimming-fish-3,
.fish-reaction[data-fish-count="9"] .swimming-fish-4,
.fish-reaction[data-fish-count="9"] .swimming-fish-5,
.fish-reaction[data-fish-count="9"] .swimming-fish-6,
.fish-reaction[data-fish-count="9"] .swimming-fish-7,
.fish-reaction[data-fish-count="9"] .swimming-fish-8,
.fish-reaction[data-fish-count="9"] .swimming-fish-9 {
  opacity: 1;
}

.swimming-fish-svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* 個別の魚の位置とタイミング - 負のdelayで初期位置を分散 */
.swimming-fish-1 { top: 25%; animation-delay: -0s; animation-duration: 7s; }
.swimming-fish-2 { top: 55%; animation-delay: -4s; animation-duration: 9s; }
.swimming-fish-3 { top: 40%; animation-delay: -2s; animation-duration: 8s; }
.swimming-fish-4 { top: 70%; animation-delay: -5s; animation-duration: 7.5s; }
.swimming-fish-5 { top: 15%; animation-delay: -6s; animation-duration: 8.5s; }
.swimming-fish-6 { top: 60%; animation-delay: -3s; animation-duration: 9.5s; }
.swimming-fish-7 { top: 35%; animation-delay: -7s; animation-duration: 7.2s; }
.swimming-fish-8 { top: 80%; animation-delay: -1s; animation-duration: 8.8s; }
.swimming-fish-9 { top: 48%; animation-delay: -4.5s; animation-duration: 6.8s; }

@keyframes fish-swim {
  0% { left: -30px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 30px); transform: translateY(-8px) scaleX(1); }
  50% { left: calc(100% + 30px); transform: translateY(0) scaleX(-1); }
  98% { left: -30px; transform: translateY(8px) scaleX(-1); }
  100% { left: -30px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   ベーシックプランユーザーからの紫色の魚
   ============================================================================== */

.basic-fish-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.basic-fish {
  position: absolute;
  width: 30px;
  height: 22px;
  animation: basic-fish-swim 6.5s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* data-basic-fish-count に応じて紫色の魚を表示 */
.fish-reaction[data-basic-fish-count="1"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="2"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="2"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="3"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="3"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="3"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="4"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="4"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="4"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="4"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="5"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="5"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="5"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="5"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="5"] .basic-fish-5,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-5,
.fish-reaction[data-basic-fish-count="6"] .basic-fish-6,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-5,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-6,
.fish-reaction[data-basic-fish-count="7"] .basic-fish-7,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-5,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-6,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-7,
.fish-reaction[data-basic-fish-count="8"] .basic-fish-8,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-1,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-2,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-3,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-4,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-5,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-6,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-7,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-8,
.fish-reaction[data-basic-fish-count="9"] .basic-fish-9 {
  opacity: 1;
}

.basic-fish-svg {
  width: 100%;
  height: 100%;
  fill: #a855f7;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}

/* 紫色の魚の位置とタイミング - 負のdelayで初期位置を分散 */
.basic-fish-1 { top: 18%; animation-delay: -0.5s; animation-duration: 6.0s; }
.basic-fish-2 { top: 48%; animation-delay: -3.5s; animation-duration: 7.0s; }
.basic-fish-3 { top: 33%; animation-delay: -1.5s; animation-duration: 6.3s; }
.basic-fish-4 { top: 63%; animation-delay: -4.5s; animation-duration: 6.7s; }
.basic-fish-5 { top: 12%; animation-delay: -2.8s; animation-duration: 5.8s; }
.basic-fish-6 { top: 53%; animation-delay: -5.5s; animation-duration: 7.3s; }
.basic-fish-7 { top: 28%; animation-delay: -0.9s; animation-duration: 6.1s; }
.basic-fish-8 { top: 73%; animation-delay: -3.2s; animation-duration: 6.5s; }
.basic-fish-9 { top: 41%; animation-delay: -4.7s; animation-duration: 5.7s; }

@keyframes basic-fish-swim {
  0% { left: -33px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 33px); transform: translateY(-8px) scaleX(1); }
  50% { left: calc(100% + 33px); transform: translateY(0) scaleX(-1); }
  98% { left: -33px; transform: translateY(8px) scaleX(-1); }
  100% { left: -33px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   プロプランユーザーからの金色の魚
   ============================================================================== */

.pro-fish-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pro-fish {
  position: absolute;
  width: 32px;
  height: 24px;
  animation: pro-fish-swim 6s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* data-pro-fish-count に応じて金色の魚を表示 */
.fish-reaction[data-pro-fish-count="1"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="2"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="2"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="3"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="3"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="3"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="4"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="4"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="4"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="4"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="5"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="5"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="5"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="5"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="5"] .pro-fish-5,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-5,
.fish-reaction[data-pro-fish-count="6"] .pro-fish-6,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-5,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-6,
.fish-reaction[data-pro-fish-count="7"] .pro-fish-7,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-5,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-6,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-7,
.fish-reaction[data-pro-fish-count="8"] .pro-fish-8,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-1,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-2,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-3,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-4,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-5,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-6,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-7,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-8,
.fish-reaction[data-pro-fish-count="9"] .pro-fish-9 {
  opacity: 1;
}

.pro-fish-svg {
  width: 100%;
  height: 100%;
  fill: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

/* 金色の魚の位置とタイミング - 負のdelayで初期位置を分散 */
.pro-fish-1 { top: 20%; animation-delay: -0.3s; animation-duration: 5.5s; }
.pro-fish-2 { top: 50%; animation-delay: -3.2s; animation-duration: 6.5s; }
.pro-fish-3 { top: 35%; animation-delay: -1.8s; animation-duration: 5.8s; }
.pro-fish-4 { top: 65%; animation-delay: -4.1s; animation-duration: 6.2s; }
.pro-fish-5 { top: 10%; animation-delay: -2.5s; animation-duration: 5.3s; }
.pro-fish-6 { top: 55%; animation-delay: -5.2s; animation-duration: 6.8s; }
.pro-fish-7 { top: 30%; animation-delay: -0.7s; animation-duration: 5.6s; }
.pro-fish-8 { top: 75%; animation-delay: -3.0s; animation-duration: 6.0s; }
.pro-fish-9 { top: 43%; animation-delay: -4.5s; animation-duration: 5.2s; }

@keyframes pro-fish-swim {
  0% { left: -35px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 35px); transform: translateY(-10px) scaleX(1); }
  50% { left: calc(100% + 35px); transform: translateY(0) scaleX(-1); }
  98% { left: -35px; transform: translateY(10px) scaleX(-1); }
  100% { left: -35px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   魚のまとまり（10-49匹）- 群れで泳ぐ
   ============================================================================== */

.fish-school {
  position: absolute;
  inset: 0;
  animation: school-move 12s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* school タイプの時に表示 */
.fish-reaction[data-creature-type="school"] .fish-school {
  opacity: 1;
}

.school-fish {
  position: absolute;
  width: 18px;
  height: 12px;
}

.school-fish-svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* 群れの配置（中心に集まる形） */
.school-fish-1 { top: 30%; left: 20%; animation: school-fish-wiggle 1.5s ease-in-out infinite 0s; }
.school-fish-2 { top: 35%; left: 25%; animation: school-fish-wiggle 1.6s ease-in-out infinite 0.1s; }
.school-fish-3 { top: 40%; left: 22%; animation: school-fish-wiggle 1.4s ease-in-out infinite 0.2s; }
.school-fish-4 { top: 45%; left: 28%; animation: school-fish-wiggle 1.7s ease-in-out infinite 0.15s; }
.school-fish-5 { top: 38%; left: 30%; animation: school-fish-wiggle 1.55s ease-in-out infinite 0.25s; }
.school-fish-6 { top: 32%; left: 32%; animation: school-fish-wiggle 1.45s ease-in-out infinite 0.05s; }
.school-fish-7 { top: 50%; left: 24%; animation: school-fish-wiggle 1.65s ease-in-out infinite 0.3s; }
.school-fish-8 { top: 42%; left: 18%; animation: school-fish-wiggle 1.5s ease-in-out infinite 0.12s; }
.school-fish-9 { top: 28%; left: 26%; animation: school-fish-wiggle 1.58s ease-in-out infinite 0.22s; }
.school-fish-10 { top: 55%; left: 30%; animation: school-fish-wiggle 1.42s ease-in-out infinite 0.08s; }
.school-fish-11 { top: 48%; left: 35%; animation: school-fish-wiggle 1.52s ease-in-out infinite 0.18s; }
.school-fish-12 { top: 36%; left: 15%; animation: school-fish-wiggle 1.62s ease-in-out infinite 0.28s; }

@keyframes school-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(calc(100% - 80px)); }
}

@keyframes school-fish-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(2deg); }
  75% { transform: translateY(2px) rotate(-2deg); }
}

/* ==============================================================================
   魚の大群（50-99匹）- 大量の魚が流れる
   ============================================================================== */

.fish-swarm {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

/* swarm タイプの時に表示・アニメーション実行 */
.fish-reaction[data-creature-type="swarm"] .fish-swarm {
  opacity: 1;
  visibility: visible;
  animation: swarm-flow 8s linear infinite;
}

.swarm-fish {
  position: absolute;
  width: 14px;
  height: 10px;
}

.swarm-fish-svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.08));
}

/* 大群の配置（画面全体に散らばる） */
.swarm-fish-1 { top: 10%; left: 5%; }
.swarm-fish-2 { top: 20%; left: 12%; }
.swarm-fish-3 { top: 15%; left: 20%; }
.swarm-fish-4 { top: 25%; left: 8%; }
.swarm-fish-5 { top: 30%; left: 15%; }
.swarm-fish-6 { top: 35%; left: 5%; }
.swarm-fish-7 { top: 40%; left: 18%; }
.swarm-fish-8 { top: 45%; left: 10%; }
.swarm-fish-9 { top: 50%; left: 22%; }
.swarm-fish-10 { top: 55%; left: 7%; }
.swarm-fish-11 { top: 60%; left: 15%; }
.swarm-fish-12 { top: 65%; left: 25%; }
.swarm-fish-13 { top: 70%; left: 12%; }
.swarm-fish-14 { top: 75%; left: 20%; }
.swarm-fish-15 { top: 80%; left: 8%; }
.swarm-fish-16 { top: 18%; left: 28%; }
.swarm-fish-17 { top: 28%; left: 25%; }
.swarm-fish-18 { top: 38%; left: 28%; }
.swarm-fish-19 { top: 48%; left: 30%; }
.swarm-fish-20 { top: 58%; left: 32%; }
.swarm-fish-21 { top: 68%; left: 30%; }
.swarm-fish-22 { top: 22%; left: 35%; }
.swarm-fish-23 { top: 42%; left: 35%; }
.swarm-fish-24 { top: 62%; left: 38%; }
.swarm-fish-25 { top: 82%; left: 35%; }

@keyframes swarm-flow {
  0% { transform: translateX(-50px); opacity: 0; }
  5% { transform: translateX(-30px); opacity: 1; }
  95% { transform: translateX(calc(100% + 30px)); opacity: 1; }
  100% { transform: translateX(calc(100% + 50px)); opacity: 0; }
}

/* ==============================================================================
   サメ（100-499匹）
   ============================================================================== */

.shark-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: shark-swim 10s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* shark タイプの時に表示 */
.fish-reaction[data-creature-type="shark"] .shark-container {
  opacity: 1;
}

.shark-svg {
  width: 80px;
  height: 50px;
  fill: #64748b;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform: scaleX(-1); /* 右向きに反転 */
}

@keyframes shark-swim {
  0%, 100% {
    transform: translateX(-100px) scaleX(1);
  }
  45% {
    transform: translateX(calc(100% + 20px)) scaleX(1);
  }
  50% {
    transform: translateX(calc(100% + 20px)) scaleX(-1);
  }
  95% {
    transform: translateX(-100px) scaleX(-1);
  }
}

/* ==============================================================================
   クジラ（500+匹）
   ============================================================================== */

.whale-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: whale-swim 15s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* whale タイプの時に表示 */
.fish-reaction[data-creature-type="whale"] .whale-container {
  opacity: 1;
}

.whale-svg {
  width: 120px;
  height: 70px;
  fill: #334155;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  transform: scaleX(-1); /* 右向きに反転 */
}

@keyframes whale-swim {
  0%, 100% {
    transform: translateX(-150px) translateY(0) scaleX(1);
  }
  25% {
    transform: translateX(30%) translateY(-5px) scaleX(1);
  }
  45% {
    transform: translateX(calc(100% + 50px)) translateY(0) scaleX(1);
  }
  50% {
    transform: translateX(calc(100% + 50px)) translateY(0) scaleX(-1);
  }
  75% {
    transform: translateX(30%) translateY(5px) scaleX(-1);
  }
  95% {
    transform: translateX(-150px) translateY(0) scaleX(-1);
  }
}

/* ==============================================================================
   魚ボタン
   ============================================================================== */

.fish-reaction-button {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fish-reaction-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fish-reaction-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fish-reaction-button.reacted {
  border-color: #f59e0b;
  background: rgba(255, 251, 235, 0.95);
}

/* ==============================================================================
   魚アイコン
   ============================================================================== */

.fish-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fish-icon-wrapper.reacted {
  color: #f59e0b;
}

.fish-icon-svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* クリーチャータイプに応じた泳ぎアニメーション */
.fish-reaction[data-creature-type="none"] .fish-icon-wrapper { animation: swim-idle 4s ease-in-out infinite; }
.fish-reaction[data-creature-type="individual"] .fish-icon-wrapper { animation: swim-gentle 3s ease-in-out infinite; }
.fish-reaction[data-creature-type="school"] .fish-icon-wrapper { animation: swim-normal 2.5s ease-in-out infinite; }
.fish-reaction[data-creature-type="swarm"] .fish-icon-wrapper { animation: swim-active 2s ease-in-out infinite; }
.fish-reaction[data-creature-type="shark"] .fish-icon-wrapper { animation: swim-excited 1.5s ease-in-out infinite; }
.fish-reaction[data-creature-type="whale"] .fish-icon-wrapper { animation: swim-legendary 1.2s ease-in-out infinite; }

@keyframes swim-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes swim-gentle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(3px) rotate(2deg); }
  75% { transform: translateX(-3px) rotate(-2deg); }
}

@keyframes swim-normal {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(5px) translateY(-2px) rotate(3deg); }
  75% { transform: translateX(-5px) translateY(2px) rotate(-3deg); }
}

@keyframes swim-active {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  20% { transform: translateX(6px) translateY(-4px) rotate(5deg); }
  40% { transform: translateX(3px) translateY(-6px) rotate(2deg); }
  60% { transform: translateX(-3px) translateY(-4px) rotate(-2deg); }
  80% { transform: translateX(-6px) translateY(-2px) rotate(-5deg); }
}

@keyframes swim-excited {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  15% { transform: translateX(8px) translateY(-6px) rotate(8deg); }
  30% { transform: translateX(4px) translateY(-10px) rotate(4deg); }
  50% { transform: translateX(-2px) translateY(-6px) rotate(-3deg); }
  70% { transform: translateX(-8px) translateY(-10px) rotate(-8deg); }
  85% { transform: translateX(-4px) translateY(-4px) rotate(-4deg); }
}

@keyframes swim-legendary {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  10% { transform: translateX(6px) translateY(-8px) rotate(10deg) scale(1.05); }
  25% { transform: translateX(10px) translateY(-12px) rotate(5deg) scale(1.08); }
  40% { transform: translateX(3px) translateY(-15px) rotate(-3deg) scale(1.05); }
  55% { transform: translateX(-6px) translateY(-12px) rotate(-8deg) scale(1.08); }
  70% { transform: translateX(-10px) translateY(-8px) rotate(-10deg) scale(1.05); }
  85% { transform: translateX(-4px) translateY(-3px) rotate(-5deg) scale(1.02); }
}

/* クリック時のバウンス */
.fish-icon-wrapper.fish-bounce .fish-icon-svg {
  animation: fish-bounce 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fish-bounce {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.3) rotate(-10deg); }
  60% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ==============================================================================
   カウント表示
   ============================================================================== */

.fish-count-display {
  display: flex;
  align-items: baseline;
}

.fish-count {
  font-size: 1.1em;
  font-weight: 700;
  color: #1e293b;
}

/* ==============================================================================
   その他
   ============================================================================== */

.fish-reaction.is-owner .fish-reaction-button {
  cursor: default;
  opacity: 0.7;
}

.fish-reaction.is-owner .fish-reaction-button:hover {
  transform: none;
  box-shadow: none;
}

/* ==============================================================================
   クールダウン状態
   ============================================================================== */

.fish-reaction-button.cooldown {
  pointer-events: none;
  opacity: 0.6;
}

/* ==============================================================================
   課金ユーザー用エフェクト
   ============================================================================== */

/* パーティクルコンテナ */
.premium-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  z-index: 20;
  pointer-events: none;
}

/* 個別パーティクル */
.premium-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--particle-color, #fbbf24);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--particle-color, #fbbf24);
  animation: particle-burst 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--particle-delay, 0s);
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--particle-angle)) translateX(0) scale(1);
  }
  60% {
    opacity: 1;
    transform: rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--particle-angle)) translateX(calc(var(--particle-distance) * 1.3)) scale(0);
  }
}

/* BASICユーザー用バウンスアニメーション（紫色） */
.fish-icon-wrapper.fish-bounce-basic .fish-icon-svg {
  animation: fish-bounce-basic 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fish-bounce-basic {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  }
  20% {
    transform: scale(1.5) rotate(-15deg);
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.8));
  }
  40% {
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
  }
  60% {
    transform: scale(1.4) rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.7));
  }
  80% {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  }
}

/* PROユーザー用バウンスアニメーション（金色） */
.fish-icon-wrapper.fish-bounce-premium .fish-icon-svg {
  animation: fish-bounce-premium 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fish-bounce-premium {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
  }
  20% {
    transform: scale(1.5) rotate(-15deg);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
  }
  40% {
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
  }
  60% {
    transform: scale(1.4) rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7));
  }
  80% {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .fish-reaction {
    padding: 8px;
    gap: 4px;
    margin-top: 4px;
    border-radius: 8px;
  }

  .fish-reaction-button {
    padding: 6px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .fish-icon-svg {
    width: 24px;
    height: 24px;
  }

  .fish-count {
    font-size: 0.95em;
  }

  .seaweed-blade {
    width: 4px;
  }

  /* 課金パーティクルのサイズ調整 */
  .premium-particle {
    width: 5px;
    height: 5px;
  }
}