From 0bf52ba489ffff0a5f1cb96c1e9c1b464fa4ccfa Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 9 Jan 2026 11:20:38 +0000
Subject: [PATCH] Changes

---
 src/pages/Breakout.tsx |  6 +++---
 src/pages/Pacman.tsx   |  6 +++---
 src/pages/Snake.tsx    |  8 ++++----
 src/pages/Tetris.tsx   | 28 ++++++++++++++--------------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/pages/Breakout.tsx b/src/pages/Breakout.tsx
index fa18f82..d0c8331 100644
--- a/src/pages/Breakout.tsx
+++ b/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);
diff --git a/src/pages/Pacman.tsx b/src/pages/Pacman.tsx
index c6c5c05..0ce7411 100644
--- a/src/pages/Pacman.tsx
+++ b/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);
diff --git a/src/pages/Snake.tsx b/src/pages/Snake.tsx
index b836980..7cede58 100644
--- a/src/pages/Snake.tsx
+++ b/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);
diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx
index c99ea02..c60a7d9 100644
--- a/src/pages/Tetris.tsx
+++ b/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]">
-              <p className="font-pixel text-[10px] text-foreground/60">P1 NEXT</p>
-              <div className="flex flex-col gap-1">
+            <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 mb-2">P1 NEXT</p>
+              <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]">
-              <p className="font-pixel text-[10px] text-purple-400">P2 NEXT</p>
-              <div className="flex flex-col gap-1">
+            <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 mb-2">P2 NEXT</p>
+              <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>
                 ))}