feat(card-sorting): fade correctly positioned cards to 50% opacity

Cards that are in the correct position now fade to 50% opacity in addition
to scaling down to 50% size.

This provides stronger visual feedback that cards are correctly placed:
- Scale: 50% (already implemented)
- Opacity: 50% (new)

Implementation:
- Added opacity to spring animation properties
- Opacity transitions smoothly like scale (even during dragging)
- Both opacity and scale are exempt from immediate updates during drag
- Applied opacity via springProps.opacity on the animated div

The double visual cue (smaller + faded) makes it very clear which cards
are correctly positioned and helps players focus on the remaining
unsorted cards.

🤖 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

@@ -741,19 +741,20 @@ function AnimatedCard({
     y: (cardState.y / 100) * viewportHeight,
   }
 
-  // Use spring animation for position, rotation, and scale
+  // Use spring animation for position, rotation, scale, and opacity
   // Disable animation when:
   // - User is dragging (for immediate response on position/rotation)
   // - Viewport is resizing (for instant repositioning)
-  // Note: Scale always animates smoothly, even during dragging
+  // Note: Scale and opacity always animate smoothly, even during dragging
   const springProps = useSpring({
     left: pixelPos.x,
     top: pixelPos.y,
     rotation: cardState.rotation,
     scale: isCorrectPosition ? 0.5 : 1, // Scale down to 50% when in correct position (for all users)
+    opacity: isCorrectPosition ? 0.5 : 1, // Fade to 50% opacity when in correct position
     immediate: (key) => {
-      // Scale always animates smoothly
-      if (key === 'scale') return false
+      // Scale and opacity always animate smoothly
+      if (key === 'scale' || key === 'opacity') return false
       // Position and rotation are immediate when dragging or resizing
       return isDragging || isResizing
     },
@@ -786,6 +787,7 @@ function AnimatedCard({
           [springProps.rotation, springProps.scale],
           (r, s) => `rotate(${r}deg) scale(${s})`
         ),
+        opacity: springProps.opacity,
         zIndex: cardState.zIndex,
         boxShadow: isDragging ? '0 20px 40px rgba(0, 0, 0, 0.3)' : '0 4px 8px rgba(0, 0, 0, 0.15)',
       }}