.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: auto;cursor: pointer;overflow: hidden}
.is-owner .ocean-scene {pointer-events: none;cursor: default}
.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); }}
.swimming-fish-group {position: absolute;inset: 0;opacity: 0;transition: opacity 0.4s ease-in-out}
.fish-reaction[data-creature-type="individual"] .swimming-fish-group {opacity: 1}
.swimming-fish {position: absolute;left: 0;width: 100%;height: 20px;animation: fish-swim 8s linear infinite;opacity: 0;transition: opacity 0.3s ease-in-out;will-change: transform, opacity;transform-origin: left center}
.fish-reaction[data-fish-count="1"] .swimming-fish-group > :nth-child(-n+1),
.fish-reaction[data-fish-count="2"] .swimming-fish-group > :nth-child(-n+2),
.fish-reaction[data-fish-count="3"] .swimming-fish-group > :nth-child(-n+3),
.fish-reaction[data-fish-count="4"] .swimming-fish-group > :nth-child(-n+4),
.fish-reaction[data-fish-count="5"] .swimming-fish-group > :nth-child(-n+5),
.fish-reaction[data-fish-count="6"] .swimming-fish-group > :nth-child(-n+6),
.fish-reaction[data-fish-count="7"] .swimming-fish-group > :nth-child(-n+7),
.fish-reaction[data-fish-count="8"] .swimming-fish-group > :nth-child(-n+8),
.fish-reaction[data-fish-count="9"] .swimming-fish-group > :nth-child(-n+9) {opacity: 1}
.swimming-fish-svg {width: 28px;height: 20px;fill: rgba(255, 255, 255, 0.9)}
.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% { transform: translateX(-30px) translateY(0) scaleX(1); }
48% { transform: translateX(calc(100% + 30px)) translateY(-8px) scaleX(1); }
50% { transform: translateX(calc(100% + 30px)) translateY(0) scaleX(-1); }
98% { transform: translateX(-30px) translateY(8px) scaleX(-1); }
100% { transform: translateX(-30px) translateY(0) scaleX(1); }}
.basic-fish-group {position: absolute;inset: 0;pointer-events: none}
.basic-fish {position: absolute;left: 0;width: 100%;height: 22px;animation: basic-fish-swim 6.5s linear infinite;opacity: 0;transition: opacity 0.3s ease-in-out;will-change: transform, opacity;transform-origin: left center}
.fish-reaction[data-basic-fish-count="1"] .basic-fish-group > :nth-child(-n+1),
.fish-reaction[data-basic-fish-count="2"] .basic-fish-group > :nth-child(-n+2),
.fish-reaction[data-basic-fish-count="3"] .basic-fish-group > :nth-child(-n+3),
.fish-reaction[data-basic-fish-count="4"] .basic-fish-group > :nth-child(-n+4),
.fish-reaction[data-basic-fish-count="5"] .basic-fish-group > :nth-child(-n+5),
.fish-reaction[data-basic-fish-count="6"] .basic-fish-group > :nth-child(-n+6),
.fish-reaction[data-basic-fish-count="7"] .basic-fish-group > :nth-child(-n+7),
.fish-reaction[data-basic-fish-count="8"] .basic-fish-group > :nth-child(-n+8),
.fish-reaction[data-basic-fish-count="9"] .basic-fish-group > :nth-child(-n+9) {opacity: 1}
.basic-fish-svg {width: 30px;height: 22px;fill: #a855f7;filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6))}
.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% { transform: translateX(-33px) translateY(0) scaleX(1); }
48% { transform: translateX(calc(100% + 33px)) translateY(-8px) scaleX(1); }
50% { transform: translateX(calc(100% + 33px)) translateY(0) scaleX(-1); }
98% { transform: translateX(-33px) translateY(8px) scaleX(-1); }
100% { transform: translateX(-33px) translateY(0) scaleX(1); }}
.pro-fish-group {position: absolute;inset: 0;pointer-events: none}
.pro-fish {position: absolute;left: 0;width: 100%;height: 24px;animation: pro-fish-swim 6s linear infinite;opacity: 0;transition: opacity 0.3s ease-in-out;will-change: transform, opacity;transform-origin: left center}
.fish-reaction[data-pro-fish-count="1"] .pro-fish-group > :nth-child(-n+1),
.fish-reaction[data-pro-fish-count="2"] .pro-fish-group > :nth-child(-n+2),
.fish-reaction[data-pro-fish-count="3"] .pro-fish-group > :nth-child(-n+3),
.fish-reaction[data-pro-fish-count="4"] .pro-fish-group > :nth-child(-n+4),
.fish-reaction[data-pro-fish-count="5"] .pro-fish-group > :nth-child(-n+5),
.fish-reaction[data-pro-fish-count="6"] .pro-fish-group > :nth-child(-n+6),
.fish-reaction[data-pro-fish-count="7"] .pro-fish-group > :nth-child(-n+7),
.fish-reaction[data-pro-fish-count="8"] .pro-fish-group > :nth-child(-n+8),
.fish-reaction[data-pro-fish-count="9"] .pro-fish-group > :nth-child(-n+9) {opacity: 1}
.pro-fish-svg {width: 32px;height: 24px;fill: #fbbf24;filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6))}
.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% { transform: translateX(-35px) translateY(0) scaleX(1); }
48% { transform: translateX(calc(100% + 35px)) translateY(-10px) scaleX(1); }
50% { transform: translateX(calc(100% + 35px)) translateY(0) scaleX(-1); }
98% { transform: translateX(-35px) translateY(10px) scaleX(-1); }
100% { transform: translateX(-35px) translateY(0) scaleX(1); }}
.fish-school {position: absolute;inset: 0;animation: school-move 12s ease-in-out infinite;opacity: 0;transition: opacity 0.4s ease-in-out;will-change: transform}
.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)}
.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); }}
.fish-swarm {position: absolute;inset: 0;opacity: 0;visibility: hidden;will-change: transform}
.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)}
.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; }}
.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;will-change: transform}
.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)}}
.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;will-change: transform}
.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)}}
.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); }
20% { transform: scale(1.5) rotate(-15deg); }
40% { transform: scale(1.3) rotate(10deg); }
60% { transform: scale(1.4) rotate(-5deg); }
80% { transform: scale(1.1) rotate(3deg); }
100% { transform: scale(1) rotate(0deg); }}
.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); }
20% { transform: scale(1.5) rotate(-15deg); }
40% { transform: scale(1.3) rotate(10deg); }
60% { transform: scale(1.4) rotate(-5deg); }
80% { transform: scale(1.1) rotate(3deg); }
100% { transform: scale(1) rotate(0deg); }}
.animation-paused,
.animation-paused * {animation-play-state: paused !important}
.fish-reaction--sm {padding: 8px;gap: 4px;margin-top: 0;border-radius: 0 0 var(--radius-md) var(--radius-md)}
.fish-reaction--sm .fish-reaction-button {padding: 5px 10px;gap: 5px;border-radius: 9px}
.fish-reaction--sm .fish-icon-svg {width: 22px;height: 22px}
.fish-reaction--sm .fish-count {font-size: 0.85em}
.fish-reaction--sm .swimming-fish-svg {width: 20px;height: 14px}
.fish-reaction--sm .school-fish {width: 13px;height: 9px}
.fish-reaction--sm .swarm-fish {width: 10px;height: 7px}
.fish-reaction--sm .shark-svg {width: 56px;height: 35px}
.fish-reaction--sm .whale-svg {width: 84px;height: 49px}
.fish-reaction--sm .basic-fish-svg {width: 22px;height: 16px}
.fish-reaction--sm .pro-fish-svg {width: 23px;height: 17px}
.fish-reaction--sm .seaweed-blade {width: 4px}
.fish-reaction--sm .bubble-1 { width: 4px; height: 4px; }
.fish-reaction--sm .bubble-2 { width: 3px; height: 3px; }
.fish-reaction--sm .bubble-3 { width: 4px; height: 4px; }
.fish-reaction--sm .bubble-4 { width: 2px; height: 2px; }
.fish-reaction--sm .bubble-5 { width: 4px; height: 4px; }
.fish-reaction--sm .premium-particle {width: 5px;height: 5px}
@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}
.fish-reaction--sm {padding: 6px;gap: 3px;margin-top: 0;border-radius: 0 0 var(--radius-md) var(--radius-md)}
.fish-reaction--sm .fish-reaction-button {padding: 4px 9px;gap: 4px;border-radius: 8px}
.fish-reaction--sm .fish-icon-svg {width: 18px;height: 18px}
.fish-reaction--sm .fish-count {font-size: 0.72em}}