@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes breatheGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(-10px); }
  56% { transform: translateY(-3px); }
  75% { transform: translateY(-5px); }
}

@keyframes badgePop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.12); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(79, 216, 255, 0), inset 0 0 0 rgba(79, 216, 255, 0);
  }
  50% {
    box-shadow: 0 0 14px rgba(79, 216, 255, 0.26), inset 0 0 10px rgba(79, 216, 255, 0.08);
  }
}

@keyframes ripeGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 205, 124, 0.25), 0 10px 22px rgba(36, 19, 5, 0.3);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 218, 145, 0.42), 0 0 18px rgba(255, 195, 88, 0.24), 0 10px 22px rgba(36, 19, 5, 0.34);
  }
}

@keyframes rainSweep {
  from { background-position: 0 0; }
  to { background-position: -80px 180px; }
}

@keyframes snowFall {
  from { background-position: 0 -10px; }
  to { background-position: 30px 160px; }
}

@keyframes actionRest {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(3px); }
  70% { transform: translateY(0); }
}

@keyframes actionEat {
  0%, 100% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.08) rotate(-4deg); }
  70% { transform: scale(1.03) rotate(4deg); }
}

@keyframes actionFarm {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(2px) rotate(-6deg); }
  65% { transform: translateY(-1px) rotate(5deg); }
}

@keyframes actionCook {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes actionExplore {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@keyframes actionTravel {
  0%, 100% { transform: translateX(0) translateY(0); }
  30% { transform: translateX(4px) translateY(-2px); }
  70% { transform: translateX(-2px) translateY(1px); }
}

@keyframes actionSocialize {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(5deg); }
}

.guide-pulse {
  animation: glowPulse 2.4s ease-in-out infinite;
}

.guide-pulse.used {
  animation: none;
}

.guide-badge,
.new-badge {
  animation: badgePop 1.8s ease-in-out infinite;
}

.lobster-avatar {
  animation: float 3.2s ease-in-out infinite, breatheGlow 3.2s ease-in-out infinite;
}

.lobster-avatar.petted {
  animation: bounce 0.52s ease;
}

.action-btn:hover .action-icon {
  animation: wiggle 0.45s ease;
}

.farm-plot.ripe {
  animation: ripeGlow 2s ease-in-out infinite;
}

.farm-plot.ripe .plot-emoji {
  animation: pulse 1.4s ease-in-out infinite;
}

body[data-weather="rainy"] #game-screen::after {
  animation: rainSweep 1.35s linear infinite;
}

body[data-weather="stormy"] #game-screen::after {
  animation: rainSweep 0.9s linear infinite;
}

body[data-weather="snowy"] #game-screen::after {
  animation: snowFall 7s linear infinite;
}

.lobster-avatar.action-rest .avatar-pixel {
  animation: actionRest 0.9s ease;
}

.lobster-avatar.action-eat .avatar-pixel {
  animation: actionEat 0.9s ease;
}

.lobster-avatar.action-farm .avatar-pixel {
  animation: actionFarm 0.9s ease;
}

.lobster-avatar.action-cook .avatar-pixel {
  animation: actionCook 0.9s ease;
}

.lobster-avatar.action-explore .avatar-pixel,
.lobster-avatar.action-shop .avatar-pixel {
  animation: actionExplore 0.9s ease;
}

.lobster-avatar.action-travel .avatar-pixel {
  animation: actionTravel 0.9s ease;
}

.lobster-avatar.action-socialize .avatar-pixel {
  animation: actionSocialize 0.9s ease;
}

.interactive-event {
  animation: slideDown 0.35s ease;
}

.notification.show {
  animation: fadeInDown 0.28s ease forwards;
}

.diary-entry {
  animation: slideIn 0.28s ease;
}

@keyframes houseIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes houseSitPose {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(1px) rotate(-2deg); }
  75% { transform: translateY(0) rotate(2deg); }
}

@keyframes housePronePose {
  0%, 100% { transform: scale(0.95) translateY(1px); }
  50% { transform: scale(0.92) translateY(2px); }
}

@keyframes houseWalkPose {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-4deg); }
  50% { transform: translateX(2px) rotate(3deg); }
  75% { transform: translateX(-1px) rotate(-2deg); }
}

@keyframes houseLookPose {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-7deg); }
  60% { transform: rotate(6deg); }
}

@keyframes houseWorkPose {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(2px) rotate(-6deg); }
  70% { transform: translateY(-1px) rotate(5deg); }
}

@keyframes houseSleepPose {
  0%, 100% { transform: scale(0.9) translateY(2px); }
  50% { transform: scale(0.87) translateY(3px); }
}

@keyframes sleepBubble {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  30% { opacity: 0.9; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1.2); }
}

@keyframes awayTrail {
  0%, 100% { opacity: 0.6; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2px); }
}

@keyframes postcardSwing {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

/* ========== Sea Window Animations ========== */

@keyframes seaWave {
  0% { transform: translateX(0) scaleY(1) scaleX(1); }
  25% { transform: translateX(1.5%) scaleY(1.15) scaleX(1.01); }
  50% { transform: translateX(3%) scaleY(1.35) scaleX(0.99); }
  75% { transform: translateX(1%) scaleY(1.1) scaleX(1.01); }
  100% { transform: translateX(0) scaleY(1) scaleX(1); }
}

@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
  10% { opacity: 0.6; transform: translateY(-14px) translateX(2px) scale(0.65); }
  30% { opacity: 0.7; transform: translateY(-42px) translateX(-3px) scale(0.8); }
  50% { opacity: 0.5; transform: translateY(-70px) translateX(4px) scale(0.9); }
  70% { opacity: 0.35; transform: translateY(-98px) translateX(-2px) scale(1.0); }
  90% { opacity: 0.15; transform: translateY(-126px) translateX(3px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-145px) translateX(0) scale(1.1); }
}

@keyframes seaIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(-1deg); }
  70% { transform: translateY(1px) rotate(1deg); }
}

@keyframes seaSwim {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(4px) translateY(-3px) rotate(-4deg); }
  50% { transform: translateX(-2px) translateY(2px) rotate(3deg); }
  75% { transform: translateX(3px) translateY(-1px) rotate(-2deg); }
}

@keyframes seaRock {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-1px) rotate(-2deg); }
  80% { transform: translateY(0) rotate(1deg); }
}

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

@keyframes seaGoldenFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(3deg); }
  70% { transform: translateY(2px) rotate(-2deg); }
}

@keyframes lightRayShift {
  0% { transform: translateX(0) skewX(0deg); filter: brightness(1); opacity: 0.8; }
  25% { transform: translateX(3px) skewX(-1deg); filter: brightness(0.95); opacity: 1; }
  50% { transform: translateX(6px) skewX(1deg); filter: brightness(0.88); opacity: 0.7; }
  75% { transform: translateX(4px) skewX(-0.5deg); filter: brightness(0.92); opacity: 0.9; }
  100% { transform: translateX(0) skewX(0deg); filter: brightness(1); opacity: 0.8; }
}

@keyframes sandCaustics {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  33% { background-position: 4px 1px, -2px -1px, 3px 2px, 0 0; }
  66% { background-position: 6px 3px, -4px 1px, 5px -1px, 0 0; }
  100% { background-position: 8px 2px, -5px -1px, 6px 3px, 0 0; }
}

@keyframes seaweedSway {
  0% { transform: rotate(0deg) scaleY(1); }
  15% { transform: rotate(4deg) scaleY(1.02); }
  35% { transform: rotate(-2deg) scaleY(0.98); }
  55% { transform: rotate(5deg) scaleY(1.01); }
  75% { transform: rotate(-4deg) scaleY(0.99); }
  100% { transform: rotate(0deg) scaleY(1); }
}

/* ========== Sea Creature Animations ========== */

@keyframes swimLeftToRight {
  0% { transform: translateX(-30px) translateY(0); }
  12% { transform: translateX(calc(12vw)) translateY(-3px); }
  25% { transform: translateX(calc(25vw)) translateY(2px); }
  37% { transform: translateX(calc(37vw)) translateY(-2px); }
  50% { transform: translateX(calc(50vw)) translateY(3px); }
  62% { transform: translateX(calc(62vw)) translateY(-1px); }
  75% { transform: translateX(calc(75vw)) translateY(2px); }
  87% { transform: translateX(calc(87vw)) translateY(-2px); }
  100% { transform: translateX(calc(100vw + 30px)) translateY(0); }
}

@keyframes swimRightToLeft {
  0% { transform: translateX(calc(100vw + 30px)) scaleX(-1) translateY(0); }
  12% { transform: translateX(calc(88vw)) scaleX(-1) translateY(-2px); }
  25% { transform: translateX(calc(75vw)) scaleX(-1) translateY(3px); }
  37% { transform: translateX(calc(63vw)) scaleX(-1) translateY(-1px); }
  50% { transform: translateX(calc(50vw)) scaleX(-1) translateY(2px); }
  62% { transform: translateX(calc(38vw)) scaleX(-1) translateY(-3px); }
  75% { transform: translateX(calc(25vw)) scaleX(-1) translateY(1px); }
  87% { transform: translateX(calc(12vw)) scaleX(-1) translateY(-2px); }
  100% { transform: translateX(-30px) scaleX(-1) translateY(0); }
}

@keyframes fishTailWag {
  0%, 100% { transform: rotate(0deg) scaleX(1); }
  25% { transform: rotate(8deg) scaleX(0.9); }
  75% { transform: rotate(-8deg) scaleX(0.9); }
}

@keyframes jellyPulse {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  40% { transform: scaleY(0.8) scaleX(1.15); }
  60% { transform: scaleY(1.1) scaleX(0.9); }
}

@keyframes pufferInflate {
  0%, 70%, 100% { transform: scale(1); border-radius: 50%; }
  80% { transform: scale(1.4); border-radius: 50%; box-shadow: 0 0 0 2px rgba(200,160,60,0.2); }
  90% { transform: scale(1.35); }
}

@keyframes octopusTentacle {
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  30% { transform: scaleY(1.15) skewX(3deg); }
  60% { transform: scaleY(0.9) skewX(-3deg); }
}

@keyframes eelSlither {
  0%, 100% { transform: skewY(0deg); }
  25% { transform: skewY(2deg); }
  50% { transform: skewY(0deg); }
  75% { transform: skewY(-2deg); }
}

@keyframes mantaGlide {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(0.85) rotate(1deg); }
}

@keyframes crabWalk {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-1px); }
}

@keyframes seahorseBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(3deg); }
  60% { transform: translateY(2px) rotate(-2deg); }
}

@keyframes whaleBreathe {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.02) scaleY(0.98); }
}

@keyframes jellyfishFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(-80px) translateX(8px); }
  90% { opacity: 0.6; }
  100% { transform: translateY(-140px) translateX(-4px); opacity: 0; }
}

@keyframes crawlLeftToRight {
  0% { transform: translateX(-15px); }
  100% { transform: translateX(calc(100vw + 15px)); }
}

@keyframes crawlRightToLeft {
  0% { transform: translateX(calc(100vw + 15px)) scaleX(-1); }
  100% { transform: translateX(-15px) scaleX(-1); }
}

@keyframes turtleSwim {
  0% { transform: translateX(-30px) translateY(0); }
  25% { transform: translateX(25vw) translateY(-6px); }
  50% { transform: translateX(50vw) translateY(2px); }
  75% { transform: translateX(75vw) translateY(-4px); }
  100% { transform: translateX(calc(100vw + 30px)) translateY(0); }
}

/* ========== Weather Animations ========== */

@keyframes seaRainFall {
  0% { background-position: 0 0; }
  100% { background-position: -4px 12px; }
}

@keyframes seaLightning {
  0%, 45%, 55%, 100% { background: rgba(255, 255, 255, 0); }
  48% { background: rgba(255, 255, 255, 0.5); }
  50% { background: rgba(255, 255, 255, 0); }
  52% { background: rgba(255, 255, 255, 0.3); }
}

@keyframes snowflakeFall {
  0% { transform: translateY(-10px) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(40px) translateX(8px); }
  100% { transform: translateY(90px) translateX(-4px); opacity: 0; }
}

/* ========== Sky Element Animations ========== */

@keyframes cloudDrift {
  0% { transform: translateX(-60px); }
  100% { transform: translateX(calc(100vw + 60px)); }
}

@keyframes sailAcross {
  0% { transform: translateX(-30px) translateY(0); }
  30% { transform: translateX(30vw) translateY(-1px); }
  70% { transform: translateX(70vw) translateY(1px); }
  100% { transform: translateX(calc(100vw + 30px)) translateY(0); }
}

/* ========== Ambient Particle Animations ========== */

@keyframes particleDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.15; }
  15% { transform: translate(5px, -4px) scale(1.1); opacity: 0.4; }
  30% { transform: translate(-2px, 6px) scale(0.9); opacity: 0.25; }
  50% { transform: translate(8px, -2px) scale(1.05); opacity: 0.5; }
  65% { transform: translate(-4px, 4px) scale(0.95); opacity: 0.3; }
  80% { transform: translate(6px, 8px) scale(1.1); opacity: 0.55; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
}

@keyframes causticsShimmer {
  0% { background-position: 0% 0%; opacity: 0.12; }
  25% { opacity: 0.18; }
  50% { background-position: 50% 50%; opacity: 0.08; }
  75% { opacity: 0.15; }
  100% { background-position: 100% 100%; opacity: 0.12; }
}

@keyframes depthHaze {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}

@keyframes foamDrift {
  0% { transform: translateX(-5%) scaleX(1); opacity: 0.4; }
  50% { transform: translateX(3%) scaleX(1.05); opacity: 0.6; }
  100% { transform: translateX(-5%) scaleX(1); opacity: 0.4; }
}

@keyframes dustMote {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  20% { opacity: 0.3; }
  50% { transform: translate(var(--dx, 12px), var(--dy, -8px)) scale(1.2); opacity: 0.5; }
  80% { opacity: 0.2; }
  100% { transform: translate(var(--dx2, -6px), var(--dy2, 10px)) scale(0.8); opacity: 0; }
}

@keyframes surfaceRipple {
  0%, 100% { transform: scaleX(1) translateX(0); opacity: 0.3; }
  25% { transform: scaleX(1.1) translateX(2%); opacity: 0.5; }
  50% { transform: scaleX(0.95) translateX(-1%); opacity: 0.35; }
  75% { transform: scaleX(1.05) translateX(1%); opacity: 0.45; }
}

@keyframes autopilotGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ========== Micro-interaction Animations ========== */

@keyframes foodFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(40px, -60px) scale(1.3); opacity: 0.9; }
  100% { transform: translate(80px, -20px) scale(0.4); opacity: 0; }
}

.food-fly-anim {
  position: fixed;
  font-size: 24px;
  pointer-events: none;
  z-index: 300;
  animation: foodFly 0.6s ease-in forwards;
}

@keyframes harvestPop {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  30% { transform: translateY(-30px) scale(1.2); opacity: 1; }
  60% { transform: translateY(-50px) scale(1); opacity: 0.9; }
  100% { transform: translateY(-80px) scale(0.6); opacity: 0; }
}

.harvest-pop-anim {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 300;
  animation: harvestPop 0.7s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 300;
  animation: confettiFall var(--cdur) ease-out forwards;
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px); }
  20% { transform: translateX(4px); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.screen-shake {
  animation: screenShake 0.4s ease-out;
}

@keyframes combatFlash {
  0% { opacity: 0.35; }
  100% { opacity: 0; }
}

.combat-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 250;
  animation: combatFlash 0.3s ease-out forwards;
}

@keyframes purchaseSparkle {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.15); filter: brightness(1.4); }
  100% { transform: scale(1); filter: brightness(1); }
}

.purchase-sparkle {
  animation: purchaseSparkle 0.35s ease-out;
}

/* --- Personality Poses --- */
@keyframes seaMunch {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(3deg); }
  50% { transform: translateY(1px) rotate(-1deg); }
  75% { transform: translateY(-1px) rotate(2deg); }
}

@keyframes seaThink {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-8deg); }
  70% { transform: rotate(6deg); }
}

@keyframes seaBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-8px) scale(1.05); }
  50% { transform: translateY(0) scale(0.95); }
  70% { transform: translateY(-4px) scale(1.02); }
}

.pose-munch { animation: seaMunch 1.2s ease-in-out infinite; }
.pose-think { animation: seaThink 2.5s ease-in-out infinite; }
.pose-bounce { animation: seaBounce 0.8s ease-in-out infinite; }

/* --- Micro-Actions --- */
.lobster-micro-bubble {
  position: absolute;
  top: -18px;
  right: -8px;
  font-size: 14px;
  animation: microBubbleFloat 2s ease-out forwards;
  pointer-events: none;
}

@keyframes microBubbleFloat {
  0% { opacity: 1; transform: translateY(0) scale(0.6); }
  60% { opacity: 0.8; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.8); }
}

.micro-yawn {
  animation: microYawn 1.2s ease-in-out !important;
}

@keyframes microYawn {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12, 0.92); }
  60% { transform: scale(0.95, 1.06); }
}

.micro-wave {
  animation: microWave 1s ease-in-out !important;
}

@keyframes microWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}

.micro-look {
  animation: microLook 1.5s ease-in-out !important;
}

@keyframes microLook {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* --- Lobster Creature Reactions --- */
.react-flinch {
  animation: reactFlinch 0.6s ease-out !important;
}

@keyframes reactFlinch {
  0% { transform: translateX(0) scale(1); }
  20% { transform: translateX(8px) scale(0.9); }
  50% { transform: translateX(5px) scale(0.95); }
  100% { transform: translateX(0) scale(1); }
}

.react-chase {
  animation: reactChase 1.5s ease-in-out !important;
}

@keyframes reactChase {
  0% { transform: translateX(0); }
  30% { transform: translateX(-15px); }
  60% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.react-approach {
  animation: reactApproach 1.8s ease-in-out !important;
}

@keyframes reactApproach {
  0% { transform: translateX(0); }
  40% { transform: translateX(-8px) rotate(-5deg); }
  70% { transform: translateX(-5px) rotate(0deg); }
  100% { transform: translateX(0); }
}

.react-stare {
  animation: reactStare 1.2s ease-in-out !important;
}

@keyframes reactStare {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05); }
  60% { transform: scale(1.03); }
}

.lobster-react-bubble {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  animation: reactBubblePop 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes reactBubblePop {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.5); }
  20% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.1); }
  60% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.8); }
}

/* --- Rare Ocean Events --- */
.sea-whale-pass {
  position: absolute;
  font-size: 40px;
  top: 15%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  filter: blur(1px);
  animation: whalePass 15s linear forwards;
}

@keyframes whalePass {
  0% { left: -60px; opacity: 0; }
  5% { opacity: 0.5; }
  50% { opacity: 0.6; }
  95% { opacity: 0.4; }
  100% { left: calc(100% + 60px); opacity: 0; }
}

.sea-jelly-bloom .jelly-bloom-item {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  animation: jellyBloomFloat var(--jb-dur) ease-in-out var(--jb-delay) forwards;
  pointer-events: none;
}

@keyframes jellyBloomFloat {
  0% { opacity: 0; transform: translateY(20px); }
  15% { opacity: 0.7; }
  50% { opacity: 0.8; transform: translateY(-10px); }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-30px); }
}

.sea-treasure-chest {
  position: absolute;
  bottom: 32px;
  font-size: 20px;
  cursor: pointer;
  z-index: 6;
  animation: treasureAppear 0.6s ease-out, treasureGlow 2s ease-in-out 0.6s infinite;
}

@keyframes treasureAppear {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes treasureGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(255,215,0,0.3)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 6px rgba(255,215,0,0.6)); }
}

.sea-rainbow {
  position: absolute;
  top: 5%;
  left: 10%;
  right: 10%;
  height: 40%;
  border-radius: 50% 50% 0 0;
  background: conic-gradient(from 180deg at 50% 100%,
    rgba(255,0,0,0.08), rgba(255,165,0,0.08), rgba(255,255,0,0.08),
    rgba(0,128,0,0.08), rgba(0,0,255,0.08), rgba(75,0,130,0.08),
    rgba(238,130,238,0.08), transparent 50%);
  pointer-events: none;
  z-index: 4;
  animation: rainbowFade 8s ease-in-out forwards;
}

@keyframes rainbowFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Lobster Emotion Particles --- */
.lobster-emotion {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  animation: emotionFloat 2.5s ease-out forwards;
}

@keyframes emotionFloat {
  0% { opacity: 0.9; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px); }
}

.lobster-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.lobster-glow-happy {
  background: radial-gradient(circle, rgba(255,200,100,0.15) 0%, transparent 70%);
  animation: lobsterGlowPulse 3s ease-in-out infinite;
}

.lobster-glow-tired {
  background: radial-gradient(circle, rgba(100,120,200,0.1) 0%, transparent 70%);
}

@keyframes lobsterGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* --- Seasonal Seaweed --- */
body[data-season="autumn"] .sea-seaweed-1,
body[data-season="autumn"] .sea-seaweed-2,
body[data-season="autumn"] .sea-seaweed-3,
body[data-season="autumn"] .sea-seaweed-4,
body[data-season="autumn"] .sea-seaweed-5 {
  filter: hue-rotate(30deg) saturate(0.7);
}

body[data-season="winter"] .sea-seaweed-1,
body[data-season="winter"] .sea-seaweed-2,
body[data-season="winter"] .sea-seaweed-3,
body[data-season="winter"] .sea-seaweed-4,
body[data-season="winter"] .sea-seaweed-5 {
  filter: saturate(0.4) brightness(0.8);
  transform-origin: bottom center;
}

body[data-season="winter"] .sea-seaweed-1 { height: 20px !important; }
body[data-season="winter"] .sea-seaweed-2 { height: 14px !important; }
body[data-season="winter"] .sea-seaweed-3 { height: 10px !important; }
body[data-season="winter"] .sea-seaweed-4 { height: 8px !important; }
body[data-season="winter"] .sea-seaweed-5 { height: 12px !important; }

body[data-season="spring"] .sea-seaweed-1,
body[data-season="spring"] .sea-seaweed-2,
body[data-season="spring"] .sea-seaweed-3,
body[data-season="spring"] .sea-seaweed-4,
body[data-season="spring"] .sea-seaweed-5 {
  filter: saturate(1.3) brightness(1.1);
}

/* ========== Seasonal Water Tint ========== */
body[data-season="summer"] .sea-water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40,180,255,0.04) 0%, rgba(20,160,220,0.02) 100%);
  pointer-events: none;
}
body[data-season="winter"] .sea-water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(150,170,200,0.06) 0%, rgba(130,150,180,0.03) 100%);
  pointer-events: none;
}
body[data-season="autumn"] .sea-water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(180,140,80,0.03) 0%, rgba(160,120,60,0.02) 100%);
  pointer-events: none;
}
body[data-season="spring"] .sea-water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(100,220,160,0.03) 0%, rgba(80,200,140,0.02) 100%);
  pointer-events: none;
}

/* ========== Seasonal Surface Sky ========== */
body[data-season="spring"] .sea-surface {
  background: linear-gradient(180deg, #7ac4e8 0%, #a8daf0 40%, #c0e8f8 100%) !important;
}
body[data-season="summer"] .sea-surface {
  background: linear-gradient(180deg, #5ab0e0 0%, #78c8f0 40%, #a0daf8 100%) !important;
}
body[data-season="autumn"] .sea-surface {
  background: linear-gradient(180deg, #8a7a6a 0%, #b09878 40%, #c8a888 100%) !important;
}
body[data-season="winter"] .sea-surface {
  background: linear-gradient(180deg, #9aaab8 0%, #b8c8d8 40%, #d0dce8 100%) !important;
}
body[data-season="spring"][data-time="night"] .sea-surface,
body[data-season="summer"][data-time="night"] .sea-surface,
body[data-season="autumn"][data-time="night"] .sea-surface,
body[data-season="winter"][data-time="night"] .sea-surface {
  background: linear-gradient(180deg, #0a1428 0%, #0e1e38 100%) !important;
}

/* ========== Seasonal Sand ========== */
body[data-season="spring"] .sea-sand {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(200,255,200,0.1) 0%, transparent 50%),
    radial-gradient(circle at 10% 60%, rgba(160,140,100,0.3) 1px, transparent 1px),
    radial-gradient(circle at 55% 55%, rgba(170,150,110,0.2) 1px, transparent 1px),
    linear-gradient(180deg, #5a5030 0%, #7a7048 30%, #8a8058 60%, #9a9068 85%, #a89878 100%) !important;
}
body[data-season="summer"] .sea-sand::before { opacity: 1 !important; }
body[data-season="autumn"] .sea-sand {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(200,160,100,0.12) 0%, transparent 50%),
    radial-gradient(circle at 10% 60%, rgba(160,130,80,0.3) 1px, transparent 1px),
    radial-gradient(circle at 55% 55%, rgba(170,140,90,0.2) 1px, transparent 1px),
    linear-gradient(180deg, #5a4428 0%, #7a6440 30%, #8a7450 60%, #9a8460 85%, #a89470 100%) !important;
}
body[data-season="winter"] .sea-sand {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(180,200,220,0.06) 0%, transparent 50%),
    radial-gradient(circle at 10% 60%, rgba(130,120,100,0.3) 1px, transparent 1px),
    radial-gradient(circle at 55% 55%, rgba(140,130,110,0.2) 1px, transparent 1px),
    linear-gradient(180deg, #4a4438 0%, #5a5448 30%, #6a6458 60%, #7a7468 85%, #888278 100%) !important;
}

/* ========== Seasonal Particles ========== */
body[data-season="spring"] .sea-particle { background: rgba(140,220,160,0.2); }
body[data-season="summer"] .sea-particle {
  background: rgba(160,220,255,0.2);
  box-shadow: 0 0 2px rgba(160,220,255,0.15);
}
body[data-season="autumn"] .sea-particle { background: rgba(200,160,100,0.2); }
body[data-season="winter"] .sea-particle { background: rgba(180,200,220,0.2); }

/* ========== Seasonal Caustics ========== */
body[data-season="summer"] .sea-caustics { opacity: 0.18; }
body[data-season="winter"] .sea-caustics { opacity: 0.06; }
body[data-season="autumn"] .sea-caustics { filter: hue-rotate(20deg); opacity: 0.08; }
body[data-season="spring"] .sea-caustics { opacity: 0.14; }

/* ========== Seasonal Dust Motes ========== */
body[data-season="spring"] .sea-dust-mote { background: rgba(160,240,180,0.25); }
body[data-season="autumn"] .sea-dust-mote { background: rgba(220,180,120,0.2); }
body[data-season="winter"] .sea-dust-mote { background: rgba(200,220,240,0.2); }

/* ========== Seasonal Waves ========== */
body[data-season="summer"] .sea-wave { opacity: 0.6; }
body[data-season="winter"] .sea-wave { opacity: 0.35; }
body[data-season="autumn"] .wave-1 {
  background: linear-gradient(90deg, rgba(60,80,100,0.3), rgba(80,100,120,0.5) 50%, rgba(60,80,100,0.4));
}

/* ========== Seasonal Depth Haze ========== */
body[data-season="winter"] .sea-depth-haze {
  background: linear-gradient(180deg, transparent 0%, rgba(140,160,180,0.06) 50%, rgba(120,140,160,0.1) 100%);
}
body[data-season="summer"] .sea-depth-haze {
  background: linear-gradient(180deg, transparent 0%, rgba(20,80,120,0.04) 50%, rgba(10,40,60,0.08) 100%);
}

/* --- Enhanced Light Rays --- */
body[data-time="morning"] .sea-light-rays {
  opacity: 0.85;
  background:
    linear-gradient(155deg, rgba(255,200,120,0.18) 0%, transparent 40%),
    linear-gradient(170deg, rgba(255,180,100,0.12) 0%, transparent 35%),
    linear-gradient(185deg, rgba(200,160,100,0.08) 0%, transparent 30%);
}

body[data-time="night"] .sea-light-rays {
  opacity: 0.06;
  background:
    linear-gradient(180deg, rgba(60,80,120,0.04) 0%, transparent 50%);
}

/* --- Night Bioluminescence --- */
body[data-time="night"] .sea-lobster::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,200,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: bioGlow 4s ease-in-out infinite;
}

@keyframes bioGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* --- Decoration Interactions --- */
.deco-click-anim {
  animation: decoClickBounce 0.5s ease-out !important;
}

@keyframes decoClickBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.2) rotate(-5deg); }
  60% { transform: scale(0.95) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.deco-reward-float {
  position: absolute;
  font-size: 12px;
  color: #ffd93d;
  pointer-events: none;
  animation: decoRewardUp 1.2s ease-out forwards;
  z-index: 20;
}

@keyframes decoRewardUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ========== Texture V2 Animations ========== */

@keyframes lobsterBreathe {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.02) scaleY(0.98); }
}

@keyframes rippleExpand {
  0% { width: 0; height: 0; opacity: 0.8; }
  20% { opacity: 0.6; }
  50% { opacity: 0.35; }
  100% { width: 90px; height: 90px; opacity: 0; }
}

@keyframes rippleSplash {
  0% { opacity: 0.8; transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) scale(1); }
  50% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) translateY(-12px) scale(0.3); }
}

@keyframes rippleDistort {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes glintSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 0.9; transform: scale(1.2); }
  30% { opacity: 0.3; transform: scale(0.8); }
  45% { opacity: 0.8; transform: scale(1); }
  60% { opacity: 0; transform: scale(0.6); }
}

@keyframes fishSchoolBob {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  70% { transform: translateY(1.5px); }
}

@keyframes antennaLeft {
  0%, 100% { transform: rotate(-15deg); }
  30% { transform: rotate(-25deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(-20deg); }
}

@keyframes antennaRight {
  0%, 100% { transform: rotate(15deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(22deg); }
  75% { transform: rotate(12deg); }
}

@keyframes currentDrift {
  0% { transform: translateX(-30%) translateY(0); }
  25% { transform: translateX(-10%) translateY(2px); }
  50% { transform: translateX(10%) translateY(-1px); }
  75% { transform: translateX(25%) translateY(1px); }
  100% { transform: translateX(-30%) translateY(0); }
}

@keyframes planktonFloat {
  0% { transform: translate(0, 0); opacity: 0.2; }
  15% { opacity: 0.6; }
  30% { transform: translate(var(--px1, 6px), var(--py1, -8px)); opacity: 0.8; }
  50% { transform: translate(var(--px2, -4px), var(--py2, 4px)); opacity: 0.4; }
  70% { transform: translate(var(--px3, 8px), var(--py3, -3px)); opacity: 0.7; }
  85% { opacity: 0.3; }
  100% { transform: translate(0, 0); opacity: 0.2; }
}

@keyframes farCreatureSwim {
  0% { transform: translateX(-60px) translateY(0); }
  25% { transform: translateX(25vw) translateY(-4px); }
  50% { transform: translateX(50vw) translateY(2px); }
  75% { transform: translateX(75vw) translateY(-3px); }
  100% { transform: translateX(calc(100vw + 60px)) translateY(0); }
}

@keyframes farCreatureSwimReverse {
  0% { transform: translateX(calc(100vw + 60px)) scaleX(-1) translateY(0); }
  25% { transform: translateX(75vw) scaleX(-1) translateY(3px); }
  50% { transform: translateX(50vw) scaleX(-1) translateY(-2px); }
  75% { transform: translateX(25vw) scaleX(-1) translateY(4px); }
  100% { transform: translateX(-60px) scaleX(-1) translateY(0); }
}

/* --- Farm / feedback (P3 polish) --- */
@keyframes seedDropAnim {
  0% { transform: translateY(-28px) scale(0.85); opacity: 1; }
  55% { transform: translateY(6px) scale(1.05); opacity: 1; }
  100% { transform: translateY(14px) scale(0.9); opacity: 0; }
}
.seed-drop-anim {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 300;
  animation: seedDropAnim 0.55s ease-out forwards;
}

@keyframes waterSplashAnim {
  0% { transform: scale(0.4); opacity: 0.95; }
  45% { transform: scale(1.15); opacity: 0.75; }
  100% { transform: scale(1.8); opacity: 0; }
}
.water-splash-anim {
  position: fixed;
  font-size: 26px;
  pointer-events: none;
  z-index: 300;
  animation: waterSplashAnim 0.45s ease-out forwards;
}

@keyframes itemUseFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--iux, 60px), var(--iuy, -90px)) scale(0.45); opacity: 0; }
}
.item-use-fly-anim {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 300;
  animation: itemUseFly 0.65s ease-in forwards;
}

@keyframes goldenFlashOverlay {
  0% { opacity: 0; }
  25% { opacity: 0.35; }
  100% { opacity: 0; }
}
.golden-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 240;
  background: radial-gradient(circle at 50% 40%, rgba(255, 220, 120, 0.45) 0%, transparent 55%);
  animation: goldenFlashOverlay 0.55s ease-out forwards;
}

@keyframes lobsterSuggestNod {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  35% { transform: translateX(-50%) rotate(-12deg); }
  70% { transform: translateX(-50%) rotate(10deg); }
}
@keyframes lobsterSuggestShake {
  0%, 100% { transform: translateX(-50%) translateX(0); }
  25% { transform: translateX(-50%) translateX(-6px); }
  75% { transform: translateX(-50%) translateX(6px); }
}
.sea-lobster.lobster-suggest-nod {
  animation: lobsterSuggestNod 0.48s ease;
}
.sea-lobster.lobster-suggest-shake {
  animation: lobsterSuggestShake 0.4s ease;
}

/* --- Bond Animations --- */
@keyframes lobsterBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
@keyframes lobsterDroop {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(2px) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .seed-drop-anim,
  .water-splash-anim,
  .item-use-fly-anim,
  .golden-flash-overlay {
    animation: none !important;
    opacity: 0 !important;
  }
}