Changes

src/pages/Pacman.tsx

@@ -101,7 +101,11 @@ const Pacman = () => {
       const maxHeight = window.innerHeight - 420;
       return Math.min(Math.floor(maxWidth / GRID_WIDTH), Math.floor(maxHeight / GRID_HEIGHT), 16);
     }
-    return isFullscreen ? 26 : 20;
+    // Desktop: calculate based on available height (subtract header ~60px, margins ~40px)
+    const availableHeight = window.innerHeight - 100;
+    const maxCellFromHeight = Math.floor(availableHeight / GRID_HEIGHT);
+    // Clamp to reasonable max
+    return Math.min(maxCellFromHeight, 28);
   }, [isFullscreen]);
 
   const [cellSize, setCellSize] = useState(getCellSize);
@@ -554,7 +558,7 @@ const Pacman = () => {
         </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 relative overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/5 animate-pulse" style={{ animationDuration: '4s' }}></div>
           <div className="grid relative z-10" style={{ gridTemplateColumns: `repeat(${GRID_WIDTH}, ${cellSize}px)` }}>{renderGrid()}</div>