Fix fullscreen across games

Restore in-app fullscreen usage for all games by removing broken portal usage, re-centering Tetris UI, and ensuring AIChat fullscreen now uses standard in-app fullscreen. Also revert Tetris file to valid non-corrupted state and reapply proper rendering for 1P/2P layouts.

X-Lovable-Edit-ID: edt-3fac9b3c-0a70-4aaf-9bfe-c412c7951e42

src/components/FullscreenPortal.tsx

@@ -1,21 +0,0 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-interface FullscreenPortalProps {
-  children: ReactNode;
-}
-
-/**
- * Portals children to document.body to escape any transformed ancestors.
- * This is important because CSS transforms on parents can break `position: fixed`.
- */
-export const FullscreenPortal = ({ children }: FullscreenPortalProps) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted || typeof document === 'undefined') return null;
-  return createPortal(children, document.body);
-};

src/pages/AIChat.tsx

@@ -9,7 +9,6 @@ import { useAchievements, incrementAiMessageCount } from '@/contexts/Achievement
 import { useToast } from '@/hooks/use-toast';
 import GlitchText from '@/components/GlitchText';
 import MessageContent from '@/components/MessageContent';
-import { FullscreenPortal } from '@/components/FullscreenPortal';
 import { AI_PROVIDERS, AIProvider, getProvider, CUSTOM_API_STORAGE_KEY } from '@/lib/aiProviders';
 import {
   DropdownMenu,
@@ -690,7 +689,7 @@ const AIChat = () => {
     </motion.div>
   );
 
-  return isFullscreen ? <FullscreenPortal>{content}</FullscreenPortal> : content;
+  return content;
 };
 
 export default AIChat;

src/pages/Tetris.tsx

@@ -5,10 +5,8 @@ import { useAchievements } from '@/contexts/AchievementsContext';
 import { Link } from 'react-router-dom';
 import GlitchCrash from '@/components/GlitchCrash';
 import { Maximize2, Minimize2, Users, User } from 'lucide-react';
-import { useBrowserFullscreen } from '@/hooks/useGameDimensions';
 import GameTouchButton from '@/components/GameTouchButton';
 import { MobileControlsDock, MobileControlsSpacer } from '@/components/MobileControlsDock';
-import { FullscreenPortal } from '@/components/FullscreenPortal';
 
 const BOARD_WIDTH = 10;
 const BOARD_HEIGHT = 20;
@@ -64,9 +62,7 @@ const randomTetromino = (isP2 = false, excludeShape?: number[][]): Piece => {
   let key = keys[Math.floor(Math.random() * keys.length)];
   let tetromino = isP2 ? TETROMINOS_P2[key] : TETROMINOS[key];
 
-  // Ensure we don't generate the same shape twice in a row
   if (excludeShape && JSON.stringify(tetromino.shape) === JSON.stringify(excludeShape)) {
-    // Try up to 7 times to get a different shape
     for (let attempts = 0; attempts < 7; attempts++) {
       key = keys[Math.floor(Math.random() * keys.length)];
       tetromino = isP2 ? TETROMINOS_P2[key] : TETROMINOS[key];
@@ -93,10 +89,8 @@ const Tetris = () => {
   const { playSound } = useSettings();
   const { checkGameScoreAchievements, unlockMaxScore } = useAchievements();
   
-  // Mode selection
   const [gameMode, setGameMode] = useState<GameMode | null>(null);
   
-  // 1P state
   const [board, setBoard] = useState<Board>(createBoard);
   const [piece, setPiece] = useState<Piece>(randomTetromino);
   const [nextPiece, setNextPiece] = useState<Piece>(randomTetromino);
@@ -104,34 +98,18 @@ const Tetris = () => {
   const [highScore, setHighScore] = useState(0);
   const [lines, setLines] = useState(0);
   
-  // 2P state
   const [player1, setPlayer1] = useState<PlayerState>(() => {
     const p1Piece = randomTetromino();
     const p1Next = randomTetromino(false, p1Piece.shape);
-    return {
+    return { board: createBoard(), piece: p1Piece, nextPiece: p1Next, score: 0, lines: 0, gameOver: false };
-      board: createBoard(),
-      piece: p1Piece,
-      nextPiece: p1Next,
-      score: 0,
-      lines: 0,
-      gameOver: false,
-    };
   });
   const [player2, setPlayer2] = useState<PlayerState>(() => {
     const p2Piece = randomTetromino(true);
     const p2Next = randomTetromino(true, p2Piece.shape);
-    return {
+    return { board: createBoard(), piece: p2Piece, nextPiece: p2Next, score: 0, lines: 0, gameOver: false };
-      board: createBoard(),
-      piece: p2Piece,
-      nextPiece: p2Next,
-      score: 0,
-      lines: 0,
-      gameOver: false,
-    };
   });
   const [winner, setWinner] = useState<string | null>(null);
   
-  // Common state
   const [gameOver, setGameOver] = useState(false);
   const [gameComplete, setGameComplete] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
@@ -139,7 +117,6 @@ const Tetris = () => {
   const [showGlitchCrash, setShowGlitchCrash] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const gameRef = useRef<HTMLDivElement>(null);
-  const { enterFullscreen, exitFullscreen } = useBrowserFullscreen();
 
   const getCellSize = useCallback(() => {
     if (typeof window === 'undefined') return 28;
@@ -149,9 +126,7 @@ const Tetris = () => {
       const maxHeight = window.innerHeight - 440;
       return Math.min(Math.floor(maxWidth / BOARD_WIDTH), Math.floor(maxHeight / BOARD_HEIGHT), 24);
     }
-    if (gameMode === '2p') {
+    if (gameMode === '2p') return isFullscreen ? 26 : 22;
-      return isFullscreen ? 26 : 22;
-    }
     return isFullscreen ? 34 : 28;
   }, [isFullscreen, gameMode]);
 
@@ -164,30 +139,24 @@ const Tetris = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, [getCellSize]);
 
-  useEffect(() => {
+  useEffect(() => { setCellSize(getCellSize()); }, [isFullscreen, getCellSize, gameMode]);
-    setCellSize(getCellSize());
-  }, [isFullscreen, getCellSize, gameMode]);
 
   useEffect(() => {
-    if (gameStarted && isMobile && !isFullscreen) {
+    if (gameStarted && isMobile && !isFullscreen) setIsFullscreen(true);
-      setIsFullscreen(true);
+  }, [gameStarted, isMobile, isFullscreen]);
-      enterFullscreen();
-    }
-  }, [gameStarted, isMobile, isFullscreen, enterFullscreen]);
 
-  const toggleFullscreen = async () => {
+  const toggleFullscreen = () => {
-    if (!isFullscreen) { setIsFullscreen(true); await enterFullscreen(); }
+    setIsFullscreen(prev => !prev);
-    else { setIsFullscreen(false); await exitFullscreen(); }
     playSound('click');
   };
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isFullscreen) { setIsFullscreen(false); exitFullscreen(); }
+      if (e.key === 'Escape' && isFullscreen) setIsFullscreen(false);
     };
     window.addEventListener('keydown', handleEscape);
     return () => window.removeEventListener('keydown', handleEscape);
-  }, [isFullscreen, exitFullscreen]);
+  }, [isFullscreen]);
 
   useEffect(() => {
     const saved = localStorage.getItem(HIGHSCORE_KEY);
@@ -236,7 +205,6 @@ const Tetris = () => {
     return { board: newBoard, cleared };
   }, []);
 
-  // 1P movement functions
   const moveDown = useCallback(() => {
     if (gameOver || gameComplete || isPaused || !gameStarted || gameMode !== '1p') return;
     const newPiece = { ...piece, y: piece.y + 1 };
@@ -292,7 +260,6 @@ const Tetris = () => {
 
   const startGame = (mode: GameMode) => {
     setGameMode(mode);
-    
     if (mode === '1p') {
       setBoard(createBoard());
       setPiece(randomTetromino());
@@ -300,25 +267,10 @@ const Tetris = () => {
       setScore(0);
       setLines(0);
     } else {
-      setPlayer1({
+      setPlayer1({ board: createBoard(), piece: randomTetromino(), nextPiece: randomTetromino(), score: 0, lines: 0, gameOver: false });
-        board: createBoard(),
+      setPlayer2({ board: createBoard(), piece: randomTetromino(true), nextPiece: randomTetromino(true), score: 0, lines: 0, gameOver: false });
-        piece: randomTetromino(),
-        nextPiece: randomTetromino(),
-        score: 0,
-        lines: 0,
-        gameOver: false,
-      });
-      setPlayer2({
-        board: createBoard(),
-        piece: randomTetromino(true),
-        nextPiece: randomTetromino(true),
-        score: 0,
-        lines: 0,
-        gameOver: false,
-      });
       setWinner(null);
     }
-    
     setGameOver(false);
     setGameComplete(false);
     setIsPaused(false);
@@ -333,82 +285,60 @@ const Tetris = () => {
     playSound('click');
   };
 
-  // 2P movement helpers
   const movePlayer = useCallback((playerNum: 1 | 2, action: 'left' | 'right' | 'down' | 'rotate' | 'drop') => {
     if (gameOver || isPaused || !gameStarted || gameMode !== '2p') return;
-    
     const setPlayer = playerNum === 1 ? setPlayer1 : setPlayer2;
     const player = playerNum === 1 ? player1 : player2;
     const isP2 = playerNum === 2;
-    
     if (player.gameOver) return;
     
     setPlayer(prev => {
       let newPiece = { ...prev.piece };
-      
       switch (action) {
         case 'left':
           newPiece.x--;
           if (!isValidMove(newPiece, prev.board)) return prev;
           playSound('hover');
           return { ...prev, piece: newPiece };
-          
         case 'right':
           newPiece.x++;
           if (!isValidMove(newPiece, prev.board)) return prev;
           playSound('hover');
           return { ...prev, piece: newPiece };
-          
         case 'rotate':
           newPiece.shape = rotate(prev.piece.shape);
           if (!isValidMove(newPiece, prev.board)) return prev;
           playSound('hover');
           return { ...prev, piece: newPiece };
-          
         case 'drop':
           while (isValidMove({ ...newPiece, y: newPiece.y + 1 }, prev.board)) newPiece.y++;
           playSound('click');
           return { ...prev, piece: newPiece };
-          
         case 'down':
           newPiece.y++;
-          if (isValidMove(newPiece, prev.board)) {
+          if (isValidMove(newPiece, prev.board)) return { ...prev, piece: newPiece };
-            return { ...prev, piece: newPiece };
+          else {
-          } else {
             const mergedBoard = mergePiece(prev.board, prev.piece);
             const { board: clearedBoard, cleared } = clearLines(mergedBoard);
             const newScore = prev.score + (cleared > 0 ? cleared * 100 * cleared : 0);
             const newLines = prev.lines + cleared;
-            
             if (cleared > 0) playSound('success');
             else playSound('click');
-            
             const newTetromino = prev.nextPiece;
             const nextNext = randomTetromino(isP2, prev.nextPiece.shape);
-            
             if (!isValidMove(newTetromino, clearedBoard)) {
               playSound('error');
               return { ...prev, board: clearedBoard, score: newScore, lines: newLines, gameOver: true };
             }
-            
+            return { ...prev, board: clearedBoard, piece: newTetromino, nextPiece: nextNext, score: newScore, lines: newLines };
-            return {
-              ...prev,
-              board: clearedBoard,
-              piece: newTetromino,
-              nextPiece: nextNext,
-              score: newScore,
-              lines: newLines,
-            };
           }
       }
       return prev;
     });
   }, [gameOver, isPaused, gameStarted, gameMode, player1, player2, isValidMove, mergePiece, clearLines, playSound]);
 
-  // Check 2P win condition
   useEffect(() => {
     if (gameMode !== '2p' || !gameStarted) return;
-    
     if (player1.gameOver && player2.gameOver) {
       setGameOver(true);
       setWinner(player1.score > player2.score ? 'P1 Wins!' : player2.score > player1.score ? 'P2 Wins!' : 'Draw!');
@@ -421,11 +351,9 @@ const Tetris = () => {
     }
   }, [player1.gameOver, player2.gameOver, player1.score, player2.score, gameMode, gameStarted]);
 
-  // Keyboard handler
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!gameStarted) return;
-      
       if (gameMode === '1p') {
         switch (e.key) {
           case 'ArrowLeft': case 'a': e.preventDefault(); moveLeft(); break;
@@ -436,20 +364,16 @@ const Tetris = () => {
           case 'p': e.preventDefault(); togglePause(); break;
         }
       } else {
-        // P1: WASD + Q for drop
         if (e.key === 'w' || e.key === 'W') { e.preventDefault(); movePlayer(1, 'rotate'); }
         if (e.key === 'a' || e.key === 'A') { e.preventDefault(); movePlayer(1, 'left'); }
         if (e.key === 's' || e.key === 'S') { e.preventDefault(); movePlayer(1, 'down'); }
         if (e.key === 'd' || e.key === 'D') { e.preventDefault(); movePlayer(1, 'right'); }
         if (e.key === 'q' || e.key === 'Q') { e.preventDefault(); movePlayer(1, 'drop'); }
-        
-        // P2: Arrows + / for drop
         if (e.key === 'ArrowUp') { e.preventDefault(); movePlayer(2, 'rotate'); }
         if (e.key === 'ArrowLeft') { e.preventDefault(); movePlayer(2, 'left'); }
         if (e.key === 'ArrowDown') { e.preventDefault(); movePlayer(2, 'down'); }
         if (e.key === 'ArrowRight') { e.preventDefault(); movePlayer(2, 'right'); }
         if (e.key === '/') { e.preventDefault(); movePlayer(2, 'drop'); }
-        
         if (e.key === 'p' || e.key === 'P') { e.preventDefault(); togglePause(); }
       }
     };
@@ -457,14 +381,12 @@ const Tetris = () => {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [moveLeft, moveRight, moveDown, rotatePiece, hardDrop, gameStarted, gameMode, movePlayer]);
 
-  // 1P tick
   useEffect(() => {
     if (!gameStarted || gameOver || gameComplete || isPaused || gameMode !== '1p') return;
     const interval = setInterval(moveDown, TICK_SPEED);
     return () => clearInterval(interval);
   }, [moveDown, gameStarted, gameOver, gameComplete, isPaused, gameMode]);
 
-  // 2P tick
   useEffect(() => {
     if (!gameStarted || gameOver || isPaused || gameMode !== '2p') return;
     const interval = setInterval(() => {
@@ -472,7 +394,7 @@ const Tetris = () => {
       if (!player2.gameOver) movePlayer(2, 'down');
     }, TICK_SPEED);
     return () => clearInterval(interval);
-  }, [gameStarted, gameOver, isPaused, gameMode]);
+  }, [gameStarted, gameOver, isPaused, gameMode, player1.gameOver, player2.gameOver, movePlayer]);
 
   const renderBoard1P = () => {
     const displayBoard = board.map(row => [...row]);
@@ -512,70 +434,51 @@ const Tetris = () => {
     return displayBoard.map((row, y) => (
       <div key={y} className="flex">
         {row.map((cell, x) => (
-          <div 
+          <div key={`${y}-${x}`} className={`border transition-colors duration-100 ${borderColor}`}
-            key={`${y}-${x}`} 
+            style={{ width: cellSize, height: cellSize, backgroundColor: cell || 'transparent', boxShadow: cell ? `0 0 5px ${cell}` : 'none' }} />
-            className={`border transition-colors duration-100 ${borderColor}`}
-            style={{ 
-              width: cellSize, 
-              height: cellSize,
-              backgroundColor: cell || 'transparent',
-              boxShadow: cell ? `0 0 5px ${cell}` : 'none',
-            }} 
-          />
         ))}
       </div>
     ));
   };
 
+  const renderNextPiece = (nextP: Piece) => (
+    <div className="flex flex-col gap-1">
+      {nextP.shape.map((row, y) => (
+        <div key={y} className="flex gap-1">
+          {row.map((val, x) => (
+            <div key={`${y}-${x}`} className={`w-4 h-4`} style={{ backgroundColor: val ? nextP.color : 'transparent', boxShadow: val ? `0 0 5px ${nextP.color}` : 'none' }} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+
   if (showGlitchCrash) return <GlitchCrash onComplete={() => window.location.reload()} />;
 
-  // Mode selection screen
   if (!gameMode) {
     return (
-      <motion.div
+      <motion.div ref={gameRef} tabIndex={0} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} className="flex flex-col h-full">
-        ref={gameRef}
-        tabIndex={0}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.5 }}
-        className="flex flex-col h-full"
-      >
         <div className="flex items-center gap-4 mb-4">
           <Link to="/games" className="font-pixel text-sm text-foreground/50 hover:text-primary transition-colors">{'<'} Back</Link>
           <h1 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">Tetris</h1>
         </div>
-
         <div className="flex-1 flex flex-col items-center justify-center gap-6">
           <p className="font-pixel text-sm text-foreground/70">Select game mode</p>
-          
           <div className="flex gap-4">
-            <button
+            <button onClick={() => startGame('1p')} className="flex flex-col items-center gap-2 p-6 border-2 border-primary/50 hover:border-primary bg-background/50 hover:bg-primary/10 transition-all">
-              onClick={() => startGame('1p')}
-              className="flex flex-col items-center gap-2 p-6 border-2 border-primary/50 hover:border-primary bg-background/50 hover:bg-primary/10 transition-all"
-            >
               <User size={32} className="text-primary" />
               <span className="font-minecraft text-lg text-primary">1 Player</span>
               <span className="font-pixel text-xs text-foreground/60">Solo mode</span>
             </button>
-
             {!isMobile && (
-              <button
+              <button onClick={() => startGame('2p')} className="flex flex-col items-center gap-2 p-6 border-2 border-purple-500/50 hover:border-purple-500 bg-background/50 hover:bg-purple-500/10 transition-all">
-                onClick={() => startGame('2p')}
-                className="flex flex-col items-center gap-2 p-6 border-2 border-purple-500/50 hover:border-purple-500 bg-background/50 hover:bg-purple-500/10 transition-all"
-              >
                 <Users size={32} className="text-purple-400" />
                 <span className="font-minecraft text-lg text-purple-400">2 Players</span>
                 <span className="font-pixel text-xs text-foreground/60">Local versus</span>
               </button>
             )}
           </div>
-
+          {isMobile && <p className="font-pixel text-xs text-foreground/40 text-center max-w-xs">2 Player mode requires a keyboard and is not available on mobile devices</p>}
-          {isMobile && (
-            <p className="font-pixel text-xs text-foreground/40 text-center max-w-xs">
-              2 Player mode requires a keyboard and is not available on mobile devices
-            </p>
-          )}
-
           <div className="border border-primary/30 p-3 bg-background/30 mt-4">
             <p className="font-pixel text-xs text-foreground/60">HIGH SCORE: <span className="text-primary">{highScore.toLocaleString()}</span></p>
           </div>
@@ -584,7 +487,7 @@ const Tetris = () => {
     );
   }
 
-  const content = (
+  return (
     <motion.div ref={gameRef} tabIndex={0} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}
       className={`flex flex-col outline-none ${isFullscreen ? 'fixed inset-0 z-50 bg-background p-4' : 'h-full'}`}>
       <div className="flex items-center justify-between mb-2">
@@ -605,37 +508,128 @@ const Tetris = () => {
             <div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard1P()}</div>
             {!isMobile && (
               <div className="flex flex-col gap-3 min-w-[160px]">
-                {/* Next Piece Preview */}
                 <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 justify-center">{renderNextPiece(nextPiece)}</div>
-                    <div className="flex flex-col gap-1">
+                </div>
-                      {nextPiece.shape.map((row, y) => (
+                <div className="border-2 border-primary/50 p-4 bg-background/60">
-                        <div key={y} className="flex gap-1">
+                  <p className="font-pixel text-[10px] text-foreground/50 uppercase tracking-wider">Score</p>
-                          {row.map((val, x) => (
+                  <p className="font-minecraft text-2xl text-primary text-glow-strong">{score.toLocaleString()}</p>
-                            <div key={`${y}-${x}`} className={`w-4 h-4 ${val ? 'bg-primary box-glow' : 'bg-transparent'}`} />
+                </div>
-                          ))}
+                <div className="border border-primary/30 p-3 bg-background/40">
-                        </div>
+                  <p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">High Score</p>
-                      ))}
+                  <p className="font-minecraft text-lg text-primary/80">{highScore.toLocaleString()}</p>
-                    </div>
+                  <p className="font-pixel text-[8px] text-foreground/30 mt-1">max: 4,294,967,296</p>
+                </div>
+                <div className="border border-primary/30 p-3 bg-background/40 text-center">
+                  <p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider">Lines</p>
+                  <p className="font-minecraft text-xl text-primary">{lines}</p>
+                </div>
+                <div className="border border-primary/20 p-3 bg-background/30">
+                  <p className="font-pixel text-[10px] text-foreground/40 uppercase tracking-wider mb-2">Controls</p>
+                  <div className="space-y-1">
+                    <p className="font-pixel text-[10px] text-foreground/60">← → / A D: Move</p>
+                    <p className="font-pixel text-[10px] text-foreground/60">↑ / W: Rotate</p>
+                    <p className="font-pixel text-[10px] text-foreground/60">↓ / S: Soft drop</p>
+                    <p className="font-pixel text-[10px] text-foreground/60">Space: Hard drop</p>
+                    <p className="font-pixel text-[10px] text-foreground/60">P: Pause</p>
                   </div>
                 </div>
-                {/* ... keep existing code (rest of sidebar / stats / UI) */}
+                {!gameStarted || gameOver ? (
+                  <button onClick={() => startGame('1p')} className="font-minecraft text-sm py-3 px-4 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40 transition-all box-glow">
+                    {gameOver ? 'RETRY' : 'START GAME'}
+                  </button>
+                ) : (
+                  <button onClick={togglePause} className="font-minecraft text-sm py-3 px-4 border-2 border-primary/60 bg-background/50 text-primary hover:bg-primary/20 transition-all">
+                    {isPaused ? 'RESUME' : 'PAUSE'}
+                  </button>
+                )}
               </div>
             )}
           </>
         ) : (
-          <>
+          <div className="flex gap-4 items-start">
-            {/* ... keep existing code (2P layout) */}
+            <div className="flex flex-col items-center gap-2">
-          </>
+              <p className="font-minecraft text-lg text-primary">P1 <span className="text-xs text-foreground/60">(WASD + Q)</span></p>
+              <div className="border-2 border-primary box-glow p-1 bg-background/80">{renderBoard2P(player1, 'border-primary/20')}</div>
+              <div className="flex gap-4 text-center">
+                <div><p className="font-pixel text-[10px] text-foreground/60">Score</p><p className="font-minecraft text-lg text-primary">{player1.score}</p></div>
+                <div><p className="font-pixel text-[10px] text-foreground/60">Lines</p><p className="font-minecraft text-lg text-primary">{player1.lines}</p></div>
+              </div>
+              <div className="border border-primary/30 p-2 bg-background/40">
+                <p className="font-pixel text-[8px] text-foreground/40">Next</p>
+                {renderNextPiece(player1.nextPiece)}
+              </div>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <p className="font-minecraft text-lg text-purple-400">P2 <span className="text-xs text-foreground/60">(Arrows + /)</span></p>
+              <div className="border-2 border-purple-500 p-1 bg-background/80" style={{ boxShadow: '0 0 15px hsl(280 70% 50% / 0.5)' }}>{renderBoard2P(player2, 'border-purple-500/20')}</div>
+              <div className="flex gap-4 text-center">
+                <div><p className="font-pixel text-[10px] text-foreground/60">Score</p><p className="font-minecraft text-lg text-purple-400">{player2.score}</p></div>
+                <div><p className="font-pixel text-[10px] text-foreground/60">Lines</p><p className="font-minecraft text-lg text-purple-400">{player2.lines}</p></div>
+              </div>
+              <div className="border border-purple-500/30 p-2 bg-background/40">
+                <p className="font-pixel text-[8px] text-foreground/40">Next</p>
+                {renderNextPiece(player2.nextPiece)}
+              </div>
+            </div>
+          </div>
         )}
       </div>
 
-      {/* ... keep existing code (mobile controls + overlays) */}
+      {isMobile && gameMode === '1p' && (
+        <>
+          <MobileControlsSpacer heightClassName="h-36" />
+          <MobileControlsDock>
+            <div className="flex flex-col items-center gap-2">
+              <div className="flex gap-4 text-center">
+                <div><p className="font-pixel text-[8px] text-foreground/60">SCORE</p><p className="font-minecraft text-sm text-primary">{score.toLocaleString()}</p></div>
+                <div><p className="font-pixel text-[8px] text-foreground/60">HIGH</p><p className="font-minecraft text-sm text-primary">{highScore.toLocaleString()}</p></div>
+                <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>
+              ) : (
+                <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>
+              )}
+            </div>
+          </MobileControlsDock>
+        </>
+      )}
+
+      {!isMobile && (gameOver || isPaused) && gameStarted && (
+        <div className="fixed inset-0 bg-background/80 flex items-center justify-center z-[60]">
+          <div className="border-2 border-primary box-glow-strong p-6 bg-background text-center">
+            <h2 className="font-minecraft text-2xl text-primary text-glow-strong mb-3">{gameOver ? (winner || 'GAME OVER') : 'PAUSED'}</h2>
+            {gameOver && gameMode === '1p' && <p className="font-pixel text-sm text-foreground/70 mb-4">Final Score: {score.toLocaleString()}</p>}
+            {gameOver && gameMode === '2p' && (
+              <div className="flex gap-8 mb-4 justify-center">
+                <div><p className="font-pixel text-xs text-foreground/60">P1</p><p className="font-minecraft text-lg text-primary">{player1.score}</p></div>
+                <div><p className="font-pixel text-xs text-foreground/60">P2</p><p className="font-minecraft text-lg text-purple-400">{player2.score}</p></div>
+              </div>
+            )}
+            <div className="flex gap-4 justify-center">
+              {gameOver ? (
+                <>
+                  <button onClick={() => startGame(gameMode)} className="font-minecraft text-sm py-2 px-4 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40">RETRY</button>
+                  <button onClick={() => { setGameMode(null); setGameStarted(false); }} className="font-minecraft text-sm py-2 px-4 border-2 border-primary/50 text-primary/70 hover:bg-primary/20">MENU</button>
+                </>
+              ) : (
+                <button onClick={togglePause} className="font-minecraft text-sm py-2 px-4 border-2 border-primary bg-primary/20 text-primary hover:bg-primary/40">RESUME</button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </motion.div>
   );
-
-  return isFullscreen ? <FullscreenPortal>{content}</FullscreenPortal> : content;
 };
 
 export default Tetris;