Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -148,10 +148,10 @@ export const GameLucky: React.FC = () => {
 
         {/* Left: Red Packet Grid */}
         <div className="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar order-1 md:order-1">
-            <div className={`grid gap-3 md:gap-6 w-full max-w-5xl mx-auto transition-all ${
-                // Mobile Grids (2 cols usually)
-                'grid-cols-2 ' +
-                // Desktop Grids
+            <div className={`grid gap-2 md:gap-6 w-full max-w-5xl mx-auto transition-all place-content-center ${
+                // Mobile: Use 3 cols if count > 4 to save space
+                ((luckyConfig.cardCount || 9) <= 4 ? 'grid-cols-2 ' : 'grid-cols-3 ') +
+                // Desktop: Keep existing logic
                 ((luckyConfig.cardCount || 9) <= 4 ? 'md:grid-cols-3' :
                 (luckyConfig.cardCount || 9) <= 6 ? 'md:grid-cols-3 lg:grid-cols-4' :
                 'md:grid-cols-4 lg:grid-cols-5')