fix(rithmomachia): smooth guide dragging from docked state without jump

Fixed the guide modal jumping to center when dragging from docked state.

**Root Cause:**
When undocking, the code was centering the modal on the cursor:
- Position set to: `{ x: e.clientX - width/2, y: e.clientY - 20 }`
- This caused a visual jump from the docked position to cursor-centered

**Solution:**
Changed undocking logic to maintain the modal's current visual position:
- Position set to: `{ x: rect.left, y: rect.top }` (current screen position)
- dragStart set to: `{ x: e.clientX - rect.left, y: e.clientY - rect.top }` (offset)

**Result:**
- Modal stays exactly where it is visually when undocking (no jump!)
- dragStart correctly reflects the cursor offset from modal position
- Subsequent mouse movements smoothly continue the drag operation
- Single continuous drag gesture from docked to floating state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx

@@ -182,17 +182,19 @@ export function PlayingGuideModal({
           if (dragDistance > UNDOCK_THRESHOLD) {
             console.log('[PlayingGuideModal] Undocking due to drag distance:', dragDistance)
             onUndock()
-            // After undocking, set up position for continued dragging as floating modal
+            // After undocking, keep modal at current visual position
-            // Center the modal at the current mouse position
+            // and set dragStart as offset from position to cursor for smooth continued dragging
             if (modalRef.current) {
               const rect = modalRef.current.getBoundingClientRect()
+              // Keep modal at its current screen position (no jump)
               setPosition({
-                x: e.clientX - rect.width / 2,
+                x: rect.left,
-                y: e.clientY - 20, // Offset slightly from cursor
+                y: rect.top,
               })
+              // Set dragStart as offset from current position to cursor
               setDragStart({
-                x: e.clientX - (e.clientX - rect.width / 2),
+                x: e.clientX - rect.left,
-                y: e.clientY - (e.clientY - 20),
+                y: e.clientY - rect.top,
               })
             }
           }