Changes

src/pages/Snake.tsx

@@ -75,10 +75,11 @@ const Snake = () => {
       const maxHeight = window.innerHeight - 420;
       return Math.min(Math.floor(maxWidth / GRID_SIZE), Math.floor(maxHeight / GRID_SIZE), 18);
     }
-    if (gameMode === '2p') {
-      return isFullscreen ? 20 : 16;
-    }
-    return isFullscreen ? 28 : 24;
+    // Desktop: calculate based on available height (subtract header ~60px, margins ~40px)
+    const availableHeight = window.innerHeight - 100;
+    const maxCellFromHeight = Math.floor(availableHeight / GRID_SIZE);
+    // Clamp to reasonable max
+    return Math.min(maxCellFromHeight, 30);
   }, [isFullscreen, gameMode]);
 
   const [cellSize, setCellSize] = useState(getCellSize);
@@ -538,7 +539,7 @@ const Snake = () => {
         </button>
       </div>
 
-      <div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4'} flex-1 ${isFullscreen ? 'justify-center items-center' : ''}`}>
+      <div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4 items-start justify-center'} flex-1`}>
         <div className="border-2 border-primary box-glow p-1 bg-background/80">
           <div className="grid" style={{ gridTemplateColumns: `repeat(${GRID_SIZE}, ${cellSize}px)` }}>
             {gameMode === '1p' ? renderGrid1P() : renderGrid2P()}