chore(release): 4.66.2 [skip ci]

## [4.66.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.66.1...v4.66.2) (2025-10-22)

### Bug Fixes

* **complement-race:** fix ghost train position update lag and reload position reset ([ad78a65](ad78a65ed7))

CHANGELOG.md

@@ -1,3 +1,108 @@
+## [4.66.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.66.1...v4.66.2) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** fix ghost train position update lag and reload position reset ([ad78a65](https://github.com/antialias/soroban-abacus-flashcards/commit/ad78a65ed7f63509602e79246e3761653ea39a15))
+
+## [4.66.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.66.0...v4.66.1) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** ensure continuous position broadcasting during train movement ([df60824](https://github.com/antialias/soroban-abacus-flashcards/commit/df60824f37f52e77e69d32c26926a24e1af88e66))
+
+## [4.66.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.65.1...v4.66.0) (2025-10-22)
+
+
+### Features
+
+* **complement-race:** implement per-car adaptive opacity for ghost trains ([9b1d47d](https://github.com/antialias/soroban-abacus-flashcards/commit/9b1d47d4c7bdaf44f3921ff99971dfb3b65442bd))
+
+## [4.65.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.65.0...v4.65.1) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** use sendMove with correct parameters for position updates ([06cd94b](https://github.com/antialias/soroban-abacus-flashcards/commit/06cd94b24cdd9dbd36fb5800c9ba7be194f7eed0))
+
+## [4.65.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.2...v4.65.0) (2025-10-22)
+
+
+### Features
+
+* **complement-race:** implement position broadcasting for ghost trains ([c5fba5b](https://github.com/antialias/soroban-abacus-flashcards/commit/c5fba5b7dd0f36fd3bbe596409e01b0d3dbd4fbe))
+
+## [4.64.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.1...v4.64.2) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** use individual player positions for ghost trains ([00dc4b1](https://github.com/antialias/soroban-abacus-flashcards/commit/00dc4b1d06a4e1763deb16333a298145cafd9187))
+
+## [4.64.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.0...v4.64.1) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** use local player instead of first player for train display ([915d8a5](https://github.com/antialias/soroban-abacus-flashcards/commit/915d8a5343e70a30c7a82bed645e6628fcc08a86))
+
+## [4.64.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.11...v4.64.0) (2025-10-22)
+
+
+### Features
+
+* **complement-race:** add ghost trains for multiplayer visibility ([7668cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/7668cc9b113b3eae2acb1b852b0ad48c979e6604))
+
+## [4.63.11](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.10...v4.63.11) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** actually filter by isActive instead of just id ([ef4ca57](https://github.com/antialias/soroban-abacus-flashcards/commit/ef4ca57a6c3f35d1bddc6a70952f478058fbc6b5))
+
+## [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)
+
+
+### Bug Fixes
+
+* **mobile:** reduce height of Your Journey section on mobile ([8944035](https://github.com/antialias/soroban-abacus-flashcards/commit/89440355bf494e54072d2d1a1f228c33ec43d52d))
+
+## [4.63.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.5...v4.63.6) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** optimize Your Journey section for iPhone displays ([9167fb4](https://github.com/antialias/soroban-abacus-flashcards/commit/9167fb40d68b7bdbe310b647083586434ceb6043))
+
+## [4.63.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.4...v4.63.5) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** store grab offset in local coordinates to prevent jump ([39d93a9](https://github.com/antialias/soroban-abacus-flashcards/commit/39d93a9e9f48a7d1ce10763cad62a600851a41d5))
+
 ## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21)
 
 

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

@@ -0,0 +1,211 @@
+'use client'
+
+import { useMemo, useRef } from 'react'
+import type { PlayerState } from '@/arcade-games/complement-race/types'
+import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+
+// Overlap threshold: if ghost car is within this distance of any local car, make it ghostly
+const OVERLAP_THRESHOLD = 20 // % of track length
+const GHOST_OPACITY = 0.35 // Opacity when overlapping
+const SOLID_OPACITY = 1.0 // Opacity when separated
+
+interface GhostTrainProps {
+  player: PlayerState
+  trainPosition: number
+  localTrainCarPositions: number[] // [locomotive, car1, car2, car3]
+  maxCars: number
+  carSpacing: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
+}
+
+interface CarTransform {
+  x: number
+  y: number
+  rotation: number
+  opacity: number
+  position: number
+}
+
+/**
+ * Calculate opacity for a ghost car based on distance to nearest local car
+ */
+function calculateCarOpacity(ghostCarPosition: number, localCarPositions: number[]): number {
+  // Find minimum distance to any local car
+  const minDistance = Math.min(
+    ...localCarPositions.map((localPos) => Math.abs(ghostCarPosition - localPos))
+  )
+
+  // If within threshold, use ghost opacity; otherwise solid
+  return minDistance < OVERLAP_THRESHOLD ? GHOST_OPACITY : SOLID_OPACITY
+}
+
+/**
+ * GhostTrain - Renders a semi-transparent train for other players in multiplayer
+ * Uses per-car adaptive opacity: cars are ghostly when overlapping local train,
+ * solid when separated
+ */
+export function GhostTrain({
+  player,
+  trainPosition,
+  localTrainCarPositions,
+  maxCars,
+  carSpacing,
+  trackGenerator,
+  pathRef,
+}: GhostTrainProps) {
+  const ghostRef = useRef<SVGGElement>(null)
+
+  // Calculate ghost train locomotive transform and opacity
+  const locomotiveTransform = useMemo<CarTransform | null>(() => {
+    if (!pathRef.current) {
+      return null
+    }
+
+    const pathLength = pathRef.current.getTotalLength()
+    const targetDistance = (trainPosition / 100) * pathLength
+    const point = pathRef.current.getPointAtLength(targetDistance)
+
+    // Calculate tangent for rotation
+    const tangentDelta = 1
+    const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength)
+    const tangentPoint = pathRef.current.getPointAtLength(tangentDistance)
+    const rotation =
+      (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) / Math.PI
+
+    return {
+      x: point.x,
+      y: point.y,
+      rotation,
+      position: trainPosition,
+      opacity: calculateCarOpacity(trainPosition, localTrainCarPositions),
+    }
+  }, [trainPosition, localTrainCarPositions, pathRef])
+
+  // Calculate ghost train car transforms (each car behind locomotive)
+  const carTransforms = useMemo<CarTransform[]>(() => {
+    if (!pathRef.current) {
+      return []
+    }
+
+    const pathLength = pathRef.current.getTotalLength()
+    const cars: CarTransform[] = []
+
+    for (let i = 0; i < maxCars; i++) {
+      const carPosition = Math.max(0, trainPosition - (i + 1) * carSpacing)
+      const targetDistance = (carPosition / 100) * pathLength
+      const point = pathRef.current.getPointAtLength(targetDistance)
+
+      // Calculate tangent for rotation
+      const tangentDelta = 1
+      const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength)
+      const tangentPoint = pathRef.current.getPointAtLength(tangentDistance)
+      const rotation =
+        (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) / Math.PI
+
+      cars.push({
+        x: point.x,
+        y: point.y,
+        rotation,
+        position: carPosition,
+        opacity: calculateCarOpacity(carPosition, localTrainCarPositions),
+      })
+    }
+
+    return cars
+  }, [trainPosition, maxCars, carSpacing, localTrainCarPositions, pathRef])
+
+  // Don't render if position data isn't ready
+  if (!locomotiveTransform) {
+    return null
+  }
+
+  return (
+    <g ref={ghostRef} data-component="ghost-train" data-player-id={player.id}>
+      {/* Ghost locomotive */}
+      <g
+        transform={`translate(${locomotiveTransform.x}, ${locomotiveTransform.y}) rotate(${locomotiveTransform.rotation}) scale(-1, 1)`}
+        opacity={locomotiveTransform.opacity}
+        style={{
+          transition: 'opacity 0.3s ease-in-out',
+        }}
+      >
+        <text
+          data-element="ghost-locomotive"
+          x={0}
+          y={0}
+          textAnchor="middle"
+          style={{
+            fontSize: '100px',
+            filter: `drop-shadow(0 2px 8px ${player.color || 'rgba(100, 100, 255, 0.6)'})`,
+            pointerEvents: 'none',
+          }}
+        >
+          🚂
+        </text>
+
+        {/* Player name label - positioned above locomotive */}
+        <text
+          data-element="ghost-label"
+          x={0}
+          y={-60}
+          textAnchor="middle"
+          style={{
+            fontSize: '18px',
+            fontWeight: 'bold',
+            fill: player.color || '#6366f1',
+            filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
+            pointerEvents: 'none',
+            transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
+          }}
+        >
+          {player.name || `Player ${player.id.slice(0, 4)}`}
+        </text>
+
+        {/* Score indicator - positioned below locomotive */}
+        <text
+          data-element="ghost-score"
+          x={0}
+          y={50}
+          textAnchor="middle"
+          style={{
+            fontSize: '14px',
+            fontWeight: 'bold',
+            fill: 'rgba(255, 255, 255, 0.9)',
+            filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))',
+            pointerEvents: 'none',
+            transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
+          }}
+        >
+          {player.score}
+        </text>
+      </g>
+
+      {/* Ghost cars - each with individual opacity */}
+      {carTransforms.map((car, index) => (
+        <g
+          key={`car-${index}`}
+          transform={`translate(${car.x}, ${car.y}) rotate(${car.rotation}) scale(-1, 1)`}
+          opacity={car.opacity}
+          style={{
+            transition: 'opacity 0.3s ease-in-out',
+          }}
+        >
+          <text
+            data-element={`ghost-car-${index}`}
+            x={0}
+            y={0}
+            textAnchor="middle"
+            style={{
+              fontSize: '85px',
+              filter: `drop-shadow(0 2px 6px ${player.color || 'rgba(100, 100, 255, 0.4)'})`,
+              pointerEvents: 'none',
+            }}
+          >
+            🚃
+          </text>
+        </g>
+      ))}
+    </g>
+  )
+}

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

@@ -20,6 +20,7 @@ import { GameHUD } from './GameHUD'
 import { RailroadTrackPath } from './RailroadTrackPath'
 import { TrainAndCars } from './TrainAndCars'
 import { TrainTerrainBackground } from './TrainTerrainBackground'
+import { GhostTrain } from './GhostTrain'
 
 const BoardingPassengerAnimation = memo(({ animation }: { animation: BoardingAnimation }) => {
   const spring = useSpring({
@@ -92,7 +93,7 @@ export function SteamTrainJourney({
   currentQuestion,
   currentInput,
 }: SteamTrainJourneyProps) {
-  const { state } = useComplementRace()
+  const { state, multiplayerState, localPlayerId } = useComplementRace()
 
   const { getSkyGradient, getTimeOfDayPeriod } = useSteamJourney()
   const _skyGradient = getSkyGradient()
@@ -100,10 +101,10 @@ export function SteamTrainJourney({
   const { players } = useGameMode()
   const { profile: _profile } = useUserProfile()
 
-  // Get the first active player's emoji
-  const activePlayers = Array.from(players.values()).filter((p) => p.id)
-  const firstActivePlayer = activePlayers[0]
-  const playerEmoji = firstActivePlayer?.emoji ?? '👤'
+  // Get the LOCAL player's emoji (not just the first player!)
+  const activePlayers = Array.from(players.values()).filter((p) => p.isActive)
+  const localPlayer = activePlayers.find((p) => p.isLocal)
+  const playerEmoji = localPlayer?.emoji ?? '👤'
 
   const svgRef = useRef<SVGSVGElement>(null)
   const pathRef = useRef<SVGPathElement>(null)
@@ -164,9 +165,13 @@ 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 LOCAL player
   const boardedPassengers = useMemo(
-    () => displayPassengers.filter((p) => p.claimedBy !== null && p.deliveredBy === null),
-    [displayPassengers]
+    () =>
+      displayPassengers.filter(
+        (p) => p.claimedBy === localPlayer?.id && p.claimedBy !== null && p.deliveredBy === null
+      ),
+    [displayPassengers, localPlayer?.id]
   )
 
   const nonDeliveredPassengers = useMemo(
@@ -186,6 +191,29 @@ export function SteamTrainJourney({
     []
   )
 
+  // Calculate local train car positions for ghost train overlap detection
+  // Array includes locomotive + all cars: [locomotive, car1, car2, car3]
+  const localTrainCarPositions = useMemo(() => {
+    const positions = [trainPosition] // Locomotive at front
+    for (let i = 0; i < maxCars; i++) {
+      positions.push(Math.max(0, trainPosition - (i + 1) * carSpacing))
+    }
+    return positions
+  }, [trainPosition, maxCars, carSpacing])
+
+  // Get other players for ghost trains (filter out local player)
+  const otherPlayers = useMemo(() => {
+    if (!multiplayerState?.players || !localPlayerId) {
+      return []
+    }
+
+    const filtered = Object.entries(multiplayerState.players)
+      .filter(([playerId, player]) => playerId !== localPlayerId && player.isActive)
+      .map(([_, player]) => player)
+
+    return filtered
+  }, [multiplayerState?.players, localPlayerId])
+
   if (!trackData) return null
 
   return (
@@ -247,7 +275,21 @@ export function SteamTrainJourney({
           disembarkingAnimations={disembarkingAnimations}
         />
 
-        {/* Train, cars, and passenger animations */}
+        {/* Ghost trains - other players in multiplayer */}
+        {otherPlayers.map((player) => (
+          <GhostTrain
+            key={player.id}
+            player={player}
+            trainPosition={player.position} // Use each player's individual position
+            localTrainCarPositions={localTrainCarPositions} // For per-car overlap detection
+            maxCars={maxCars}
+            carSpacing={carSpacing}
+            trackGenerator={trackGenerator}
+            pathRef={pathRef}
+          />
+        ))}
+
+        {/* Train, cars, and passenger animations - local player */}
         <TrainAndCars
           boardingAnimations={boardingAnimations}
           disembarkingAnimations={disembarkingAnimations}

apps/web/src/arcade-games/complement-race/Provider.tsx

@@ -99,6 +99,8 @@ interface CompatibleGameState {
  */
 interface ComplementRaceContextValue {
   state: CompatibleGameState // Return adapted state
+  multiplayerState: ComplementRaceState // Raw multiplayer state for rendering other players
+  localPlayerId: string | undefined // Local player ID for filtering
   dispatch: (action: { type: string; [key: string]: any }) => void // Compatibility layer
   lastError: string | null
   startGame: () => void
@@ -304,19 +306,35 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
 
   // Get local player ID
   const localPlayerId = useMemo(() => {
-    return activePlayers.find((id) => {
+    const foundId = activePlayers.find((id) => {
       const player = players.get(id)
       return player?.isLocal
     })
+    return foundId
   }, [activePlayers, players])
 
-  // Debug logging ref (track last logged values)
-  const lastLogRef = useState({ key: '', count: 0 })[0]
-
   // Client-side game state (NOT synced to server - purely visual/gameplay)
   const [clientMomentum, setClientMomentum] = useState(10) // Start at 10 for gentle push
   const [clientPosition, setClientPosition] = useState(0)
   const [clientPressure, setClientPressure] = useState(0)
+
+  // Track if we've synced position from server (for reconnect/reload scenarios)
+  const hasInitializedPositionRef = useRef(false)
+
+  // Ref to track latest position for broadcasting (avoids recreating interval on every position change)
+  const clientPositionRef = useRef(clientPosition)
+
+  // Refs for throttled logging
+  const lastBroadcastLogRef = useRef({ position: 0, time: 0 })
+  const broadcastCountRef = useRef(0)
+  const lastReceivedPositionsRef = useRef<Record<string, number>>({})
+
+  // Ref to hold sendMove so interval doesn't restart when sendMove changes
+  const sendMoveRef = useRef(sendMove)
+  useEffect(() => {
+    sendMoveRef.current = sendMove
+  }, [sendMove])
+
   const [clientAIRacers, setClientAIRacers] = useState<
     Array<{
       id: string
@@ -443,16 +461,45 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     clientAIRacers,
   ])
 
+  // Sync client position from server on reconnect/reload (multiplayer only)
+  useEffect(() => {
+    // Only sync if:
+    // 1. We haven't synced yet
+    // 2. Game is active
+    // 3. We're in sprint mode
+    // 4. We have a local player with a position from server
+    if (
+      !hasInitializedPositionRef.current &&
+      multiplayerState.gamePhase === 'playing' &&
+      multiplayerState.config.style === 'sprint' &&
+      localPlayerId
+    ) {
+      const serverPosition = multiplayerState.players[localPlayerId]?.position
+      if (serverPosition !== undefined && serverPosition > 0) {
+        console.log(`[POSITION_SYNC] Restoring position from server: ${serverPosition.toFixed(1)}%`)
+        setClientPosition(serverPosition)
+        hasInitializedPositionRef.current = true
+      }
+    }
+
+    // Reset sync flag when game ends
+    if (multiplayerState.gamePhase !== 'playing') {
+      hasInitializedPositionRef.current = false
+    }
+  }, [multiplayerState.gamePhase, multiplayerState.config.style, multiplayerState.players, localPlayerId])
+
   // Initialize game start time when game becomes active
   useEffect(() => {
     if (compatibleState.isGameActive && compatibleState.style === 'sprint') {
       if (gameStartTimeRef.current === 0) {
         gameStartTimeRef.current = Date.now()
         lastUpdateRef.current = Date.now()
-        // Reset client state for new game
-        setClientMomentum(10) // Start with gentle push
-        setClientPosition(0)
-        setClientPressure((10 / 100) * 150) // Initial pressure from starting momentum
+        // Reset client state for new game (only if not restored from server)
+        if (!hasInitializedPositionRef.current) {
+          setClientMomentum(10) // Start with gentle push
+          setClientPosition(0)
+          setClientPressure((10 / 100) * 150) // Initial pressure from starting momentum
+        }
       }
     } else {
       // Reset when game ends
@@ -548,14 +595,78 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     const currentRoute = multiplayerState.currentRoute
     // When route changes, reset position and give starting momentum
     if (currentRoute > 1 && compatibleState.style === 'sprint') {
-      console.log(
-        `[Provider] Route changed to ${currentRoute}, resetting position. Passengers: ${multiplayerState.passengers.length}`
-      )
       setClientPosition(0)
       setClientMomentum(10) // Reset to starting momentum (gentle push)
     }
   }, [multiplayerState.currentRoute, compatibleState.style, multiplayerState.passengers.length])
 
+  // Keep position ref in sync with latest position
+  useEffect(() => {
+    clientPositionRef.current = clientPosition
+  }, [clientPosition])
+
+  // Log when we receive position updates from other players
+  useEffect(() => {
+    if (!multiplayerState?.players || !localPlayerId) return
+
+    Object.entries(multiplayerState.players).forEach(([playerId, player]) => {
+      if (playerId === localPlayerId || !player.isActive) return
+
+      const lastPos = lastReceivedPositionsRef.current[playerId] ?? -1
+      const currentPos = player.position
+
+      // Log when position changes significantly (>2%)
+      if (Math.abs(currentPos - lastPos) > 2) {
+        console.log(
+          `[POS_RECEIVED] ${player.name}: ${currentPos.toFixed(1)}% (was ${lastPos.toFixed(1)}%, delta=${(currentPos - lastPos).toFixed(1)}%)`
+        )
+        lastReceivedPositionsRef.current[playerId] = currentPos
+      }
+    })
+  }, [multiplayerState?.players, localPlayerId])
+
+  // Broadcast position to server for multiplayer ghost trains
+  useEffect(() => {
+    const isGameActive = multiplayerState.gamePhase === 'playing'
+    const isSprint = multiplayerState.config.style === 'sprint'
+
+    if (!isGameActive || !isSprint || !localPlayerId) {
+      return
+    }
+
+    console.log('[POS_BROADCAST] Starting position broadcast interval')
+
+    // Send position update every 100ms for smoother ghost trains (reads from refs to avoid restarting interval)
+    const interval = setInterval(() => {
+      const currentPos = clientPositionRef.current
+      broadcastCountRef.current++
+
+      // Throttled logging: only log when position changes by >2% or every 5 seconds
+      const now = Date.now()
+      const posDiff = Math.abs(currentPos - lastBroadcastLogRef.current.position)
+      const timeDiff = now - lastBroadcastLogRef.current.time
+
+      if (posDiff > 2 || timeDiff > 5000) {
+        console.log(
+          `[POS_BROADCAST] #${broadcastCountRef.current} pos=${currentPos.toFixed(1)}% (delta=${posDiff.toFixed(1)}%)`
+        )
+        lastBroadcastLogRef.current = { position: currentPos, time: now }
+      }
+
+      sendMoveRef.current({
+        type: 'UPDATE_POSITION',
+        playerId: localPlayerId,
+        userId: viewerId || '',
+        data: { position: currentPos },
+      } as ComplementRaceMove)
+    }, 100)
+
+    return () => {
+      console.log(`[POS_BROADCAST] Stopping interval (sent ${broadcastCountRef.current} updates)`)
+      clearInterval(interval)
+    }
+  }, [multiplayerState.gamePhase, multiplayerState.config.style, localPlayerId, viewerId])
+
   // Keep lastLogRef for future debugging needs
   // (removed debug logging)
 
@@ -769,7 +880,6 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
         case 'START_NEW_ROUTE':
           // Send route progression to server
           if (action.routeNumber !== undefined) {
-            console.log(`[Provider] Dispatching START_NEW_ROUTE for route ${action.routeNumber}`)
             sendMove({
               type: 'START_NEW_ROUTE',
               playerId: activePlayers[0] || '',
@@ -914,6 +1024,8 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
 
   const contextValue: ComplementRaceContextValue = {
     state: compatibleState, // Use transformed state
+    multiplayerState, // Expose raw multiplayer state for ghost trains
+    localPlayerId, // Expose local player ID for filtering
     dispatch,
     lastError,
     startGame,

apps/web/src/arcade-games/complement-race/Validator.ts

@@ -97,6 +97,9 @@ export class ComplementRaceValidator
       case 'UPDATE_INPUT':
         return this.validateUpdateInput(state, move.playerId, move.data.input)
 
+      case 'UPDATE_POSITION':
+        return this.validateUpdatePosition(state, move.playerId, move.data.position)
+
       case 'CLAIM_PASSENGER':
         return this.validateClaimPassenger(
           state,
@@ -397,6 +400,39 @@ export class ComplementRaceValidator
     return { valid: true, newState }
   }
 
+  private validateUpdatePosition(
+    state: ComplementRaceState,
+    playerId: string,
+    position: number
+  ): ValidationResult {
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Game not in playing phase' }
+    }
+
+    const player = state.players[playerId]
+    if (!player) {
+      return { valid: false, error: 'Player not found' }
+    }
+
+    // Validate position is a reasonable number (0-100)
+    if (typeof position !== 'number' || position < 0 || position > 100) {
+      return { valid: false, error: 'Invalid position value' }
+    }
+
+    const newState: ComplementRaceState = {
+      ...state,
+      players: {
+        ...state.players,
+        [playerId]: {
+          ...player,
+          position,
+        },
+      },
+    }
+
+    return { valid: true, newState }
+  }
+
   // ==========================================================================
   // Sprint Mode: Passenger Management
   // ==========================================================================

apps/web/src/arcade-games/complement-race/types.ts

@@ -143,6 +143,7 @@ export type ComplementRaceMove = BaseGameMove &
     // Playing phase
     | { type: 'SUBMIT_ANSWER'; data: { answer: number; responseTime: number } }
     | { type: 'UPDATE_INPUT'; data: { input: string } } // Show "thinking" indicator
+    | { type: 'UPDATE_POSITION'; data: { position: number } } // Sprint mode: sync train position
     | { type: 'CLAIM_PASSENGER'; data: { passengerId: string; carIndex: number } } // Sprint mode: pickup
     | { type: 'DELIVER_PASSENGER'; data: { passengerId: string } } // Sprint mode: delivery
 

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!
@@ -125,17 +127,27 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
       cardY: position.y,
     }
 
-    // Calculate grab offset from card center
+    // Calculate grab offset from card center IN LOCAL COORDINATES (unrotated)
     if (cardRef.current) {
       const rect = cardRef.current.getBoundingClientRect()
       const cardCenterX = rect.left + rect.width / 2
       const cardCenterY = rect.top + rect.height / 2
+
+      // Screen-space offset from center
+      const screenOffsetX = e.clientX - cardCenterX
+      const screenOffsetY = e.clientY - cardCenterY
+
+      // Convert to local coordinates by rotating by -rotation
+      const currentRotationRad = (rotation * Math.PI) / 180
+      const cosRot = Math.cos(-currentRotationRad)
+      const sinRot = Math.sin(-currentRotationRad)
+
       grabOffsetRef.current = {
-        x: e.clientX - cardCenterX,
-        y: e.clientY - cardCenterY,
+        x: screenOffsetX * cosRot - screenOffsetY * sinRot,
+        y: screenOffsetX * sinRot + screenOffsetY * cosRot,
       }
       console.log(
-        `[GrabPoint] Grabbed at offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px from center`
+        `[GrabPoint] Grabbed at local offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px (screen offset: ${screenOffsetX.toFixed(0)}, ${screenOffsetY.toFixed(0)}px, rotation: ${rotation.toFixed(1)}°)`
       )
     }
 
@@ -327,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

@@ -412,8 +412,9 @@ export function LevelSliderDisplay({
                   ? 'violet.500'
                   : 'amber.500',
           rounded: 'xl',
-          p: { base: '6', md: '8' },
+          p: { base: '4', md: '8' },
           height: { base: 'auto', md: '700px' },
+          maxHeight: { base: '500px', md: 'none' },
           display: 'flex',
           flexDirection: 'column',
         })}
@@ -448,7 +449,7 @@ export function LevelSliderDisplay({
                     key={index}
                     onClick={() => setCurrentIndex(index)}
                     className={css({
-                      fontSize: '4xl',
+                      fontSize: { base: '2xl', sm: '3xl', md: '4xl' },
                       opacity: index === currentIndex ? '1' : '0.3',
                       transition: 'all 0.2s',
                       cursor: 'pointer',
@@ -500,8 +501,8 @@ export function LevelSliderDisplay({
                   alignItems: 'center',
                   justifyContent: 'center',
                   position: 'relative',
-                  w: '180px',
-                  h: '128px',
+                  w: { base: '120px', md: '180px' },
+                  h: { base: '96px', md: '128px' },
                   bg: 'transparent',
                   cursor: 'grab',
                   transition: 'transform 0.15s ease-out, left 0.3s ease-out',
@@ -514,7 +515,12 @@ export function LevelSliderDisplay({
                   _active: { cursor: 'grabbing' },
                 })}
               >
-                <div className={css({ opacity: 0.75 })}>
+                <div
+                  className={css({
+                    opacity: 0.75,
+                    transform: { base: 'scale(0.75)', md: 'scale(1)' },
+                  })}
+                >
                   <StandaloneBead
                     size={128}
                     color={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
@@ -607,14 +613,16 @@ export function LevelSliderDisplay({
         <div
           className={css({
             display: 'flex',
+            flexDirection: { base: 'column', lg: 'row' },
             gap: '4',
-            p: '6',
+            p: { base: '4', md: '6' },
             bg: 'rgba(0, 0, 0, 0.3)',
             rounded: 'lg',
             border: '1px solid',
             borderColor: 'gray.700',
             overflow: 'hidden',
             flex: 1,
+            minH: 0, // Allow flex shrinking
           })}
         >
           {/* Level Details (only for Kyu levels) */}
@@ -633,12 +641,14 @@ export function LevelSliderDisplay({
                 <div
                   className={css({
                     flex: '0 0 auto',
-                    display: 'grid',
+                    display: { base: 'none', lg: 'grid' },
                     gridTemplateColumns: 'repeat(2, 1fr)',
                     gap: '2',
                     p: '2',
+                    w: '100%',
                     maxW: '400px',
                     alignContent: 'center',
+                    justifyItems: 'center',
                   })}
                 >
                   {sections.map((section, idx) => {
@@ -666,8 +676,10 @@ export function LevelSliderDisplay({
                           justifyContent: 'center',
                           gap: '1.5',
                           opacity: hasData ? 1 : 0.3,
-                          width: '170px',
-                          height: '150px',
+                          w: { base: '100%', sm: 'auto' },
+                          minW: { sm: '140px' },
+                          maxW: { base: '170px', sm: '170px' },
+                          minH: '150px',
                           _hover: hasData
                             ? {
                                 borderColor: 'gray.500',
@@ -733,13 +745,18 @@ 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',
-              justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+              justifyContent:
+                currentLevel.type === 'kyu' ? { base: 'center', lg: 'flex-end' } : 'center',
               alignItems: 'center',
               flex: 1,
+              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.4",
+  "version": "4.66.2",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [