feat(complement-race): add mini app navigation bar

Adds PageWithNav wrapper to complement-race game for consistency with
other arcade games.

## Changes
- Created `GameComponent.tsx` wrapper that includes PageWithNav
- Wraps existing ComplementRaceGame with navigation bar
- Updates game title and emoji based on selected style:
  - Practice mode: "Complement Race" 🏁
  - Sprint mode: "Steam Sprint" 🚂
  - Survival mode: "Endless Circuit" ♾️
- Provides exit session and new game callbacks
- Emphasizes player selection during setup phase

## Integration
- Updated index.tsx to use new GameComponent instead of direct ComplementRaceGame
- Maintains all existing game functionality
- Navigation bar now matches other arcade games (matching, number-guesser)

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

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

apps/web/src/arcade-games/complement-race/components/GameComponent.tsx

@@ -0,0 +1,59 @@
+/**
+ * Complement Race Game Component with Navigation
+ * Wraps the existing ComplementRaceGame with PageWithNav for arcade play
+ */
+
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
+import { useComplementRace } from '../Provider'
+
+export function GameComponent() {
+  const router = useRouter()
+  const { state, exitSession, goToSetup } = useComplementRace()
+
+  // Get display name based on style
+  const getNavTitle = () => {
+    switch (state.style) {
+      case 'sprint':
+        return 'Steam Sprint'
+      case 'survival':
+        return 'Endless Circuit'
+      case 'practice':
+      default:
+        return 'Complement Race'
+    }
+  }
+
+  // Get emoji based on style
+  const getNavEmoji = () => {
+    switch (state.style) {
+      case 'sprint':
+        return '🚂'
+      case 'survival':
+        return '♾️'
+      case 'practice':
+      default:
+        return '🏁'
+    }
+  }
+
+  return (
+    <PageWithNav
+      navTitle={getNavTitle()}
+      navEmoji={getNavEmoji()}
+      emphasizePlayerSelection={state.gamePhase === 'controls'}
+      onExitSession={() => {
+        exitSession()
+        router.push('/arcade')
+      }}
+      onNewGame={() => {
+        goToSetup()
+      }}
+    >
+      <ComplementRaceGame />
+    </PageWithNav>
+  )
+}

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

@@ -7,7 +7,7 @@ import { defineGame } from '@/lib/arcade/game-sdk'
 import type { GameManifest } from '@/lib/arcade/game-sdk'
 import { complementRaceValidator } from './Validator'
 import { ComplementRaceProvider } from './Provider'
-import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
+import { GameComponent } from './components/GameComponent'
 import type { ComplementRaceConfig, ComplementRaceState, ComplementRaceMove } from './types'
 
 // Game manifest
@@ -69,7 +69,7 @@ export const complementRaceGame = defineGame<
 >({
   manifest,
   Provider: ComplementRaceProvider,
-  GameComponent: ComplementRaceGame,
+  GameComponent,
   validator: complementRaceValidator,
   defaultConfig,
   validateConfig: validateComplementRaceConfig,