Changes

src/pages/Breakout.tsx

@@ -106,10 +106,26 @@ const Breakout = () => {
       if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
       return { width: Math.floor(width), height: Math.floor(height) };
     }
-    if (isTwoPlayer) {
-      return isFullscreen ? { width: 480, height: 580 } : { width: 400, height: 500 };
+    if (isFullscreen) {
+      const aspectRatio = 560 / 680;
+      if (isTwoPlayer) {
+        // Two canvases side by side
+        const maxWidth = (window.innerWidth - 100) / 2;
+        const maxHeight = window.innerHeight - 120;
+        let width = maxWidth;
+        let height = width / aspectRatio;
+        if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
+        return { width: Math.floor(width), height: Math.floor(height) };
+      }
+      // Single player - fill screen
+      const maxWidth = window.innerWidth - 280;
+      const maxHeight = window.innerHeight - 100;
+      let width = maxWidth;
+      let height = width / aspectRatio;
+      if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
+      return { width: Math.floor(width), height: Math.floor(height) };
     }
-    return isFullscreen ? { width: 700, height: 840 } : { width: 560, height: 680 };
+    return isTwoPlayer ? { width: 400, height: 500 } : { width: 560, height: 680 };
   }, [isFullscreen, isTwoPlayer]);
 
   const [canvasSize, setCanvasSize] = useState(getCanvasSize);
@@ -304,7 +320,7 @@ const Breakout = () => {
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
 
-    const paddleSpeed = isMobile ? 6 : (isFullscreen ? 10 : 8);
+    const paddleSpeed = isMobile ? 4 : (isFullscreen ? 6 : 5);
     if (keysRef.current.has(leftKey)) paddleRefParam.current = Math.max(0, paddleRefParam.current - paddleSpeed);
     if (keysRef.current.has(rightKey)) paddleRefParam.current = Math.min(canvasSize.width - paddleWidth, paddleRefParam.current + paddleSpeed);