fix(card-sorting): prevent position jump when clicking rotated cards

Fix position jump when clicking on cards by calculating drag offset
from the card's actual position instead of getBoundingClientRect():

- Use cardState position (in percentages) converted to pixels
- Calculate offset as pointer position minus card position
- Prevents jump caused by rotated elements having different bounding boxes

When a card is rotated, getBoundingClientRect() returns the bounding box
of the rotated element, not the original position. By calculating offset
from the actual cardState position, cards stay perfectly in place when
you click them, regardless of rotation.

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

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

apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx

@@ -595,13 +595,16 @@ export function PlayingPhaseDrag() {
     const target = e.currentTarget as HTMLElement
     target.setPointerCapture(e.pointerId)
 
-    const rect = target.getBoundingClientRect()
-    const offsetX = e.clientX - rect.left
-    const offsetY = e.clientY - rect.top
-
-    // Store initial rotation to preserve it during drag
+    // Get current card state to calculate proper offset
     const currentCard = cardStates.get(cardId)
-    const initialRotation = currentCard?.rotation || 0
+    if (!currentCard) return
+
+    // Calculate offset from card's actual position (in pixels) to pointer
+    // This accounts for rotation and prevents position jump
+    const cardPixelX = (currentCard.x / 100) * viewportDimensions.width
+    const cardPixelY = (currentCard.y / 100) * viewportDimensions.height
+    const offsetX = e.clientX - cardPixelX
+    const offsetY = e.clientY - cardPixelY
 
     dragStateRef.current = {
       cardId,
@@ -609,7 +612,7 @@ export function PlayingPhaseDrag() {
       offsetY,
       startX: e.clientX,
       startY: e.clientY,
-      initialRotation,
+      initialRotation: currentCard.rotation,
     }
 
     setDraggingCardId(cardId)