Changes

src/pages/Breakout.tsx

@@ -261,6 +261,16 @@ const Breakout = () => {
     paddleXRef.current = Math.max(0, Math.min(canvasSize.width - paddleWidth, x - paddleWidth / 2));
   }, [gameStarted, gameOver, isPaused, canvasSize.width, paddleWidth]);
 
+  // Mouse move handler for desktop
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!gameStarted || gameOver || isPaused || isMobile || isTwoPlayer) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    paddleXRef.current = Math.max(0, Math.min(canvasSize.width - paddleWidth, x - paddleWidth / 2));
+  }, [gameStarted, gameOver, isPaused, canvasSize.width, paddleWidth, isMobile, isTwoPlayer]);
+
   const moveLeft = useCallback(() => { paddleXRef.current = Math.max(0, paddleXRef.current - 20); }, []);
   const moveRight = useCallback(() => { paddleXRef.current = Math.min(canvasSize.width - paddleWidth, paddleXRef.current + 20); }, [canvasSize.width, paddleWidth]);
 
@@ -547,7 +557,7 @@ const Breakout = () => {
         <div className={`flex ${isTwoPlayer ? 'gap-4' : ''}`}>
           {/* P1 Board */}
           <div className="border-2 border-primary box-glow bg-background/80">
-            <canvas ref={canvasRef} width={canvasSize.width} height={canvasSize.height} onTouchMove={handleTouchMove} className="block" />
+            <canvas ref={canvasRef} width={canvasSize.width} height={canvasSize.height} onTouchMove={handleTouchMove} onMouseMove={handleMouseMove} className="block cursor-none" />
           </div>
 
           {/* P2 Board */}