From cce562a1f7db153c75633e61c74ce42fd4436422 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:32:36 +0000
Subject: [PATCH] Changes

---
 src/pages/Tetris.tsx | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx
index c60a7d9..972ec3e 100644
--- a/src/pages/Tetris.tsx
+++ b/src/pages/Tetris.tsx
@@ -679,16 +679,18 @@ const Tetris = () => {
             </div>
 
             {/* P1 Next Piece */}
-            <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-0.5">
-                    {row.map((val, x) => (
-                      <div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
-                    ))}
-                  </div>
-                ))}
+            <div className="border-2 border-primary/50 p-4 bg-background/60">
+              <p className="font-pixel text-[10px] text-foreground/50 uppercase tracking-wider mb-3">Next</p>
+              <div className="flex justify-center">
+                <div className="flex flex-col gap-1">
+                  {player1.nextPiece.shape.map((row, y) => (
+                    <div key={y} className="flex gap-1">
+                      {row.map((val, x) => (
+                        <div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
+                      ))}
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
 
@@ -726,16 +728,18 @@ const Tetris = () => {
             </div>
 
             {/* P2 Next Piece */}
-            <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-0.5">
-                    {row.map((val, x) => (
-                      <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>
-                ))}
+            <div className="border-2 border-purple-500/50 p-4 bg-background/60">
+              <p className="font-pixel text-[10px] text-purple-400/70 uppercase tracking-wider mb-3">Next</p>
+              <div className="flex justify-center">
+                <div className="flex flex-col gap-1">
+                  {player2.nextPiece.shape.map((row, y) => (
+                    <div key={y} className="flex gap-1">
+                      {row.map((val, x) => (
+                        <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>
+                  ))}
+                </div>
               </div>
             </div>
           </>