Improve game UI layouts

- Increase and unify 2P preview and desktop screen sizes across games
- Adjust Tetris 2P previews and main grid cell sizes for larger visuals
- Expand Next piece previews and adjust related sizing in Tetris
- Apply responsive size tweaks to Breakout, Snake, Pacman cell sizing
- Enhance mobile/desktop balance to better utilize screen space

X-Lovable-Edit-ID: edt-a04b5a0f-5801-4bc9-8dd5-2f224df555fb

src/pages/Breakout.tsx

@@ -50,19 +50,19 @@ const Breakout = () => {
   const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
   const getCanvasSize = useCallback(() => {
-    if (typeof window === 'undefined') return { width: 480, height: 580 };
+    if (typeof window === 'undefined') return { width: 560, height: 680 };
     const isMobile = window.innerWidth < 768;
     if (isMobile) {
       const maxWidth = window.innerWidth - 32;
       // Reserve space for header + fixed controls dock on mobile
       const maxHeight = window.innerHeight - 380;
-      const aspectRatio = 480 / 580;
+      const aspectRatio = 560 / 680;
       let width = maxWidth;
       let height = width / aspectRatio;
       if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
       return { width: Math.floor(width), height: Math.floor(height) };
     }
-    return isFullscreen ? { width: 600, height: 720 } : { width: 480, height: 580 };
+    return isFullscreen ? { width: 700, height: 840 } : { width: 560, height: 680 };
   }, [isFullscreen]);
 
   const [canvasSize, setCanvasSize] = useState(getCanvasSize);

src/pages/Pacman.tsx

@@ -91,15 +91,15 @@ const Pacman = () => {
   const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
   const getCellSize = useCallback(() => {
-    if (typeof window === 'undefined') return 20;
+    if (typeof window === 'undefined') return 24;
     const isMobile = window.innerWidth < 768;
     if (isMobile) {
       const maxWidth = window.innerWidth - 40;
       // Reserve space for header + fixed controls dock on mobile
       const maxHeight = window.innerHeight - 420;
-      return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 16);
+      return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 18);
     }
-    return isFullscreen ? 26 : 20;
+    return isFullscreen ? 30 : 24;
   }, [isFullscreen]);
 
   const [cellSize, setCellSize] = useState(getCellSize);

src/pages/Snake.tsx

@@ -68,17 +68,17 @@ const Snake = () => {
   const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
   const getCellSize = useCallback(() => {
-    if (typeof window === 'undefined') return 24;
+    if (typeof window === 'undefined') return 28;
     const isMobile = window.innerWidth < 768;
     if (isMobile) {
       const maxWidth = window.innerWidth - 40;
       const maxHeight = window.innerHeight - 420;
-      return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 18);
+      return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 20);
     }
     if (gameMode === '2p') {
-      return isFullscreen ? 20 : 16;
+      return isFullscreen ? 24 : 20;
     }
-    return isFullscreen ? 28 : 24;
+    return isFullscreen ? 32 : 28;
   }, [isFullscreen, gameMode]);
 
   const [cellSize, setCellSize] = useState(getCellSize);

src/pages/Tetris.tsx

@@ -141,17 +141,17 @@ const Tetris = () => {
   const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
   const getCellSize = useCallback(() => {
-    if (typeof window === 'undefined') return 24;
+    if (typeof window === 'undefined') return 28;
     const isMobile = window.innerWidth < 768;
     if (isMobile) {
       const maxWidth = window.innerWidth - 40;
       const maxHeight = window.innerHeight - 440;
-      return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 22);
+      return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 24);
     }
     if (gameMode === '2p') {
-      return isFullscreen ? 22 : 18;
+      return isFullscreen ? 26 : 22;
     }
-    return isFullscreen ? 30 : 24;
+    return isFullscreen ? 34 : 28;
   }, [isFullscreen, gameMode]);
 
   const [cellSize, setCellSize] = useState(getCellSize);
@@ -679,13 +679,13 @@ const Tetris = () => {
             </div>
 
             {/* P1 Next Piece */}
-            <div className="border-2 border-primary/50 p-2 bg-background/50 flex flex-col items-center justify-center min-h-[60px]">
+            <div className="border-2 border-primary/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
-              <p className="font-pixel text-[10px] text-foreground/60">P1 NEXT</p>
+              <p className="font-pixel text-[10px] text-foreground/60 mb-2">P1 NEXT</p>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-0.5">
                 {player1.nextPiece.shape.map((row, y) => (
-                  <div key={y} className="flex gap-1">
+                  <div key={y} className="flex gap-0.5">
                     {row.map((val, x) => (
-                      <div key={`${y}-${x}`} className={`w-2 h-2 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
+                      <div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
                     ))}
                   </div>
                 ))}
@@ -726,13 +726,13 @@ const Tetris = () => {
             </div>
 
             {/* P2 Next Piece */}
-            <div className="border-2 border-purple-500/50 p-2 bg-background/50 flex flex-col items-center justify-center min-h-[60px]">
+            <div className="border-2 border-purple-500/50 p-3 bg-background/50 flex flex-col items-center justify-center min-h-[80px]">
-              <p className="font-pixel text-[10px] text-purple-400">P2 NEXT</p>
+              <p className="font-pixel text-[10px] text-purple-400 mb-2">P2 NEXT</p>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-0.5">
                 {player2.nextPiece.shape.map((row, y) => (
-                  <div key={y} className="flex gap-1">
+                  <div key={y} className="flex gap-0.5">
                     {row.map((val, x) => (
-                      <div key={`${y}-${x}`} className={`w-2 h-2 ${val ? 'bg-purple-400 box-glow' : 'bg-transparent'}`} />
+                      <div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-purple-400' : 'bg-transparent'}`} style={{ boxShadow: val ? '0 0 6px hsl(280 70% 50%)' : 'none' }} />
                     ))}
                   </div>
                 ))}