fix emoji effects

src/lib/components/Battle/BattleEffects.svelte

@@ -38,7 +38,7 @@
       
       // Enhanced animation properties for more dynamic effects
       const scale = 0.6 + Math.random() * 0.6; // 0.6x to 1.2x initial size
-      const rotation = Math.random() * 180; // Reduced initial rotation range
+      const rotation = (Math.random() - 0.5) * 30; // Much smaller initial rotation range (-15deg to +15deg)
       const duration = Math.max(effect.duration * 1.8, 1800) + (Math.random() - 0.5) * 400; // Longer base duration
       const delay = Math.random() * 200; // More staggered animation starts
       
@@ -265,19 +265,19 @@
       opacity: 1;
     }
     25% {
-      transform: translate(calc(-50% + var(--move-x) * 0.3), calc(-50% + var(--move-y) * 0.3)) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 20deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.3), calc(-50% + var(--move-y) * 0.3)) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg));
       opacity: 0.95;
     }
     50% {
-      transform: translate(calc(-50% + var(--move-x) * 0.6), calc(-50% + var(--move-y) * 0.6)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 45deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.6), calc(-50% + var(--move-y) * 0.6)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) - 8deg));
       opacity: 0.8;
     }
     75% {
-      transform: translate(calc(-50% + var(--move-x) * 0.9), calc(-50% + var(--move-y) * 0.9)) scale(calc(var(--initial-scale) * 0.7)) rotate(calc(var(--initial-rotation) + 60deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.9), calc(-50% + var(--move-y) * 0.9)) scale(calc(var(--initial-scale) * 0.7)) rotate(calc(var(--initial-rotation) + 3deg));
       opacity: 0.5;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.3) rotate(calc(var(--initial-rotation) + 80deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.3) rotate(calc(var(--initial-rotation) - 5deg));
       opacity: 0;
     }
   }
@@ -288,19 +288,19 @@
       opacity: 0;
     }
     20% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.1);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.1);
       opacity: 1;
     }
     40% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(0.9);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.9);
       opacity: 0.8;
     }
     60% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 6deg)) scale(1.0);
       opacity: 0.6;
     }
     80% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(0.7);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 4deg)) scale(0.7);
       opacity: 0.3;
     }
     100% {
@@ -315,23 +315,23 @@
       opacity: 0;
     }
     10% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(1.3);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(1.3);
       opacity: 1;
     }
     20% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(1.1);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 4deg)) scale(1.1);
       opacity: 0.9;
     }
     30% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 8deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(1.2);
       opacity: 0.8;
     }
     40% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 3deg)) scale(1.0);
       opacity: 0.7;
     }
     50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg)) scale(0.9);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(0.9);
       opacity: 0.6;
     }
     100% {
@@ -346,15 +346,15 @@
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 15deg)) scale(1.1);
+      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 4deg)) scale(1.1);
       opacity: 1;
     }
     50% {
-      transform: translate(-50%, -45%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 15deg)) scale(1.0);
+      transform: translate(-50%, -45%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 6deg)) scale(1.0);
       opacity: 0.9;
     }
     75% {
-      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.9);
+      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(0.9);
       opacity: 0.5;
     }
     100% {
@@ -369,15 +369,15 @@
       opacity: 0;
     }
     30% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg)) scale(1.4);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(1.4);
       opacity: 1;
     }
     60% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 3deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 1deg)) scale(1.2);
       opacity: 0.8;
     }
     90% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(0.8);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 1deg)) scale(0.8);
       opacity: 0.3;
     }
     100% {
@@ -396,19 +396,19 @@
       opacity: 1;
     }
     30% {
-      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 20px)) scale(calc(var(--initial-scale) * 1.2)) rotate(calc(var(--initial-rotation) + 15deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 20px)) scale(calc(var(--initial-scale) * 1.2)) rotate(calc(var(--initial-rotation) + 4deg));
       opacity: 0.95;
     }
     60% {
-      transform: translate(calc(-50% + var(--move-x) * 0.7), calc(-50% + var(--move-y) * 0.7 - 60px)) scale(calc(var(--initial-scale) * 1.0)) rotate(calc(var(--initial-rotation) + 25deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.7), calc(-50% + var(--move-y) * 0.7 - 60px)) scale(calc(var(--initial-scale) * 1.0)) rotate(calc(var(--initial-rotation) - 6deg));
       opacity: 0.7;
     }
     85% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 90px)) scale(calc(var(--initial-scale) * 0.6)) rotate(calc(var(--initial-rotation) + 35deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 90px)) scale(calc(var(--initial-scale) * 0.6)) rotate(calc(var(--initial-rotation) + 3deg));
       opacity: 0.3;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 120px)) scale(0.2) rotate(calc(var(--initial-rotation) + 45deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 120px)) scale(0.2) rotate(calc(var(--initial-rotation) - 2deg));
       opacity: 0;
     }
   }
@@ -419,19 +419,19 @@
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 30deg)) scale(1.2);
+      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.2);
       opacity: 1;
     }
     50% {
-      transform: translate(-50%, -10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 30deg)) scale(1.0);
+      transform: translate(-50%, -10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(1.0);
       opacity: 0.8;
     }
     75% {
-      transform: translate(-50%, 10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 20deg)) scale(0.8);
+      transform: translate(-50%, 10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 5deg)) scale(0.8);
       opacity: 0.4;
     }
     100% {
-      transform: translate(-50%, 30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.6);
+      transform: translate(-50%, 30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(0.6);
       opacity: 0;
     }
   }
@@ -446,19 +446,19 @@
       opacity: 1;
     }
     20% {
-      transform: translate(calc(-50% + var(--move-x) * 0.1), calc(-50% + var(--move-y) * 0.1)) scale(calc(var(--initial-scale) * 1.8)) rotate(calc(var(--initial-rotation) + 30deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.1), calc(-50% + var(--move-y) * 0.1)) scale(calc(var(--initial-scale) * 1.8)) rotate(calc(var(--initial-rotation) + 8deg));
       opacity: 0.95;
     }
     40% {
-      transform: translate(calc(-50% + var(--move-x) * 0.4), calc(-50% + var(--move-y) * 0.4)) scale(calc(var(--initial-scale) * 1.5)) rotate(calc(var(--initial-rotation) + 60deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.4), calc(-50% + var(--move-y) * 0.4)) scale(calc(var(--initial-scale) * 1.5)) rotate(calc(var(--initial-rotation) - 12deg));
       opacity: 0.8;
     }
     70% {
-      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 90deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 6deg));
       opacity: 0.4;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.2) rotate(calc(var(--initial-rotation) + 120deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.2) rotate(calc(var(--initial-rotation) - 4deg));
       opacity: 0;
     }
   }
@@ -469,19 +469,19 @@
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 90deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 8deg)) scale(1.2);
       opacity: 0.7;
     }
     50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 180deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(1.0);
       opacity: 0.5;
     }
     75% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 270deg)) scale(0.8);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 6deg)) scale(0.8);
       opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 360deg)) scale(0.4);
+      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 4deg)) scale(0.4);
       opacity: 0;
     }
   }
@@ -496,19 +496,19 @@
       opacity: 1;
     }
     25% {
-      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 40px)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 20deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 40px)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 5deg));
       opacity: 0.95;
     }
     50% {
-      transform: translate(calc(-50% + var(--move-x) * 0.5), calc(-50% + var(--move-y) * 0.5 - 70px)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 30deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.5), calc(-50% + var(--move-y) * 0.5 - 70px)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) - 7deg));
       opacity: 0.8;
     }
     75% {
-      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8 - 100px)) scale(calc(var(--initial-scale) * 0.8)) rotate(calc(var(--initial-rotation) + 40deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8 - 100px)) scale(calc(var(--initial-scale) * 0.8)) rotate(calc(var(--initial-rotation) + 4deg));
       opacity: 0.5;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 130px)) scale(0.3) rotate(calc(var(--initial-rotation) + 50deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 130px)) scale(0.3) rotate(calc(var(--initial-rotation) - 3deg));
       opacity: 0;
     }
   }