From 49909763bdd7c22c9dbf5f7aca44e678903df717 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 13 Jan 2026 09:59:46 +0000
Subject: [PATCH] Changes

---
 src/pages/Tetris.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/pages/Tetris.tsx b/src/pages/Tetris.tsx
index 10f49bb..be1eb12 100644
--- a/src/pages/Tetris.tsx
+++ b/src/pages/Tetris.tsx
@@ -579,7 +579,7 @@ const Tetris = () => {
 
       {isMobile && gameMode === '1p' && (
         <>
-          <MobileControlsSpacer heightClassName="h-36" />
+          <MobileControlsSpacer />
           <MobileControlsDock>
             <div className="flex flex-col items-center gap-2">
               <div className="flex gap-4 text-center">
@@ -588,16 +588,24 @@ const Tetris = () => {
                 <div><p className="font-pixel text-[8px] text-foreground/60">LINES</p><p className="font-minecraft text-sm text-primary">{lines}</p></div>
               </div>
               {gameStarted && !gameOver ? (
-                <div className="flex gap-2">
-                  <GameTouchButton onAction={moveLeft} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>←</GameTouchButton>
-                  <GameTouchButton onAction={moveDown} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>↓</GameTouchButton>
-                  <GameTouchButton onAction={moveRight} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel" interval={100}>→</GameTouchButton>
-                  <button onClick={rotatePiece} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">↻</button>
-                  <button onClick={hardDrop} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">⬇</button>
-                  <button onClick={togglePause} className="p-3 px-5 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">{isPaused ? '▶' : '❚❚'}</button>
+                <div className="flex gap-3 items-center mt-2">
+                  {/* D-pad style controls */}
+                  <div className="grid grid-cols-3 gap-1">
+                    <div />
+                    <button onClick={rotatePiece} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none">↻</button>
+                    <div />
+                    <GameTouchButton onAction={moveLeft} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>←</GameTouchButton>
+                    <button onClick={togglePause} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-[10px] select-none">{isPaused ? '▶' : '❚❚'}</button>
+                    <GameTouchButton onAction={moveRight} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>→</GameTouchButton>
+                    <div />
+                    <GameTouchButton onAction={moveDown} className="p-4 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg" interval={100}>↓</GameTouchButton>
+                    <div />
+                  </div>
+                  {/* Hard drop button */}
+                  <button onClick={hardDrop} className="p-4 px-6 border border-primary/50 active:bg-primary/40 text-primary font-pixel text-lg select-none h-full">⬇</button>
                 </div>
               ) : (
-                <button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary">{gameOver ? 'RETRY' : 'START'}</button>
+                <button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-8 border border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">{gameOver ? 'RETRY' : 'START'}</button>
               )}
             </div>
           </MobileControlsDock>