chore(release): 4.63.10 [skip ci]

## [4.63.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.9...v4.63.10) (2025-10-22)

### Bug Fixes

* **complement-race:** show only first active player's passengers on train ([2bfd5d2](2bfd5d2bda))

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [4.63.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.9...v4.63.10) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** show only first active player's passengers on train ([2bfd5d2](https://github.com/antialias/soroban-abacus-flashcards/commit/2bfd5d2bda7f7d2d83c69f75600ab461fde15d92))
+
+## [4.63.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.8...v4.63.9) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** use app-wide abacus config in interactive flashcards ([cf1be2d](https://github.com/antialias/soroban-abacus-flashcards/commit/cf1be2d1730543bd30836a87d9cbdfd2cf48360e))
+
+## [4.63.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.7...v4.63.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** restore abacus visibility in "Your Journey" section ([c96036d](https://github.com/antialias/soroban-abacus-flashcards/commit/c96036d86b6de2e25f7ecd3d00dd36221badc3b1))
+
 ## [4.63.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.6...v4.63.7) (2025-10-21)
 
 

apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx

@@ -164,9 +164,14 @@ export function SteamTrainJourney({
 
   // Memoize filtered passenger lists to avoid recalculating on every render
   // Arcade room multiplayer uses claimedBy/deliveredBy instead of isBoarded/isDelivered
+  // Only show passengers claimed by the first active player
   const boardedPassengers = useMemo(
-    () => displayPassengers.filter((p) => p.claimedBy !== null && p.deliveredBy === null),
-    [displayPassengers]
+    () =>
+      displayPassengers.filter(
+        (p) =>
+          p.claimedBy === firstActivePlayer?.id && p.claimedBy !== null && p.deliveredBy === null
+      ),
+    [displayPassengers, firstActivePlayer?.id]
   )
 
   const nonDeliveredPassengers = useMemo(

apps/web/src/components/InteractiveFlashcards.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AbacusReact } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { useEffect, useRef, useState } from 'react'
 import { css } from '../../styled-system/css'
 
@@ -93,6 +93,8 @@ interface DraggableCardProps {
 }
 
 function DraggableCard({ card, containerRef }: DraggableCardProps) {
+  const appConfig = useAbacusConfig()
+
   // Track position - starts at initial, updates when dragged
   const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
   const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
@@ -337,7 +339,7 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
             transformOrigin: 'center',
           })}
         >
-          <AbacusReact value={card.number} columns={3} beadShape="circle" />
+          <AbacusReact value={card.number} columns={3} beadShape={appConfig.beadShape} />
         </div>
 
         {/* Number display */}

apps/web/src/components/LevelSliderDisplay.tsx

@@ -622,6 +622,7 @@ export function LevelSliderDisplay({
             borderColor: 'gray.700',
             overflow: 'hidden',
             flex: 1,
+            minH: 0, // Allow flex shrinking
           })}
         >
           {/* Level Details (only for Kyu levels) */}
@@ -640,16 +641,12 @@ export function LevelSliderDisplay({
                 <div
                   className={css({
                     flex: '0 0 auto',
-                    display: 'grid',
-                    gridTemplateColumns: {
-                      base: 'repeat(2, 1fr)',
-                      sm: 'repeat(3, 1fr)',
-                      lg: 'repeat(2, 1fr)',
-                    },
+                    display: { base: 'none', lg: 'grid' },
+                    gridTemplateColumns: 'repeat(2, 1fr)',
                     gap: '2',
                     p: '2',
                     w: '100%',
-                    maxW: { base: '100%', lg: '400px' },
+                    maxW: '400px',
                     alignContent: 'center',
                     justifyItems: 'center',
                   })}
@@ -748,7 +745,7 @@ export function LevelSliderDisplay({
               ) : null
             })()}
 
-          {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+          {/* Abacus (centered on mobile, right-aligned for Kyu on desktop, centered for Dan) */}
           <div
             className={css({
               display: 'flex',
@@ -759,6 +756,7 @@ export function LevelSliderDisplay({
               overflowX: 'auto',
               overflowY: 'hidden',
               minW: 0, // Allow flex shrinking
+              minH: 0, // Allow flex shrinking
             })}
           >
             <animated.div

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.63.7",
+  "version": "4.63.10",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [