Fix emoji clustering in animation

Adjusted the positioning logic in the MemeAnimation component to ensure emojis spread out more evenly across the animation area, rather than clustering in the upper left corner.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -16,19 +16,18 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
     const memes: MemeSymbol[] = [];
     const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫'];
     
-    // Create a 3x3 grid of meme symbols
+    // Create a wider spread of meme symbols
-    for (let row = 0; row < 3; row++) {
+    for (let i = 0; i < 9; i++) {
-      for (let col = 0; col < 3; col++) {
+      const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
-        const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
+      // Distribute across the full width (10-90%) and height (10-90%)
-        memes.push({
+      memes.push({
-          id: row * 3 + col,
+        id: i,
-          symbol: baseSymbol,
+        symbol: baseSymbol,
-          x: 20 + (col * 30), // Spread across horizontally
+        x: 10 + (Math.random() * 80), // Spread between 10% and 90% of width
-          y: 20 + (row * 30), // Spread across vertically
+        y: 10 + (Math.random() * 80), // Spread between 10% and 90% of height
-          scale: 0.8 + Math.random() * 0.4,
+        scale: 0.8 + Math.random() * 0.4,
-          delay: (row * 3 + col) * 0.15 // Stagger the animations
+        delay: i * 0.15 // Stagger the animations
-        });
+      });
-      }
     }
     return memes;
   };
@@ -70,14 +69,14 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
               opacity: 1,
               x: [
                 `${meme.x}%`,
-                `${meme.x + (Math.random() * 40 - 20)}%`,
+                `${meme.x + (Math.random() * 60 - 30)}%`, // Wider movement range
-                `${meme.x + (Math.random() * 60 - 30)}%`
+                `${meme.x + (Math.random() * 80 - 40)}%`  // Even wider final position
               ],
               y: [
                 `${meme.y}%`,
-                `${meme.y + (Math.random() * 40 - 20)}%`,
+                `${meme.y + (Math.random() * 60 - 30)}%`, // Wider movement range
-                `${meme.y + (Math.random() * 60 - 30)}%`
+                `${meme.y + (Math.random() * 80 - 40)}%`  // Even wider final position
-              ],
+              ]
             }}
             transition={{
               delay: meme.delay,