fix(card-sorting): position slots flow horizontally with wrap

Fix position slots to match Python original - they should flow horizontally
and wrap, not stack vertically.

**Before:**
- Container: display: flex, flexDirection: 'column' (vertical stack)
- Each slot + insert button pair wrapped in a div
- One slot per line with insert button below it

**After (matching Python lines 3101-3111):**
- Container: display: flex, flexWrap: 'wrap' (horizontal flow)
- Slots and insert buttons flow together as siblings
- Wraps naturally based on container width
- Dashed border container with semi-transparent background

**Changes:**
- Position slots container: flex-wrap instead of flex-direction: column
- Removed wrapper div around slot+button pairs
- Added React keys to slots and buttons
- Added container styling (padding, background, border)

Now matches the Python original where all slots and + buttons flow
together horizontally and wrap as needed.

src/arcade-games/card-sorting/components/PlayingPhase.tsx:362-524

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

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

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

@@ -362,8 +362,14 @@ export function PlayingPhase() {
           <div
             className={css({
               display: 'flex',
-              flexDirection: 'column',
-              gap: '0.25rem',
+              flexWrap: 'wrap',
+              gap: '8px',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '15px',
+              background: 'rgba(255,255,255,0.7)',
+              borderRadius: '8px',
+              border: '2px dashed #2c5f76',
             })}
           >
             {/* Insert button before first position */}
@@ -402,9 +408,10 @@ export function PlayingPhase() {
               const isEmpty = card === null
 
               return (
-                <div key={index}>
+                <>
                   {/* Position slot */}
                   <div
+                    key={`slot-${index}`}
                     onClick={() => handleSlotClick(index)}
                     className={css({
                       width: '90px',
@@ -483,6 +490,7 @@ export function PlayingPhase() {
 
                   {/* Insert button after this position */}
                   <button
+                    key={`insert-${index + 1}`}
                     type="button"
                     onClick={() => handleInsertClick(index + 1)}
                     disabled={!selectedCardId}
@@ -498,7 +506,6 @@ export function PlayingPhase() {
                       cursor: selectedCardId ? 'pointer' : 'default',
                       opacity: selectedCardId ? 1 : 0.3,
                       transition: 'all 0.2s',
-                      marginTop: '0.25rem',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -511,7 +518,7 @@ export function PlayingPhase() {
                   >
                     +
                   </button>
-                </div>
+                </>
               )
             })}
           </div>