Fix emoji spread width

Adjusted the horizontal spread of emojis in the MemeAnimation component to utilize the full width of the container, ensuring a more dynamic and visually appealing distribution.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -13,13 +13,13 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      // Add new emoji with better horizontal distribution
+      // Add new emoji with wider horizontal distribution
       setEmojis(current => {
         const newEmoji = {
           id: Date.now(),
           symbol: symbols[Math.floor(Math.random() * symbols.length)],
-          // Spread more widely across the container width (from 5% to 95%)
+          // Use full width (0 to 100%) for positioning
-          x: Math.random() * 90 + 5,
+          x: Math.random() * 100,
         };
         return [...current, newEmoji];
       });
@@ -34,7 +34,7 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
   return (
     <div className={`relative w-full h-40 overflow-hidden bg-black/20 rounded-lg ${className}`}>
       {/* Background network effect */}
-      <div className="absolute inset-0 opacity-20">
+      <div className="absolute inset-0 w-full opacity-20">
         {[...Array(20)].map((_, i) => (
           <div
             key={`line-${i}`}
@@ -59,7 +59,8 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         🌟
       </motion.div>
 
-      {/* Floating emojis */}
+      {/* Floating emojis with full width container */}
+      <div className="absolute inset-0 w-full">
         <AnimatePresence>
           {emojis.map((emoji) => (
             <motion.div
@@ -95,5 +96,6 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
           ))}
         </AnimatePresence>
       </div>
+    </div>
   );
 };