Fix memes animation width usage

Updated the memes animation component to utilize the full width and area available, improving its layout compared to the current implementation of the community animation.
[skip gpt_engineer]

src/components/game/animations/CommunityAnimation.tsx

@@ -2,22 +2,38 @@ import React from 'react';
 import { motion } from 'framer-motion';
 
 export const CommunityAnimation = ({ className = '' }: { className?: string }) => {
-  // Create multiple community groups with members
   const groups = Array.from({ length: 3 }, (_, i) => ({
     x: 25 + i * 25, // Spread groups evenly (25%, 50%, 75%)
     y: 50, // Center vertically
     members: Array.from({ length: 8 }, (_, j) => ({
       id: i * 8 + j,
-      initialX: Math.random() * 80 + 10, // Keep within 10-90% bounds
+      initialX: Math.random() * 80 + 10,
-      initialY: Math.random() * 80 + 10, // Keep within 10-90% bounds
+      initialY: Math.random() * 80 + 10,
     }))
   }));
 
   return (
     <div className={`relative w-full h-40 overflow-hidden bg-black/20 rounded-lg ${className}`}>
+      {/* Background network effect similar to MemeAnimation */}
+      <div className="absolute inset-0 w-full opacity-20">
+        {[...Array(20)].map((_, i) => (
+          <div
+            key={`line-${i}`}
+            className="absolute h-px bg-yellow-500"
+            style={{
+              width: '100%',
+              top: `${Math.random() * 100}%`,
+              transform: `rotate(${Math.random() * 360}deg)`,
+              opacity: 0.3
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Container for community groups with explicit positioning context */}
+      <div className="absolute inset-0">
         {groups.map((group, groupIndex) => (
           <React.Fragment key={groupIndex}>
-          {/* Individual members that will converge into groups */}
             {group.members.map((member) => (
               <motion.div
                 key={member.id}
@@ -41,20 +57,19 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
                 }}
                 style={{
                   position: 'absolute',
-                transform: 'translate(-50%, -50%)', // Center the dot
+                  transform: 'translate(-50%, -50%)',
                 }}
               />
             ))}
             
-          {/* Community boundary circles */}
             <motion.div
               className="absolute rounded-full border-2 border-yellow-500/30"
               style={{
-              width: '20%', // Smaller relative to container
+                width: '25%',
-              height: '40%', // Maintain aspect ratio
+                height: '50%',
                 left: `${group.x}%`,
                 top: `${group.y}%`,
-              transform: 'translate(-50%, -50%)', // Consistent centering
+                transform: 'translate(-50%, -50%)',
               }}
               initial={{ 
                 scale: 0, 
@@ -75,5 +90,6 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
           </React.Fragment>
         ))}
       </div>
+    </div>
   );
 };