perf(complement-race): increase train position update frequency to 60fps

Increased update intervals from 50ms (20fps) to 16ms (60fps) for smoother
train movement without using react-spring animations. Changes applied to:

- Game logic loop (useSteamJourney.ts)
- Momentum/position updates (Provider.tsx)
- Position broadcasts for multiplayer (Provider.tsx)

This resolves the regression where react-spring animations caused guest
players' trains to freeze at their starting position in multiplayer games.

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

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

apps/web/src/app/arcade/complement-race/hooks/useSteamJourney.ts

@@ -34,7 +34,7 @@ const MOMENTUM_DECAY_RATES = {
 
 const MOMENTUM_GAIN_PER_CORRECT = 15 // Momentum added for each correct answer
 const SPEED_MULTIPLIER = 0.15 // Convert momentum to speed (% per second at momentum=100)
-const UPDATE_INTERVAL = 50 // Update every 50ms (~20 fps)
+const UPDATE_INTERVAL = 16 // Update every 16ms (~60 fps for smooth animation)
 const GAME_DURATION = 60000 // 60 seconds in milliseconds
 
 export function useSteamJourney() {

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

@@ -365,7 +365,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
   const MOMENTUM_GAIN_PER_CORRECT = 15
   const MOMENTUM_LOSS_PER_WRONG = 10
   const SPEED_MULTIPLIER = 0.15 // momentum * 0.15 = % per second
-  const UPDATE_INTERVAL = 50 // 50ms = ~20fps
+  const UPDATE_INTERVAL = 16 // 16ms = ~60fps for smooth animation
 
   // Transform multiplayer state to look like single-player state
   const compatibleState = useMemo((): CompatibleGameState => {
@@ -486,7 +486,12 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     if (multiplayerState.gamePhase !== 'playing') {
       hasInitializedPositionRef.current = false
     }
-  }, [multiplayerState.gamePhase, multiplayerState.config.style, multiplayerState.players, localPlayerId])
+  }, [
+    multiplayerState.gamePhase,
+    multiplayerState.config.style,
+    multiplayerState.players,
+    localPlayerId,
+  ])
 
   // Initialize game start time when game becomes active
   useEffect(() => {
@@ -636,7 +641,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
 
     console.log('[POS_BROADCAST] Starting position broadcast interval')
 
-    // Send position update every 100ms for smoother ghost trains (reads from refs to avoid restarting interval)
+    // Send position update every 16ms (~60fps) for smoother ghost trains (reads from refs to avoid restarting interval)
     const interval = setInterval(() => {
       const currentPos = clientPositionRef.current
       broadcastCountRef.current++
@@ -659,7 +664,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
         userId: viewerId || '',
         data: { position: currentPos },
       } as ComplementRaceMove)
-    }, 100)
+    }, 16)
 
     return () => {
       console.log(`[POS_BROADCAST] Stopping interval (sent ${broadcastCountRef.current} updates)`)