fix(card-sorting): center AbacusReact SVGs in card tiles

Improve centering of abacus SVGs within both available cards and position slots.

**Issue:**
AbacusReact SVGs were not properly centered within their card containers,
appearing off-center or misaligned.

**Fix:**
- **Available cards**: Added maxHeight: '100%' constraint and display: 'block'
  with margin: '0 auto' to SVG styling
- **Position slots**: Changed container to use flex: 1 and proper flex centering,
  constrained SVG to maxWidth: '70px' with centering styles

**Changes:**
- Available card SVG container: Added display flex with center alignment
- Available card SVG: maxHeight: '100%', display: 'block', margin: '0 auto'
- Position slot SVG container: width: '100%', flex: 1, flex centering
- Position slot SVG: maxWidth: '70px', maxHeight: '100%', display: 'block', margin: '0 auto'

Now AbacusReact SVGs render centered within their card tiles regardless of
the actual SVG dimensions.

src/arcade-games/card-sorting/components/PlayingPhase.tsx:314-330,457-475

🤖 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

@@ -321,7 +321,10 @@ export function PlayingPhase() {
                     justifyContent: 'center',
                     '& svg': {
                       maxWidth: '100%',
+                      maxHeight: '100%',
                       height: 'auto',
+                      display: 'block',
+                      margin: '0 auto',
                     },
                   })}
                 />
@@ -456,10 +459,17 @@ export function PlayingPhase() {
                             __html: card.svgContent,
                           }}
                           className={css({
-                            width: '70px',
+                            width: '100%',
+                            flex: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                             '& svg': {
-                              width: '100%',
+                              maxWidth: '70px',
+                              maxHeight: '100%',
                               height: 'auto',
+                              display: 'block',
+                              margin: '0 auto',
                             },
                           })}
                         />