chore(release): 2.3.1 [skip ci]

## [2.3.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.3.0...v2.3.1) (2025-10-07) ### Bug Fixes * add missing DOMPoint properties to getPointAtLength mock ([1e17278](1e17278f94)) * add missing name property to Passenger test mocks ([f8ca248](f8ca248844)) * add non-null assertions to skillConfiguration utilities ([9c71092](9c71092278)) * add optional chaining to stepBeadHighlights access ([a5fac5c](a5fac5c75c)) * add showAsAbacus property to ComplementQuestion type ([4adcc09](4adcc09643)) * add userId to optimistic player in useCreatePlayer ([5310463](5310463bec)) * change TypeScript moduleResolution from bundler to node ([327aee0](327aee0b4b)) * convert Jest mocks to Vitest in useSteamJourney tests ([e067271](e06727160c)) * convert player IDs from number to string in arcade tests ([72db1f4](72db1f4a2c)) * rewrite layout.nav.test to match actual RootLayout props ([a085de8](a085de816f)) * update useArcadeGuard tests with proper useViewerId mock ([4eb49d1](4eb49d1d44)) * use Object.defineProperty for NODE_ENV in middleware tests ([e73191a](e73191a729)) * wrap Buffer in Uint8Array for Next.js Response API ([98384d2](98384d264e)) ### Documentation * add explicit package.json script references to regime docs ([3353bca](3353bcadc2)) * establish mandatory code quality regime for Claude Code ([dd11043](dd1104310f)) * expand quality regime to define "done" for all work ([f92f7b5](f92f7b592a))
fix: add optional chaining to stepBeadHighlights access
2025-10-07 20:45:07 +00:00 · 2025-10-07 15:39:12 -05:00 · 2025-10-07 15:38:59 -05:00 · 2025-10-07 15:38:53 -05:00 · 2025-10-07 15:38:46 -05:00 · 2025-10-07 15:38:38 -05:00
366 changed files with 27110 additions and 23158 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,7 +1,7 @@
 # Ignore development files
-# NOTE: With hoisted mode, we need the workspace node_modules symlinks
-# Only ignore root node_modules
-/node_modules
+# Ignore all node_modules to prevent Docker overlay conflicts
+node_modules
+**/node_modules
 .next
 .git
 .github
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-node-linker=hoisted
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,83 @@
+## [2.3.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.3.0...v2.3.1) (2025-10-07)
+
+
+### Bug Fixes
+
+* add missing DOMPoint properties to getPointAtLength mock ([1e17278](https://github.com/antialias/soroban-abacus-flashcards/commit/1e17278f942b3fbcc5d05be746178f2e780f0bd9))
+* add missing name property to Passenger test mocks ([f8ca248](https://github.com/antialias/soroban-abacus-flashcards/commit/f8ca2488447e89151085942f708f6acf350a2747))
+* add non-null assertions to skillConfiguration utilities ([9c71092](https://github.com/antialias/soroban-abacus-flashcards/commit/9c7109227822884d25f8546739c80c6e7491e28d))
+* add optional chaining to stepBeadHighlights access ([a5fac5c](https://github.com/antialias/soroban-abacus-flashcards/commit/a5fac5c75c8cd67b218a5fd5ad98818dad74ab67))
+* add showAsAbacus property to ComplementQuestion type ([4adcc09](https://github.com/antialias/soroban-abacus-flashcards/commit/4adcc096430fbb03f0a8b2f0aef4be239aff9cd0))
+* add userId to optimistic player in useCreatePlayer ([5310463](https://github.com/antialias/soroban-abacus-flashcards/commit/5310463becd0974291cff49522ae5669a575410d))
+* change TypeScript moduleResolution from bundler to node ([327aee0](https://github.com/antialias/soroban-abacus-flashcards/commit/327aee0b4b5c0b0b2bf3eeb48d861bb3068f6127))
+* convert Jest mocks to Vitest in useSteamJourney tests ([e067271](https://github.com/antialias/soroban-abacus-flashcards/commit/e06727160c70a1ab38a003104d1fef8fb83ff92d))
+* convert player IDs from number to string in arcade tests ([72db1f4](https://github.com/antialias/soroban-abacus-flashcards/commit/72db1f4a2c3f930025cd5ced3fcf7c810dcc569d))
+* rewrite layout.nav.test to match actual RootLayout props ([a085de8](https://github.com/antialias/soroban-abacus-flashcards/commit/a085de816fcdeb055addabb8aec391b111cb5f94))
+* update useArcadeGuard tests with proper useViewerId mock ([4eb49d1](https://github.com/antialias/soroban-abacus-flashcards/commit/4eb49d1d44e1d85526ef6564f88a8fbcebffb4d2))
+* use Object.defineProperty for NODE_ENV in middleware tests ([e73191a](https://github.com/antialias/soroban-abacus-flashcards/commit/e73191a7298dbb6dd15da594267ea6221062c36b))
+* wrap Buffer in Uint8Array for Next.js Response API ([98384d2](https://github.com/antialias/soroban-abacus-flashcards/commit/98384d264e4a10d1836aa9f2e69151b122ffa7b0))
+
+
+### Documentation
+
+* add explicit package.json script references to regime docs ([3353bca](https://github.com/antialias/soroban-abacus-flashcards/commit/3353bcadc2849104248c624973274ed90b86722a))
+* establish mandatory code quality regime for Claude Code ([dd11043](https://github.com/antialias/soroban-abacus-flashcards/commit/dd1104310f4e0e85640730ea0e96e4adda4bc505))
+* expand quality regime to define "done" for all work ([f92f7b5](https://github.com/antialias/soroban-abacus-flashcards/commit/f92f7b592af38ba9d0f5b1db3a061d63d92a5093))
+
+## [2.3.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.2.1...v2.3.0) (2025-10-07)
+
+
+### Features
+
+* add Biome + ESLint linting setup ([fc1838f](https://github.com/antialias/soroban-abacus-flashcards/commit/fc1838f4f53a4f8d8f1c5303de3a63f12d9c9303))
+
+
+### Styles
+
+* apply Biome formatting to entire codebase ([60d70cd](https://github.com/antialias/soroban-abacus-flashcards/commit/60d70cd2f2f2b1d250c4c645889af4334968cb7e))
+
+## [2.2.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.2.0...v2.2.1) (2025-10-07)
+
+
+### Bug Fixes
+
+* remove remaining typst-dependent files ([d1b9b72](https://github.com/antialias/soroban-abacus-flashcards/commit/d1b9b72cfc2f2ba36c40d7ae54bc6fdfcc5f34da))
+
+## [2.2.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.3...v2.2.0) (2025-10-07)
+
+
+### Features
+
+* remove typst-related code and routes ([be6fb1a](https://github.com/antialias/soroban-abacus-flashcards/commit/be6fb1a881b983f9830d36c079b7b41f35153b8a))
+
+## [2.1.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.2...v2.1.3) (2025-10-07)
+
+
+### Bug Fixes
+
+* remove .npmrc from Dockerfile COPY ([e71c2b4](https://github.com/antialias/soroban-abacus-flashcards/commit/e71c2b4da85076dfc97401fc170cd88cb0aa4375))
+
+## [2.1.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.1...v2.1.2) (2025-10-07)
+
+
+### Bug Fixes
+
+* revert to default pnpm mode for Docker compatibility ([bd0092e](https://github.com/antialias/soroban-abacus-flashcards/commit/bd0092e69ac4f74ea89b8d31399cf72f57484cbb))
+
+## [2.1.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.0...v2.1.1) (2025-10-07)
+
+
+### Bug Fixes
+
+* ignore all node_modules in Docker ([4792dde](https://github.com/antialias/soroban-abacus-flashcards/commit/4792dde1beef9c6cb84a27bc6bb6acfa43919a72))
+
+## [2.1.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.0.7...v2.1.0) (2025-10-07)
+
+
+### Features
+
+* remove typst dependencies ([eedce28](https://github.com/antialias/soroban-abacus-flashcards/commit/eedce28572035897001f6b8a08f79beaa2360d44))
+
 ## [2.0.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.0.6...v2.0.7) (2025-10-07)


--- a/2
+++ b/2
@@ -10,7 +10,7 @@ RUN npm install -g pnpm@9.15.4 turbo@1.10.0
 WORKDIR /app

 # Copy package files for dependency resolution
-COPY package.json pnpm-lock.yaml pnpm-workspace.yaml turbo.json .npmrc ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml turbo.json ./
 COPY apps/web/package.json ./apps/web/
 COPY packages/core/client/node/package.json ./packages/core/client/node/
 COPY packages/core/client/typescript/package.json ./packages/core/client/typescript/
--- a/apps/web/.claude/CLAUDE.md
+++ b/apps/web/.claude/CLAUDE.md
@@ -0,0 +1,86 @@
+# Claude Code Instructions for apps/web
+
+## MANDATORY: Quality Checks for ALL Work
+
+**BEFORE declaring ANY work complete, fixed, or working**, you MUST run and pass these checks:
+
+### When This Applies
+- Before every commit
+- Before saying "it's done" or "it's fixed"
+- Before marking a task as complete
+- Before telling the user something is working
+- After any code changes, no matter how small
+
+```bash
+npm run pre-commit
+```
+
+This single command runs all quality checks in the correct order:
+1. `npm run type-check` - TypeScript type checking (must have 0 errors)
+2. `npm run format` - Auto-format all code with Biome
+3. `npm run lint:fix` - Auto-fix linting issues with Biome + ESLint
+4. `npm run lint` - Verify 0 errors, 0 warnings
+
+**DO NOT COMMIT** until all checks pass with zero errors and zero warnings.
+
+## Available Scripts
+
+```bash
+npm run type-check    # TypeScript: tsc --noEmit
+npm run format        # Biome: format all files
+npm run format:check  # Biome: check formatting without fixing
+npm run lint          # Biome + ESLint: check for errors/warnings
+npm run lint:fix      # Biome + ESLint: auto-fix issues
+npm run check         # Biome: full check (format + lint + imports)
+npm run pre-commit    # Run all checks (type + format + lint)
+```
+
+## Workflow
+
+When asked to make ANY changes:
+
+1. Make your code changes
+2. Run `npm run pre-commit`
+3. If it fails, fix the issues and run again
+4. Only after all checks pass can you:
+   - Say the work is "done" or "complete"
+   - Mark tasks as finished
+   - Create commits
+   - Tell the user it's working
+5. Push immediately after committing
+
+**Nothing is complete until `npm run pre-commit` passes.**
+
+## Details
+
+See `.claude/CODE_QUALITY_REGIME.md` for complete documentation.
+
+## No Pre-Commit Hooks
+
+This project does not use git pre-commit hooks for religious reasons.
+You (Claude Code) are responsible for enforcing code quality before commits.
+
+## Quick Reference: package.json Scripts
+
+**Primary workflow:**
+```bash
+npm run pre-commit  # ← Use this before every commit
+```
+
+**Individual checks (if needed):**
+```bash
+npm run type-check     # TypeScript: tsc --noEmit
+npm run format         # Biome: format code (--write)
+npm run lint           # Biome + ESLint: check only
+npm run lint:fix       # Biome + ESLint: auto-fix
+```
+
+**Additional tools:**
+```bash
+npm run format:check   # Check formatting without changing files
+npm run check          # Biome check (format + lint + organize imports)
+```
+
+---
+
+**Remember: Always run `npm run pre-commit` before creating commits.**
--- a/apps/web/.claude/CODE_QUALITY_REGIME.md
+++ b/apps/web/.claude/CODE_QUALITY_REGIME.md
@@ -0,0 +1,143 @@
+# Code Quality Regime
+
+**MANDATORY**: Before declaring ANY work complete, fixed, or working, Claude MUST run these checks and fix all issues.
+
+## Definition of "Done"
+
+Work is NOT complete until:
+- ✅ All TypeScript errors are fixed (0 errors)
+- ✅ All code is formatted with Biome
+- ✅ All linting passes (0 errors, 0 warnings)
+- ✅ `npm run pre-commit` exits successfully
+
+**Until these checks pass, the work is considered incomplete.**
+
+## Quality Check Checklist (Always Required)
+
+Run these before:
+- Committing code
+- Saying work is "done" or "complete"
+- Marking tasks as finished
+- Telling the user something is "working" or "fixed"
+
+Run these commands in order. All must pass with 0 errors and 0 warnings:
+
+```bash
+# 1. Type check
+npm run type-check
+
+# 2. Format code
+npm run format
+
+# 3. Lint and fix
+npm run lint:fix
+
+# 4. Verify clean state
+npm run lint && npm run type-check
+```
+
+## Quick Command (Run All Checks)
+
+```bash
+npm run pre-commit
+```
+
+**What it does:**
+```json
+"pre-commit": "npm run type-check && npm run format && npm run lint:fix && npm run lint"
+```
+
+This single command runs:
+1. `npm run type-check` → `tsc --noEmit` (TypeScript errors)
+2. `npm run format` → `npx @biomejs/biome format . --write` (auto-format)
+3. `npm run lint:fix` → `npx @biomejs/biome lint . --write && npx eslint . --fix` (auto-fix)
+4. `npm run lint` → `npx @biomejs/biome lint . && npx eslint .` (verify clean)
+
+Fails fast if any step fails.
+
+## The Regime Rules
+
+### 1. TypeScript Errors: ZERO TOLERANCE
+- Run `npm run type-check` before every commit
+- Fix ALL TypeScript errors
+- No `@ts-ignore` or `@ts-expect-error` without explicit justification
+
+### 2. Formatting: AUTOMATIC
+- Run `npm run format` before every commit
+- Biome handles all formatting automatically
+- Never commit unformatted code
+
+### 3. Linting: ZERO ERRORS, ZERO WARNINGS
+- Run `npm run lint:fix` to auto-fix issues
+- Then run `npm run lint` to verify 0 errors, 0 warnings
+- Fix any remaining issues manually
+
+### 4. Commit Order
+1. Make code changes
+2. Run `npm run pre-commit`
+3. If any check fails, fix and repeat
+4. Only commit when all checks pass
+5. Push immediately after commit
+
+## Why No Pre-Commit Hooks?
+
+This project intentionally avoids pre-commit hooks due to religious constraints.
+Instead, Claude Code is responsible for enforcing this regime through:
+
+1. **This documentation** - Always visible and reference-able
+2. **Package.json scripts** - Easy to run checks
+3. **Session persistence** - This file lives in `.claude/` and is read by every session
+
+## For Claude Code Sessions
+
+**READ THIS FILE AT THE START OF EVERY SESSION WHERE YOU WILL COMMIT CODE**
+
+When asked to commit:
+1. Check if you've run `npm run pre-commit` (or all 4 steps individually)
+2. If not, STOP and run the checks first
+3. Fix all issues before proceeding with the commit
+4. Only create commits when all checks pass
+
+## Complete Scripts Reference
+
+From `apps/web/package.json`:
+
+```json
+{
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "format": "npx @biomejs/biome format . --write",
+    "format:check": "npx @biomejs/biome format .",
+    "lint": "npx @biomejs/biome lint . && npx eslint .",
+    "lint:fix": "npx @biomejs/biome lint . --write && npx eslint . --fix",
+    "check": "npx @biomejs/biome check .",
+    "pre-commit": "npm run type-check && npm run format && npm run lint:fix && npm run lint"
+  }
+}
+```
+
+**Tools used:**
+- TypeScript: `tsc --noEmit` (type checking only, no output)
+- Biome: Fast formatter + linter (Rust-based, 10-100x faster than Prettier)
+- ESLint: React Hooks rules only (`rules-of-hooks` validation)
+
+## Emergency Override
+
+If you absolutely MUST commit with failing checks:
+1. Document WHY in the commit message
+2. Create a follow-up task to fix the issues
+3. Only use for emergency hotfixes
+
+## Verification
+
+After following this regime, you should see:
+```
+✓ Type check passed (0 errors)
+✓ Formatting applied
+✓ Linting passed (0 errors, 0 warnings)
+✓ Ready to commit
+```
+
+---
+
+**This regime is non-negotiable. Every commit must pass these checks.**
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -0,0 +1,38 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:*)",
+      "Bash(npx tsc:*)",
+      "Bash(curl:*)",
+      "Bash(git add:*)",
+      "Bash(git commit -m \"$(cat <<''EOF''\nfix: lazy-load database connection to prevent build-time access\n\nRefactor db/index.ts to use lazy initialization via Proxy pattern.\nThis prevents the database from being accessed at module import time,\nwhich was causing Next.js build failures in CI/CD environments where\nno database file exists.\n\nThe database connection is now created only when first accessed at\nruntime, allowing static site generation to complete successfully.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
+      "Bash(git push:*)",
+      "Read(//Users/antialias/projects/soroban-abacus-flashcards/**)",
+      "Bash(npm install:*)",
+      "Bash(cat:*)",
+      "Bash(pnpm add:*)",
+      "Bash(npx biome check:*)",
+      "Bash(npx:*)",
+      "Bash(eslint:*)",
+      "Bash(npm run lint:fix:*)",
+      "Bash(npm run format:*)",
+      "Bash(npm run lint:*)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm run:*)",
+      "Bash(rm:*)",
+      "Bash(lsof:*)",
+      "Bash(xargs kill:*)",
+      "Bash(tee:*)",
+      "Bash(for file in src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx src/app/games/complement-race/components/RaceTrack/CircularTrack.tsx src/app/games/complement-race/components/RaceTrack/LinearTrack.tsx)",
+      "Bash(do)",
+      "Bash(done)",
+      "Bash(for file in src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx)",
+      "Bash(for file in src/app/arcade/complement-race/hooks/useTrackManagement.ts src/app/games/complement-race/hooks/useTrackManagement.ts)",
+      "Bash(echo \"EXIT CODE: $?\")",
+      "Bash(git commit -m \"$(cat <<''EOF''\nfeat: add Biome + ESLint linting setup\n\nAdd Biome for formatting and general linting, with minimal ESLint\nconfiguration for React Hooks rules only. This provides:\n\n- Fast formatting via Biome (10-100x faster than Prettier)\n- General JS/TS linting via Biome\n- React Hooks validation via ESLint (rules-of-hooks)\n- Import organization via Biome\n\nConfiguration files:\n- biome.jsonc: Biome config with custom rule overrides\n- eslint.config.js: Minimal flat config for React Hooks only\n- .gitignore: Added Biome cache exclusion\n- LINTING.md: Documentation for the setup\n\nScripts added to package.json:\n- npm run lint: Check all files\n- npm run lint:fix: Auto-fix issues\n- npm run format: Format all files\n- npm run check: Full Biome check\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
+      "Bash(git commit:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# vitest
+/.vitest
+
+# storybook
+storybook-static
+
+# panda css
+styled-system
+
+# generated
+src/generated/build-info.json
+
+# biome
+.biome
--- a/apps/web/.storybook/main.ts
+++ b/apps/web/.storybook/main.ts
@@ -1,36 +1,31 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs'

-import { join, dirname } from "path"
+import { dirname, join } from 'path'

 /**
-* This function is used to resolve the absolute path of a package.
-* It is needed in projects that use Yarn PnP or are set up within a monorepo.
-*/
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
 function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
 }
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@storybook/addon-onboarding')
+    getAbsolutePath('@storybook/addon-onboarding'),
  ],
-  "framework": {
-    "name": getAbsolutePath('@storybook/nextjs'),
-    "options": {
-      "nextConfigPath": "../next.config.js"
-    }
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {
+      nextConfigPath: '../next.config.js',
+    },
  },
-  "staticDirs": [
-    "../public"
-  ],
-  "typescript": {
-    "reactDocgen": "react-docgen-typescript"
+  staticDirs: ['../public'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
  },
-  "webpackFinal": async (config) => {
+  webpackFinal: async (config) => {
    // Handle PandaCSS styled-system imports
    if (config.resolve) {
      config.resolve.alias = {
@@ -39,10 +34,10 @@ const config: StorybookConfig = {
        '../../styled-system/css': join(__dirname, '../styled-system/css/index.mjs'),
        '../../styled-system/patterns': join(__dirname, '../styled-system/patterns/index.mjs'),
        '../styled-system/css': join(__dirname, '../styled-system/css/index.mjs'),
-        '../styled-system/patterns': join(__dirname, '../styled-system/patterns/index.mjs')
+        '../styled-system/patterns': join(__dirname, '../styled-system/patterns/index.mjs'),
      }
    }
    return config
-  }
-};
-export default config;
+  },
+}
+export default config
--- a/apps/web/.storybook/preview.ts
+++ b/apps/web/.storybook/preview.ts
@@ -5,11 +5,11 @@ const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
      },
    },
  },
-};
+}

-export default preview;
+export default preview
--- a/apps/web/LINTING.md
+++ b/apps/web/LINTING.md
@@ -0,0 +1,104 @@
+# Linting & Formatting Setup
+
+This project uses **Biome** for formatting and general linting, with **ESLint** handling React Hooks rules only.
+
+## Tools
+
+- **@biomejs/biome** - Fast formatter + linter + import organizer
+- **eslint** + **eslint-plugin-react-hooks** - React Hooks validation only
+
+## Scripts
+
+```bash
+# Check formatting and lint (non-destructive)
+npm run check
+
+# Lint all files
+npm run lint
+
+# Fix lint issues
+npm run lint:fix
+
+# Format all files
+npm run format
+
+# Check formatting (dry run)
+npm run format:check
+```
+
+## Configuration Files
+
+- `biome.jsonc` - Biome configuration (format + lint)
+- `eslint.config.js` - Minimal ESLint flat config for React Hooks only
+- `.gitignore` - Includes patterns for Biome cache
+
+## What Each Tool Does
+
+### Biome
+- Code formatting (Prettier-compatible)
+- General JavaScript/TypeScript linting
+- Import organization (alphabetical, remove unused)
+- Dead code detection
+- Performance optimizations
+
+### ESLint (React Hooks only)
+- `react-hooks/rules-of-hooks` - Ensures hooks are called unconditionally
+- `react-hooks/exhaustive-deps` - Warns about incomplete dependency arrays
+
+## IDE Integration
+
+### VS Code
+Install the Biome extension:
+```
+code --install-extension biomejs.biome
+```
+
+Add to `.vscode/settings.json`:
+```json
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}
+```
+
+## CI/CD
+
+Add to your GitHub Actions workflow:
+
+```yaml
+- name: Lint
+  run: npm run lint
+
+- name: Check formatting
+  run: npm run format:check
+```
+
+## Migration from ESLint + Prettier
+
+This setup replaces most ESLint and Prettier functionality:
+- ✅ Removed `eslint-config-next` inline config from `package.json`
+- ✅ No `.eslintrc.js` or `.prettierrc` files needed
+- ✅ ESLint now only runs React Hooks rules
+- ✅ Biome handles all formatting and general linting
+
+## Why This Setup?
+
+1. **Speed** - Biome is 10-100x faster than ESLint + Prettier
+2. **Simplicity** - Single tool for most concerns
+3. **Accuracy** - ESLint still catches React-specific issues Biome can't yet handle
+4. **Low Maintenance** - Minimal config overlap
+
+## Customization
+
+To add custom lint rules, edit:
+- `biome.jsonc` for general rules
+- `eslint.config.js` for React Hooks rules
--- a/apps/web/tests/api-abacus-settings.e2e.test.ts
+++ b/apps/web/tests/api-abacus-settings.e2e.test.ts
@@ -2,9 +2,9 @@
 * @vitest-environment node
 */

-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { db, schema } from '../src/db'
 import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../src/db'

 /**
 * API Abacus Settings E2E Tests
@@ -19,10 +19,7 @@ describe('Abacus Settings API', () => {
  beforeEach(async () => {
    // Create a test user with unique guest ID
    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
-    const [user] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId })
-      .returning()
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
    testUserId = user.id
  })

@@ -218,10 +215,7 @@ describe('Abacus Settings API', () => {
    it('ensures settings are isolated per user', async () => {
      // Create another user
      const testGuestId2 = `test-guest-2-${Date.now()}-${Math.random().toString(36).slice(2)}`
-      const [user2] = await db
-        .insert(schema.users)
-        .values({ guestId: testGuestId2 })
-        .returning()
+      const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()

      try {
        // Create settings for both users
@@ -272,7 +266,7 @@ describe('Abacus Settings API', () => {
      }).rejects.toThrow(/FOREIGN KEY constraint failed/)
    })

-    it('prevents modifying another user\'s settings via userId injection', async () => {
+    it("prevents modifying another user's settings via userId injection", async () => {
      // Create victim user
      const victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`
      const [victimUser] = await db
--- a/apps/web/tests/api-players.e2e.test.ts
+++ b/apps/web/tests/api-players.e2e.test.ts
@@ -2,9 +2,9 @@
 * @vitest-environment node
 */

-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { db, schema } from '../src/db'
 import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../src/db'

 /**
 * API Players E2E Tests
@@ -20,10 +20,7 @@ describe('Players API', () => {
  beforeEach(async () => {
    // Create a test user with unique guest ID
    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
-    const [user] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId })
-      .returning()
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
    testUserId = user.id
  })

@@ -406,7 +403,7 @@ describe('Players API', () => {
      }).rejects.toThrow(/FOREIGN KEY constraint failed/)
    })

-    it('prevents modifying another user\'s player via userId injection (DB layer alone is insufficient)', async () => {
+    it("prevents modifying another user's player via userId injection (DB layer alone is insufficient)", async () => {
      // Create victim user and their player
      const victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`
      const [victimUser] = await db
@@ -426,7 +423,7 @@ describe('Players API', () => {
          })
          .returning()

-        const [victimPlayer] = await db
+        const [_victimPlayer] = await db
          .insert(schema.players)
          .values({
            userId: victimUser.id,
@@ -464,10 +461,7 @@ describe('Players API', () => {
    it('ensures players are isolated per user', async () => {
      // Create another user
      const user2GuestId = `user2-${Date.now()}-${Math.random().toString(36).slice(2)}`
-      const [user2] = await db
-        .insert(schema.users)
-        .values({ guestId: user2GuestId })
-        .returning()
+      const [user2] = await db.insert(schema.users).values({ guestId: user2GuestId }).returning()

      try {
        // Create players for both users
--- a/apps/web/tests/api-user-stats.e2e.test.ts
+++ b/apps/web/tests/api-user-stats.e2e.test.ts
@@ -2,9 +2,9 @@
 * @vitest-environment node
 */

-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { db, schema } from '../src/db'
 import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../src/db'

 /**
 * API User Stats E2E Tests
@@ -19,10 +19,7 @@ describe('User Stats API', () => {
  beforeEach(async () => {
    // Create a test user with unique guest ID
    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
-    const [user] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId })
-      .returning()
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
    testUserId = user.id
  })

@@ -33,10 +30,7 @@ describe('User Stats API', () => {

  describe('GET /api/user-stats', () => {
    it('creates stats with defaults if none exist', async () => {
-      const [stats] = await db
-        .insert(schema.userStats)
-        .values({ userId: testUserId })
-        .returning()
+      const [stats] = await db.insert(schema.userStats).values({ userId: testUserId }).returning()

      expect(stats).toBeDefined()
      expect(stats.gamesPlayed).toBe(0)
--- a/apps/web/tests/middleware.e2e.test.ts
+++ b/apps/web/tests/middleware.e2e.test.ts
@@ -2,10 +2,10 @@
 * @vitest-environment node
 */

-import { describe, it, expect, beforeEach } from 'vitest'
 import { NextRequest } from 'next/server'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { GUEST_COOKIE_NAME, verifyGuestToken } from '../src/lib/guest-token'
 import { middleware } from '../src/middleware'
-import { verifyGuestToken, GUEST_COOKIE_NAME } from '../src/lib/guest-token'

 describe('Middleware E2E', () => {
  beforeEach(() => {
@@ -74,7 +74,10 @@ describe('Middleware E2E', () => {

  it('sets secure flag in production', async () => {
    const originalEnv = process.env.NODE_ENV
-    process.env.NODE_ENV = 'production'
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'production',
+      configurable: true
+    })

    const req = new NextRequest('http://localhost:3000/')
    const res = await middleware(req)
@@ -82,12 +85,18 @@ describe('Middleware E2E', () => {
    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
    expect(cookie?.secure).toBe(true)

-    process.env.NODE_ENV = originalEnv
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: originalEnv,
+      configurable: true
+    })
  })

  it('does not set secure flag in development', async () => {
    const originalEnv = process.env.NODE_ENV
-    process.env.NODE_ENV = 'development'
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'development',
+      configurable: true
+    })

    const req = new NextRequest('http://localhost:3000/')
    const res = await middleware(req)
@@ -95,7 +104,10 @@ describe('Middleware E2E', () => {
    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
    expect(cookie?.secure).toBe(false)

-    process.env.NODE_ENV = originalEnv
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: originalEnv,
+      configurable: true
+    })
  })

  it('sets maxAge correctly', async () => {
--- a/apps/web/biome.jsonc
+++ b/apps/web/biome.jsonc
@@ -0,0 +1,69 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useButtonType": "off",
+        "noSvgWithoutTitle": "off",
+        "noLabelWithoutControl": "off",
+        "noStaticElementInteractions": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off",
+        "noImplicitAnyLet": "off",
+        "noAssignInExpressions": "off",
+        "useIterableCallbackReturn": "off"
+      },
+      "style": {
+        "useNodejsImportProtocol": "off",
+        "noNonNullAssertion": "off",
+        "noDescendingSpecificity": "off"
+      },
+      "correctness": {
+        "noUnusedVariables": "off",
+        "noUnusedFunctionParameters": "off",
+        "useUniqueElementIds": "off",
+        "noChildrenProp": "off",
+        "useExhaustiveDependencies": "off",
+        "noInvalidUseBeforeDeclaration": "off",
+        "useHookAtTopLevel": "off",
+        "noNestedComponentDefinitions": "off",
+        "noUnreachable": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
+      "performance": {
+        "noAccumulatingSpread": "off"
+      }
+    }
+  },
+  "files": {
+    "ignoreUnknown": true
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+    "defaultBranch": "main"
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "semicolons": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  }
+}
--- a/apps/web/drizzle/meta/0000_snapshot.json
+++ b/apps/web/drizzle/meta/0000_snapshot.json
@@ -53,16 +53,12 @@
      "indexes": {
        "users_guest_id_unique": {
          "name": "users_guest_id_unique",
-          "columns": [
-            "guest_id"
-          ],
+          "columns": ["guest_id"],
          "isUnique": true
        },
        "users_email_unique": {
          "name": "users_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
          "isUnique": true
        }
      },
@@ -128,9 +124,7 @@
      "indexes": {
        "players_user_id_idx": {
          "name": "players_user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
          "isUnique": false
        }
      },
@@ -139,12 +133,8 @@
          "name": "players_user_id_users_id_fk",
          "tableFrom": "players",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -208,12 +198,8 @@
          "name": "user_stats_user_id_users_id_fk",
          "tableFrom": "user_stats",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -233,4 +219,4 @@
  "internal": {
    "indexes": {}
  }
-}
+}
--- a/apps/web/drizzle/meta/0001_snapshot.json
+++ b/apps/web/drizzle/meta/0001_snapshot.json
@@ -53,16 +53,12 @@
      "indexes": {
        "users_guest_id_unique": {
          "name": "users_guest_id_unique",
-          "columns": [
-            "guest_id"
-          ],
+          "columns": ["guest_id"],
          "isUnique": true
        },
        "users_email_unique": {
          "name": "users_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
          "isUnique": true
        }
      },
@@ -128,9 +124,7 @@
      "indexes": {
        "players_user_id_idx": {
          "name": "players_user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
          "isUnique": false
        }
      },
@@ -139,12 +133,8 @@
          "name": "players_user_id_users_id_fk",
          "tableFrom": "players",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -208,12 +198,8 @@
          "name": "user_stats_user_id_users_id_fk",
          "tableFrom": "user_stats",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -335,12 +321,8 @@
          "name": "abacus_settings_user_id_users_id_fk",
          "tableFrom": "abacus_settings",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -360,4 +342,4 @@
  "internal": {
    "indexes": {}
  }
-}
+}
--- a/apps/web/drizzle/meta/0002_snapshot.json
+++ b/apps/web/drizzle/meta/0002_snapshot.json
@@ -53,16 +53,12 @@
      "indexes": {
        "users_guest_id_unique": {
          "name": "users_guest_id_unique",
-          "columns": [
-            "guest_id"
-          ],
+          "columns": ["guest_id"],
          "isUnique": true
        },
        "users_email_unique": {
          "name": "users_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
          "isUnique": true
        }
      },
@@ -128,9 +124,7 @@
      "indexes": {
        "players_user_id_idx": {
          "name": "players_user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
          "isUnique": false
        }
      },
@@ -139,12 +133,8 @@
          "name": "players_user_id_users_id_fk",
          "tableFrom": "players",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -208,12 +198,8 @@
          "name": "user_stats_user_id_users_id_fk",
          "tableFrom": "user_stats",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -335,12 +321,8 @@
          "name": "abacus_settings_user_id_users_id_fk",
          "tableFrom": "abacus_settings",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -431,12 +413,8 @@
          "name": "arcade_sessions_user_id_users_id_fk",
          "tableFrom": "arcade_sessions",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -456,4 +434,4 @@
  "internal": {
    "indexes": {}
  }
-}
+}
--- a/apps/web/drizzle/meta/0003_snapshot.json
+++ b/apps/web/drizzle/meta/0003_snapshot.json
@@ -53,16 +53,12 @@
      "indexes": {
        "users_guest_id_unique": {
          "name": "users_guest_id_unique",
-          "columns": [
-            "guest_id"
-          ],
+          "columns": ["guest_id"],
          "isUnique": true
        },
        "users_email_unique": {
          "name": "users_email_unique",
-          "columns": [
-            "email"
-          ],
+          "columns": ["email"],
          "isUnique": true
        }
      },
@@ -128,9 +124,7 @@
      "indexes": {
        "players_user_id_idx": {
          "name": "players_user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
          "isUnique": false
        }
      },
@@ -139,12 +133,8 @@
          "name": "players_user_id_users_id_fk",
          "tableFrom": "players",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -208,12 +198,8 @@
          "name": "user_stats_user_id_users_id_fk",
          "tableFrom": "user_stats",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -335,12 +321,8 @@
          "name": "abacus_settings_user_id_users_id_fk",
          "tableFrom": "abacus_settings",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -458,9 +440,7 @@
      "indexes": {
        "arcade_rooms_code_unique": {
          "name": "arcade_rooms_code_unique",
-          "columns": [
-            "code"
-          ],
+          "columns": ["code"],
          "isUnique": true
        }
      },
@@ -537,12 +517,8 @@
          "name": "room_members_room_id_arcade_rooms_id_fk",
          "tableFrom": "room_members",
          "tableTo": "arcade_rooms",
-          "columnsFrom": [
-            "room_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["room_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        }
@@ -640,12 +616,8 @@
          "name": "arcade_sessions_user_id_users_id_fk",
          "tableFrom": "arcade_sessions",
          "tableTo": "users",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
          "onDelete": "cascade",
          "onUpdate": "no action"
        },
@@ -653,12 +625,8 @@
          "name": "arcade_sessions_room_id_arcade_rooms_id_fk",
          "tableFrom": "arcade_sessions",
          "tableTo": "arcade_rooms",
-          "columnsFrom": [
-            "room_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
+          "columnsFrom": ["room_id"],
+          "columnsTo": ["id"],
          "onDelete": "set null",
          "onUpdate": "no action"
        }
@@ -678,4 +646,4 @@
  "internal": {
    "indexes": {}
  }
-}
+}
--- a/apps/web/drizzle/meta/_journal.json
+++ b/apps/web/drizzle/meta/_journal.json
@@ -31,4 +31,4 @@
      "breakpoints": true
    }
  ]
-}
+}
--- a/apps/web/e2e/arcade-modal-session.spec.ts
+++ b/apps/web/e2e/arcade-modal-session.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'

 /**
 * Arcade Modal Session E2E Tests
@@ -77,7 +77,12 @@ test.describe('Arcade Modal Session - Redirects', () => {

    // Activate a player
    const addPlayerButton = page.locator('button:has-text("Add Player"), button:has-text("+")')
-    if (await addPlayerButton.first().isVisible({ timeout: 2000 }).catch(() => false)) {
+    if (
+      await addPlayerButton
+        .first()
+        .isVisible({ timeout: 2000 })
+        .catch(() => false)
+    ) {
      await addPlayerButton.first().click()
      await page.waitForTimeout(500)
    }
@@ -226,7 +231,9 @@ test.describe('Arcade Modal Session - Return to Arcade Button', () => {
    await page.waitForLoadState('networkidle')
  })

-  test('should end session and return to arcade when clicking "Return to Arcade"', async ({ page }) => {
+  test('should end session and return to arcade when clicking "Return to Arcade"', async ({
+    page,
+  }) => {
    // Start a game
    await page.goto('/arcade/matching')
    await page.waitForLoadState('networkidle')
@@ -253,7 +260,12 @@ test.describe('Arcade Modal Session - Return to Arcade Button', () => {

      // Now should be able to modify players again
      const addPlayerButton = page.locator('button:has-text("Add Player"), button:has-text("+")')
-      if (await addPlayerButton.first().isVisible({ timeout: 2000 }).catch(() => false)) {
+      if (
+        await addPlayerButton
+          .first()
+          .isVisible({ timeout: 2000 })
+          .catch(() => false)
+      ) {
        await expect(addPlayerButton.first()).toBeEnabled()
      }
    }
@@ -265,8 +277,15 @@ test.describe('Arcade Modal Session - Return to Arcade Button', () => {
    await page.waitForLoadState('networkidle')

    // Return to arcade
-    const returnButton = page.locator('button:has-text("Return to Arcade"), button:has-text("Setup")')
-    if (await returnButton.first().isVisible({ timeout: 2000 }).catch(() => false)) {
+    const returnButton = page.locator(
+      'button:has-text("Return to Arcade"), button:has-text("Setup")'
+    )
+    if (
+      await returnButton
+        .first()
+        .isVisible({ timeout: 2000 })
+        .catch(() => false)
+    ) {
      await returnButton.first().click()
      await page.waitForTimeout(1000)
    }
--- a/apps/web/e2e/mini-nav-persistence.spec.ts
+++ b/apps/web/e2e/mini-nav-persistence.spec.ts
@@ -1,7 +1,9 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'

 test.describe('Mini Navigation Game Name Persistence', () => {
-  test('should not show game name when navigating back to games page from a specific game', async ({ page }) => {
+  test('should not show game name when navigating back to games page from a specific game', async ({
+    page,
+  }) => {
    // Override baseURL for this test to match running dev server
    const baseURL = 'http://localhost:3000'

@@ -73,7 +75,9 @@ test.describe('Mini Navigation Game Name Persistence', () => {
    await expect(page.locator('text=🧠 Memory Lightning')).not.toBeVisible()
  })

-  test('should not persist game name when navigating through intermediate pages', async ({ page }) => {
+  test('should not persist game name when navigating through intermediate pages', async ({
+    page,
+  }) => {
    // Override baseURL for this test to match running dev server
    const baseURL = 'http://localhost:3000'

@@ -108,4 +112,4 @@ test.describe('Mini Navigation Game Name Persistence', () => {
    await expect(memoryLightningName).not.toBeVisible()
    await expect(memoryPairsName).not.toBeVisible()
  })
-})
+})
--- a/apps/web/e2e/nav-slot.spec.ts
+++ b/apps/web/e2e/nav-slot.spec.ts
@@ -1,7 +1,9 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'

 test.describe('Game navigation slots', () => {
-  test('should show Memory Pairs game name in nav when navigating to matching game', async ({ page }) => {
+  test('should show Memory Pairs game name in nav when navigating to matching game', async ({
+    page,
+  }) => {
    await page.goto('/games/matching')

    // Wait for the page to load
@@ -13,7 +15,9 @@ test.describe('Game navigation slots', () => {
    await expect(gameNav).toContainText('Memory Pairs')
  })

-  test('should show Memory Lightning game name in nav when navigating to memory quiz', async ({ page }) => {
+  test('should show Memory Lightning game name in nav when navigating to memory quiz', async ({
+    page,
+  }) => {
    await page.goto('/games/memory-quiz')

    // Wait for the page to load
@@ -70,4 +74,4 @@ test.describe('Game navigation slots', () => {
    const gameNavs = page.locator('h1:has-text("Memory Pairs"), h1:has-text("Memory Lightning")')
    await expect(gameNavs).toHaveCount(0)
  })
-})
+})
--- a/apps/web/e2e/sound-settings-persistence.spec.ts
+++ b/apps/web/e2e/sound-settings-persistence.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'

 test.describe('Sound Settings Persistence', () => {
  test.beforeEach(async ({ page }) => {
@@ -14,13 +14,13 @@ test.describe('Sound Settings Persistence', () => {
    await page.getByRole('button', { name: /style/i }).click()

    // Find and toggle the sound switch (should be off by default)
-    const soundSwitch = page.locator('[role="switch"]').filter({ hasText: /sound/i }).or(
-      page.locator('input[type="checkbox"]').filter({ hasText: /sound/i })
-    ).or(
-      page.getByLabel(/sound/i)
-    ).or(
-      page.locator('button').filter({ hasText: /sound/i })
-    ).first()
+    const soundSwitch = page
+      .locator('[role="switch"]')
+      .filter({ hasText: /sound/i })
+      .or(page.locator('input[type="checkbox"]').filter({ hasText: /sound/i }))
+      .or(page.getByLabel(/sound/i))
+      .or(page.locator('button').filter({ hasText: /sound/i }))
+      .first()

    await soundSwitch.click()

@@ -37,13 +37,13 @@ test.describe('Sound Settings Persistence', () => {
    await page.reload()
    await page.getByRole('button', { name: /style/i }).click()

-    const soundSwitchAfterReload = page.locator('[role="switch"]').filter({ hasText: /sound/i }).or(
-      page.locator('input[type="checkbox"]').filter({ hasText: /sound/i })
-    ).or(
-      page.getByLabel(/sound/i)
-    ).or(
-      page.locator('button').filter({ hasText: /sound/i })
-    ).first()
+    const soundSwitchAfterReload = page
+      .locator('[role="switch"]')
+      .filter({ hasText: /sound/i })
+      .or(page.locator('input[type="checkbox"]').filter({ hasText: /sound/i }))
+      .or(page.getByLabel(/sound/i))
+      .or(page.locator('button').filter({ hasText: /sound/i }))
+      .first()

    await expect(soundSwitchAfterReload).toBeChecked()
  })
@@ -55,9 +55,10 @@ test.describe('Sound Settings Persistence', () => {
    await page.getByRole('button', { name: /style/i }).click()

    // Find volume slider
-    const volumeSlider = page.locator('input[type="range"]').or(
-      page.locator('[role="slider"]')
-    ).first()
+    const volumeSlider = page
+      .locator('input[type="range"]')
+      .or(page.locator('[role="slider"]'))
+      .first()

    // Set volume to a specific value (e.g., 0.6)
    await volumeSlider.fill('60') // Assuming 0-100 range
@@ -75,9 +76,10 @@ test.describe('Sound Settings Persistence', () => {
    await page.reload()
    await page.getByRole('button', { name: /style/i }).click()

-    const volumeSliderAfterReload = page.locator('input[type="range"]').or(
-      page.locator('[role="slider"]')
-    ).first()
+    const volumeSliderAfterReload = page
+      .locator('input[type="range"]')
+      .or(page.locator('[role="slider"]'))
+      .first()

    const volumeValue = await volumeSliderAfterReload.inputValue()
    expect(parseFloat(volumeValue)).toBeCloseTo(60, 0) // Allow for some variance
@@ -116,4 +118,4 @@ test.describe('Sound Settings Persistence', () => {
    expect(storedConfig.soundEnabled).toBe(true)
    expect(storedConfig.soundVolume).toBe(0.8)
  })
-})
+})
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -0,0 +1,42 @@
+// Minimal ESLint flat config ONLY for react-hooks rules
+
+import tsParser from '@typescript-eslint/parser'
+import reactHooks from 'eslint-plugin-react-hooks'
+
+const config = [
+  { ignores: ['dist', '.next', 'coverage', 'node_modules', 'styled-system', 'storybook-static'] },
+  {
+    files: ['**/*.tsx', '**/*.ts', '**/*.jsx', '**/*.js'],
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        React: 'readonly',
+        JSX: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        localStorage: 'readonly',
+        sessionStorage: 'readonly',
+        fetch: 'readonly',
+        global: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'off',
+    },
+  },
+]
+
+export default config
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -64,4 +64,4 @@ const nextConfig = {
  },
 }

-module.exports = nextConfig
+module.exports = nextConfig
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -6,7 +6,12 @@
    "dev": "concurrently \"node server.js\" \"npx @pandacss/dev --watch\"",
    "build": "node scripts/generate-build-info.js && next build",
    "start": "NODE_ENV=production node server.js",
-    "lint": "next lint",
+    "lint": "npx @biomejs/biome lint . && npx eslint .",
+    "lint:fix": "npx @biomejs/biome lint . --write && npx eslint . --fix",
+    "format": "npx @biomejs/biome format . --write",
+    "format:check": "npx @biomejs/biome format .",
+    "check": "npx @biomejs/biome check .",
+    "pre-commit": "npm run type-check && npm run format && npm run lint:fix && npm run lint",
    "test": "vitest",
    "test:run": "vitest run",
    "type-check": "tsc --noEmit",
@@ -23,10 +28,6 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@myriaddreamin/typst-all-in-one.ts": "0.6.1-rc3",
-    "@myriaddreamin/typst-ts-renderer": "0.6.1-rc3",
-    "@myriaddreamin/typst-ts-web-compiler": "0.6.1-rc3",
-    "@myriaddreamin/typst.ts": "0.6.1-rc3",
    "@number-flow/react": "^0.5.10",
    "@pandacss/dev": "^0.20.0",
    "@paralleldrive/cuid2": "^2.2.2",
--- a/apps/web/panda.config.ts
+++ b/apps/web/panda.config.ts
@@ -36,17 +36,23 @@ export default defineConfig({
            wood: { value: '#8B4513' },
            bead: { value: '#2C1810' },
            inactive: { value: '#D3D3D3' },
-            bar: { value: '#654321' }
-          }
+            bar: { value: '#654321' },
+          },
        },
        fonts: {
-          body: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-          heading: { value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
-          mono: { value: 'Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace' }
+          body: {
+            value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          },
+          heading: {
+            value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          },
+          mono: {
+            value: 'Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
+          },
        },
        shadows: {
          card: { value: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' },
-          modal: { value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }
+          modal: { value: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' },
        },
        animations: {
          // Shake animation for errors (web_generator.py line 3419)
@@ -60,49 +66,51 @@ export default defineConfig({
          bounce: { value: 'bounce 1s infinite alternate' },
          bounceIn: { value: 'bounceIn 1s ease-out' },
          // Glow animation (line 6260)
-          glow: { value: 'glow 1s ease-in-out infinite alternate' }
-        }
+          glow: { value: 'glow 1s ease-in-out infinite alternate' },
+        },
      },
      keyframes: {
        // Shake - horizontal oscillation for errors (line 3419)
        shake: {
          '0%, 100%': { transform: 'translateX(0)' },
          '25%': { transform: 'translateX(-5px)' },
-          '75%': { transform: 'translateX(5px)' }
+          '75%': { transform: 'translateX(5px)' },
        },
        // Success pulse - gentle scale for correct answers (line 2004)
        successPulse: {
          '0%, 100%': { transform: 'scale(1)' },
-          '50%': { transform: 'scale(1.05)' }
+          '50%': { transform: 'scale(1.05)' },
        },
        // Pulse - continuous breathing effect (line 6255)
        pulse: {
          '0%, 100%': { transform: 'scale(1)' },
-          '50%': { transform: 'scale(1.05)' }
+          '50%': { transform: 'scale(1.05)' },
        },
        // Error shake - stronger horizontal oscillation (line 2009)
        errorShake: {
          '0%, 100%': { transform: 'translateX(0)' },
          '25%': { transform: 'translateX(-10px)' },
-          '75%': { transform: 'translateX(10px)' }
+          '75%': { transform: 'translateX(10px)' },
        },
        // Bounce - vertical oscillation (line 6271)
        bounce: {
          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-10px)' }
+          '50%': { transform: 'translateY(-10px)' },
        },
        // Bounce in - entry animation with scale and rotate (line 6265)
        bounceIn: {
          '0%': { transform: 'scale(0.3) rotate(-10deg)', opacity: '0' },
          '50%': { transform: 'scale(1.1) rotate(5deg)' },
-          '100%': { transform: 'scale(1) rotate(0deg)', opacity: '1' }
+          '100%': { transform: 'scale(1) rotate(0deg)', opacity: '1' },
        },
        // Glow - expanding box shadow (line 6260)
        glow: {
          '0%': { boxShadow: '0 0 5px rgba(255, 255, 255, 0.5)' },
-          '100%': { boxShadow: '0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6)' }
-        }
-      }
-    }
-  }
-})
+          '100%': {
+            boxShadow: '0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6)',
+          },
+        },
+      },
+    },
+  },
+})
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -24,4 +24,4 @@ export default defineConfig({
    url: 'http://localhost:3002',
    reuseExistingServer: !process.env.CI,
  },
-})
+})
--- a/apps/web/scripts/generate-build-info.js
+++ b/apps/web/scripts/generate-build-info.js
@@ -5,26 +5,26 @@
 * This script captures git commit, branch, timestamp, and other metadata
 */

-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')

 function exec(command) {
  try {
-    return execSync(command, { encoding: 'utf-8' }).trim();
-  } catch (error) {
-    return null;
+    return execSync(command, { encoding: 'utf-8' }).trim()
+  } catch (_error) {
+    return null
  }
 }

 function getBuildInfo() {
-  const gitCommit = exec('git rev-parse HEAD');
-  const gitCommitShort = exec('git rev-parse --short HEAD');
-  const gitBranch = exec('git rev-parse --abbrev-ref HEAD');
-  const gitTag = exec('git describe --tags --exact-match 2>/dev/null');
-  const gitDirty = exec('git diff --quiet || echo "dirty"') === 'dirty';
+  const gitCommit = exec('git rev-parse HEAD')
+  const gitCommitShort = exec('git rev-parse --short HEAD')
+  const gitBranch = exec('git rev-parse --abbrev-ref HEAD')
+  const gitTag = exec('git describe --tags --exact-match 2>/dev/null')
+  const gitDirty = exec('git diff --quiet || echo "dirty"') === 'dirty'

-  const packageJson = require('../package.json');
+  const packageJson = require('../package.json')

  return {
    version: packageJson.version,
@@ -40,19 +40,19 @@ function getBuildInfo() {
    environment: process.env.NODE_ENV || 'development',
    buildNumber: process.env.BUILD_NUMBER || null,
    nodeVersion: process.version,
-  };
+  }
 }

-const buildInfo = getBuildInfo();
-const outputPath = path.join(__dirname, '..', 'src', 'generated', 'build-info.json');
+const buildInfo = getBuildInfo()
+const outputPath = path.join(__dirname, '..', 'src', 'generated', 'build-info.json')

 // Ensure directory exists
-const dir = path.dirname(outputPath);
+const dir = path.dirname(outputPath)
 if (!fs.existsSync(dir)) {
-  fs.mkdirSync(dir, { recursive: true });
+  fs.mkdirSync(dir, { recursive: true })
 }

-fs.writeFileSync(outputPath, JSON.stringify(buildInfo, null, 2));
+fs.writeFileSync(outputPath, JSON.stringify(buildInfo, null, 2))

-console.log('✅ Build info generated:', outputPath);
-console.log(JSON.stringify(buildInfo, null, 2));
+console.log('✅ Build info generated:', outputPath)
+console.log(JSON.stringify(buildInfo, null, 2))
--- a/apps/web/socket-server.ts
+++ b/apps/web/socket-server.ts
@@ -1,11 +1,11 @@
-import { Server as SocketIOServer } from 'socket.io'
 import type { Server as HTTPServer } from 'http'
+import { Server as SocketIOServer } from 'socket.io'
 import {
-  getArcadeSession,
  applyGameMove,
-  updateSessionActivity,
-  deleteArcadeSession,
  createArcadeSession,
+  deleteArcadeSession,
+  getArcadeSession,
+  updateSessionActivity,
 } from './src/lib/arcade/session-manager'
 import type { GameMove } from './src/lib/arcade/validation'
 import { matchingGameValidator } from './src/lib/arcade/validation/MatchingGameValidator'
@@ -56,7 +56,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
        moveType: data.move.type,
        playerId: data.move.playerId,
        timestamp: data.move.timestamp,
-        fullMove: JSON.stringify(data.move, null, 2)
+        fullMove: JSON.stringify(data.move, null, 2),
      })

      try {
--- a/apps/web/src/app/tests/layout.nav.test.tsx
+++ b/apps/web/src/app/tests/layout.nav.test.tsx
@@ -1,62 +1,33 @@
 import { render, screen } from '@testing-library/react'
 import RootLayout from '../layout'

-// Mock AppNavBar to verify it receives the nav prop
-const MockAppNavBar = ({ navSlot }: { navSlot?: React.ReactNode }) => (
-  <div data-testid="app-nav-bar">
-    {navSlot && <div data-testid="nav-slot-content">{navSlot}</div>}
-  </div>
-)
-
-jest.mock('../../components/AppNavBar', () => ({
-  AppNavBar: MockAppNavBar,
+// Mock ClientProviders
+vi.mock('../../components/ClientProviders', () => ({
+  ClientProviders: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="client-providers">{children}</div>
+  ),
 }))

-// Mock all context providers
-jest.mock('../../contexts/AbacusDisplayContext', () => ({
-  AbacusDisplayProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
-jest.mock('../../contexts/UserProfileContext', () => ({
-  UserProfileProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
-jest.mock('../../contexts/GameModeContext', () => ({
-  GameModeProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
-jest.mock('../../contexts/FullscreenContext', () => ({
-  FullscreenProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
-describe('RootLayout with nav slot', () => {
-  it('passes nav slot to AppNavBar', () => {
-    const navContent = <div>Memory Lightning</div>
+describe('RootLayout', () => {
+  it('renders children with ClientProviders', () => {
    const pageContent = <div>Page content</div>

-    render(
-      <RootLayout nav={navContent}>
-        {pageContent}
-      </RootLayout>
-    )
+    render(<RootLayout>{pageContent}</RootLayout>)

-    expect(screen.getByTestId('app-nav-bar')).toBeInTheDocument()
-    expect(screen.getByTestId('nav-slot-content')).toBeInTheDocument()
-    expect(screen.getByText('Memory Lightning')).toBeInTheDocument()
+    expect(screen.getByTestId('client-providers')).toBeInTheDocument()
    expect(screen.getByText('Page content')).toBeInTheDocument()
  })

-  it('works without nav slot', () => {
-    const pageContent = <div>Page content</div>
+  it('renders html and body tags', () => {
+    const pageContent = <div>Test content</div>

-    render(
-      <RootLayout nav={null}>
-        {pageContent}
-      </RootLayout>
-    )
+    const { container } = render(<RootLayout>{pageContent}</RootLayout>)

-    expect(screen.getByTestId('app-nav-bar')).toBeInTheDocument()
-    expect(screen.queryByTestId('nav-slot-content')).not.toBeInTheDocument()
-    expect(screen.getByText('Page content')).toBeInTheDocument()
+    const html = container.querySelector('html')
+    const body = container.querySelector('body')
+
+    expect(html).toBeInTheDocument()
+    expect(html).toHaveAttribute('lang', 'en')
+    expect(body).toBeInTheDocument()
  })
-})
+})
--- a/apps/web/src/app/abacus-test/page.tsx
+++ b/apps/web/src/app/abacus-test/page.tsx
@@ -1,8 +1,8 @@
 'use client'

 import { AbacusReact } from '@soroban/abacus-react'
-import { css } from '../../../styled-system/css'
 import { useState } from 'react'
+import { css } from '../../../styled-system/css'

 export default function AbacusTestPage() {
  const [value, setValue] = useState(0)
@@ -15,32 +15,36 @@ export default function AbacusTestPage() {
  }

  return (
-    <div className={css({
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      bg: 'gray.50',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '4'
-    })}>
+    <div
+      className={css({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        bg: 'gray.50',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '4',
+      })}
+    >
      {/* Debug info */}
-      <div className={css({
-        position: 'absolute',
-        top: '4',
-        left: '4',
-        bg: 'white',
-        p: '3',
-        rounded: 'md',
-        border: '1px solid',
-        borderColor: 'gray.300',
-        fontSize: 'sm',
-        fontFamily: 'mono'
-      })}>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '4',
+          left: '4',
+          bg: 'white',
+          p: '3',
+          rounded: 'md',
+          border: '1px solid',
+          borderColor: 'gray.300',
+          fontSize: 'sm',
+          fontFamily: 'mono',
+        })}
+      >
        <div>Current Value: {value}</div>
        <div>{debugInfo}</div>
        <button
@@ -53,7 +57,7 @@ export default function AbacusTestPage() {
            color: 'white',
            rounded: 'sm',
            fontSize: 'xs',
-            cursor: 'pointer'
+            cursor: 'pointer',
          })}
        >
          Reset to 0
@@ -68,20 +72,22 @@ export default function AbacusTestPage() {
            color: 'white',
            rounded: 'sm',
            fontSize: 'xs',
-            cursor: 'pointer'
+            cursor: 'pointer',
          })}
        >
          Set to 12345
        </button>
      </div>

-      <div style={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
        <AbacusReact
          value={value}
          columns={5}
@@ -97,4 +103,4 @@ export default function AbacusTestPage() {
      </div>
    </div>
  )
-}
+}
--- a/apps/web/src/app/api/abacus-settings/route.ts
+++ b/apps/web/src/app/api/abacus-settings/route.ts
@@ -1,7 +1,7 @@
-import { NextResponse, NextRequest } from 'next/server'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
 import { db } from '@/db'
 import * as schema from '@/db/schema'
-import { eq } from 'drizzle-orm'
 import { getViewerId } from '@/lib/viewer'

 /**
@@ -30,10 +30,7 @@ export async function GET() {
    return NextResponse.json({ settings })
  } catch (error) {
    console.error('Failed to fetch abacus settings:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch abacus settings' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to fetch abacus settings' }, { status: 500 })
  }
 }

@@ -75,10 +72,7 @@ export async function PATCH(req: NextRequest) {
    return NextResponse.json({ settings: updatedSettings })
  } catch (error) {
    console.error('Failed to update abacus settings:', error)
-    return NextResponse.json(
-      { error: 'Failed to update abacus settings' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to update abacus settings' }, { status: 500 })
  }
 }

--- a/apps/web/src/app/api/arcade-session/tests/route.test.ts
+++ b/apps/web/src/app/api/arcade-session/tests/route.test.ts
@@ -1,9 +1,9 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { GET, POST, DELETE } from '../route'
-import { NextRequest } from 'next/server'
-import { db, schema } from '@/db'
 import { eq } from 'drizzle-orm'
+import { NextRequest } from 'next/server'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '@/db'
 import { deleteArcadeSession } from '@/lib/arcade/session-manager'
+import { DELETE, GET, POST } from '../route'

 describe('Arcade Session API Routes', () => {
  const testUserId = 'test-user-for-api-routes'
@@ -100,9 +100,7 @@ describe('Arcade Session API Routes', () => {
      await POST(createRequest)

      // Now retrieve it
-      const request = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=${testUserId}`
-      )
+      const request = new NextRequest(`${baseUrl}/api/arcade-session?userId=${testUserId}`)

      const response = await GET(request)
      const data = await response.json()
@@ -113,9 +111,7 @@ describe('Arcade Session API Routes', () => {
    })

    it('should return 404 for non-existent session', async () => {
-      const request = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=non-existent`
-      )
+      const request = new NextRequest(`${baseUrl}/api/arcade-session?userId=non-existent`)

      const response = await GET(request)

@@ -149,10 +145,9 @@ describe('Arcade Session API Routes', () => {
      await POST(createRequest)

      // Now delete it
-      const request = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=${testUserId}`,
-        { method: 'DELETE' }
-      )
+      const request = new NextRequest(`${baseUrl}/api/arcade-session?userId=${testUserId}`, {
+        method: 'DELETE',
+      })

      const response = await DELETE(request)
      const data = await response.json()
@@ -161,9 +156,7 @@ describe('Arcade Session API Routes', () => {
      expect(data.success).toBe(true)

      // Verify it's deleted
-      const getRequest = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=${testUserId}`
-      )
+      const getRequest = new NextRequest(`${baseUrl}/api/arcade-session?userId=${testUserId}`)
      const getResponse = await GET(getRequest)
      expect(getResponse.status).toBe(404)
    })
--- a/apps/web/src/app/api/arcade-session/route.ts
+++ b/apps/web/src/app/api/arcade-session/route.ts
@@ -1,8 +1,8 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import {
  createArcadeSession,
-  getArcadeSession,
  deleteArcadeSession,
+  getArcadeSession,
 } from '@/lib/arcade/session-manager'
 import type { GameName } from '@/lib/arcade/validation'

@@ -50,10 +50,7 @@ export async function POST(request: NextRequest) {
    const { userId, gameName, gameUrl, initialState, activePlayers } = body

    if (!userId || !gameName || !gameUrl || !initialState || !activePlayers) {
-      return NextResponse.json(
-        { error: 'Missing required fields' },
-        { status: 400 }
-      )
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 })
    }

    const session = await createArcadeSession({
--- a/apps/web/src/app/api/download/[id]/route.ts
+++ b/apps/web/src/app/api/download/[id]/route.ts
@@ -1,10 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { assetStore } from '@/lib/asset-store'

-export async function GET(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function GET(_request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params

@@ -15,30 +12,35 @@ export async function GET(
    const asset = await assetStore.get(id)
    if (!asset) {
      console.log('❌ Asset not found in store')
-      return NextResponse.json({
-        error: 'Asset not found or expired'
-      }, { status: 404 })
+      return NextResponse.json(
+        {
+          error: 'Asset not found or expired',
+        },
+        { status: 404 }
+      )
    }

    console.log('✅ Asset found, serving download')

    // Return file with appropriate headers
-    return new NextResponse(asset.data, {
+    return new NextResponse(new Uint8Array(asset.data), {
      status: 200,
      headers: {
        'Content-Type': asset.mimeType,
        'Content-Disposition': `attachment; filename="${asset.filename}"`,
        'Content-Length': asset.data.length.toString(),
        'Cache-Control': 'private, no-cache, no-store, must-revalidate',
-        'Expires': '0',
-        'Pragma': 'no-cache'
-      }
+        Expires: '0',
+        Pragma: 'no-cache',
+      },
    })
-
  } catch (error) {
    console.error('❌ Download failed:', error)
-    return NextResponse.json({
-      error: 'Failed to download file'
-    }, { status: 500 })
+    return NextResponse.json(
+      {
+        error: 'Failed to download file',
+      },
+      { status: 500 }
+    )
  }
-}
+}
--- a/apps/web/src/app/api/download/assets/[id]/route.ts
+++ b/apps/web/src/app/api/download/assets/[id]/route.ts
@@ -1,19 +1,13 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 import { assetStore } from '@/lib/asset-store'

-export async function GET(
-  request: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function GET(_request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params

    const asset = await assetStore.get(id)
    if (!asset) {
-      return NextResponse.json(
-        { error: 'Asset not found' },
-        { status: 404 }
-      )
+      return NextResponse.json({ error: 'Asset not found' }, { status: 404 })
    }

    // Set appropriate headers for download
@@ -23,16 +17,12 @@ export async function GET(
    headers.set('Content-Length', asset.data.length.toString())
    headers.set('Cache-Control', 'no-cache, no-store, must-revalidate')

-    return new NextResponse(asset.data, {
+    return new NextResponse(new Uint8Array(asset.data), {
      status: 200,
-      headers
+      headers,
    })
-
  } catch (error) {
    console.error('Asset download error:', error)
-    return NextResponse.json(
-      { error: 'Failed to download asset' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to download asset' }, { status: 500 })
  }
-}
+}
--- a/apps/web/src/app/api/generate/route.ts
+++ b/apps/web/src/app/api/generate/route.ts
@@ -1,5 +1,5 @@
-import { NextRequest, NextResponse } from 'next/server'
 import { SorobanGenerator } from '@soroban/core'
+import { type NextRequest, NextResponse } from 'next/server'
 import path from 'path'

 // Global generator instance for better performance
@@ -36,14 +36,17 @@ export async function POST(request: NextRequest) {
    // Check dependencies before generating
    const deps = await gen.checkDependencies?.()
    if (deps && (!deps.python || !deps.typst)) {
-      return NextResponse.json({
-        error: 'Missing system dependencies',
-        details: {
-          python: deps.python ? '✅ Available' : '❌ Missing Python 3',
-          typst: deps.typst ? '✅ Available' : '❌ Missing Typst',
-          qpdf: deps.qpdf ? '✅ Available' : '⚠️ Missing qpdf (optional)'
-        }
-      }, { status: 500 })
+      return NextResponse.json(
+        {
+          error: 'Missing system dependencies',
+          details: {
+            python: deps.python ? '✅ Available' : '❌ Missing Python 3',
+            typst: deps.typst ? '✅ Available' : '❌ Missing Typst',
+            qpdf: deps.qpdf ? '✅ Available' : '⚠️ Missing qpdf (optional)',
+          },
+        },
+        { status: 500 }
+      )
    }

    // Generate flashcards using Python via TypeScript bindings
@@ -52,36 +55,38 @@ export async function POST(request: NextRequest) {

    // SorobanGenerator.generate() returns PDF data directly as Buffer
    if (!Buffer.isBuffer(result)) {
-      throw new Error('Expected PDF Buffer from generator, got: ' + typeof result)
+      throw new Error(`Expected PDF Buffer from generator, got: ${typeof result}`)
    }
    const pdfBuffer = result
    // Create filename for download
    const filename = `soroban-flashcards-${config.range || 'cards'}.pdf`

    // Return PDF directly as download
-    return new NextResponse(pdfBuffer, {
+    return new NextResponse(new Uint8Array(pdfBuffer), {
      headers: {
        'Content-Type': 'application/pdf',
        'Content-Disposition': `attachment; filename="${filename}"`,
-        'Content-Length': pdfBuffer.length.toString()
-      }
+        'Content-Length': pdfBuffer.length.toString(),
+      },
    })
-
  } catch (error) {
    console.error('❌ Generation failed:', error)

-    return NextResponse.json({
-      error: 'Failed to generate flashcards',
-      details: error instanceof Error ? error.message : 'Unknown error',
-      success: false
-    }, { status: 500 })
+    return NextResponse.json(
+      {
+        error: 'Failed to generate flashcards',
+        details: error instanceof Error ? error.message : 'Unknown error',
+        success: false,
+      },
+      { status: 500 }
+    )
  }
 }

 // Helper functions to calculate metadata
-function calculateCardCount(range: string, step: number): number {
+function _calculateCardCount(range: string, step: number): number {
  if (range.includes('-')) {
-    const [start, end] = range.split('-').map(n => parseInt(n) || 0)
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10) || 0)
    return Math.floor((end - start + 1) / step)
  }

@@ -92,9 +97,9 @@ function calculateCardCount(range: string, step: number): number {
  return 1
 }

-function generateNumbersFromRange(range: string, step: number): number[] {
+function _generateNumbersFromRange(range: string, step: number): number[] {
  if (range.includes('-')) {
-    const [start, end] = range.split('-').map(n => parseInt(n) || 0)
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10) || 0)
    const numbers: number[] = []
    for (let i = start; i <= end; i += step) {
      numbers.push(i)
@@ -104,26 +109,29 @@ function generateNumbersFromRange(range: string, step: number): number[] {
  }

  if (range.includes(',')) {
-    return range.split(',').map(n => parseInt(n.trim()) || 0)
+    return range.split(',').map((n) => parseInt(n.trim(), 10) || 0)
  }

-  return [parseInt(range) || 0]
+  return [parseInt(range, 10) || 0]
 }

 // Health check endpoint
 export async function GET() {
  try {
    const gen = await getGenerator()
-    const deps = await gen.checkDependencies?.() || { python: true, typst: true, qpdf: true }
+    const deps = (await gen.checkDependencies?.()) || { python: true, typst: true, qpdf: true }

    return NextResponse.json({
      status: 'healthy',
-      dependencies: deps
+      dependencies: deps,
    })
  } catch (error) {
-    return NextResponse.json({
-      status: 'unhealthy',
-      error: error instanceof Error ? error.message : 'Unknown error'
-    }, { status: 500 })
+    return NextResponse.json(
+      {
+        status: 'unhealthy',
+        error: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 }
+    )
  }
-}
+}
--- a/apps/web/src/app/api/players/[id]/route.ts
+++ b/apps/web/src/app/api/players/[id]/route.ts
@@ -1,16 +1,13 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { and, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
 import { db, schema } from '@/db'
 import { getViewerId } from '@/lib/viewer'
-import { eq, and } from 'drizzle-orm'

 /**
 * PATCH /api/players/[id]
 * Update a player (only if it belongs to the current viewer)
 */
-export async function PATCH(
-  req: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function PATCH(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    const viewerId = await getViewerId()
    const body = await req.json()
@@ -21,10 +18,7 @@ export async function PATCH(
    })

    if (!user) {
-      return NextResponse.json(
-        { error: 'User not found' },
-        { status: 404 }
-      )
+      return NextResponse.json({ error: 'User not found' }, { status: 404 })
    }

    // Check if user has an active arcade session
@@ -39,7 +33,7 @@ export async function PATCH(
          {
            error: 'Cannot modify active players during an active game session',
            activeGame: activeSession.currentGame,
-            gameUrl: activeSession.gameUrl
+            gameUrl: activeSession.gameUrl,
          },
          { status: 403 }
        )
@@ -57,28 +51,17 @@ export async function PATCH(
        ...(body.isActive !== undefined && { isActive: body.isActive }),
        // userId is explicitly NOT included - it comes from session
      })
-      .where(
-        and(
-          eq(schema.players.id, params.id),
-          eq(schema.players.userId, user.id)
-        )
-      )
+      .where(and(eq(schema.players.id, params.id), eq(schema.players.userId, user.id)))
      .returning()

    if (!updatedPlayer) {
-      return NextResponse.json(
-        { error: 'Player not found or unauthorized' },
-        { status: 404 }
-      )
+      return NextResponse.json({ error: 'Player not found or unauthorized' }, { status: 404 })
    }

    return NextResponse.json({ player: updatedPlayer })
  } catch (error) {
    console.error('Failed to update player:', error)
-    return NextResponse.json(
-      { error: 'Failed to update player' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to update player' }, { status: 500 })
  }
 }

@@ -86,10 +69,7 @@ export async function PATCH(
 * DELETE /api/players/[id]
 * Delete a player (only if it belongs to the current viewer)
 */
-export async function DELETE(
-  req: NextRequest,
-  { params }: { params: { id: string } }
-) {
+export async function DELETE(_req: NextRequest, { params }: { params: { id: string } }) {
  try {
    const viewerId = await getViewerId()

@@ -99,36 +79,22 @@ export async function DELETE(
    })

    if (!user) {
-      return NextResponse.json(
-        { error: 'User not found' },
-        { status: 404 }
-      )
+      return NextResponse.json({ error: 'User not found' }, { status: 404 })
    }

    // Delete player (only if it belongs to this user)
    const [deletedPlayer] = await db
      .delete(schema.players)
-      .where(
-        and(
-          eq(schema.players.id, params.id),
-          eq(schema.players.userId, user.id)
-        )
-      )
+      .where(and(eq(schema.players.id, params.id), eq(schema.players.userId, user.id)))
      .returning()

    if (!deletedPlayer) {
-      return NextResponse.json(
-        { error: 'Player not found or unauthorized' },
-        { status: 404 }
-      )
+      return NextResponse.json({ error: 'Player not found or unauthorized' }, { status: 404 })
    }

    return NextResponse.json({ success: true, player: deletedPlayer })
  } catch (error) {
    console.error('Failed to delete player:', error)
-    return NextResponse.json(
-      { error: 'Failed to delete player' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to delete player' }, { status: 500 })
  }
 }
--- a/apps/web/src/app/api/players/tests/arcade-session-validation.e2e.test.ts
+++ b/apps/web/src/app/api/players/tests/arcade-session-validation.e2e.test.ts
@@ -2,11 +2,11 @@
 * @vitest-environment node
 */

-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { db, schema } from '../../../../db'
 import { eq } from 'drizzle-orm'
-import { PATCH } from '../[id]/route'
 import { NextRequest } from 'next/server'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../../../../db'
+import { PATCH } from '../[id]/route'

 /**
 * Arcade Session Validation E2E Tests
@@ -23,10 +23,7 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
  beforeEach(async () => {
    // Create a test user with unique guest ID
    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
-    const [user] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId })
-      .returning()
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
    testUserId = user.id

    // Create a test player
@@ -66,17 +63,14 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
    })

    // Mock request to change isActive
-    const mockRequest = new NextRequest(
-      `http://localhost:3000/api/players/${testPlayerId}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({ isActive: true }),
-      }
-    )
+    const mockRequest = new NextRequest(`http://localhost:3000/api/players/${testPlayerId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({ isActive: true }),
+    })

    // Mock getViewerId by setting cookie
    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
@@ -99,17 +93,14 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
    // No arcade session created

    // Mock request to change isActive
-    const mockRequest = new NextRequest(
-      `http://localhost:3000/api/players/${testPlayerId}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({ isActive: true }),
-      }
-    )
+    const mockRequest = new NextRequest(`http://localhost:3000/api/players/${testPlayerId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({ isActive: true }),
+    })

    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
    const data = await response.json()
@@ -141,21 +132,18 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
    })

    // Mock request to change name/emoji/color (NOT isActive)
-    const mockRequest = new NextRequest(
-      `http://localhost:3000/api/players/${testPlayerId}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({
-          name: 'Updated Name',
-          emoji: '🎉',
-          color: '#ff0000',
-        }),
-      }
-    )
+    const mockRequest = new NextRequest(`http://localhost:3000/api/players/${testPlayerId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({
+        name: 'Updated Name',
+        emoji: '🎉',
+        color: '#ff0000',
+      }),
+    })

    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
    const data = await response.json()
@@ -194,17 +182,14 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
    await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.userId, testGuestId))

    // Mock request to change isActive
-    const mockRequest = new NextRequest(
-      `http://localhost:3000/api/players/${testPlayerId}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({ isActive: true }),
-      }
-    )
+    const mockRequest = new NextRequest(`http://localhost:3000/api/players/${testPlayerId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({ isActive: true }),
+    })

    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
    const data = await response.json()
@@ -242,33 +227,27 @@ describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
    })

    // Try to toggle player1 (inactive -> active) - should fail
-    const request1 = new NextRequest(
-      `http://localhost:3000/api/players/${testPlayerId}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({ isActive: true }),
-      }
-    )
+    const request1 = new NextRequest(`http://localhost:3000/api/players/${testPlayerId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({ isActive: true }),
+    })

    const response1 = await PATCH(request1, { params: { id: testPlayerId } })
    expect(response1.status).toBe(403)

    // Try to toggle player2 (active -> inactive) - should also fail
-    const request2 = new NextRequest(
-      `http://localhost:3000/api/players/${player2.id}`,
-      {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-          Cookie: `guest_id=${testGuestId}`,
-        },
-        body: JSON.stringify({ isActive: false }),
-      }
-    )
+    const request2 = new NextRequest(`http://localhost:3000/api/players/${player2.id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: `guest_id=${testGuestId}`,
+      },
+      body: JSON.stringify({ isActive: false }),
+    })

    const response2 = await PATCH(request2, { params: { id: player2.id } })
    expect(response2.status).toBe(403)
--- a/apps/web/src/app/api/players/route.ts
+++ b/apps/web/src/app/api/players/route.ts
@@ -1,7 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
 import { db, schema } from '@/db'
 import { getViewerId } from '@/lib/viewer'
-import { eq } from 'drizzle-orm'

 /**
 * GET /api/players
@@ -23,10 +23,7 @@ export async function GET() {
    return NextResponse.json({ players })
  } catch (error) {
    console.error('Failed to fetch players:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch players' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to fetch players' }, { status: 500 })
  }
 }

@@ -65,10 +62,7 @@ export async function POST(req: NextRequest) {
    return NextResponse.json({ player }, { status: 201 })
  } catch (error) {
    console.error('Failed to create player:', error)
-    return NextResponse.json(
-      { error: 'Failed to create player' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to create player' }, { status: 500 })
  }
 }

--- a/apps/web/src/app/api/preview/route.ts
+++ b/apps/web/src/app/api/preview/route.ts
@@ -1,164 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { generateSorobanSVG } from '@/lib/typst-soroban'
-
-export async function POST(request: NextRequest) {
-  try {
-    const config = await request.json()
-
-    // Debug: log the received config
-    console.log('🔍 Preview config:', JSON.stringify(config, null, 2))
-
-    // Ensure range is set with a default
-    if (!config.range) {
-      config.range = '0-9'
-    }
-
-    // For preview, limit to a few numbers and use SVG format for fast rendering
-    const previewConfig = {
-      ...config,
-      range: getPreviewRange(config.range),
-      format: 'svg', // Use SVG format for preview
-      cardsPerPage: 6 // Standard card layout
-    }
-
-    console.log('🔍 Processed preview config:', JSON.stringify(previewConfig, null, 2))
-
-    // Generate real SVG preview using typst.ts
-    console.log('🚀 Generating soroban SVG preview via typst.ts')
-
-    try {
-      // Parse the numbers from the range for individual cards
-      const numbers = parseNumbersFromRange(getPreviewRange(config.range))
-      console.log('🔍 Generating individual SVGs for numbers:', numbers)
-
-      // Generate individual SVGs for each number using typst.ts
-      const samples = []
-      for (const number of numbers) {
-        try {
-          const typstConfig = {
-            number: number,
-            beadShape: previewConfig.beadShape || 'diamond',
-            colorScheme: previewConfig.colorScheme || 'place-value',
-            hideInactiveBeads: previewConfig.hideInactiveBeads || false,
-            scaleFactor: previewConfig.scaleFactor || 1.0,
-            width: '200pt',
-            height: '250pt'
-          }
-          console.log(`🔍 Generating typst.ts SVG for number ${number}`)
-          const svg = await generateSorobanSVG(typstConfig)
-          console.log(`✅ Generated typst.ts SVG for ${number}, length: ${svg.length}`)
-          samples.push({
-            number,
-            front: svg,
-            back: number.toString()
-          })
-        } catch (error) {
-          console.error(`❌ Failed to generate SVG for number ${number}:`, error instanceof Error ? error.message : error)
-          samples.push({
-            number,
-            front: `<svg width="200" height="300" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
-              <rect x="10" y="10" width="180" height="280" fill="none" stroke="#ccc" stroke-width="2"/>
-              <line x1="20" y1="150" x2="180" y2="150" stroke="#ccc" stroke-width="2"/>
-              <text x="100" y="160" text-anchor="middle" font-size="24" fill="#666">SVG Error</text>
-              <text x="100" y="180" text-anchor="middle" font-size="16" fill="#999">${number}</text>
-            </svg>`,
-            back: number.toString()
-          })
-        }
-      }
-
-      return NextResponse.json({
-        count: numbers.length,
-        samples,
-        note: 'Real individual SVGs generated by typst.ts'
-      })
-
-    } catch (error) {
-      console.error('⚠️ Typst.ts SVG generation failed, using fallback preview:', error instanceof Error ? error.message : error)
-      return NextResponse.json(getMockPreviewData(config))
-    }
-
-  } catch (error) {
-    console.error('❌ Preview generation failed:', error)
-
-    // Always fall back to mock data for preview
-    const config = await request.json().catch(() => ({ range: '0-9' }))
-    return NextResponse.json(getMockPreviewData(config))
-  }
-}
-
-// Helper function to parse numbers from range string
-function parseNumbersFromRange(range: string): number[] {
-  if (!range) return [0, 1, 2]
-
-  if (range.includes('-')) {
-    const [start] = range.split('-')
-    const startNum = parseInt(start) || 0
-    return [startNum, startNum + 1, startNum + 2]
-  }
-
-  if (range.includes(',')) {
-    return range.split(',').slice(0, 3).map(n => parseInt(n.trim()) || 0)
-  }
-
-  const num = parseInt(range) || 0
-  return [num, num + 1, num + 2]
-}
-
-// Helper function to limit range for preview
-function getPreviewRange(range: string): string {
-  if (!range) return '0,1,2'
-
-  if (range.includes('-')) {
-    const [start] = range.split('-')
-    const startNum = parseInt(start) || 0
-    return `${startNum},${startNum + 1},${startNum + 2}`
-  }
-
-  if (range.includes(',')) {
-    const numbers = range.split(',').slice(0, 3)
-    return numbers.join(',')
-  }
-
-  return range
-}
-
-// Mock preview data for development and fallback
-function getMockPreviewData(config: any) {
-  const range = config.range || '0-9'
-  let numbers: number[]
-
-  if (range.includes('-')) {
-    const [start] = range.split('-')
-    const startNum = parseInt(start) || 0
-    numbers = [startNum, startNum + 1, startNum + 2]
-  } else if (range.includes(',')) {
-    numbers = range.split(',').slice(0, 3).map((n: string) => parseInt(n.trim()) || 0)
-  } else {
-    const num = parseInt(range) || 0
-    numbers = [num, num + 1, num + 2]
-  }
-
-  return {
-    count: numbers.length,
-    samples: numbers.map(number => ({
-      number,
-      front: `<svg width="200" height="300" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
-        <rect x="10" y="10" width="180" height="280" fill="none" stroke="#ccc" stroke-width="2"/>
-        <line x1="20" y1="150" x2="180" y2="150" stroke="#ccc" stroke-width="2"/>
-        <text x="100" y="160" text-anchor="middle" font-size="24" fill="#666">Preview Error</text>
-        <text x="100" y="180" text-anchor="middle" font-size="16" fill="#999">${number}</text>
-      </svg>`,
-      back: number.toString()
-    }))
-  }
-}
-
-// Health check endpoint
-export async function GET() {
-  return NextResponse.json({
-    status: 'healthy',
-    endpoint: 'preview',
-    message: 'Preview API is running'
-  })
-}
--- a/apps/web/src/app/api/typst-svg/route.ts
+++ b/apps/web/src/app/api/typst-svg/route.ts
@@ -1,154 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet.mjs'
-import fs from 'fs'
-import path from 'path'
-
-export interface TypstSVGRequest {
-  number: number
-  beadShape?: 'diamond' | 'circle' | 'square'
-  colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
-  colorPalette?: 'default' | 'colorblind' | 'mnemonic' | 'grayscale' | 'nature'
-  hideInactiveBeads?: boolean
-  showEmptyColumns?: boolean
-  columns?: number | 'auto'
-  scaleFactor?: number
-  width?: string
-  height?: string
-  fontSize?: string
-  fontFamily?: string
-  transparent?: boolean
-  coloredNumerals?: boolean
-}
-
-// Cache for template content
-let flashcardsTemplate: string | null = null
-
-async function getFlashcardsTemplate(): Promise<string> {
-  if (flashcardsTemplate) {
-    return flashcardsTemplate
-  }
-
-  try {
-    const { getTemplatePath } = require('@soroban/templates')
-    const templatePath = getTemplatePath('flashcards.typ')
-    flashcardsTemplate = fs.readFileSync(templatePath, 'utf-8')
-    return flashcardsTemplate
-  } catch (error) {
-    console.error('Failed to load flashcards template:', error)
-    throw new Error('Template loading failed')
-  }
-}
-
-function processBeadAnnotations(svg: string): string {
-  const { extractBeadAnnotations } = require('@soroban/templates')
-  const result = extractBeadAnnotations(svg)
-
-  if (result.warnings.length > 0) {
-    console.log('ℹ️ SVG bead processing warnings:', result.warnings)
-  }
-
-  console.log(`🔗 Processed ${result.count} bead links into data attributes`)
-  return result.processedSVG
-}
-
-function createTypstContent(config: TypstSVGRequest, template: string): string {
-  const {
-    number,
-    beadShape = 'diamond',
-    colorScheme = 'place-value',
-    colorPalette = 'default',
-    hideInactiveBeads = false,
-    showEmptyColumns = false,
-    columns = 'auto',
-    scaleFactor = 1.0,
-    width = '120pt',
-    height = '160pt',
-    fontSize = '48pt',
-    fontFamily = 'DejaVu Sans',
-    transparent = false,
-    coloredNumerals = false
-  } = config
-
-  return `
-${template}
-
-#set page(
-  width: ${width},
-  height: ${height},
-  margin: 0pt,
-  fill: ${transparent ? 'none' : 'white'}
-)
-
-#set text(font: "${fontFamily}", size: ${fontSize}, fallback: true)
-
-#align(center + horizon)[
-  #box(
-    width: ${width} - 2 * (${width} * 0.05),
-    height: ${height} - 2 * (${height} * 0.05)
-  )[
-    #align(center + horizon)[
-      #scale(x: ${scaleFactor * 100}%, y: ${scaleFactor * 100}%)[
-        #draw-soroban(
-          ${number},
-          columns: ${columns},
-          show-empty: ${showEmptyColumns},
-          hide-inactive: ${hideInactiveBeads},
-          bead-shape: "${beadShape}",
-          color-scheme: "${colorScheme}",
-          color-palette: "${colorPalette}",
-          base-size: 1.0
-        )
-      ]
-    ]
-  ]
-]
-`
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const config: TypstSVGRequest = await request.json()
-
-    console.log('🎨 Generating typst.ts SVG for number:', config.number)
-
-    // Load template
-    const template = await getFlashcardsTemplate()
-
-    // Create typst content
-    const typstContent = createTypstContent(config, template)
-
-    // Generate SVG using typst.ts
-    const rawSvg = await $typst.svg({ mainContent: typstContent })
-
-    // Post-process to convert bead annotations to data attributes
-    const svg = processBeadAnnotations(rawSvg)
-
-    console.log('✅ Generated and processed typst.ts SVG, length:', svg.length)
-
-    return NextResponse.json({
-      svg,
-      success: true,
-      number: config.number
-    })
-
-  } catch (error) {
-    console.error('❌ Typst SVG generation failed:', error)
-
-    return NextResponse.json(
-      {
-        error: error instanceof Error ? error.message : 'Unknown error',
-        success: false
-      },
-      { status: 500 }
-    )
-  }
-}
-
-// Health check
-export async function GET() {
-  return NextResponse.json({
-    status: 'healthy',
-    endpoint: 'typst-svg',
-    message: 'Typst.ts SVG generation API is running'
-  })
-}
--- a/apps/web/src/app/api/typst-template/route.ts
+++ b/apps/web/src/app/api/typst-template/route.ts
@@ -1,25 +0,0 @@
-import { NextResponse } from 'next/server'
-import fs from 'fs'
-import { getTemplatePath } from '@soroban/templates'
-
-// API endpoint to serve the flashcards.typ template content
-export async function GET() {
-  try {
-    const templatePath = getTemplatePath('flashcards.typ');
-    const flashcardsTemplate = fs.readFileSync(templatePath, 'utf-8')
-
-    return NextResponse.json({
-      template: flashcardsTemplate,
-      success: true
-    })
-  } catch (error) {
-    console.error('Failed to load typst template:', error)
-    return NextResponse.json(
-      {
-        error: 'Failed to load template',
-        success: false
-      },
-      { status: 500 }
-    )
-  }
-}
--- a/apps/web/src/app/api/user-stats/route.ts
+++ b/apps/web/src/app/api/user-stats/route.ts
@@ -1,7 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
 import { db, schema } from '@/db'
 import { getViewerId } from '@/lib/viewer'
-import { eq } from 'drizzle-orm'

 /**
 * GET /api/user-stats
@@ -49,10 +49,7 @@ export async function GET() {
    return NextResponse.json({ stats })
  } catch (error) {
    console.error('Failed to fetch user stats:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch user stats' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to fetch user stats' }, { status: 500 })
  }
 }

@@ -83,7 +80,7 @@ export async function PATCH(req: NextRequest) {
    }

    // Get existing stats
-    let stats = await db.query.userStats.findFirst({
+    const stats = await db.query.userStats.findFirst({
      where: eq(schema.userStats.userId, user.id),
    })

@@ -118,9 +115,6 @@ export async function PATCH(req: NextRequest) {
    }
  } catch (error) {
    console.error('Failed to update user stats:', error)
-    return NextResponse.json(
-      { error: 'Failed to update user stats' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Failed to update user stats' }, { status: 500 })
  }
 }
--- a/apps/web/src/app/api/viewer/route.ts
+++ b/apps/web/src/app/api/viewer/route.ts
@@ -10,10 +10,7 @@ export async function GET() {
  try {
    const viewerId = await getViewerId()
    return NextResponse.json({ viewerId })
-  } catch (error) {
-    return NextResponse.json(
-      { error: 'No valid viewer session found' },
-      { status: 401 }
-    )
+  } catch (_error) {
+    return NextResponse.json({ error: 'No valid viewer session found' }, { status: 401 })
  }
 }
--- a/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx
@@ -21,38 +21,42 @@ export function SpeechBubble({ message, onHide }: SpeechBubbleProps) {
  }, [onHide])

  return (
-    <div style={{
-      position: 'absolute',
-      bottom: 'calc(100% + 10px)',
-      left: '50%',
-      transform: 'translateX(-50%)',
-      background: 'white',
-      borderRadius: '15px',
-      padding: '10px 15px',
-      boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
-      fontSize: '14px',
-      whiteSpace: 'nowrap',
-      opacity: isVisible ? 1 : 0,
-      transition: 'opacity 0.3s ease',
-      zIndex: 10,
-      pointerEvents: 'none',
-      maxWidth: '250px',
-      textAlign: 'center'
-    }}>
-      {message}
-      {/* Tail pointing down */}
-      <div style={{
+    <div
+      style={{
        position: 'absolute',
-        bottom: '-8px',
+        bottom: 'calc(100% + 10px)',
        left: '50%',
        transform: 'translateX(-50%)',
-        width: 0,
-        height: 0,
-        borderLeft: '8px solid transparent',
-        borderRight: '8px solid transparent',
-        borderTop: '8px solid white',
-        filter: 'drop-shadow(0 2px 2px rgba(0,0,0,0.1))'
-      }} />
+        background: 'white',
+        borderRadius: '15px',
+        padding: '10px 15px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+        fontSize: '14px',
+        whiteSpace: 'nowrap',
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.3s ease',
+        zIndex: 10,
+        pointerEvents: 'none',
+        maxWidth: '250px',
+        textAlign: 'center',
+      }}
+    >
+      {message}
+      {/* Tail pointing down */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '-8px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: 0,
+          height: 0,
+          borderLeft: '8px solid transparent',
+          borderRight: '8px solid transparent',
+          borderTop: '8px solid white',
+          filter: 'drop-shadow(0 2px 2px rgba(0,0,0,0.1))',
+        }}
+      />
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts
+++ b/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts
@@ -13,129 +13,129 @@ export type CommentaryContext =
 // Swift AI - Competitive personality (lines 11768-11834)
 export const swiftAICommentary: Record<CommentaryContext, string[]> = {
  ahead: [
-    "💨 Eat my dust!",
-    "🔥 Too slow for me!",
+    '💨 Eat my dust!',
+    '🔥 Too slow for me!',
    "⚡ You can't catch me!",
    "🚀 I'm built for speed!",
-    "🏃‍♂️ This is way too easy!"
+    '🏃‍♂️ This is way too easy!',
  ],
  behind: [
-    "😤 Not over yet!",
+    '😤 Not over yet!',
    "💪 I'm just getting started!",
-    "🔥 Watch me catch up to you!",
+    '🔥 Watch me catch up to you!',
    "⚡ I'm coming for you!",
-    "🏃‍♂️ This is my comeback!"
+    '🏃‍♂️ This is my comeback!',
  ],
  adaptive_struggle: [
-    "😏 You struggling much?",
-    "🤖 Math is easy for me!",
-    "⚡ You need to think faster!",
-    "🔥 Need me to slow down?"
+    '😏 You struggling much?',
+    '🤖 Math is easy for me!',
+    '⚡ You need to think faster!',
+    '🔥 Need me to slow down?',
  ],
  adaptive_mastery: [
    "😮 You're actually impressive!",
    "🤔 You're getting faster...",
-    "😤 Time for me to step it up!",
-    "⚡ Not bad for a human!"
+    '😤 Time for me to step it up!',
+    '⚡ Not bad for a human!',
  ],
  player_passed: [
-    "😠 No way you just passed me!",
+    '😠 No way you just passed me!',
    "🔥 This isn't over!",
    "💨 I'm just getting warmed up!",
    "😤 Your lucky streak won't last!",
-    "⚡ I'll be back in front of you soon!"
+    "⚡ I'll be back in front of you soon!",
  ],
  ai_passed: [
-    "💨 See ya later, slowpoke!",
-    "😎 Thanks for the warm-up!",
+    '💨 See ya later, slowpoke!',
+    '😎 Thanks for the warm-up!',
    "🔥 This is how it's done!",
    "⚡ I'll see you at the finish line!",
-    "💪 Try to keep up with me!"
+    '💪 Try to keep up with me!',
  ],
  lapped: [
-    "😡 You just lapped me?! No way!",
-    "🤬 This is embarrassing for me!",
+    '😡 You just lapped me?! No way!',
+    '🤬 This is embarrassing for me!',
    "😤 I'm not going down without a fight!",
-    "💢 How did you get so far ahead?!",
-    "🔥 Time to show you my real speed!",
-    "😠 You won't stay ahead for long!"
+    '💢 How did you get so far ahead?!',
+    '🔥 Time to show you my real speed!',
+    "😠 You won't stay ahead for long!",
  ],
  desperate_catchup: [
    "🚨 TURBO MODE ACTIVATED! I'm coming for you!",
-    "💥 You forced me to unleash my true power!",
-    "🔥 NO MORE MR. NICE AI! Time to go all out!",
+    '💥 You forced me to unleash my true power!',
+    '🔥 NO MORE MR. NICE AI! Time to go all out!',
    "⚡ I'm switching to MAXIMUM OVERDRIVE!",
    "😤 You made me angry - now you'll see what I can do!",
-    "🚀 AFTERBURNERS ENGAGED! This isn't over!"
-  ]
+    "🚀 AFTERBURNERS ENGAGED! This isn't over!",
+  ],
 }

 // Math Bot - Analytical personality (lines 11835-11901)
 export const mathBotCommentary: Record<CommentaryContext, string[]> = {
  ahead: [
-    "📊 My performance is optimal!",
-    "🤖 My logic beats your speed!",
-    "📈 I have 87% win probability!",
+    '📊 My performance is optimal!',
+    '🤖 My logic beats your speed!',
+    '📈 I have 87% win probability!',
    "⚙️ I'm perfectly calibrated!",
-    "🔬 Science prevails over you!"
+    '🔬 Science prevails over you!',
  ],
  behind: [
-    "🤔 Recalculating my strategy...",
+    '🤔 Recalculating my strategy...',
    "📊 You're exceeding my projections!",
-    "⚙️ Adjusting my parameters!",
+    '⚙️ Adjusting my parameters!',
    "🔬 I'm analyzing your technique!",
-    "📈 You're a statistical anomaly!"
+    "📈 You're a statistical anomaly!",
  ],
  adaptive_struggle: [
-    "📊 I detect inefficiencies in you!",
-    "🔬 You should focus on patterns!",
-    "⚙️ Use that extra time wisely!",
-    "📈 You have room for improvement!"
+    '📊 I detect inefficiencies in you!',
+    '🔬 You should focus on patterns!',
+    '⚙️ Use that extra time wisely!',
+    '📈 You have room for improvement!',
  ],
  adaptive_mastery: [
-    "🤖 Your optimization is excellent!",
-    "📊 Your metrics are impressive!",
+    '🤖 Your optimization is excellent!',
+    '📊 Your metrics are impressive!',
    "⚙️ I'm updating my models because of you!",
-    "🔬 You have near-AI efficiency!"
+    '🔬 You have near-AI efficiency!',
  ],
  player_passed: [
-    "🤖 Your strategy is fascinating!",
+    '🤖 Your strategy is fascinating!',
    "📊 You're an unexpected variable!",
    "⚙️ I'm adjusting my algorithms...",
-    "🔬 Your execution is impressive!",
-    "📈 I'm recalculating the odds!"
+    '🔬 Your execution is impressive!',
+    "📈 I'm recalculating the odds!",
  ],
  ai_passed: [
-    "🤖 My efficiency is optimized!",
-    "📊 Just as I calculated!",
-    "⚙️ All my systems nominal!",
-    "🔬 My logic prevails over you!",
-    "📈 I'm at 96% confidence level!"
+    '🤖 My efficiency is optimized!',
+    '📊 Just as I calculated!',
+    '⚙️ All my systems nominal!',
+    '🔬 My logic prevails over you!',
+    "📈 I'm at 96% confidence level!",
  ],
  lapped: [
-    "🤖 Error: You have exceeded my projections!",
-    "📊 This outcome has 0.3% probability!",
-    "⚙️ I need to recalibrate my systems!",
-    "🔬 Your performance is... statistically improbable!",
-    "📈 My confidence level just dropped to 12%!",
-    "🤔 I must analyze your methodology!"
+    '🤖 Error: You have exceeded my projections!',
+    '📊 This outcome has 0.3% probability!',
+    '⚙️ I need to recalibrate my systems!',
+    '🔬 Your performance is... statistically improbable!',
+    '📈 My confidence level just dropped to 12%!',
+    '🤔 I must analyze your methodology!',
  ],
  desperate_catchup: [
-    "🤖 EMERGENCY PROTOCOL ACTIVATED! Initiating maximum speed!",
-    "🚨 CRITICAL GAP DETECTED! Engaging catchup algorithms!",
-    "⚙️ OVERCLOCKING MY PROCESSORS! Prepare for rapid acceleration!",
-    "📊 PROBABILITY OF FAILURE: UNACCEPTABLE! Switching to turbo mode!",
+    '🤖 EMERGENCY PROTOCOL ACTIVATED! Initiating maximum speed!',
+    '🚨 CRITICAL GAP DETECTED! Engaging catchup algorithms!',
+    '⚙️ OVERCLOCKING MY PROCESSORS! Prepare for rapid acceleration!',
+    '📊 PROBABILITY OF FAILURE: UNACCEPTABLE! Switching to turbo mode!',
    "🔬 HYPOTHESIS: You're about to see my true potential!",
-    "📈 CONFIDENCE LEVEL: RISING! My comeback protocol is online!"
-  ]
+    '📈 CONFIDENCE LEVEL: RISING! My comeback protocol is online!',
+  ],
 }

 // Get AI commentary message (lines 11636-11657)
 export function getAICommentary(
  racer: AIRacer,
  context: CommentaryContext,
-  playerProgress: number,
-  aiProgress: number
+  _playerProgress: number,
+  _aiProgress: number
 ): string | null {
  // Check cooldown (line 11759-11761)
  const now = Date.now()
@@ -144,12 +144,11 @@ export function getAICommentary(
  }

  // Select message set based on personality and context
-  const messages = racer.personality === 'competitive'
-    ? swiftAICommentary[context]
-    : mathBotCommentary[context]
+  const messages =
+    racer.personality === 'competitive' ? swiftAICommentary[context] : mathBotCommentary[context]

  if (!messages || messages.length === 0) return null

  // Return random message
  return messages[Math.floor(Math.random() * messages.length)]
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx
@@ -12,12 +12,14 @@ interface AbacusTargetProps {
 */
 export function AbacusTarget({ number }: AbacusTargetProps) {
  return (
-    <div style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      lineHeight: 0
-    }}>
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: 0,
+      }}
+    >
      <AbacusReact
        value={number}
        columns={1}
@@ -26,7 +28,7 @@ export function AbacusTarget({ number }: AbacusTargetProps) {
        hideInactiveBeads={true}
        scaleFactor={0.72}
        customStyles={{
-          columnPosts: { opacity: 0 }
+          columnPosts: { opacity: 0 },
        }}
      />
    </div>
--- a/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx
@@ -1,232 +1,321 @@
 'use client'

 import { useComplementRace } from '../context/ComplementRaceContext'
-import { GameIntro } from './GameIntro'
 import { GameControls } from './GameControls'
 import { GameCountdown } from './GameCountdown'
 import { GameDisplay } from './GameDisplay'
+import { GameIntro } from './GameIntro'
 import { GameResults } from './GameResults'

 export function ComplementRaceGame() {
  const { state } = useComplementRace()

  return (
-    <div data-component="game-page-root" style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      padding: '20px 8px',
-      minHeight: '100vh',
-      maxHeight: '100vh',
-      background: state.style === 'sprint'
-        ? 'linear-gradient(to bottom, #2563eb 0%, #60a5fa 100%)'
-        : 'radial-gradient(ellipse at center, #8db978 0%, #7ba565 40%, #6a9354 100%)',
-      position: 'relative'
-    }}>
+    <div
+      data-component="game-page-root"
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        padding: '20px 8px',
+        minHeight: '100vh',
+        maxHeight: '100vh',
+        background:
+          state.style === 'sprint'
+            ? 'linear-gradient(to bottom, #2563eb 0%, #60a5fa 100%)'
+            : 'radial-gradient(ellipse at center, #8db978 0%, #7ba565 40%, #6a9354 100%)',
+        position: 'relative',
+      }}
+    >
      {/* Background pattern - subtle grass texture */}
      {state.style !== 'sprint' && (
-        <div style={{
-          position: 'absolute',
-          inset: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-          zIndex: 0,
-          opacity: 0.15
-        }}>
-        <svg width="100%" height="100%">
-          <defs>
-            <pattern id="grass-texture" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
-              <rect width="40" height="40" fill="transparent" />
-              <line x1="2" y1="5" x2="8" y2="5" stroke="#2d5016" strokeWidth="1" opacity="0.3" />
-              <line x1="15" y1="8" x2="20" y2="8" stroke="#2d5016" strokeWidth="1" opacity="0.25" />
-              <line x1="25" y1="12" x2="32" y2="12" stroke="#2d5016" strokeWidth="1" opacity="0.2" />
-              <line x1="5" y1="18" x2="12" y2="18" stroke="#2d5016" strokeWidth="1" opacity="0.3" />
-              <line x1="28" y1="22" x2="35" y2="22" stroke="#2d5016" strokeWidth="1" opacity="0.25" />
-              <line x1="10" y1="30" x2="16" y2="30" stroke="#2d5016" strokeWidth="1" opacity="0.2" />
-              <line x1="22" y1="35" x2="28" y2="35" stroke="#2d5016" strokeWidth="1" opacity="0.3" />
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" fill="url(#grass-texture)" />
-        </svg>
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 0,
+            opacity: 0.15,
+          }}
+        >
+          <svg width="100%" height="100%">
+            <defs>
+              <pattern
+                id="grass-texture"
+                x="0"
+                y="0"
+                width="40"
+                height="40"
+                patternUnits="userSpaceOnUse"
+              >
+                <rect width="40" height="40" fill="transparent" />
+                <line x1="2" y1="5" x2="8" y2="5" stroke="#2d5016" strokeWidth="1" opacity="0.3" />
+                <line
+                  x1="15"
+                  y1="8"
+                  x2="20"
+                  y2="8"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.25"
+                />
+                <line
+                  x1="25"
+                  y1="12"
+                  x2="32"
+                  y2="12"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.2"
+                />
+                <line
+                  x1="5"
+                  y1="18"
+                  x2="12"
+                  y2="18"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.3"
+                />
+                <line
+                  x1="28"
+                  y1="22"
+                  x2="35"
+                  y2="22"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.25"
+                />
+                <line
+                  x1="10"
+                  y1="30"
+                  x2="16"
+                  y2="30"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.2"
+                />
+                <line
+                  x1="22"
+                  y1="35"
+                  x2="28"
+                  y2="35"
+                  stroke="#2d5016"
+                  strokeWidth="1"
+                  opacity="0.3"
+                />
+              </pattern>
+            </defs>
+            <rect width="100%" height="100%" fill="url(#grass-texture)" />
+          </svg>
        </div>
      )}

      {/* Subtle tree clusters around edges - top-down view with gentle sway */}
      {state.style !== 'sprint' && (
-        <div style={{
-        position: 'absolute',
-        inset: 0,
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        zIndex: 0
-      }}>
-        {/* Top-left tree cluster */}
-        <div style={{
-          position: 'absolute',
-          top: '5%',
-          left: '3%',
-          width: '80px',
-          height: '80px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.2,
-          filter: 'blur(4px)',
-          animation: 'treeSway1 8s ease-in-out infinite'
-        }} />
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        >
+          {/* Top-left tree cluster */}
+          <div
+            style={{
+              position: 'absolute',
+              top: '5%',
+              left: '3%',
+              width: '80px',
+              height: '80px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.2,
+              filter: 'blur(4px)',
+              animation: 'treeSway1 8s ease-in-out infinite',
+            }}
+          />

-        {/* Top-right tree cluster */}
-        <div style={{
-          position: 'absolute',
-          top: '8%',
-          right: '5%',
-          width: '100px',
-          height: '100px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.18,
-          filter: 'blur(5px)',
-          animation: 'treeSway2 10s ease-in-out infinite'
-        }} />
+          {/* Top-right tree cluster */}
+          <div
+            style={{
+              position: 'absolute',
+              top: '8%',
+              right: '5%',
+              width: '100px',
+              height: '100px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.18,
+              filter: 'blur(5px)',
+              animation: 'treeSway2 10s ease-in-out infinite',
+            }}
+          />

-        {/* Bottom-left tree cluster */}
-        <div style={{
-          position: 'absolute',
-          bottom: '10%',
-          left: '8%',
-          width: '90px',
-          height: '90px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.15,
-          filter: 'blur(4px)',
-          animation: 'treeSway1 9s ease-in-out infinite reverse'
-        }} />
+          {/* Bottom-left tree cluster */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '10%',
+              left: '8%',
+              width: '90px',
+              height: '90px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.15,
+              filter: 'blur(4px)',
+              animation: 'treeSway1 9s ease-in-out infinite reverse',
+            }}
+          />

-        {/* Bottom-right tree cluster */}
-        <div style={{
-          position: 'absolute',
-          bottom: '5%',
-          right: '4%',
-          width: '110px',
-          height: '110px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.2,
-          filter: 'blur(6px)',
-          animation: 'treeSway2 11s ease-in-out infinite'
-        }} />
+          {/* Bottom-right tree cluster */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '5%',
+              right: '4%',
+              width: '110px',
+              height: '110px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.2,
+              filter: 'blur(6px)',
+              animation: 'treeSway2 11s ease-in-out infinite',
+            }}
+          />

-        {/* Additional smaller clusters for depth */}
-        <div style={{
-          position: 'absolute',
-          top: '40%',
-          left: '2%',
-          width: '60px',
-          height: '60px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.12,
-          filter: 'blur(3px)',
-          animation: 'treeSway1 7s ease-in-out infinite'
-        }} />
+          {/* Additional smaller clusters for depth */}
+          <div
+            style={{
+              position: 'absolute',
+              top: '40%',
+              left: '2%',
+              width: '60px',
+              height: '60px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.12,
+              filter: 'blur(3px)',
+              animation: 'treeSway1 7s ease-in-out infinite',
+            }}
+          />

-        <div style={{
-          position: 'absolute',
-          top: '55%',
-          right: '3%',
-          width: '70px',
-          height: '70px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
-          opacity: 0.14,
-          filter: 'blur(4px)',
-          animation: 'treeSway2 8.5s ease-in-out infinite reverse'
-        }} />
+          <div
+            style={{
+              position: 'absolute',
+              top: '55%',
+              right: '3%',
+              width: '70px',
+              height: '70px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, #4a7c3a 0%, #3d6630 60%, transparent 70%)',
+              opacity: 0.14,
+              filter: 'blur(4px)',
+              animation: 'treeSway2 8.5s ease-in-out infinite reverse',
+            }}
+          />
        </div>
      )}

      {/* Flying bird shadows - very subtle from aerial view */}
      {state.style !== 'sprint' && (
-        <div style={{
-        position: 'absolute',
-        inset: 0,
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        zIndex: 0
-      }}>
-        <div style={{
-          position: 'absolute',
-          top: '30%',
-          left: '-5%',
-          width: '15px',
-          height: '8px',
-          background: 'rgba(0, 0, 0, 0.08)',
-          borderRadius: '50%',
-          filter: 'blur(2px)',
-          animation: 'birdFly1 20s linear infinite'
-        }} />
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              top: '30%',
+              left: '-5%',
+              width: '15px',
+              height: '8px',
+              background: 'rgba(0, 0, 0, 0.08)',
+              borderRadius: '50%',
+              filter: 'blur(2px)',
+              animation: 'birdFly1 20s linear infinite',
+            }}
+          />

-        <div style={{
-          position: 'absolute',
-          top: '60%',
-          left: '-5%',
-          width: '12px',
-          height: '6px',
-          background: 'rgba(0, 0, 0, 0.06)',
-          borderRadius: '50%',
-          filter: 'blur(2px)',
-          animation: 'birdFly2 28s linear infinite'
-        }} />
+          <div
+            style={{
+              position: 'absolute',
+              top: '60%',
+              left: '-5%',
+              width: '12px',
+              height: '6px',
+              background: 'rgba(0, 0, 0, 0.06)',
+              borderRadius: '50%',
+              filter: 'blur(2px)',
+              animation: 'birdFly2 28s linear infinite',
+            }}
+          />

-        <div style={{
-          position: 'absolute',
-          top: '45%',
-          left: '-5%',
-          width: '10px',
-          height: '5px',
-          background: 'rgba(0, 0, 0, 0.05)',
-          borderRadius: '50%',
-          filter: 'blur(1px)',
-          animation: 'birdFly1 35s linear infinite',
-          animationDelay: '-12s'
-        }} />
+          <div
+            style={{
+              position: 'absolute',
+              top: '45%',
+              left: '-5%',
+              width: '10px',
+              height: '5px',
+              background: 'rgba(0, 0, 0, 0.05)',
+              borderRadius: '50%',
+              filter: 'blur(1px)',
+              animation: 'birdFly1 35s linear infinite',
+              animationDelay: '-12s',
+            }}
+          />
        </div>
      )}

      {/* Subtle cloud shadows moving across field */}
      {state.style !== 'sprint' && (
-        <div style={{
-        position: 'absolute',
-        inset: 0,
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        zIndex: 0
-      }}>
-        <div style={{
-          position: 'absolute',
-          top: '-10%',
-          left: '-20%',
-          width: '300px',
-          height: '200px',
-          background: 'radial-gradient(ellipse, rgba(0, 0, 0, 0.03) 0%, transparent 60%)',
-          borderRadius: '50%',
-          filter: 'blur(20px)',
-          animation: 'cloudShadow1 45s linear infinite'
-        }} />
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              top: '-10%',
+              left: '-20%',
+              width: '300px',
+              height: '200px',
+              background: 'radial-gradient(ellipse, rgba(0, 0, 0, 0.03) 0%, transparent 60%)',
+              borderRadius: '50%',
+              filter: 'blur(20px)',
+              animation: 'cloudShadow1 45s linear infinite',
+            }}
+          />

-        <div style={{
-          position: 'absolute',
-          top: '-10%',
-          left: '-20%',
-          width: '250px',
-          height: '180px',
-          background: 'radial-gradient(ellipse, rgba(0, 0, 0, 0.025) 0%, transparent 60%)',
-          borderRadius: '50%',
-          filter: 'blur(25px)',
-          animation: 'cloudShadow2 60s linear infinite',
-          animationDelay: '-20s'
-        }} />
+          <div
+            style={{
+              position: 'absolute',
+              top: '-10%',
+              left: '-20%',
+              width: '250px',
+              height: '180px',
+              background: 'radial-gradient(ellipse, rgba(0, 0, 0, 0.025) 0%, transparent 60%)',
+              borderRadius: '50%',
+              filter: 'blur(25px)',
+              animation: 'cloudShadow2 60s linear infinite',
+              animationDelay: '-20s',
+            }}
+          />
        </div>
      )}

@@ -262,15 +351,17 @@ export function ComplementRaceGame() {
        }
      `}</style>

-      <div style={{
-        maxWidth: '100%',
-        margin: '0 auto',
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        zIndex: 1
-      }}>
+      <div
+        style={{
+          maxWidth: '100%',
+          margin: '0 auto',
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
        {state.gamePhase === 'intro' && <GameIntro />}
        {state.gamePhase === 'controls' && <GameControls />}
        {state.gamePhase === 'countdown' && <GameCountdown />}
@@ -279,4 +370,4 @@ export function ComplementRaceGame() {
      </div>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/GameControls.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameControls.tsx
@@ -1,7 +1,7 @@
 'use client'

 import { useComplementRace } from '../context/ComplementRaceContext'
-import type { GameMode, GameStyle, TimeoutSetting, ComplementDisplay } from '../lib/gameTypes'
+import type { ComplementDisplay, GameMode, GameStyle, TimeoutSetting } from '../lib/gameTypes'
 import { AbacusTarget } from './AbacusTarget'

 export function GameControls() {
@@ -26,76 +26,108 @@ export function GameControls() {
  }

  return (
-    <div style={{
-      height: '100vh',
-      display: 'flex',
-      flexDirection: 'column',
-      background: 'linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #334155 100%)',
-      overflow: 'hidden',
-      position: 'relative'
-    }}>
+    <div
+      style={{
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #334155 100%)',
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
      {/* Animated background pattern */}
-      <div style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundImage: 'radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)',
-        pointerEvents: 'none'
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage:
+            'radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)',
+          pointerEvents: 'none',
+        }}
+      />

      {/* Header */}
-      <div style={{
-        textAlign: 'center',
-        padding: '20px',
-        position: 'relative',
-        zIndex: 1
-      }}>
-        <h1 style={{
-          fontSize: '32px',
-          fontWeight: 'bold',
-          background: 'linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)',
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
-          backgroundClip: 'text',
-          margin: 0,
-          letterSpacing: '-0.5px'
-        }}>
+      <div
+        style={{
+          textAlign: 'center',
+          padding: '20px',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '32px',
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text',
+            margin: 0,
+            letterSpacing: '-0.5px',
+          }}
+        >
          Complement Race
        </h1>
      </div>

      {/* Settings Bar */}
-      <div style={{
-        padding: '0 20px 16px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '12px',
-        position: 'relative',
-        zIndex: 1
-      }}>
+      <div
+        style={{
+          padding: '0 20px 16px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
        {/* Number Mode & Display */}
-        <div style={{
-          background: 'rgba(30, 41, 59, 0.8)',
-          backdropFilter: 'blur(20px)',
-          borderRadius: '16px',
-          padding: '16px',
-          border: '1px solid rgba(148, 163, 184, 0.2)'
-        }}>
-          <div style={{
-            display: 'flex',
-            gap: '20px',
-            flexWrap: 'wrap',
-            alignItems: 'center'
-          }}>
+        <div
+          style={{
+            background: 'rgba(30, 41, 59, 0.8)',
+            backdropFilter: 'blur(20px)',
+            borderRadius: '16px',
+            padding: '16px',
+            border: '1px solid rgba(148, 163, 184, 0.2)',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              gap: '20px',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+            }}
+          >
            {/* Number Mode Pills */}
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flex: 1, minWidth: '200px' }}>
-              <span style={{ fontSize: '13px', color: '#94a3b8', fontWeight: '600', marginRight: '4px' }}>Mode:</span>
+            <div
+              style={{
+                display: 'flex',
+                gap: '8px',
+                alignItems: 'center',
+                flex: 1,
+                minWidth: '200px',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: '13px',
+                  color: '#94a3b8',
+                  fontWeight: '600',
+                  marginRight: '4px',
+                }}
+              >
+                Mode:
+              </span>
              {[
                { mode: 'friends5' as GameMode, label: '5' },
                { mode: 'friends10' as GameMode, label: '10' },
-                { mode: 'mixed' as GameMode, label: 'Mix' }
+                { mode: 'mixed' as GameMode, label: 'Mix' },
              ].map(({ mode, label }) => (
                <button
                  key={mode}
@@ -104,14 +136,15 @@ export function GameControls() {
                    padding: '8px 16px',
                    borderRadius: '20px',
                    border: 'none',
-                    background: state.mode === mode
-                      ? 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)'
-                      : 'rgba(148, 163, 184, 0.2)',
+                    background:
+                      state.mode === mode
+                        ? 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)'
+                        : 'rgba(148, 163, 184, 0.2)',
                    color: state.mode === mode ? 'white' : '#94a3b8',
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
-                    fontSize: '13px'
+                    fontSize: '13px',
                  }}
                >
                  {label}
@@ -120,8 +153,25 @@ export function GameControls() {
            </div>

            {/* Complement Display Pills */}
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flex: 1, minWidth: '200px' }}>
-              <span style={{ fontSize: '13px', color: '#94a3b8', fontWeight: '600', marginRight: '4px' }}>Show:</span>
+            <div
+              style={{
+                display: 'flex',
+                gap: '8px',
+                alignItems: 'center',
+                flex: 1,
+                minWidth: '200px',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: '13px',
+                  color: '#94a3b8',
+                  fontWeight: '600',
+                  marginRight: '4px',
+                }}
+              >
+                Show:
+              </span>
              {(['number', 'abacus', 'random'] as ComplementDisplay[]).map((displayMode) => (
                <button
                  key={displayMode}
@@ -130,14 +180,15 @@ export function GameControls() {
                    padding: '8px 16px',
                    borderRadius: '20px',
                    border: 'none',
-                    background: state.complementDisplay === displayMode
-                      ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
-                      : 'rgba(148, 163, 184, 0.2)',
+                    background:
+                      state.complementDisplay === displayMode
+                        ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+                        : 'rgba(148, 163, 184, 0.2)',
                    color: state.complementDisplay === displayMode ? 'white' : '#94a3b8',
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
-                    fontSize: '13px'
+                    fontSize: '13px',
                  }}
                >
                  {displayMode === 'number' ? '123' : displayMode === 'abacus' ? '🧮' : '🎲'}
@@ -146,9 +197,37 @@ export function GameControls() {
            </div>

            {/* Speed Pills */}
-            <div style={{ display: 'flex', gap: '6px', alignItems: 'center', flex: 1, minWidth: '200px', flexWrap: 'wrap' }}>
-              <span style={{ fontSize: '13px', color: '#94a3b8', fontWeight: '600', marginRight: '4px' }}>Speed:</span>
-              {(['preschool', 'kindergarten', 'relaxed', 'slow', 'normal', 'fast', 'expert'] as TimeoutSetting[]).map((timeout) => (
+            <div
+              style={{
+                display: 'flex',
+                gap: '6px',
+                alignItems: 'center',
+                flex: 1,
+                minWidth: '200px',
+                flexWrap: 'wrap',
+              }}
+            >
+              <span
+                style={{
+                  fontSize: '13px',
+                  color: '#94a3b8',
+                  fontWeight: '600',
+                  marginRight: '4px',
+                }}
+              >
+                Speed:
+              </span>
+              {(
+                [
+                  'preschool',
+                  'kindergarten',
+                  'relaxed',
+                  'slow',
+                  'normal',
+                  'fast',
+                  'expert',
+                ] as TimeoutSetting[]
+              ).map((timeout) => (
                <button
                  key={timeout}
                  onClick={() => handleTimeoutSelect(timeout)}
@@ -156,49 +235,60 @@ export function GameControls() {
                    padding: '6px 12px',
                    borderRadius: '16px',
                    border: 'none',
-                    background: state.timeoutSetting === timeout
-                      ? 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)'
-                      : 'rgba(148, 163, 184, 0.2)',
+                    background:
+                      state.timeoutSetting === timeout
+                        ? 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)'
+                        : 'rgba(148, 163, 184, 0.2)',
                    color: state.timeoutSetting === timeout ? 'white' : '#94a3b8',
                    fontWeight: state.timeoutSetting === timeout ? 'bold' : 'normal',
                    cursor: 'pointer',
                    transition: 'all 0.2s ease',
-                    fontSize: '11px'
+                    fontSize: '11px',
                  }}
                >
-                  {timeout === 'preschool' ? 'Pre' : timeout === 'kindergarten' ? 'K' : timeout.charAt(0).toUpperCase()}
+                  {timeout === 'preschool'
+                    ? 'Pre'
+                    : timeout === 'kindergarten'
+                      ? 'K'
+                      : timeout.charAt(0).toUpperCase()}
                </button>
              ))}
            </div>
          </div>

          {/* Preview - compact */}
-          <div style={{
-            marginTop: '12px',
-            padding: '12px',
-            borderRadius: '12px',
-            background: 'rgba(15, 23, 42, 0.6)',
-            border: '1px solid rgba(148, 163, 184, 0.2)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '12px'
-          }}>
-            <span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: '600' }}>Preview:</span>
-            <div style={{
+          <div
+            style={{
+              marginTop: '12px',
+              padding: '12px',
+              borderRadius: '12px',
+              background: 'rgba(15, 23, 42, 0.6)',
+              border: '1px solid rgba(148, 163, 184, 0.2)',
              display: 'flex',
              alignItems: 'center',
-              gap: '10px',
-              fontSize: '20px',
-              fontWeight: 'bold',
-              color: 'white'
-            }}>
-              <div style={{
-                background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+              justifyContent: 'center',
+              gap: '12px',
+            }}
+          >
+            <span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: '600' }}>Preview:</span>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                fontSize: '20px',
+                fontWeight: 'bold',
                color: 'white',
-                padding: '2px 10px',
-                borderRadius: '6px'
-              }}>
+              }}
+            >
+              <div
+                style={{
+                  background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+                  color: 'white',
+                  padding: '2px 10px',
+                  borderRadius: '6px',
+                }}
+              >
                ?
              </div>
              <span style={{ fontSize: '16px', color: '#64748b' }}>+</span>
@@ -212,23 +302,28 @@ export function GameControls() {
                <span style={{ fontSize: '14px' }}>🎲</span>
              )}
              <span style={{ fontSize: '16px', color: '#64748b' }}>=</span>
-              <span style={{ color: '#10b981' }}>{state.mode === 'friends5' ? '5' : state.mode === 'friends10' ? '10' : '?'}</span>
+              <span style={{ color: '#10b981' }}>
+                {state.mode === 'friends5' ? '5' : state.mode === 'friends10' ? '10' : '?'}
+              </span>
            </div>
          </div>
        </div>
      </div>

      {/* HERO SECTION - Race Cards */}
-      <div data-component="race-cards-container" style={{
-        flex: 1,
-        padding: '0 20px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '16px',
-        position: 'relative',
-        zIndex: 1,
-        overflow: 'auto'
-      }}>
+      <div
+        data-component="race-cards-container"
+        style={{
+          flex: 1,
+          padding: '0 20px 20px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px',
+          position: 'relative',
+          zIndex: 1,
+          overflow: 'auto',
+        }}
+      >
        {[
          {
            style: 'practice' as GameStyle,
@@ -237,7 +332,7 @@ export function GameControls() {
            desc: 'Race against AI to 20 correct answers',
            gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
            shadowColor: 'rgba(16, 185, 129, 0.5)',
-            accentColor: '#34d399'
+            accentColor: '#34d399',
          },
          {
            style: 'sprint' as GameStyle,
@@ -246,7 +341,7 @@ export function GameControls() {
            desc: 'High-speed 60-second train journey',
            gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
            shadowColor: 'rgba(245, 158, 11, 0.5)',
-            accentColor: '#fbbf24'
+            accentColor: '#fbbf24',
          },
          {
            style: 'survival' as GameStyle,
@@ -255,8 +350,8 @@ export function GameControls() {
            desc: 'Endless laps - beat your best time',
            gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
            shadowColor: 'rgba(139, 92, 246, 0.5)',
-            accentColor: '#a78bfa'
-          }
+            accentColor: '#a78bfa',
+          },
        ].map(({ style, emoji, title, desc, gradient, shadowColor, accentColor }) => (
          <button
            key={style}
@@ -273,7 +368,7 @@ export function GameControls() {
              transform: 'translateY(0)',
              flex: 1,
              minHeight: '140px',
-              overflow: 'hidden'
+              overflow: 'hidden',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-8px) scale(1.02)'
@@ -285,71 +380,89 @@ export function GameControls() {
            }}
          >
            {/* Shine effect overlay */}
-            <div style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%)',
-              pointerEvents: 'none'
-            }} />
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%)',
+                pointerEvents: 'none',
+              }}
+            />

-            <div style={{
-              padding: '28px 32px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              position: 'relative',
-              zIndex: 1
-            }}>
-              <div style={{
+            <div
+              style={{
+                padding: '28px 32px',
                display: 'flex',
                alignItems: 'center',
-                gap: '20px',
-                flex: 1
-              }}>
-                <div style={{
-                  fontSize: '64px',
-                  lineHeight: 1,
-                  filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))'
-                }}>
+                justifyContent: 'space-between',
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '20px',
+                  flex: 1,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: '64px',
+                    lineHeight: 1,
+                    filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))',
+                  }}
+                >
                  {emoji}
                </div>
                <div style={{ textAlign: 'left', flex: 1 }}>
-                  <div style={{
-                    fontSize: '28px',
-                    fontWeight: 'bold',
-                    color: 'white',
-                    marginBottom: '6px',
-                    textShadow: '0 2px 8px rgba(0,0,0,0.3)'
-                  }}>
+                  <div
+                    style={{
+                      fontSize: '28px',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      marginBottom: '6px',
+                      textShadow: '0 2px 8px rgba(0,0,0,0.3)',
+                    }}
+                  >
                    {title}
                  </div>
-                  <div style={{
-                    fontSize: '15px',
-                    color: 'rgba(255, 255, 255, 0.9)',
-                    textShadow: '0 1px 4px rgba(0,0,0,0.2)'
-                  }}>
+                  <div
+                    style={{
+                      fontSize: '15px',
+                      color: 'rgba(255, 255, 255, 0.9)',
+                      textShadow: '0 1px 4px rgba(0,0,0,0.2)',
+                    }}
+                  >
                    {desc}
                  </div>
                </div>
              </div>

              {/* PLAY NOW button */}
-              <div style={{
-                background: 'white',
-                color: gradient.includes('10b981') ? '#047857' : gradient.includes('f59e0b') ? '#d97706' : '#6b21a8',
-                padding: '16px 32px',
-                borderRadius: '16px',
-                fontWeight: 'bold',
-                fontSize: '18px',
-                boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                whiteSpace: 'nowrap'
-              }}>
+              <div
+                style={{
+                  background: 'white',
+                  color: gradient.includes('10b981')
+                    ? '#047857'
+                    : gradient.includes('f59e0b')
+                      ? '#d97706'
+                      : '#6b21a8',
+                  padding: '16px 32px',
+                  borderRadius: '16px',
+                  fontWeight: 'bold',
+                  fontSize: '18px',
+                  boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  whiteSpace: 'nowrap',
+                }}
+              >
                <span>PLAY</span>
                <span style={{ fontSize: '24px' }}>▶</span>
              </div>
@@ -359,4 +472,4 @@ export function GameControls() {
      </div>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx
@@ -2,7 +2,6 @@

 import { useEffect, useState } from 'react'
 import { useComplementRace } from '../context/ComplementRaceContext'
-import { useGameLoop } from '../hooks/useGameLoop'
 import { useSoundEffects } from '../hooks/useSoundEffects'

 export function GameCountdown() {
@@ -13,7 +12,7 @@ export function GameCountdown() {

  useEffect(() => {
    const countdownInterval = setInterval(() => {
-      setCount(prevCount => {
+      setCount((prevCount) => {
        if (prevCount > 1) {
          // Play countdown beep (volume 0.4)
          playSound('countdown', 0.4)
@@ -44,43 +43,50 @@ export function GameCountdown() {
  }, [showGo, dispatch])

  return (
-    <div style={{
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: 'rgba(0, 0, 0, 0.9)',
-      zIndex: 1000
-    }}>
-      <div style={{
-        fontSize: showGo ? '120px' : '160px',
-        fontWeight: 'bold',
-        color: showGo ? '#10b981' : 'white',
-        textShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
-        animation: showGo ? 'scaleUp 1s ease-out' : 'pulse 0.5s ease-in-out',
-        transition: 'all 0.3s ease'
-      }}>
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(0, 0, 0, 0.9)',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          fontSize: showGo ? '120px' : '160px',
+          fontWeight: 'bold',
+          color: showGo ? '#10b981' : 'white',
+          textShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
+          animation: showGo ? 'scaleUp 1s ease-out' : 'pulse 0.5s ease-in-out',
+          transition: 'all 0.3s ease',
+        }}
+      >
        {showGo ? 'GO!' : count}
      </div>

      {!showGo && (
-        <div style={{
-          marginTop: '32px',
-          fontSize: '24px',
-          color: 'rgba(255, 255, 255, 0.8)',
-          fontWeight: '500'
-        }}>
+        <div
+          style={{
+            marginTop: '32px',
+            fontSize: '24px',
+            color: 'rgba(255, 255, 255, 0.8)',
+            fontWeight: '500',
+          }}
+        >
          Get Ready!
        </div>
      )}

-      <style dangerouslySetInnerHTML={{
-        __html: `
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
          @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
@@ -90,8 +96,9 @@ export function GameCountdown() {
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
          }
-        `
-      }} />
+        `,
+        }}
+      />
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx
@@ -1,17 +1,17 @@
 'use client'

-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState } from 'react'
 import { useComplementRace } from '../context/ComplementRaceContext'
-import { useAIRacers } from '../hooks/useAIRacers'
 import { useAdaptiveDifficulty } from '../hooks/useAdaptiveDifficulty'
-import { useSteamJourney } from '../hooks/useSteamJourney'
+import { useAIRacers } from '../hooks/useAIRacers'
 import { useSoundEffects } from '../hooks/useSoundEffects'
-import { LinearTrack } from './RaceTrack/LinearTrack'
+import { useSteamJourney } from '../hooks/useSteamJourney'
+import { generatePassengers } from '../lib/passengerGenerator'
+import { AbacusTarget } from './AbacusTarget'
 import { CircularTrack } from './RaceTrack/CircularTrack'
+import { LinearTrack } from './RaceTrack/LinearTrack'
 import { SteamTrainJourney } from './RaceTrack/SteamTrainJourney'
 import { RouteCelebration } from './RouteCelebration'
-import { AbacusTarget } from './AbacusTarget'
-import { generatePassengers } from '../lib/passengerGenerator'

 type FeedbackAnimation = 'correct' | 'incorrect' | null

@@ -45,7 +45,11 @@ export function GameDisplay() {

  // Check for finish line (player reaches race goal) - only for practice mode
  useEffect(() => {
-    if (state.correctAnswers >= state.raceGoal && state.isGameActive && state.style === 'practice') {
+    if (
+      state.correctAnswers >= state.raceGoal &&
+      state.isGameActive &&
+      state.style === 'practice'
+    ) {
      // Play celebration sound (line 14182)
      playSound('celebration')
      // End the game
@@ -70,7 +74,7 @@ export function GameDisplay() {

        // Check if answer is complete
        if (state.currentQuestion) {
-          const answer = parseInt(newInput)
+          const answer = parseInt(newInput, 10)
          const correctAnswer = state.currentQuestion.correctAnswer

          // If we have enough digits to match the answer, submit
@@ -157,7 +161,19 @@ export function GameDisplay() {

    window.addEventListener('keydown', handleKeyPress)
    return () => window.removeEventListener('keydown', handleKeyPress)
-  }, [state.currentInput, state.currentQuestion, state.questionStartTime, state.style, state.streak, dispatch, trackPerformance, getAdaptiveFeedbackMessage, boostMomentum, playSound])
+  }, [
+    state.currentInput,
+    state.currentQuestion,
+    state.questionStartTime,
+    state.style,
+    state.streak,
+    dispatch,
+    trackPerformance,
+    getAdaptiveFeedbackMessage,
+    boostMomentum,
+    playSound,
+    state.momentum,
+  ])

  // Handle route celebration continue
  const handleContinueToNextRoute = () => {
@@ -167,7 +183,7 @@ export function GameDisplay() {
    dispatch({
      type: 'START_NEW_ROUTE',
      routeNumber: nextRoute,
-      stations: state.stations // Keep same stations for now
+      stations: state.stations, // Keep same stations for now
    })

    // Generate new passengers
@@ -178,90 +194,107 @@ export function GameDisplay() {
  if (!state.currentQuestion) return null

  return (
-    <div data-component="game-display" style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%'
-    }}>
+    <div
+      data-component="game-display"
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
      {/* Adaptive Feedback */}
      {state.adaptiveFeedback && (
-        <div data-component="adaptive-feedback" style={{
-          position: 'fixed',
-          top: '80px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          color: 'white',
-          padding: '12px 24px',
-          borderRadius: '12px',
-          boxShadow: '0 4px 20px rgba(102, 126, 234, 0.4)',
-          fontSize: '16px',
-          fontWeight: 'bold',
-          zIndex: 1000,
-          animation: 'slideDown 0.3s ease-out',
-          maxWidth: '600px',
-          textAlign: 'center'
-        }}>
+        <div
+          data-component="adaptive-feedback"
+          style={{
+            position: 'fixed',
+            top: '80px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            padding: '12px 24px',
+            borderRadius: '12px',
+            boxShadow: '0 4px 20px rgba(102, 126, 234, 0.4)',
+            fontSize: '16px',
+            fontWeight: 'bold',
+            zIndex: 1000,
+            animation: 'slideDown 0.3s ease-out',
+            maxWidth: '600px',
+            textAlign: 'center',
+          }}
+        >
          {state.adaptiveFeedback.message}
        </div>
      )}

      {/* Stats Header - constrained width, hidden for sprint mode */}
      {state.style !== 'sprint' && (
-        <div data-component="stats-container" style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          width: '100%',
-          padding: '0 20px',
-          marginTop: '10px'
-        }}>
-          <div data-component="stats-header" style={{
-            display: 'flex',
-            justifyContent: 'space-around',
-            marginBottom: '10px',
-            background: 'white',
-            borderRadius: '12px',
-            padding: '10px',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
-          }}>
-          <div data-stat="score" style={{ textAlign: 'center' }}>
-            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Score</div>
-            <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#3b82f6' }}>
-              {state.score}
+        <div
+          data-component="stats-container"
+          style={{
+            maxWidth: '1200px',
+            margin: '0 auto',
+            width: '100%',
+            padding: '0 20px',
+            marginTop: '10px',
+          }}
+        >
+          <div
+            data-component="stats-header"
+            style={{
+              display: 'flex',
+              justifyContent: 'space-around',
+              marginBottom: '10px',
+              background: 'white',
+              borderRadius: '12px',
+              padding: '10px',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+            }}
+          >
+            <div data-stat="score" style={{ textAlign: 'center' }}>
+              <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Score</div>
+              <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#3b82f6' }}>
+                {state.score}
+              </div>
+            </div>
+            <div data-stat="streak" style={{ textAlign: 'center' }}>
+              <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Streak</div>
+              <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#10b981' }}>
+                {state.streak} 🔥
+              </div>
+            </div>
+            <div data-stat="progress" style={{ textAlign: 'center' }}>
+              <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>
+                Progress
+              </div>
+              <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#f59e0b' }}>
+                {state.correctAnswers}/{state.raceGoal}
+              </div>
            </div>
          </div>
-          <div data-stat="streak" style={{ textAlign: 'center' }}>
-            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Streak</div>
-            <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#10b981' }}>
-              {state.streak} 🔥
-            </div>
-          </div>
-          <div data-stat="progress" style={{ textAlign: 'center' }}>
-            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Progress</div>
-            <div style={{ fontWeight: 'bold', fontSize: '24px', color: '#f59e0b' }}>
-              {state.correctAnswers}/{state.raceGoal}
-            </div>
-          </div>
-        </div>
        </div>
      )}

      {/* Race Track - full width, break out of padding */}
-      <div data-component="track-container" style={{
-        width: '100vw',
-        position: 'relative',
-        left: '50%',
-        right: '50%',
-        marginLeft: '-50vw',
-        marginRight: '-50vw',
-        padding: state.style === 'sprint' ? '0' : '0 20px',
-        display: 'flex',
-        justifyContent: state.style === 'sprint' ? 'stretch' : 'center',
-        background: 'transparent',
-        flex: state.style === 'sprint' ? 1 : 'initial',
-        minHeight: state.style === 'sprint' ? 0 : 'initial'
-      }}>
+      <div
+        data-component="track-container"
+        style={{
+          width: '100vw',
+          position: 'relative',
+          left: '50%',
+          right: '50%',
+          marginLeft: '-50vw',
+          marginRight: '-50vw',
+          padding: state.style === 'sprint' ? '0' : '0 20px',
+          display: 'flex',
+          justifyContent: state.style === 'sprint' ? 'stretch' : 'center',
+          background: 'transparent',
+          flex: state.style === 'sprint' ? 1 : 'initial',
+          minHeight: state.style === 'sprint' ? 0 : 'initial',
+        }}
+      >
        {state.style === 'survival' ? (
          <CircularTrack
            playerProgress={state.correctAnswers}
@@ -290,54 +323,67 @@ export function GameDisplay() {

      {/* Question Display - only for non-sprint modes */}
      {state.style !== 'sprint' && (
-        <div data-component="question-container" style={{
-          maxWidth: '1200px',
-          margin: '0 auto',
-          width: '100%',
-          padding: '0 20px',
-          display: 'flex',
-          justifyContent: 'center',
-          marginTop: '20px'
-        }}>
-          <div data-component="question-display" style={{
-            background: 'rgba(255, 255, 255, 0.98)',
-            borderRadius: '24px',
-            padding: '28px 50px',
-            boxShadow: '0 16px 40px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(59, 130, 246, 0.4)',
-            backdropFilter: 'blur(12px)',
-            border: '4px solid rgba(255, 255, 255, 0.95)'
-          }}>
+        <div
+          data-component="question-container"
+          style={{
+            maxWidth: '1200px',
+            margin: '0 auto',
+            width: '100%',
+            padding: '0 20px',
+            display: 'flex',
+            justifyContent: 'center',
+            marginTop: '20px',
+          }}
+        >
+          <div
+            data-component="question-display"
+            style={{
+              background: 'rgba(255, 255, 255, 0.98)',
+              borderRadius: '24px',
+              padding: '28px 50px',
+              boxShadow: '0 16px 40px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(59, 130, 246, 0.4)',
+              backdropFilter: 'blur(12px)',
+              border: '4px solid rgba(255, 255, 255, 0.95)',
+            }}
+          >
            {/* Complement equation as main focus */}
-            <div data-element="question-equation" style={{
-              fontSize: '96px',
-              fontWeight: 'bold',
-              color: '#1f2937',
-              lineHeight: '1.1',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '20px',
-              justifyContent: 'center'
-            }}>
-              <span style={{
-                background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
-                color: 'white',
-                padding: '12px 32px',
-                borderRadius: '16px',
-                minWidth: '140px',
-                display: 'inline-block',
-                textShadow: '0 3px 10px rgba(0, 0, 0, 0.3)'
-              }}>
+            <div
+              data-element="question-equation"
+              style={{
+                fontSize: '96px',
+                fontWeight: 'bold',
+                color: '#1f2937',
+                lineHeight: '1.1',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '20px',
+                justifyContent: 'center',
+              }}
+            >
+              <span
+                style={{
+                  background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+                  color: 'white',
+                  padding: '12px 32px',
+                  borderRadius: '16px',
+                  minWidth: '140px',
+                  display: 'inline-block',
+                  textShadow: '0 3px 10px rgba(0, 0, 0, 0.3)',
+                }}
+              >
                {state.currentInput || '?'}
              </span>
              <span style={{ color: '#6b7280' }}>+</span>
              {state.currentQuestion.showAsAbacus ? (
-                <div style={{
-                  transform: 'scale(2.4) translateY(8%)',
-                  transformOrigin: 'center center',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }}>
+                <div
+                  style={{
+                    transform: 'scale(2.4) translateY(8%)',
+                    transformOrigin: 'center center',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
                  <AbacusTarget number={state.currentQuestion.number} />
                </div>
              ) : (
@@ -360,4 +406,4 @@ export function GameDisplay() {
      )}
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx
@@ -10,59 +10,71 @@ export function GameIntro() {
  }

  return (
-    <div style={{
-      textAlign: 'center',
-      padding: '40px 20px',
-      maxWidth: '800px',
-      margin: '20px auto 0'
-    }}>
-      <h1 style={{
-        fontSize: '48px',
-        fontWeight: 'bold',
-        marginBottom: '16px',
-        background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        backgroundClip: 'text'
-      }}>
+    <div
+      style={{
+        textAlign: 'center',
+        padding: '40px 20px',
+        maxWidth: '800px',
+        margin: '20px auto 0',
+      }}
+    >
+      <h1
+        style={{
+          fontSize: '48px',
+          fontWeight: 'bold',
+          marginBottom: '16px',
+          background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          backgroundClip: 'text',
+        }}
+      >
        Speed Complement Race
      </h1>

-      <p style={{
-        fontSize: '18px',
-        color: '#6b7280',
-        marginBottom: '32px',
-        lineHeight: '1.6'
-      }}>
-        Race against AI opponents while solving complement problems!
-        Find the missing number to complete the equation.
+      <p
+        style={{
+          fontSize: '18px',
+          color: '#6b7280',
+          marginBottom: '32px',
+          lineHeight: '1.6',
+        }}
+      >
+        Race against AI opponents while solving complement problems! Find the missing number to
+        complete the equation.
      </p>

-      <div style={{
-        background: 'white',
-        borderRadius: '16px',
-        padding: '32px',
-        marginBottom: '32px',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        textAlign: 'left'
-      }}>
-        <h2 style={{
-          fontSize: '24px',
-          fontWeight: 'bold',
-          marginBottom: '16px',
-          color: '#1f2937'
-        }}>
+      <div
+        style={{
+          background: 'white',
+          borderRadius: '16px',
+          padding: '32px',
+          marginBottom: '32px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+          textAlign: 'left',
+        }}
+      >
+        <h2
+          style={{
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '16px',
+            color: '#1f2937',
+          }}
+        >
          How to Play
        </h2>

-        <ul style={{
-          listStyle: 'none',
-          padding: 0,
-          margin: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '12px'
-        }}>
+        <ul
+          style={{
+            listStyle: 'none',
+            padding: 0,
+            margin: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+          }}
+        >
          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
            <span style={{ fontSize: '24px' }}>🎯</span>
            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
@@ -102,7 +114,7 @@ export function GameIntro() {
          fontWeight: 'bold',
          cursor: 'pointer',
          boxShadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
-          transition: 'all 0.2s ease'
+          transition: 'all 0.2s ease',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'translateY(-2px)'
@@ -117,4 +129,4 @@ export function GameIntro() {
      </button>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/GameResults.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameResults.tsx
@@ -6,68 +6,81 @@ export function GameResults() {
  const { state, dispatch } = useComplementRace()

  // Determine race outcome
-  const playerWon = state.aiRacers.every(racer => state.correctAnswers > racer.position)
-  const playerPosition = state.aiRacers.filter(racer => racer.position >= state.correctAnswers).length + 1
+  const playerWon = state.aiRacers.every((racer) => state.correctAnswers > racer.position)
+  const playerPosition =
+    state.aiRacers.filter((racer) => racer.position >= state.correctAnswers).length + 1

  return (
-    <div style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '60px 40px 40px',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      minHeight: '100vh'
-    }}>
-      <div style={{
-        background: 'white',
-        borderRadius: '24px',
-        padding: '48px',
-        maxWidth: '600px',
-        width: '100%',
-        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
-        textAlign: 'center'
-      }}>
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '60px 40px 40px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+      }}
+    >
+      <div
+        style={{
+          background: 'white',
+          borderRadius: '24px',
+          padding: '48px',
+          maxWidth: '600px',
+          width: '100%',
+          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
+          textAlign: 'center',
+        }}
+      >
        {/* Result Header */}
-        <div style={{
-          fontSize: '64px',
-          marginBottom: '16px'
-        }}>
+        <div
+          style={{
+            fontSize: '64px',
+            marginBottom: '16px',
+          }}
+        >
          {playerWon ? '🏆' : playerPosition === 2 ? '🥈' : playerPosition === 3 ? '🥉' : '🎯'}
        </div>

-        <h1 style={{
-          fontSize: '36px',
-          fontWeight: 'bold',
-          color: '#1f2937',
-          marginBottom: '8px'
-        }}>
+        <h1
+          style={{
+            fontSize: '36px',
+            fontWeight: 'bold',
+            color: '#1f2937',
+            marginBottom: '8px',
+          }}
+        >
          {playerWon ? 'Victory!' : `${playerPosition}${getOrdinalSuffix(playerPosition)} Place`}
        </h1>

-        <p style={{
-          fontSize: '18px',
-          color: '#6b7280',
-          marginBottom: '32px'
-        }}>
-          {playerWon
-            ? 'You beat all the AI racers!'
-            : `You finished the race!`}
+        <p
+          style={{
+            fontSize: '18px',
+            color: '#6b7280',
+            marginBottom: '32px',
+          }}
+        >
+          {playerWon ? 'You beat all the AI racers!' : `You finished the race!`}
        </p>

        {/* Stats */}
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: '16px',
-          marginBottom: '32px'
-        }}>
-          <div style={{
-            background: '#f3f4f6',
-            borderRadius: '12px',
-            padding: '16px'
-          }}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '16px',
+            marginBottom: '32px',
+          }}
+        >
+          <div
+            style={{
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
+            }}
+          >
            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>
              Final Score
            </div>
@@ -76,11 +89,13 @@ export function GameResults() {
            </div>
          </div>

-          <div style={{
-            background: '#f3f4f6',
-            borderRadius: '12px',
-            padding: '16px'
-          }}>
+          <div
+            style={{
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
+            }}
+          >
            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>
              Best Streak
            </div>
@@ -89,11 +104,13 @@ export function GameResults() {
            </div>
          </div>

-          <div style={{
-            background: '#f3f4f6',
-            borderRadius: '12px',
-            padding: '16px'
-          }}>
+          <div
+            style={{
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
+            }}
+          >
            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>
              Total Questions
            </div>
@@ -102,43 +119,48 @@ export function GameResults() {
            </div>
          </div>

-          <div style={{
-            background: '#f3f4f6',
-            borderRadius: '12px',
-            padding: '16px'
-          }}>
-            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>
-              Accuracy
-            </div>
+          <div
+            style={{
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
+            }}
+          >
+            <div style={{ color: '#6b7280', fontSize: '14px', marginBottom: '4px' }}>Accuracy</div>
            <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#8b5cf6' }}>
              {state.totalQuestions > 0
                ? Math.round((state.correctAnswers / state.totalQuestions) * 100)
-                : 0}%
+                : 0}
+              %
            </div>
          </div>
        </div>

        {/* Final Standings */}
-        <div style={{
-          marginBottom: '32px',
-          textAlign: 'left'
-        }}>
-          <h3 style={{
-            fontSize: '18px',
-            fontWeight: 'bold',
-            color: '#1f2937',
-            marginBottom: '12px'
-          }}>
+        <div
+          style={{
+            marginBottom: '32px',
+            textAlign: 'left',
+          }}
+        >
+          <h3
+            style={{
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#1f2937',
+              marginBottom: '12px',
+            }}
+          >
            Final Standings
          </h3>

          {[
            { name: 'You', position: state.correctAnswers, icon: '👤' },
-            ...state.aiRacers.map(racer => ({
+            ...state.aiRacers.map((racer) => ({
              name: racer.name,
              position: racer.position,
-              icon: racer.icon
-            }))
+              icon: racer.icon,
+            })),
          ]
            .sort((a, b) => b.position - a.position)
            .map((racer, index) => (
@@ -152,11 +174,18 @@ export function GameResults() {
                  background: racer.name === 'You' ? '#eff6ff' : '#f9fafb',
                  borderRadius: '8px',
                  marginBottom: '8px',
-                  border: racer.name === 'You' ? '2px solid #3b82f6' : 'none'
+                  border: racer.name === 'You' ? '2px solid #3b82f6' : 'none',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                  <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#9ca3af', minWidth: '32px' }}>
+                  <div
+                    style={{
+                      fontSize: '24px',
+                      fontWeight: 'bold',
+                      color: '#9ca3af',
+                      minWidth: '32px',
+                    }}
+                  >
                    #{index + 1}
                  </div>
                  <div style={{ fontSize: '20px' }}>{racer.icon}</div>
@@ -172,10 +201,12 @@ export function GameResults() {
        </div>

        {/* Buttons */}
-        <div style={{
-          display: 'flex',
-          gap: '12px'
-        }}>
+        <div
+          style={{
+            display: 'flex',
+            gap: '12px',
+          }}
+        >
          <button
            onClick={() => dispatch({ type: 'RESET_GAME' })}
            style={{
@@ -189,7 +220,7 @@ export function GameResults() {
              border: 'none',
              cursor: 'pointer',
              transition: 'transform 0.2s',
-              boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)'
+              boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-2px)'
@@ -211,4 +242,4 @@ function getOrdinalSuffix(num: number): string {
  if (num === 2) return 'nd'
  if (num === 3) return 'rd'
  return 'th'
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx
@@ -9,29 +9,32 @@ interface PassengerCardProps {
  destinationStation: Station | undefined
 }

-export const PassengerCard = memo(function PassengerCard({ passenger, originStation, destinationStation }: PassengerCardProps) {
+export const PassengerCard = memo(function PassengerCard({
+  passenger,
+  originStation,
+  destinationStation,
+}: PassengerCardProps) {
  if (!destinationStation || !originStation) return null

  // Vintage train station colors
  const bgColor = passenger.isDelivered
    ? '#1a3a1a' // Dark green for delivered
    : !passenger.isBoarded
-    ? '#2a2419' // Dark brown/sepia for waiting
-    : passenger.isUrgent
-    ? '#3a2419' // Dark red-brown for urgent
-    : '#1a2a3a' // Dark blue for aboard
+      ? '#2a2419' // Dark brown/sepia for waiting
+      : passenger.isUrgent
+        ? '#3a2419' // Dark red-brown for urgent
+        : '#1a2a3a' // Dark blue for aboard

  const accentColor = passenger.isDelivered
    ? '#4ade80' // Green
    : !passenger.isBoarded
-    ? '#d4af37' // Gold for waiting
-    : passenger.isUrgent
-    ? '#ff6b35' // Orange-red for urgent
-    : '#60a5fa' // Blue for aboard
+      ? '#d4af37' // Gold for waiting
+      : passenger.isUrgent
+        ? '#ff6b35' // Orange-red for urgent
+        : '#60a5fa' // Blue for aboard

-  const borderColor = passenger.isUrgent && passenger.isBoarded && !passenger.isDelivered
-    ? '#ff6b35'
-    : '#d4af37'
+  const borderColor =
+    passenger.isUrgent && passenger.isBoarded && !passenger.isDelivered ? '#ff6b35' : '#d4af37'

  return (
    <div
@@ -42,122 +45,142 @@ export const PassengerCard = memo(function PassengerCard({ passenger, originStat
        padding: '8px 10px',
        minWidth: '220px',
        maxWidth: '280px',
-        boxShadow: passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded
-          ? '0 0 16px rgba(255, 107, 53, 0.5)'
-          : '0 4px 12px rgba(0, 0, 0, 0.4)',
+        boxShadow:
+          passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded
+            ? '0 0 16px rgba(255, 107, 53, 0.5)'
+            : '0 4px 12px rgba(0, 0, 0, 0.4)',
        position: 'relative',
        fontFamily: '"Courier New", Courier, monospace',
-        animation: passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded
-          ? 'urgentFlicker 1.5s ease-in-out infinite'
-          : 'none',
-        transition: 'all 0.3s ease'
+        animation:
+          passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded
+            ? 'urgentFlicker 1.5s ease-in-out infinite'
+            : 'none',
+        transition: 'all 0.3s ease',
      }}
    >
      {/* Top row: Passenger info and status */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        marginBottom: '6px',
-        borderBottom: `1px solid ${accentColor}33`,
-        paddingBottom: '4px',
-        paddingRight: '42px' // Make room for points badge
-      }}>
-        <div style={{
+      <div
+        style={{
          display: 'flex',
-          alignItems: 'center',
-          gap: '6px',
-          flex: 1
-        }}>
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          marginBottom: '6px',
+          borderBottom: `1px solid ${accentColor}33`,
+          paddingBottom: '4px',
+          paddingRight: '42px', // Make room for points badge
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            flex: 1,
+          }}
+        >
          <div style={{ fontSize: '20px', lineHeight: '1' }}>
            {passenger.isDelivered ? '✅' : passenger.avatar}
          </div>
-          <div style={{
-            fontSize: '11px',
-            fontWeight: 'bold',
-            color: accentColor,
-            letterSpacing: '0.5px',
-            textTransform: 'uppercase'
-          }}>
+          <div
+            style={{
+              fontSize: '11px',
+              fontWeight: 'bold',
+              color: accentColor,
+              letterSpacing: '0.5px',
+              textTransform: 'uppercase',
+            }}
+          >
            {passenger.name}
          </div>
        </div>

        {/* Status indicator */}
-        <div style={{
-          fontSize: '9px',
-          color: accentColor,
-          fontWeight: 'bold',
-          letterSpacing: '0.5px',
-          background: `${accentColor}22`,
-          padding: '2px 6px',
-          borderRadius: '2px',
-          border: `1px solid ${accentColor}66`,
-          whiteSpace: 'nowrap',
-          marginTop: '0'
-        }}>
+        <div
+          style={{
+            fontSize: '9px',
+            color: accentColor,
+            fontWeight: 'bold',
+            letterSpacing: '0.5px',
+            background: `${accentColor}22`,
+            padding: '2px 6px',
+            borderRadius: '2px',
+            border: `1px solid ${accentColor}66`,
+            whiteSpace: 'nowrap',
+            marginTop: '0',
+          }}
+        >
          {passenger.isDelivered ? 'DLVRD' : passenger.isBoarded ? 'BOARD' : 'WAIT'}
        </div>
      </div>

      {/* Route information */}
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '3px',
-        fontSize: '10px',
-        color: '#e8d4a0'
-      }}>
-        {/* From station */}
-        <div style={{
+      <div
+        style={{
          display: 'flex',
-          alignItems: 'center',
-          gap: '6px'
-        }}>
-          <span style={{
-            color: accentColor,
-            fontSize: '8px',
-            fontWeight: 'bold',
-            width: '28px',
-            letterSpacing: '0.3px'
-          }}>
+          flexDirection: 'column',
+          gap: '3px',
+          fontSize: '10px',
+          color: '#e8d4a0',
+        }}
+      >
+        {/* From station */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+          }}
+        >
+          <span
+            style={{
+              color: accentColor,
+              fontSize: '8px',
+              fontWeight: 'bold',
+              width: '28px',
+              letterSpacing: '0.3px',
+            }}
+          >
            FROM:
          </span>
-          <span style={{ fontSize: '14px', lineHeight: '1' }}>
-            {originStation.icon}
-          </span>
-          <span style={{
-            fontWeight: '600',
-            fontSize: '10px',
-            letterSpacing: '0.3px'
-          }}>
+          <span style={{ fontSize: '14px', lineHeight: '1' }}>{originStation.icon}</span>
+          <span
+            style={{
+              fontWeight: '600',
+              fontSize: '10px',
+              letterSpacing: '0.3px',
+            }}
+          >
            {originStation.name}
          </span>
        </div>

        {/* To station */}
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '6px'
-        }}>
-          <span style={{
-            color: accentColor,
-            fontSize: '8px',
-            fontWeight: 'bold',
-            width: '28px',
-            letterSpacing: '0.3px'
-          }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+          }}
+        >
+          <span
+            style={{
+              color: accentColor,
+              fontSize: '8px',
+              fontWeight: 'bold',
+              width: '28px',
+              letterSpacing: '0.3px',
+            }}
+          >
            TO:
          </span>
-          <span style={{ fontSize: '14px', lineHeight: '1' }}>
-            {destinationStation.icon}
-          </span>
-          <span style={{
-            fontWeight: '600',
-            fontSize: '10px',
-            letterSpacing: '0.3px'
-          }}>
+          <span style={{ fontSize: '14px', lineHeight: '1' }}>{destinationStation.icon}</span>
+          <span
+            style={{
+              fontWeight: '600',
+              fontSize: '10px',
+              letterSpacing: '0.3px',
+            }}
+          >
            {destinationStation.name}
          </span>
        </div>
@@ -165,33 +188,37 @@ export const PassengerCard = memo(function PassengerCard({ passenger, originStat

      {/* Points badge */}
      {!passenger.isDelivered && (
-        <div style={{
-          position: 'absolute',
-          top: '6px',
-          right: '6px',
-          background: `${accentColor}33`,
-          border: `1px solid ${accentColor}`,
-          borderRadius: '2px',
-          padding: '2px 6px',
-          fontSize: '10px',
-          fontWeight: 'bold',
-          color: accentColor,
-          letterSpacing: '0.5px'
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            top: '6px',
+            right: '6px',
+            background: `${accentColor}33`,
+            border: `1px solid ${accentColor}`,
+            borderRadius: '2px',
+            padding: '2px 6px',
+            fontSize: '10px',
+            fontWeight: 'bold',
+            color: accentColor,
+            letterSpacing: '0.5px',
+          }}
+        >
          {passenger.isUrgent ? '+20' : '+10'}
        </div>
      )}

      {/* Urgent indicator */}
      {passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded && (
-        <div style={{
-          position: 'absolute',
-          left: '8px',
-          bottom: '6px',
-          fontSize: '10px',
-          animation: 'urgentBlink 0.8s ease-in-out infinite',
-          filter: 'drop-shadow(0 0 4px rgba(255, 107, 53, 0.8))'
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            left: '8px',
+            bottom: '6px',
+            fontSize: '10px',
+            animation: 'urgentBlink 0.8s ease-in-out infinite',
+            filter: 'drop-shadow(0 0 4px rgba(255, 107, 53, 0.8))',
+          }}
+        >
          ⚠️
        </div>
      )}
--- a/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useSpring, animated } from '@react-spring/web'
+import { animated, useSpring } from '@react-spring/web'
 import { AbacusReact } from '@soroban/abacus-react'

 interface PressureGaugeProps {
@@ -16,38 +16,42 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
    config: {
      tension: 120,
      friction: 14,
-      clamp: false
-    }
+      clamp: false,
+    },
  })

  // Calculate needle angle - sweeps 180° from left to right
  // 0 PSI = 180° (pointing left), 150 PSI = 0° (pointing right)
-  const angle = spring.pressure.to(p => 180 - (p / maxPressure) * 180)
+  const angle = spring.pressure.to((p) => 180 - (p / maxPressure) * 180)

  // Get pressure color (animated)
-  const color = spring.pressure.to(p => {
+  const color = spring.pressure.to((p) => {
    if (p < 50) return '#ef4444' // Red (low)
    if (p < 100) return '#f59e0b' // Orange (medium)
    return '#10b981' // Green (high)
  })

  return (
-    <div style={{
-      position: 'relative',
-      background: 'rgba(255, 255, 255, 0.95)',
-      padding: '16px',
-      borderRadius: '12px',
-      minWidth: '220px',
-      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)'
-    }}>
+    <div
+      style={{
+        position: 'relative',
+        background: 'rgba(255, 255, 255, 0.95)',
+        padding: '16px',
+        borderRadius: '12px',
+        minWidth: '220px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+      }}
+    >
      {/* Title */}
-      <div style={{
-        fontSize: '12px',
-        color: '#6b7280',
-        marginBottom: '8px',
-        fontWeight: 'bold',
-        textAlign: 'center'
-      }}>
+      <div
+        style={{
+          fontSize: '12px',
+          color: '#6b7280',
+          marginBottom: '8px',
+          fontWeight: 'bold',
+          textAlign: 'center',
+        }}
+      >
        PRESSURE
      </div>

@@ -57,7 +61,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
        style={{
          width: '100%',
          height: 'auto',
-          marginBottom: '8px'
+          marginBottom: '8px',
        }}
      >
        {/* Background arc - semicircle from left to right (bottom half) */}
@@ -75,9 +79,9 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
          const tickAngle = 180 - (psi / maxPressure) * 180
          const tickRad = (tickAngle * Math.PI) / 180
          const x1 = 100 + Math.cos(tickRad) * 70
-          const y1 = 100 - Math.sin(tickRad) * 70  // Subtract for SVG coords
+          const y1 = 100 - Math.sin(tickRad) * 70 // Subtract for SVG coords
          const x2 = 100 + Math.cos(tickRad) * 80
-          const y2 = 100 - Math.sin(tickRad) * 80  // Subtract for SVG coords
+          const y2 = 100 - Math.sin(tickRad) * 80 // Subtract for SVG coords

          // Position for abacus label
          const labelX = 100 + Math.cos(tickRad) * 112
@@ -94,18 +98,15 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                strokeWidth="2"
                strokeLinecap="round"
              />
-              <foreignObject
-                x={labelX - 30}
-                y={labelY - 25}
-                width="60"
-                height="100"
-              >
-                <div style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  lineHeight: 0
-                }}>
+              <foreignObject x={labelX - 30} y={labelY - 25} width="60" height="100">
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    lineHeight: 0,
+                  }}
+                >
                  <AbacusReact
                    value={psi}
                    columns={3}
@@ -114,7 +115,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                    hideInactiveBeads={false}
                    scaleFactor={0.6}
                    customStyles={{
-                      columnPosts: { opacity: 0 }
+                      columnPosts: { opacity: 0 },
                    }}
                  />
                </div>
@@ -130,32 +131,36 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
        <animated.line
          x1="100"
          y1="100"
-          x2={angle.to(a => 100 + Math.cos((a * Math.PI) / 180) * 70)}
-          y2={angle.to(a => 100 - Math.sin((a * Math.PI) / 180) * 70)}
+          x2={angle.to((a) => 100 + Math.cos((a * Math.PI) / 180) * 70)}
+          y2={angle.to((a) => 100 - Math.sin((a * Math.PI) / 180) * 70)}
          stroke={color}
          strokeWidth="3"
          strokeLinecap="round"
          style={{
-            filter: color.to(c => `drop-shadow(0 2px 3px ${c})`)
+            filter: color.to((c) => `drop-shadow(0 2px 3px ${c})`),
          }}
        />
      </svg>

      {/* Abacus readout */}
-      <div style={{
-        textAlign: 'center',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '8px',
-        minHeight: '32px'
-      }}>
-        <div style={{
-          display: 'inline-flex',
+      <div
+        style={{
+          textAlign: 'center',
+          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
-          lineHeight: 0
-        }}>
+          gap: '8px',
+          minHeight: '32px',
+        }}
+      >
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            lineHeight: 0,
+          }}
+        >
          <AbacusReact
            value={Math.round(pressure)}
            columns={3}
@@ -164,7 +169,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
            hideInactiveBeads={true}
            scaleFactor={0.35}
            customStyles={{
-              columnPosts: { opacity: 0 }
+              columnPosts: { opacity: 0 },
            }}
          />
        </div>
@@ -172,4 +177,4 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
      </div>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
@@ -1,12 +1,12 @@
 'use client'

 import { useEffect, useState } from 'react'
-import type { AIRacer } from '../../lib/gameTypes'
-import { SpeechBubble } from '../AISystem/SpeechBubble'
-import { useComplementRace } from '../../context/ComplementRaceContext'
 import { useGameMode } from '@/contexts/GameModeContext'
 import { useUserProfile } from '@/contexts/UserProfileContext'
+import { useComplementRace } from '../../context/ComplementRaceContext'
 import { useSoundEffects } from '../../hooks/useSoundEffects'
+import type { AIRacer } from '../../lib/gameTypes'
+import { SpeechBubble } from '../AISystem/SpeechBubble'

 interface CircularTrackProps {
  playerProgress: number
@@ -18,12 +18,12 @@ interface CircularTrackProps {
 export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: CircularTrackProps) {
  const { state, dispatch } = useComplementRace()
  const { players } = useGameMode()
-  const { profile } = useUserProfile()
+  const { profile: _profile } = useUserProfile()
  const { playSound } = useSoundEffects()
  const [celebrationCooldown, setCelebrationCooldown] = useState<Set<string>>(new Set())

  // Get the first active player's emoji
-  const activePlayers = Array.from(players.values()).filter(p => p.id)
+  const activePlayers = Array.from(players.values()).filter((p) => p.id)
  const firstActivePlayer = activePlayers[0]
  const playerEmoji = firstActivePlayer?.emoji ?? '👤'
  const [dimensions, setDimensions] = useState({ width: 600, height: 400 })
@@ -54,8 +54,8 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
  }, [])

  const padding = 40
-  const trackWidth = dimensions.width - (padding * 2)
-  const trackHeight = dimensions.height - (padding * 2)
+  const trackWidth = dimensions.width - padding * 2
+  const trackHeight = dimensions.height - padding * 2

  // For a rounded rectangle track, we have straight sections and curved ends
  const straightLength = Math.max(trackWidth, trackHeight) - Math.min(trackWidth, trackHeight)
@@ -70,7 +70,7 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
    // Track perimeter consists of: 2 straights + 2 semicircles
    const straightPerim = straightLength
    const curvePerim = Math.PI * radius
-    const totalPerim = (2 * straightPerim) + (2 * curvePerim)
+    const totalPerim = 2 * straightPerim + 2 * curvePerim

    const distanceAlongTrack = normalizedProgress * totalPerim

@@ -84,67 +84,67 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
      const topStraightEnd = straightPerim
      const rightCurveEnd = topStraightEnd + curvePerim
      const bottomStraightEnd = rightCurveEnd + straightPerim
-      const leftCurveEnd = bottomStraightEnd + curvePerim
+      const _leftCurveEnd = bottomStraightEnd + curvePerim

      if (distanceAlongTrack < topStraightEnd) {
        // Top straight (moving right)
        const t = distanceAlongTrack / straightPerim
-        x = centerX - (straightLength / 2) + (t * straightLength)
+        x = centerX - straightLength / 2 + t * straightLength
        y = centerY - radius
        angle = 90
      } else if (distanceAlongTrack < rightCurveEnd) {
        // Right curve
        const curveProgress = (distanceAlongTrack - topStraightEnd) / curvePerim
-        const curveAngle = curveProgress * Math.PI - (Math.PI / 2)
-        x = centerX + (straightLength / 2) + (radius * Math.cos(curveAngle))
-        y = centerY + (radius * Math.sin(curveAngle))
-        angle = (curveProgress * 180) + 90
+        const curveAngle = curveProgress * Math.PI - Math.PI / 2
+        x = centerX + straightLength / 2 + radius * Math.cos(curveAngle)
+        y = centerY + radius * Math.sin(curveAngle)
+        angle = curveProgress * 180 + 90
      } else if (distanceAlongTrack < bottomStraightEnd) {
        // Bottom straight (moving left)
        const t = (distanceAlongTrack - rightCurveEnd) / straightPerim
-        x = centerX + (straightLength / 2) - (t * straightLength)
+        x = centerX + straightLength / 2 - t * straightLength
        y = centerY + radius
        angle = 270
      } else {
        // Left curve
        const curveProgress = (distanceAlongTrack - bottomStraightEnd) / curvePerim
-        const curveAngle = curveProgress * Math.PI + (Math.PI / 2)
-        x = centerX - (straightLength / 2) + (radius * Math.cos(curveAngle))
-        y = centerY + (radius * Math.sin(curveAngle))
-        angle = (curveProgress * 180) + 270
+        const curveAngle = curveProgress * Math.PI + Math.PI / 2
+        x = centerX - straightLength / 2 + radius * Math.cos(curveAngle)
+        y = centerY + radius * Math.sin(curveAngle)
+        angle = curveProgress * 180 + 270
      }
    } else {
      // Vertical track: straight sections on left/right, curves on top/bottom
      const leftStraightEnd = straightPerim
      const bottomCurveEnd = leftStraightEnd + curvePerim
      const rightStraightEnd = bottomCurveEnd + straightPerim
-      const topCurveEnd = rightStraightEnd + curvePerim
+      const _topCurveEnd = rightStraightEnd + curvePerim

      if (distanceAlongTrack < leftStraightEnd) {
        // Left straight (moving down)
        const t = distanceAlongTrack / straightPerim
        x = centerX - radius
-        y = centerY - (straightLength / 2) + (t * straightLength)
+        y = centerY - straightLength / 2 + t * straightLength
        angle = 180
      } else if (distanceAlongTrack < bottomCurveEnd) {
        // Bottom curve
        const curveProgress = (distanceAlongTrack - leftStraightEnd) / curvePerim
        const curveAngle = curveProgress * Math.PI
-        x = centerX + (radius * Math.cos(curveAngle))
-        y = centerY + (straightLength / 2) + (radius * Math.sin(curveAngle))
-        angle = (curveProgress * 180) + 180
+        x = centerX + radius * Math.cos(curveAngle)
+        y = centerY + straightLength / 2 + radius * Math.sin(curveAngle)
+        angle = curveProgress * 180 + 180
      } else if (distanceAlongTrack < rightStraightEnd) {
        // Right straight (moving up)
        const t = (distanceAlongTrack - bottomCurveEnd) / straightPerim
        x = centerX + radius
-        y = centerY + (straightLength / 2) - (t * straightLength)
+        y = centerY + straightLength / 2 - t * straightLength
        angle = 0
      } else {
        // Top curve
        const curveProgress = (distanceAlongTrack - rightStraightEnd) / curvePerim
        const curveAngle = curveProgress * Math.PI + Math.PI
-        x = centerX + (radius * Math.cos(curveAngle))
-        y = centerY - (straightLength / 2) + (radius * Math.sin(curveAngle))
+        x = centerX + radius * Math.cos(curveAngle)
+        y = centerY - straightLength / 2 + radius * Math.sin(curveAngle)
        angle = curveProgress * 180
      }
    }
@@ -160,9 +160,9 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
      dispatch({ type: 'COMPLETE_LAP', racerId: 'player' })
      // Play celebration sound (line 12801)
      playSound('lap_celebration', 0.6)
-      setCelebrationCooldown(prev => new Set(prev).add('player'))
+      setCelebrationCooldown((prev) => new Set(prev).add('player'))
      setTimeout(() => {
-        setCelebrationCooldown(prev => {
+        setCelebrationCooldown((prev) => {
          const next = new Set(prev)
          next.delete('player')
          return next
@@ -171,14 +171,14 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
    }

    // Check AI laps
-    aiRacers.forEach(racer => {
+    aiRacers.forEach((racer) => {
      const aiCurrentLap = Math.floor(racer.position / 50)
      const aiPreviousLap = aiLaps.get(racer.id) || 0
      if (aiCurrentLap > aiPreviousLap && !celebrationCooldown.has(racer.id)) {
        dispatch({ type: 'COMPLETE_LAP', racerId: racer.id })
-        setCelebrationCooldown(prev => new Set(prev).add(racer.id))
+        setCelebrationCooldown((prev) => new Set(prev).add(racer.id))
        setTimeout(() => {
-          setCelebrationCooldown(prev => {
+          setCelebrationCooldown((prev) => {
            const next = new Set(prev)
            next.delete(racer.id)
            return next
@@ -186,7 +186,15 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
        }, 2000)
      }
    })
-  }, [playerProgress, playerLap, aiRacers, aiLaps, celebrationCooldown, dispatch])
+  }, [
+    playerProgress,
+    playerLap,
+    aiRacers,
+    aiLaps,
+    celebrationCooldown,
+    dispatch, // Play celebration sound (line 12801)
+    playSound,
+  ])

  const playerPos = getCircularPosition(playerProgress)

@@ -201,8 +209,8 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C

    if (isHorizontal) {
      // Horizontal track - curved ends on left/right
-      const leftCenterX = centerX - (straightLength / 2)
-      const rightCenterX = centerX + (straightLength / 2)
+      const leftCenterX = centerX - straightLength / 2
+      const rightCenterX = centerX + straightLength / 2
      const curveTopY = centerY - r
      const curveBottomY = centerY + r

@@ -216,8 +224,8 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
      `
    } else {
      // Vertical track - curved ends on top/bottom
-      const topCenterY = centerY - (straightLength / 2)
-      const bottomCenterY = centerY + (straightLength / 2)
+      const topCenterY = centerY - straightLength / 2
+      const bottomCenterY = centerY + straightLength / 2
      const curveLeftX = centerX - r
      const curveRightX = centerX + r

@@ -233,12 +241,15 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
  }

  return (
-    <div data-component="circular-track" style={{
-      position: 'relative',
-      width: `${dimensions.width}px`,
-      height: `${dimensions.height}px`,
-      margin: '0 auto'
-    }}>
+    <div
+      data-component="circular-track"
+      style={{
+        position: 'relative',
+        width: `${dimensions.width}px`,
+        height: `${dimensions.height}px`,
+        margin: '0 auto',
+      }}
+    >
      {/* SVG Track */}
      <svg
        data-component="track-svg"
@@ -247,38 +258,20 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
        style={{
          position: 'absolute',
          top: 0,
-          left: 0
+          left: 0,
        }}
      >
        {/* Infield grass */}
-        <path
-          d={createRoundedRectPath(15, false)}
-          fill="#7cb342"
-          stroke="none"
-        />
+        <path d={createRoundedRectPath(15, false)} fill="#7cb342" stroke="none" />

        {/* Track background - reddish clay color */}
-        <path
-          d={createRoundedRectPath(-10, true)}
-          fill="#d97757"
-          stroke="none"
-        />
+        <path d={createRoundedRectPath(-10, true)} fill="#d97757" stroke="none" />

        {/* Track outer edge - white boundary */}
-        <path
-          d={createRoundedRectPath(-15, true)}
-          fill="none"
-          stroke="white"
-          strokeWidth="3"
-        />
+        <path d={createRoundedRectPath(-15, true)} fill="none" stroke="white" strokeWidth="3" />

        {/* Track inner edge - white boundary */}
-        <path
-          d={createRoundedRectPath(15, false)}
-          fill="none"
-          stroke="white"
-          strokeWidth="3"
-        />
+        <path d={createRoundedRectPath(15, false)} fill="none" stroke="white" strokeWidth="3" />

        {/* Lane markers - dashed white lines */}
        {[-5, 0, 5].map((offset) => (
@@ -308,11 +301,11 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
            return (
              <g>
                {/* Checkered pattern - vertical line */}
-                {[0, 1, 2, 3, 4, 5].map(i => (
+                {[0, 1, 2, 3, 4, 5].map((i) => (
                  <rect
                    key={i}
                    x={x - lineWidth / 2}
-                    y={yStart + (squareSize * i)}
+                    y={yStart + squareSize * i}
                    width={lineWidth}
                    height={squareSize}
                    fill={i % 2 === 0 ? 'black' : 'white'}
@@ -329,10 +322,10 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
            return (
              <g>
                {/* Checkered pattern - horizontal line */}
-                {[0, 1, 2, 3, 4, 5].map(i => (
+                {[0, 1, 2, 3, 4, 5].map((i) => (
                  <rect
                    key={i}
-                    x={xStart + (squareSize * i)}
+                    x={xStart + squareSize * i}
                    y={y - lineWidth / 2}
                    width={squareSize}
                    height={lineWidth}
@@ -345,14 +338,14 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
        })()}

        {/* Distance markers (quarter points) */}
-        {[0.25, 0.5, 0.75].map(fraction => {
+        {[0.25, 0.5, 0.75].map((fraction) => {
          const pos = getCircularPosition(fraction * 50)
          const markerLength = 12
          const perpAngle = (pos.angle + 90) * (Math.PI / 180)
-          const x1 = pos.x - (markerLength * Math.cos(perpAngle))
-          const y1 = pos.y - (markerLength * Math.sin(perpAngle))
-          const x2 = pos.x + (markerLength * Math.cos(perpAngle))
-          const y2 = pos.y + (markerLength * Math.sin(perpAngle))
+          const x1 = pos.x - markerLength * Math.cos(perpAngle)
+          const y1 = pos.y - markerLength * Math.sin(perpAngle)
+          const x2 = pos.x + markerLength * Math.cos(perpAngle)
+          const y2 = pos.y + markerLength * Math.sin(perpAngle)
          return (
            <line
              key={fraction}
@@ -369,21 +362,23 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
      </svg>

      {/* Player racer */}
-      <div style={{
-        position: 'absolute',
-        left: `${playerPos.x}px`,
-        top: `${playerPos.y}px`,
-        transform: `translate(-50%, -50%) rotate(${playerPos.angle}deg)`,
-        fontSize: '32px',
-        filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-        zIndex: 10,
-        transition: 'left 0.3s ease-out, top 0.3s ease-out'
-      }}>
+      <div
+        style={{
+          position: 'absolute',
+          left: `${playerPos.x}px`,
+          top: `${playerPos.y}px`,
+          transform: `translate(-50%, -50%) rotate(${playerPos.angle}deg)`,
+          fontSize: '32px',
+          filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
+          zIndex: 10,
+          transition: 'left 0.3s ease-out, top 0.3s ease-out',
+        }}
+      >
        {playerEmoji}
      </div>

      {/* AI racers */}
-      {aiRacers.map((racer, index) => {
+      {aiRacers.map((racer, _index) => {
        const aiPos = getCircularPosition(racer.position)
        const activeBubble = state.activeSpeechBubbles.get(racer.id)

@@ -398,14 +393,16 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
              fontSize: '28px',
              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
              zIndex: 5,
-              transition: 'left 0.2s linear, top 0.2s linear'
+              transition: 'left 0.2s linear, top 0.2s linear',
            }}
          >
            {racer.icon}
            {activeBubble && (
-              <div style={{
-                transform: `rotate(${-aiPos.angle}deg)` // Counter-rotate bubble
-              }}>
+              <div
+                style={{
+                  transform: `rotate(${-aiPos.angle}deg)`, // Counter-rotate bubble
+                }}
+              >
                <SpeechBubble
                  message={activeBubble}
                  onHide={() => dispatch({ type: 'CLEAR_AI_COMMENT', racerId: racer.id })}
@@ -417,66 +414,76 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
      })}

      {/* Lap counter */}
-      <div style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        background: 'rgba(255, 255, 255, 0.95)',
-        borderRadius: '50%',
-        width: '120px',
-        height: '120px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        border: '3px solid #3b82f6'
-      }}>
-        <div style={{
-          fontSize: '14px',
-          color: '#6b7280',
-          marginBottom: '4px',
-          fontWeight: 'bold'
-        }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          background: 'rgba(255, 255, 255, 0.95)',
+          borderRadius: '50%',
+          width: '120px',
+          height: '120px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          border: '3px solid #3b82f6',
+        }}
+      >
+        <div
+          style={{
+            fontSize: '14px',
+            color: '#6b7280',
+            marginBottom: '4px',
+            fontWeight: 'bold',
+          }}
+        >
          Lap
        </div>
-        <div style={{
-          fontSize: '36px',
-          fontWeight: 'bold',
-          color: '#3b82f6'
-        }}>
+        <div
+          style={{
+            fontSize: '36px',
+            fontWeight: 'bold',
+            color: '#3b82f6',
+          }}
+        >
          {playerLap + 1}
        </div>
-        <div style={{
-          fontSize: '12px',
-          color: '#9ca3af',
-          marginTop: '4px'
-        }}>
-          {Math.floor((playerProgress % 50) / 50 * 100)}%
+        <div
+          style={{
+            fontSize: '12px',
+            color: '#9ca3af',
+            marginTop: '4px',
+          }}
+        >
+          {Math.floor(((playerProgress % 50) / 50) * 100)}%
        </div>
      </div>

      {/* Lap celebration */}
      {celebrationCooldown.has('player') && (
-        <div style={{
-          position: 'absolute',
-          top: '20px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          background: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
-          color: 'white',
-          padding: '12px 24px',
-          borderRadius: '12px',
-          fontSize: '18px',
-          fontWeight: 'bold',
-          boxShadow: '0 4px 20px rgba(251, 191, 36, 0.4)',
-          animation: 'bounce 0.5s ease',
-          zIndex: 100
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            top: '20px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            background: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
+            color: 'white',
+            padding: '12px 24px',
+            borderRadius: '12px',
+            fontSize: '18px',
+            fontWeight: 'bold',
+            boxShadow: '0 4px 20px rgba(251, 191, 36, 0.4)',
+            animation: 'bounce 0.5s ease',
+            zIndex: 100,
+          }}
+        >
          🎉 Lap {playerLap + 1} Complete! 🎉
        </div>
      )}
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/GameHUD.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/GameHUD.tsx
@@ -1,10 +1,10 @@
 'use client'

 import { memo } from 'react'
-import type { Station, Passenger, ComplementQuestion } from '../../lib/gameTypes'
+import type { ComplementQuestion, Passenger, Station } from '../../lib/gameTypes'
+import { AbacusTarget } from '../AbacusTarget'
 import { PassengerCard } from '../PassengerCard'
 import { PressureGauge } from '../PressureGauge'
-import { AbacusTarget } from '../AbacusTarget'

 interface RouteTheme {
  emoji: string
@@ -23,173 +23,201 @@ interface GameHUDProps {
  currentInput: string
 }

-export const GameHUD = memo(({
-  routeTheme,
-  currentRoute,
-  periodName,
-  timeRemaining,
-  pressure,
-  nonDeliveredPassengers,
-  stations,
-  currentQuestion,
-  currentInput
-}: GameHUDProps) => {
-  return (
-    <>
-      {/* Route and time of day indicator */}
-      <div data-component="route-info" style={{
-        position: 'absolute',
-        top: '10px',
-        left: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        zIndex: 10
-      }}>
-        {/* Current Route */}
-        <div style={{
-          background: 'rgba(0, 0, 0, 0.3)',
-          color: 'white',
-          padding: '8px 14px',
-          borderRadius: '8px',
-          fontSize: '16px',
-          fontWeight: 'bold',
-          backdropFilter: 'blur(4px)',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px'
-        }}>
-          <span style={{ fontSize: '20px' }}>{routeTheme.emoji}</span>
-          <div>
-            <div style={{ fontSize: '14px', opacity: 0.8 }}>Route {currentRoute}</div>
-            <div style={{ fontSize: '12px', opacity: 0.9 }}>{routeTheme.name}</div>
+export const GameHUD = memo(
+  ({
+    routeTheme,
+    currentRoute,
+    periodName,
+    timeRemaining,
+    pressure,
+    nonDeliveredPassengers,
+    stations,
+    currentQuestion,
+    currentInput,
+  }: GameHUDProps) => {
+    return (
+      <>
+        {/* Route and time of day indicator */}
+        <div
+          data-component="route-info"
+          style={{
+            position: 'absolute',
+            top: '10px',
+            left: '10px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            zIndex: 10,
+          }}
+        >
+          {/* Current Route */}
+          <div
+            style={{
+              background: 'rgba(0, 0, 0, 0.3)',
+              color: 'white',
+              padding: '8px 14px',
+              borderRadius: '8px',
+              fontSize: '16px',
+              fontWeight: 'bold',
+              backdropFilter: 'blur(4px)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+            }}
+          >
+            <span style={{ fontSize: '20px' }}>{routeTheme.emoji}</span>
+            <div>
+              <div style={{ fontSize: '14px', opacity: 0.8 }}>Route {currentRoute}</div>
+              <div style={{ fontSize: '12px', opacity: 0.9 }}>{routeTheme.name}</div>
+            </div>
+          </div>
+
+          {/* Time of Day */}
+          <div
+            style={{
+              background: 'rgba(0, 0, 0, 0.3)',
+              color: 'white',
+              padding: '6px 12px',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: 'bold',
+              backdropFilter: 'blur(4px)',
+            }}
+          >
+            {periodName}
          </div>
        </div>

-        {/* Time of Day */}
-        <div style={{
-          background: 'rgba(0, 0, 0, 0.3)',
-          color: 'white',
-          padding: '6px 12px',
-          borderRadius: '8px',
-          fontSize: '14px',
-          fontWeight: 'bold',
-          backdropFilter: 'blur(4px)'
-        }}>
-          {periodName}
-        </div>
-      </div>
-
-      {/* Time remaining */}
-      <div data-component="time-remaining" style={{
-        position: 'absolute',
-        top: '10px',
-        right: '10px',
-        background: 'rgba(0, 0, 0, 0.3)',
-        color: 'white',
-        padding: '6px 12px',
-        borderRadius: '8px',
-        fontSize: '18px',
-        fontWeight: 'bold',
-        backdropFilter: 'blur(4px)',
-        zIndex: 10
-      }}>
-        ⏱️ {timeRemaining}s
-      </div>
-
-      {/* Pressure gauge */}
-      <div data-component="pressure-gauge-container" style={{
-        position: 'fixed',
-        bottom: '20px',
-        left: '20px',
-        zIndex: 1000,
-        width: '120px'
-      }}>
-        <PressureGauge pressure={pressure} />
-      </div>
-
-      {/* Passenger cards - show all non-delivered passengers */}
-      {nonDeliveredPassengers.length > 0 && (
-        <div data-component="passenger-list" style={{
-          position: 'fixed',
-          bottom: '20px',
-          right: '20px',
-          display: 'flex',
-          flexDirection: 'column-reverse',
-          gap: '8px',
-          zIndex: 1000,
-          maxHeight: 'calc(100vh - 40px)',
-          overflowY: 'auto'
-        }}>
-          {nonDeliveredPassengers.map(passenger => (
-            <PassengerCard
-              key={passenger.id}
-              passenger={passenger}
-              originStation={stations.find(s => s.id === passenger.originStationId)}
-              destinationStation={stations.find(s => s.id === passenger.destinationStationId)}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Question Display - centered at bottom, equation-focused */}
-      {currentQuestion && (
-        <div data-component="sprint-question-display" style={{
-          position: 'fixed',
-          bottom: '20px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          background: 'rgba(255, 255, 255, 0.98)',
-          borderRadius: '24px',
-          padding: '28px 50px',
-          boxShadow: '0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(59, 130, 246, 0.4)',
-          backdropFilter: 'blur(12px)',
-          border: '4px solid rgba(255, 255, 255, 0.95)',
-          zIndex: 1000
-        }}>
-          {/* Complement equation as main focus */}
-          <div data-element="sprint-question-equation" style={{
-            fontSize: '96px',
+        {/* Time remaining */}
+        <div
+          data-component="time-remaining"
+          style={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            background: 'rgba(0, 0, 0, 0.3)',
+            color: 'white',
+            padding: '6px 12px',
+            borderRadius: '8px',
+            fontSize: '18px',
            fontWeight: 'bold',
-            color: '#1f2937',
-            lineHeight: '1.1',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '20px',
-            justifyContent: 'center'
-          }}>
-            <span style={{
-              background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
-              color: 'white',
-              padding: '12px 32px',
-              borderRadius: '16px',
-              minWidth: '140px',
-              display: 'inline-block',
-              textShadow: '0 3px 10px rgba(0, 0, 0, 0.3)'
-            }}>
-              {currentInput || '?'}
-            </span>
-            <span style={{ color: '#6b7280' }}>+</span>
-            {currentQuestion.showAsAbacus ? (
-              <div style={{
-                transform: 'scale(2.4) translateY(8%)',
-                transformOrigin: 'center center',
+            backdropFilter: 'blur(4px)',
+            zIndex: 10,
+          }}
+        >
+          ⏱️ {timeRemaining}s
+        </div>
+
+        {/* Pressure gauge */}
+        <div
+          data-component="pressure-gauge-container"
+          style={{
+            position: 'fixed',
+            bottom: '20px',
+            left: '20px',
+            zIndex: 1000,
+            width: '120px',
+          }}
+        >
+          <PressureGauge pressure={pressure} />
+        </div>
+
+        {/* Passenger cards - show all non-delivered passengers */}
+        {nonDeliveredPassengers.length > 0 && (
+          <div
+            data-component="passenger-list"
+            style={{
+              position: 'fixed',
+              bottom: '20px',
+              right: '20px',
+              display: 'flex',
+              flexDirection: 'column-reverse',
+              gap: '8px',
+              zIndex: 1000,
+              maxHeight: 'calc(100vh - 40px)',
+              overflowY: 'auto',
+            }}
+          >
+            {nonDeliveredPassengers.map((passenger) => (
+              <PassengerCard
+                key={passenger.id}
+                passenger={passenger}
+                originStation={stations.find((s) => s.id === passenger.originStationId)}
+                destinationStation={stations.find((s) => s.id === passenger.destinationStationId)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Question Display - centered at bottom, equation-focused */}
+        {currentQuestion && (
+          <div
+            data-component="sprint-question-display"
+            style={{
+              position: 'fixed',
+              bottom: '20px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              background: 'rgba(255, 255, 255, 0.98)',
+              borderRadius: '24px',
+              padding: '28px 50px',
+              boxShadow: '0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(59, 130, 246, 0.4)',
+              backdropFilter: 'blur(12px)',
+              border: '4px solid rgba(255, 255, 255, 0.95)',
+              zIndex: 1000,
+            }}
+          >
+            {/* Complement equation as main focus */}
+            <div
+              data-element="sprint-question-equation"
+              style={{
+                fontSize: '96px',
+                fontWeight: 'bold',
+                color: '#1f2937',
+                lineHeight: '1.1',
                display: 'flex',
                alignItems: 'center',
-                justifyContent: 'center'
-              }}>
-                <AbacusTarget number={currentQuestion.number} />
-              </div>
-            ) : (
-              <span>{currentQuestion.number}</span>
-            )}
-            <span style={{ color: '#6b7280' }}>=</span>
-            <span style={{ color: '#10b981' }}>{currentQuestion.targetSum}</span>
+                gap: '20px',
+                justifyContent: 'center',
+              }}
+            >
+              <span
+                style={{
+                  background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+                  color: 'white',
+                  padding: '12px 32px',
+                  borderRadius: '16px',
+                  minWidth: '140px',
+                  display: 'inline-block',
+                  textShadow: '0 3px 10px rgba(0, 0, 0, 0.3)',
+                }}
+              >
+                {currentInput || '?'}
+              </span>
+              <span style={{ color: '#6b7280' }}>+</span>
+              {currentQuestion.showAsAbacus ? (
+                <div
+                  style={{
+                    transform: 'scale(2.4) translateY(8%)',
+                    transformOrigin: 'center center',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <AbacusTarget number={currentQuestion.number} />
+                </div>
+              ) : (
+                <span>{currentQuestion.number}</span>
+              )}
+              <span style={{ color: '#6b7280' }}>=</span>
+              <span style={{ color: '#10b981' }}>{currentQuestion.targetSum}</span>
+            </div>
          </div>
-        </div>
-      )}
-    </>
-  )
-})
+        )}
+      </>
+    )
+  }
+)

 GameHUD.displayName = 'GameHUD'
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
@@ -1,10 +1,10 @@
 'use client'

-import type { AIRacer } from '../../lib/gameTypes'
-import { SpeechBubble } from '../AISystem/SpeechBubble'
-import { useComplementRace } from '../../context/ComplementRaceContext'
 import { useGameMode } from '@/contexts/GameModeContext'
 import { useUserProfile } from '@/contexts/UserProfileContext'
+import { useComplementRace } from '../../context/ComplementRaceContext'
+import type { AIRacer } from '../../lib/gameTypes'
+import { SpeechBubble } from '../AISystem/SpeechBubble'

 interface LinearTrackProps {
  playerProgress: number
@@ -13,13 +13,18 @@ interface LinearTrackProps {
  showFinishLine?: boolean
 }

-export function LinearTrack({ playerProgress, aiRacers, raceGoal, showFinishLine = true }: LinearTrackProps) {
+export function LinearTrack({
+  playerProgress,
+  aiRacers,
+  raceGoal,
+  showFinishLine = true,
+}: LinearTrackProps) {
  const { state, dispatch } = useComplementRace()
  const { players } = useGameMode()
-  const { profile } = useUserProfile()
+  const { profile: _profile } = useUserProfile()

  // Get the first active player's emoji
-  const activePlayers = Array.from(players.values()).filter(p => p.id)
+  const activePlayers = Array.from(players.values()).filter((p) => p.id)
  const firstActivePlayer = activePlayers[0]
  const playerEmoji = firstActivePlayer?.emoji ?? '👤'

@@ -32,71 +37,86 @@ export function LinearTrack({ playerProgress, aiRacers, raceGoal, showFinishLine
  const playerPosition = getPosition(playerProgress)

  return (
-    <div data-component="linear-track" style={{
-      position: 'relative',
-      width: '100%',
-      height: '200px',
-      background: 'linear-gradient(to bottom, #87ceeb 0%, #e0f2fe 50%, #90ee90 50%, #d4f1d4 100%)',
-      borderRadius: '12px',
-      overflow: 'hidden',
-      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-      marginTop: '20px'
-    }}>
+    <div
+      data-component="linear-track"
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '200px',
+        background:
+          'linear-gradient(to bottom, #87ceeb 0%, #e0f2fe 50%, #90ee90 50%, #d4f1d4 100%)',
+        borderRadius: '12px',
+        overflow: 'hidden',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        marginTop: '20px',
+      }}
+    >
      {/* Track lines */}
-      <div style={{
-        position: 'absolute',
-        top: '50%',
-        left: 0,
-        right: 0,
-        height: '2px',
-        background: 'rgba(0, 0, 0, 0.1)',
-        transform: 'translateY(-50%)'
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: 0,
+          right: 0,
+          height: '2px',
+          background: 'rgba(0, 0, 0, 0.1)',
+          transform: 'translateY(-50%)',
+        }}
+      />

-      <div style={{
-        position: 'absolute',
-        top: '40%',
-        left: 0,
-        right: 0,
-        height: '1px',
-        background: 'rgba(0, 0, 0, 0.05)',
-        transform: 'translateY(-50%)'
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          top: '40%',
+          left: 0,
+          right: 0,
+          height: '1px',
+          background: 'rgba(0, 0, 0, 0.05)',
+          transform: 'translateY(-50%)',
+        }}
+      />

-      <div style={{
-        position: 'absolute',
-        top: '60%',
-        left: 0,
-        right: 0,
-        height: '1px',
-        background: 'rgba(0, 0, 0, 0.05)',
-        transform: 'translateY(-50%)'
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          top: '60%',
+          left: 0,
+          right: 0,
+          height: '1px',
+          background: 'rgba(0, 0, 0, 0.05)',
+          transform: 'translateY(-50%)',
+        }}
+      />

      {/* Finish line */}
      {showFinishLine && (
-        <div style={{
-          position: 'absolute',
-          right: '2%',
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          background: 'repeating-linear-gradient(0deg, black 0px, black 10px, white 10px, white 20px)',
-          boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)'
-        }} />
+        <div
+          style={{
+            position: 'absolute',
+            right: '2%',
+            top: 0,
+            bottom: 0,
+            width: '4px',
+            background:
+              'repeating-linear-gradient(0deg, black 0px, black 10px, white 10px, white 20px)',
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
+          }}
+        />
      )}

      {/* Player racer */}
-      <div style={{
-        position: 'absolute',
-        left: `${playerPosition}%`,
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-        fontSize: '32px',
-        transition: 'left 0.3s ease-out',
-        filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-        zIndex: 10
-      }}>
+      <div
+        style={{
+          position: 'absolute',
+          left: `${playerPosition}%`,
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontSize: '32px',
+          transition: 'left 0.3s ease-out',
+          filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
+          zIndex: 10,
+        }}
+      >
        {playerEmoji}
      </div>

@@ -111,12 +131,12 @@ export function LinearTrack({ playerProgress, aiRacers, raceGoal, showFinishLine
            style={{
              position: 'absolute',
              left: `${aiPosition}%`,
-              top: `${35 + (index * 15)}%`,
+              top: `${35 + index * 15}%`,
              transform: 'translate(-50%, -50%)',
              fontSize: '28px',
              transition: 'left 0.2s linear',
              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-              zIndex: 5
+              zIndex: 5,
            }}
          >
            {racer.icon}
@@ -131,20 +151,22 @@ export function LinearTrack({ playerProgress, aiRacers, raceGoal, showFinishLine
      })}

      {/* Progress indicator */}
-      <div style={{
-        position: 'absolute',
-        bottom: '10px',
-        left: '10px',
-        background: 'rgba(255, 255, 255, 0.9)',
-        padding: '6px 12px',
-        borderRadius: '8px',
-        fontSize: '14px',
-        fontWeight: 'bold',
-        color: '#1f2937',
-        boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)'
-      }}>
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '10px',
+          left: '10px',
+          background: 'rgba(255, 255, 255, 0.9)',
+          padding: '6px 12px',
+          borderRadius: '8px',
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: '#1f2937',
+          boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
+        }}
+      >
        {playerProgress} / {raceGoal}
      </div>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/RailroadTrackPath.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/RailroadTrackPath.tsx
@@ -1,7 +1,7 @@
 'use client'

 import { memo } from 'react'
-import type { Station, Passenger } from '../../lib/gameTypes'
+import type { Passenger, Station } from '../../lib/gameTypes'
 import type { Landmark } from '../../lib/landmarks'

 interface RailroadTrackPathProps {
@@ -21,179 +21,184 @@ interface RailroadTrackPathProps {
  disembarkingAnimations: Map<string, unknown>
 }

-export const RailroadTrackPath = memo(({
-  tiesAndRails,
-  referencePath,
-  pathRef,
-  landmarkPositions,
-  landmarks,
-  stationPositions,
-  stations,
-  passengers,
-  boardingAnimations,
-  disembarkingAnimations
-}: RailroadTrackPathProps) => {
-  return (
-    <>
-      {/* Railroad ties */}
-      {tiesAndRails?.ties.map((tie, index) => (
-        <line
-          key={`tie-${index}`}
-          x1={tie.x1}
-          y1={tie.y1}
-          x2={tie.x2}
-          y2={tie.y2}
-          stroke="#654321"
-          strokeWidth="5"
-          strokeLinecap="round"
-          opacity="0.8"
-        />
-      ))}
+export const RailroadTrackPath = memo(
+  ({
+    tiesAndRails,
+    referencePath,
+    pathRef,
+    landmarkPositions,
+    landmarks,
+    stationPositions,
+    stations,
+    passengers,
+    boardingAnimations,
+    disembarkingAnimations,
+  }: RailroadTrackPathProps) => {
+    return (
+      <>
+        {/* Railroad ties */}
+        {tiesAndRails?.ties.map((tie, index) => (
+          <line
+            key={`tie-${index}`}
+            x1={tie.x1}
+            y1={tie.y1}
+            x2={tie.x2}
+            y2={tie.y2}
+            stroke="#654321"
+            strokeWidth="5"
+            strokeLinecap="round"
+            opacity="0.8"
+          />
+        ))}

-      {/* Left rail */}
-      {tiesAndRails && tiesAndRails.leftRailPath && (
-        <path
-          d={tiesAndRails.leftRailPath}
-          fill="none"
-          stroke="#C0C0C0"
-          strokeWidth="5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      )}
+        {/* Left rail */}
+        {tiesAndRails?.leftRailPath && (
+          <path
+            d={tiesAndRails.leftRailPath}
+            fill="none"
+            stroke="#C0C0C0"
+            strokeWidth="5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        )}

-      {/* Right rail */}
-      {tiesAndRails && tiesAndRails.rightRailPath && (
-        <path
-          d={tiesAndRails.rightRailPath}
-          fill="none"
-          stroke="#C0C0C0"
-          strokeWidth="5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      )}
+        {/* Right rail */}
+        {tiesAndRails?.rightRailPath && (
+          <path
+            d={tiesAndRails.rightRailPath}
+            fill="none"
+            stroke="#C0C0C0"
+            strokeWidth="5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        )}

-      {/* Reference path (invisible, used for positioning) */}
-      <path
-        ref={pathRef}
-        d={referencePath}
-        fill="none"
-        stroke="transparent"
-        strokeWidth="2"
-      />
+        {/* Reference path (invisible, used for positioning) */}
+        <path ref={pathRef} d={referencePath} fill="none" stroke="transparent" strokeWidth="2" />

-      {/* Landmarks - background scenery */}
-      {landmarkPositions.map((pos, index) => (
-        <text
-          key={`landmark-${index}`}
-          x={pos.x}
-          y={pos.y}
-          textAnchor="middle"
-          style={{
-            fontSize: `${(landmarks[index]?.size || 24) * 2.0}px`,
-            pointerEvents: 'none',
-            opacity: 0.7,
-            filter: 'drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2))'
-          }}
-        >
-          {landmarks[index]?.emoji}
-        </text>
-      ))}
+        {/* Landmarks - background scenery */}
+        {landmarkPositions.map((pos, index) => (
+          <text
+            key={`landmark-${index}`}
+            x={pos.x}
+            y={pos.y}
+            textAnchor="middle"
+            style={{
+              fontSize: `${(landmarks[index]?.size || 24) * 2.0}px`,
+              pointerEvents: 'none',
+              opacity: 0.7,
+              filter: 'drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2))',
+            }}
+          >
+            {landmarks[index]?.emoji}
+          </text>
+        ))}

-      {/* Station markers */}
-      {stationPositions.map((pos, index) => {
-        const station = stations[index]
-        // Find passengers waiting at this station (exclude currently boarding)
-        const waitingPassengers = passengers.filter(p =>
-          p.originStationId === station?.id && !p.isBoarded && !p.isDelivered && !boardingAnimations.has(p.id)
-        )
-        // Find passengers delivered at this station (exclude currently disembarking)
-        const deliveredPassengers = passengers.filter(p =>
-          p.destinationStationId === station?.id && p.isDelivered && !disembarkingAnimations.has(p.id)
-        )
+        {/* Station markers */}
+        {stationPositions.map((pos, index) => {
+          const station = stations[index]
+          // Find passengers waiting at this station (exclude currently boarding)
+          const waitingPassengers = passengers.filter(
+            (p) =>
+              p.originStationId === station?.id &&
+              !p.isBoarded &&
+              !p.isDelivered &&
+              !boardingAnimations.has(p.id)
+          )
+          // Find passengers delivered at this station (exclude currently disembarking)
+          const deliveredPassengers = passengers.filter(
+            (p) =>
+              p.destinationStationId === station?.id &&
+              p.isDelivered &&
+              !disembarkingAnimations.has(p.id)
+          )

-        return (
-          <g key={`station-${index}`}>
-            {/* Station platform */}
-            <circle
-              cx={pos.x}
-              cy={pos.y}
-              r="18"
-              fill="#8B4513"
-              stroke="#654321"
-              strokeWidth="4"
-            />
-            {/* Station icon */}
-            <text
-              x={pos.x}
-              y={pos.y - 40}
-              textAnchor="middle"
-              fontSize="48"
-              style={{ pointerEvents: 'none' }}
-            >
-              {station?.icon}
-            </text>
-            {/* Station name */}
-            <text
-              x={pos.x}
-              y={pos.y + 50}
-              textAnchor="middle"
-              fontSize="20"
-              fill="#1f2937"
-              stroke="#f59e0b"
-              strokeWidth="0.5"
-              style={{
-                fontWeight: 900,
-                pointerEvents: 'none',
-                fontFamily: '"Comic Sans MS", "Chalkboard SE", "Bradley Hand", cursive',
-                textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-                letterSpacing: '0.5px',
-                paintOrder: 'stroke fill'
-              }}
-            >
-              {station?.name}
-            </text>
-
-            {/* Waiting passengers at this station */}
-            {waitingPassengers.map((passenger, pIndex) => (
+          return (
+            <g key={`station-${index}`}>
+              {/* Station platform */}
+              <circle
+                cx={pos.x}
+                cy={pos.y}
+                r="18"
+                fill="#8B4513"
+                stroke="#654321"
+                strokeWidth="4"
+              />
+              {/* Station icon */}
              <text
-                key={`waiting-${passenger.id}`}
-                x={pos.x + (pIndex - waitingPassengers.length / 2 + 0.5) * 28}
-                y={pos.y - 30}
+                x={pos.x}
+                y={pos.y - 40}
                textAnchor="middle"
+                fontSize="48"
+                style={{ pointerEvents: 'none' }}
+              >
+                {station?.icon}
+              </text>
+              {/* Station name */}
+              <text
+                x={pos.x}
+                y={pos.y + 50}
+                textAnchor="middle"
+                fontSize="20"
+                fill="#1f2937"
+                stroke="#f59e0b"
+                strokeWidth="0.5"
                style={{
-                  fontSize: '55px',
+                  fontWeight: 900,
                  pointerEvents: 'none',
-                  filter: passenger.isUrgent ? 'drop-shadow(0 0 8px rgba(245, 158, 11, 0.8))' : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+                  fontFamily: '"Comic Sans MS", "Chalkboard SE", "Bradley Hand", cursive',
+                  textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+                  letterSpacing: '0.5px',
+                  paintOrder: 'stroke fill',
                }}
              >
-                {passenger.avatar}
+                {station?.name}
              </text>
-            ))}

-            {/* Delivered passengers at this station (celebrating) */}
-            {deliveredPassengers.map((passenger, pIndex) => (
-              <text
-                key={`delivered-${passenger.id}`}
-                x={pos.x + (pIndex - deliveredPassengers.length / 2 + 0.5) * 28}
-                y={pos.y - 30}
-                textAnchor="middle"
-                style={{
-                  fontSize: '55px',
-                  pointerEvents: 'none',
-                  filter: 'drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))',
-                  animation: 'celebrateDelivery 2s ease-out forwards'
-                }}
-              >
-                {passenger.avatar}
-              </text>
-            ))}
-          </g>
-        )
-      })}
-    </>
-  )
-})
+              {/* Waiting passengers at this station */}
+              {waitingPassengers.map((passenger, pIndex) => (
+                <text
+                  key={`waiting-${passenger.id}`}
+                  x={pos.x + (pIndex - waitingPassengers.length / 2 + 0.5) * 28}
+                  y={pos.y - 30}
+                  textAnchor="middle"
+                  style={{
+                    fontSize: '55px',
+                    pointerEvents: 'none',
+                    filter: passenger.isUrgent
+                      ? 'drop-shadow(0 0 8px rgba(245, 158, 11, 0.8))'
+                      : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+                  }}
+                >
+                  {passenger.avatar}
+                </text>
+              ))}
+
+              {/* Delivered passengers at this station (celebrating) */}
+              {deliveredPassengers.map((passenger, pIndex) => (
+                <text
+                  key={`delivered-${passenger.id}`}
+                  x={pos.x + (pIndex - deliveredPassengers.length / 2 + 0.5) * 28}
+                  y={pos.y - 30}
+                  textAnchor="middle"
+                  style={{
+                    fontSize: '55px',
+                    pointerEvents: 'none',
+                    filter: 'drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))',
+                    animation: 'celebrateDelivery 2s ease-out forwards',
+                  }}
+                >
+                  {passenger.avatar}
+                </text>
+              ))}
+            </g>
+          )
+        })}
+      </>
+    )
+  }
+)

 RailroadTrackPath.displayName = 'RailroadTrackPath'
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx
@@ -1,27 +1,32 @@
 'use client'

-import { useRef, useState, useMemo, memo } from 'react'
-import { useSpring, animated } from '@react-spring/web'
-import { useSteamJourney } from '../../hooks/useSteamJourney'
-import { usePassengerAnimations, type BoardingAnimation, type DisembarkingAnimation } from '../../hooks/usePassengerAnimations'
-import { useTrainTransforms } from '../../hooks/useTrainTransforms'
-import { useTrackManagement } from '../../hooks/useTrackManagement'
-import { useComplementRace } from '../../context/ComplementRaceContext'
-import { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
-import { getRouteTheme } from '../../lib/routeThemes'
-import { calculateMaxConcurrentPassengers } from '../../lib/passengerGenerator'
+import { animated, useSpring } from '@react-spring/web'
+import { memo, useMemo, useRef, useState } from 'react'
 import { useGameMode } from '@/contexts/GameModeContext'
 import { useUserProfile } from '@/contexts/UserProfileContext'
-import { TrainTerrainBackground } from './TrainTerrainBackground'
+import { useComplementRace } from '../../context/ComplementRaceContext'
+import {
+  type BoardingAnimation,
+  type DisembarkingAnimation,
+  usePassengerAnimations,
+} from '../../hooks/usePassengerAnimations'
+import type { ComplementQuestion } from '../../lib/gameTypes'
+import { useSteamJourney } from '../../hooks/useSteamJourney'
+import { useTrackManagement } from '../../hooks/useTrackManagement'
+import { useTrainTransforms } from '../../hooks/useTrainTransforms'
+import { calculateMaxConcurrentPassengers } from '../../lib/passengerGenerator'
+import { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { getRouteTheme } from '../../lib/routeThemes'
+import { GameHUD } from './GameHUD'
 import { RailroadTrackPath } from './RailroadTrackPath'
 import { TrainAndCars } from './TrainAndCars'
-import { GameHUD } from './GameHUD'
+import { TrainTerrainBackground } from './TrainTerrainBackground'

 const BoardingPassengerAnimation = memo(({ animation }: { animation: BoardingAnimation }) => {
  const spring = useSpring({
    from: { x: animation.fromX, y: animation.fromY, opacity: 1 },
    to: { x: animation.toX, y: animation.toY, opacity: 1 },
-    config: { tension: 120, friction: 14 }
+    config: { tension: 120, friction: 14 },
  })

  return (
@@ -35,7 +40,7 @@ const BoardingPassengerAnimation = memo(({ animation }: { animation: BoardingAni
        pointerEvents: 'none',
        filter: animation.passenger.isUrgent
          ? 'drop-shadow(0 0 8px rgba(245, 158, 11, 0.8))'
-          : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
+          : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
      }}
    >
      {animation.passenger.avatar}
@@ -44,29 +49,31 @@ const BoardingPassengerAnimation = memo(({ animation }: { animation: BoardingAni
 })
 BoardingPassengerAnimation.displayName = 'BoardingPassengerAnimation'

-const DisembarkingPassengerAnimation = memo(({ animation }: { animation: DisembarkingAnimation }) => {
-  const spring = useSpring({
-    from: { x: animation.fromX, y: animation.fromY, opacity: 1 },
-    to: { x: animation.toX, y: animation.toY, opacity: 1 },
-    config: { tension: 120, friction: 14 }
-  })
+const DisembarkingPassengerAnimation = memo(
+  ({ animation }: { animation: DisembarkingAnimation }) => {
+    const spring = useSpring({
+      from: { x: animation.fromX, y: animation.fromY, opacity: 1 },
+      to: { x: animation.toX, y: animation.toY, opacity: 1 },
+      config: { tension: 120, friction: 14 },
+    })

-  return (
-    <animated.text
-      x={spring.x}
-      y={spring.y}
-      textAnchor="middle"
-      opacity={spring.opacity}
-      style={{
-        fontSize: '55px',
-        pointerEvents: 'none',
-        filter: 'drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))'
-      }}
-    >
-      {animation.passenger.avatar}
-    </animated.text>
-  )
-})
+    return (
+      <animated.text
+        x={spring.x}
+        y={spring.y}
+        textAnchor="middle"
+        opacity={spring.opacity}
+        style={{
+          fontSize: '55px',
+          pointerEvents: 'none',
+          filter: 'drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))',
+        }}
+      >
+        {animation.passenger.avatar}
+      </animated.text>
+    )
+  }
+)
 DisembarkingPassengerAnimation.displayName = 'DisembarkingPassengerAnimation'

 interface SteamTrainJourneyProps {
@@ -74,20 +81,27 @@ interface SteamTrainJourneyProps {
  trainPosition: number
  pressure: number
  elapsedTime: number
-  currentQuestion: { number: number; targetSum: number; correctAnswer: number } | null
+  currentQuestion: ComplementQuestion | null
  currentInput: string
 }

-export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTime, currentQuestion, currentInput }: SteamTrainJourneyProps) {
+export function SteamTrainJourney({
+  momentum,
+  trainPosition,
+  pressure,
+  elapsedTime,
+  currentQuestion,
+  currentInput,
+}: SteamTrainJourneyProps) {
  const { state } = useComplementRace()
  const { getSkyGradient, getTimeOfDayPeriod } = useSteamJourney()
-  const skyGradient = getSkyGradient()
+  const _skyGradient = getSkyGradient()
  const period = getTimeOfDayPeriod()
  const { players } = useGameMode()
-  const { profile } = useUserProfile()
+  const { profile: _profile } = useUserProfile()

  // Get the first active player's emoji
-  const activePlayers = Array.from(players.values()).filter(p => p.id)
+  const activePlayers = Array.from(players.values()).filter((p) => p.id)
  const firstActivePlayer = activePlayers[0]
  const playerEmoji = firstActivePlayer?.emoji ?? '👤'

@@ -110,11 +124,18 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
    trackGenerator,
    pathRef,
    maxCars,
-    carSpacing
+    carSpacing,
  })

  // Track management (extracted to hook)
-  const { trackData, tiesAndRails, stationPositions, landmarks, landmarkPositions, displayPassengers } = useTrackManagement({
+  const {
+    trackData,
+    tiesAndRails,
+    stationPositions,
+    landmarks,
+    landmarkPositions,
+    displayPassengers,
+  } = useTrackManagement({
    currentRoute: state.currentRoute,
    trainPosition,
    trackGenerator,
@@ -122,7 +143,7 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
    stations: state.stations,
    passengers: state.passengers,
    maxCars,
-    carSpacing
+    carSpacing,
  })

  // Passenger animations (extracted to hook)
@@ -132,7 +153,7 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
    stationPositions,
    trainPosition,
    trackGenerator,
-    pathRef
+    pathRef,
  })

  // Time remaining (60 seconds total)
@@ -144,42 +165,45 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
  // Get current route theme
  const routeTheme = getRouteTheme(state.currentRoute)

-
  // Memoize filtered passenger lists to avoid recalculating on every render
-  const boardedPassengers = useMemo(() =>
-    displayPassengers.filter(p => p.isBoarded && !p.isDelivered),
+  const boardedPassengers = useMemo(
+    () => displayPassengers.filter((p) => p.isBoarded && !p.isDelivered),
    [displayPassengers]
  )

-  const nonDeliveredPassengers = useMemo(() =>
-    displayPassengers.filter(p => !p.isDelivered),
+  const nonDeliveredPassengers = useMemo(
+    () => displayPassengers.filter((p) => !p.isDelivered),
    [displayPassengers]
  )

  // Memoize ground texture circles to avoid recreating on every render
-  const groundTextureCircles = useMemo(() =>
-    Array.from({ length: 30 }).map((_, i) => ({
-      key: `ground-texture-${i}`,
-      cx: -30 + (i * 28) + (i % 3) * 10,
-      cy: 140 + (i % 5) * 60,
-      r: 2 + (i % 3)
-    })),
+  const groundTextureCircles = useMemo(
+    () =>
+      Array.from({ length: 30 }).map((_, i) => ({
+        key: `ground-texture-${i}`,
+        cx: -30 + i * 28 + (i % 3) * 10,
+        cy: 140 + (i % 5) * 60,
+        r: 2 + (i % 3),
+      })),
    []
  )

  if (!trackData) return null

  return (
-    <div data-component="steam-train-journey" style={{
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      background: 'transparent',
-      overflow: 'visible',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'stretch'
-    }}>
+    <div
+      data-component="steam-train-journey"
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        overflow: 'visible',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'stretch',
+      }}
+    >
      {/* Game HUD - overlays and UI elements */}
      <GameHUD
        routeTheme={routeTheme}
@@ -202,7 +226,7 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
          width: '100%',
          height: 'auto',
          aspectRatio: '800 / 600',
-          overflow: 'visible'
+          overflow: 'visible',
        }}
      >
        {/* Terrain background - ground, mountains, and tunnels */}
@@ -291,4 +315,4 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
      `}</style>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx
@@ -31,131 +31,131 @@ interface TrainAndCarsProps {
  momentum: number
 }

-export const TrainAndCars = memo(({
-  boardingAnimations,
-  disembarkingAnimations,
-  BoardingPassengerAnimation,
-  DisembarkingPassengerAnimation,
-  trainCars,
-  boardedPassengers,
-  trainTransform,
-  locomotiveOpacity,
-  playerEmoji,
-  momentum
-}: TrainAndCarsProps) => {
-  return (
-    <>
-      {/* Boarding animations - passengers moving from station to train car */}
-      {Array.from(boardingAnimations.values()).map(animation => (
-        <BoardingPassengerAnimation
-          key={`boarding-${animation.passenger.id}`}
-          animation={animation}
-        />
-      ))}
+export const TrainAndCars = memo(
+  ({
+    boardingAnimations,
+    disembarkingAnimations,
+    BoardingPassengerAnimation,
+    DisembarkingPassengerAnimation,
+    trainCars,
+    boardedPassengers,
+    trainTransform,
+    locomotiveOpacity,
+    playerEmoji,
+    momentum,
+  }: TrainAndCarsProps) => {
+    return (
+      <>
+        {/* Boarding animations - passengers moving from station to train car */}
+        {Array.from(boardingAnimations.values()).map((animation) => (
+          <BoardingPassengerAnimation
+            key={`boarding-${animation.passenger.id}`}
+            animation={animation}
+          />
+        ))}

-      {/* Disembarking animations - passengers moving from train car to station */}
-      {Array.from(disembarkingAnimations.values()).map(animation => (
-        <DisembarkingPassengerAnimation
-          key={`disembarking-${animation.passenger.id}`}
-          animation={animation}
-        />
-      ))}
+        {/* Disembarking animations - passengers moving from train car to station */}
+        {Array.from(disembarkingAnimations.values()).map((animation) => (
+          <DisembarkingPassengerAnimation
+            key={`disembarking-${animation.passenger.id}`}
+            animation={animation}
+          />
+        ))}

-      {/* Train cars - render in reverse order so locomotive appears on top */}
-      {trainCars.map((carTransform, carIndex) => {
-        // Assign passenger to this car (if one exists for this car index)
-        const passenger = boardedPassengers[carIndex]
+        {/* Train cars - render in reverse order so locomotive appears on top */}
+        {trainCars.map((carTransform, carIndex) => {
+          // Assign passenger to this car (if one exists for this car index)
+          const passenger = boardedPassengers[carIndex]

-        return (
-          <g
-            key={`train-car-${carIndex}`}
-            data-component="train-car"
-            transform={`translate(${carTransform.x}, ${carTransform.y}) rotate(${carTransform.rotation}) scale(-1, 1)`}
-            opacity={carTransform.opacity}
-            style={{
-              transition: 'opacity 0.5s ease-in'
-            }}
-          >
-            {/* Train car */}
-            <text
-              data-element="train-car-body"
-              x={0}
-              y={0}
-              textAnchor="middle"
+          return (
+            <g
+              key={`train-car-${carIndex}`}
+              data-component="train-car"
+              transform={`translate(${carTransform.x}, ${carTransform.y}) rotate(${carTransform.rotation}) scale(-1, 1)`}
+              opacity={carTransform.opacity}
              style={{
-                fontSize: '65px',
-                filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
-                pointerEvents: 'none'
+                transition: 'opacity 0.5s ease-in',
              }}
            >
-              🚃
-            </text>
-
-            {/* Passenger inside this car (hide if currently boarding) */}
-            {passenger && !boardingAnimations.has(passenger.id) && (
+              {/* Train car */}
              <text
-                data-element="car-passenger"
+                data-element="train-car-body"
                x={0}
                y={0}
                textAnchor="middle"
                style={{
-                  fontSize: '42px',
-                  filter: passenger.isUrgent
-                    ? 'drop-shadow(0 0 6px rgba(245, 158, 11, 0.8))'
-                    : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
-                  pointerEvents: 'none'
+                  fontSize: '65px',
+                  filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+                  pointerEvents: 'none',
                }}
              >
-                {passenger.avatar}
+                🚃
              </text>
-            )}
-          </g>
-        )
-      })}

-      {/* Locomotive - rendered last so it appears on top */}
-      <g
-        data-component="locomotive-group"
-        transform={`translate(${trainTransform.x}, ${trainTransform.y}) rotate(${trainTransform.rotation}) scale(-1, 1)`}
-        opacity={locomotiveOpacity}
-        style={{
-          transition: 'opacity 0.5s ease-in'
-        }}
-      >
-        {/* Train locomotive */}
-        <text
-          data-element="train-locomotive"
-          x={0}
-          y={0}
-          textAnchor="middle"
+              {/* Passenger inside this car (hide if currently boarding) */}
+              {passenger && !boardingAnimations.has(passenger.id) && (
+                <text
+                  data-element="car-passenger"
+                  x={0}
+                  y={0}
+                  textAnchor="middle"
+                  style={{
+                    fontSize: '42px',
+                    filter: passenger.isUrgent
+                      ? 'drop-shadow(0 0 6px rgba(245, 158, 11, 0.8))'
+                      : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+                    pointerEvents: 'none',
+                  }}
+                >
+                  {passenger.avatar}
+                </text>
+              )}
+            </g>
+          )
+        })}
+
+        {/* Locomotive - rendered last so it appears on top */}
+        <g
+          data-component="locomotive-group"
+          transform={`translate(${trainTransform.x}, ${trainTransform.y}) rotate(${trainTransform.rotation}) scale(-1, 1)`}
+          opacity={locomotiveOpacity}
          style={{
-            fontSize: '100px',
-            filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
-            pointerEvents: 'none'
+            transition: 'opacity 0.5s ease-in',
          }}
        >
-          🚂
-        </text>
+          {/* Train locomotive */}
+          <text
+            data-element="train-locomotive"
+            x={0}
+            y={0}
+            textAnchor="middle"
+            style={{
+              fontSize: '100px',
+              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+              pointerEvents: 'none',
+            }}
+          >
+            🚂
+          </text>

-        {/* Player engineer - layered over the train */}
-        <text
-          data-element="player-engineer"
-          x={45}
-          y={0}
-          textAnchor="middle"
-          style={{
-            fontSize: '70px',
-            filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
-            pointerEvents: 'none'
-          }}
-        >
-          {playerEmoji}
-        </text>
+          {/* Player engineer - layered over the train */}
+          <text
+            data-element="player-engineer"
+            x={45}
+            y={0}
+            textAnchor="middle"
+            style={{
+              fontSize: '70px',
+              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+              pointerEvents: 'none',
+            }}
+          >
+            {playerEmoji}
+          </text>

-        {/* Steam puffs - positioned at smokestack, layered over train */}
-        {momentum > 10 && (
-          <>
-            {[0, 0.6, 1.2].map((delay, i) => (
+          {/* Steam puffs - positioned at smokestack, layered over train */}
+          {momentum > 10 &&
+            [0, 0.6, 1.2].map((delay, i) => (
              <circle
                key={`steam-${i}`}
                cx={-35}
@@ -166,17 +166,14 @@ export const TrainAndCars = memo(({
                  filter: 'blur(4px)',
                  animation: `steamPuffSVG 2s ease-out infinite`,
                  animationDelay: `${delay}s`,
-                  pointerEvents: 'none'
+                  pointerEvents: 'none',
                }}
              />
            ))}
-          </>
-        )}

-        {/* Coal particles - animated when shoveling */}
-        {momentum > 60 && (
-          <>
-            {[0, 0.3, 0.6].map((delay, i) => (
+          {/* Coal particles - animated when shoveling */}
+          {momentum > 60 &&
+            [0, 0.3, 0.6].map((delay, i) => (
              <circle
                key={`coal-${i}`}
                cx={25}
@@ -186,15 +183,14 @@ export const TrainAndCars = memo(({
                style={{
                  animation: 'coalFallingSVG 1.2s ease-out infinite',
                  animationDelay: `${delay}s`,
-                  pointerEvents: 'none'
+                  pointerEvents: 'none',
                }}
              />
            ))}
-          </>
-        )}
-      </g>
-    </>
-  )
-})
+        </g>
+      </>
+    )
+  }
+)

 TrainAndCars.displayName = 'TrainAndCars'
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx
@@ -12,187 +12,133 @@ interface TrainTerrainBackgroundProps {
  }>
 }

-export const TrainTerrainBackground = memo(({ ballastPath, groundTextureCircles }: TrainTerrainBackgroundProps) => {
-  return (
-    <>
-      {/* Gradient definitions for mountain shading and ground */}
-      <defs>
-        <linearGradient id="mountainGradientLeft" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" style={{ stopColor: '#a0a0a0', stopOpacity: 0.8 }} />
-          <stop offset="50%" style={{ stopColor: '#7a7a7a', stopOpacity: 0.6 }} />
-          <stop offset="100%" style={{ stopColor: '#5a5a5a', stopOpacity: 0.4 }} />
-        </linearGradient>
-        <linearGradient id="mountainGradientRight" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" style={{ stopColor: '#5a5a5a', stopOpacity: 0.4 }} />
-          <stop offset="50%" style={{ stopColor: '#7a7a7a', stopOpacity: 0.6 }} />
-          <stop offset="100%" style={{ stopColor: '#a0a0a0', stopOpacity: 0.8 }} />
-        </linearGradient>
-        <linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" style={{ stopColor: '#6a8759', stopOpacity: 0.3 }} />
-          <stop offset="100%" style={{ stopColor: '#8B7355', stopOpacity: 0 }} />
-        </linearGradient>
-      </defs>
+export const TrainTerrainBackground = memo(
+  ({ ballastPath, groundTextureCircles }: TrainTerrainBackgroundProps) => {
+    return (
+      <>
+        {/* Gradient definitions for mountain shading and ground */}
+        <defs>
+          <linearGradient id="mountainGradientLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style={{ stopColor: '#a0a0a0', stopOpacity: 0.8 }} />
+            <stop offset="50%" style={{ stopColor: '#7a7a7a', stopOpacity: 0.6 }} />
+            <stop offset="100%" style={{ stopColor: '#5a5a5a', stopOpacity: 0.4 }} />
+          </linearGradient>
+          <linearGradient id="mountainGradientRight" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style={{ stopColor: '#5a5a5a', stopOpacity: 0.4 }} />
+            <stop offset="50%" style={{ stopColor: '#7a7a7a', stopOpacity: 0.6 }} />
+            <stop offset="100%" style={{ stopColor: '#a0a0a0', stopOpacity: 0.8 }} />
+          </linearGradient>
+          <linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: '#6a8759', stopOpacity: 0.3 }} />
+            <stop offset="100%" style={{ stopColor: '#8B7355', stopOpacity: 0 }} />
+          </linearGradient>
+        </defs>

-      {/* Ground layer - extends full width and height to cover entire track area */}
-      <rect
-        x="-50"
-        y="120"
-        width="900"
-        height="530"
-        fill="#8B7355"
-      />
+        {/* Ground layer - extends full width and height to cover entire track area */}
+        <rect x="-50" y="120" width="900" height="530" fill="#8B7355" />

-      {/* Ground surface gradient for depth */}
-      <rect
-        x="-50"
-        y="120"
-        width="900"
-        height="60"
-        fill="url(#groundGradient)"
-      />
+        {/* Ground surface gradient for depth */}
+        <rect x="-50" y="120" width="900" height="60" fill="url(#groundGradient)" />

-      {/* Ground texture - scattered rocks/pebbles */}
-      {groundTextureCircles.map((circle) => (
-        <circle
-          key={circle.key}
-          cx={circle.cx}
-          cy={circle.cy}
-          r={circle.r}
-          fill="#654321"
-          opacity={0.3}
-        />
-      ))}
+        {/* Ground texture - scattered rocks/pebbles */}
+        {groundTextureCircles.map((circle) => (
+          <circle
+            key={circle.key}
+            cx={circle.cx}
+            cy={circle.cy}
+            r={circle.r}
+            fill="#654321"
+            opacity={0.3}
+          />
+        ))}

-      {/* Railroad ballast (gravel bed) */}
-      <path
-        d={ballastPath}
-        fill="none"
-        stroke="#8B7355"
-        strokeWidth="40"
-        strokeLinecap="round"
-      />
+        {/* Railroad ballast (gravel bed) */}
+        <path d={ballastPath} fill="none" stroke="#8B7355" strokeWidth="40" strokeLinecap="round" />

-      {/* Left mountain and tunnel */}
-      <g data-element="left-tunnel">
-        {/* Mountain base - extends from left edge */}
-        <rect
-          x="-50"
-          y="200"
-          width="120"
-          height="450"
-          fill="#6b7280"
-        />
+        {/* Left mountain and tunnel */}
+        <g data-element="left-tunnel">
+          {/* Mountain base - extends from left edge */}
+          <rect x="-50" y="200" width="120" height="450" fill="#6b7280" />

-        {/* Mountain peak - triangular slope */}
-        <path
-          d="M -50 200 L 70 200 L 20 -50 L -50 100 Z"
-          fill="#8b8b8b"
-        />
+          {/* Mountain peak - triangular slope */}
+          <path d="M -50 200 L 70 200 L 20 -50 L -50 100 Z" fill="#8b8b8b" />

-        {/* Mountain ridge shading */}
-        <path
-          d="M -50 200 L 70 200 L 20 -50 Z"
-          fill="url(#mountainGradientLeft)"
-        />
+          {/* Mountain ridge shading */}
+          <path d="M -50 200 L 70 200 L 20 -50 Z" fill="url(#mountainGradientLeft)" />

+          {/* Tunnel depth/interior (dark entrance) */}
+          <ellipse cx="20" cy="300" rx="50" ry="55" fill="#0a0a0a" />

-        {/* Tunnel depth/interior (dark entrance) */}
-        <ellipse
-          cx="20"
-          cy="300"
-          rx="50"
-          ry="55"
-          fill="#0a0a0a"
-        />
+          {/* Tunnel arch opening */}
+          <path
+            d="M 20 355 L -50 355 L -50 245 Q -50 235, 20 235 Q 70 235, 70 245 L 70 355 Z"
+            fill="#1a1a1a"
+            stroke="#4a4a4a"
+            strokeWidth="3"
+          />

-        {/* Tunnel arch opening */}
-        <path
-          d="M 20 355 L -50 355 L -50 245 Q -50 235, 20 235 Q 70 235, 70 245 L 70 355 Z"
-          fill="#1a1a1a"
-          stroke="#4a4a4a"
-          strokeWidth="3"
-        />
+          {/* Tunnel arch rim (stone bricks) */}
+          <path
+            d="M -50 245 Q -50 235, 20 235 Q 70 235, 70 245"
+            fill="none"
+            stroke="#8b7355"
+            strokeWidth="8"
+            strokeLinecap="round"
+          />

-        {/* Tunnel arch rim (stone bricks) */}
-        <path
-          d="M -50 245 Q -50 235, 20 235 Q 70 235, 70 245"
-          fill="none"
-          stroke="#8b7355"
-          strokeWidth="8"
-          strokeLinecap="round"
-        />
+          {/* Stone brick texture around arch */}
+          <path
+            d="M -50 245 Q -50 235, 20 235 Q 70 235, 70 245"
+            fill="none"
+            stroke="#654321"
+            strokeWidth="2"
+            strokeDasharray="15,10"
+          />
+        </g>

-        {/* Stone brick texture around arch */}
-        <path
-          d="M -50 245 Q -50 235, 20 235 Q 70 235, 70 245"
-          fill="none"
-          stroke="#654321"
-          strokeWidth="2"
-          strokeDasharray="15,10"
-        />
-      </g>
+        {/* Right mountain and tunnel */}
+        <g data-element="right-tunnel">
+          {/* Mountain base - extends to right edge */}
+          <rect x="680" y="200" width="170" height="450" fill="#6b7280" />

-      {/* Right mountain and tunnel */}
-      <g data-element="right-tunnel">
-        {/* Mountain base - extends to right edge */}
-        <rect
-          x="680"
-          y="200"
-          width="170"
-          height="450"
-          fill="#6b7280"
-        />
+          {/* Mountain peak - triangular slope */}
+          <path d="M 730 200 L 850 200 L 850 100 L 780 -50 Z" fill="#8b8b8b" />

-        {/* Mountain peak - triangular slope */}
-        <path
-          d="M 730 200 L 850 200 L 850 100 L 780 -50 Z"
-          fill="#8b8b8b"
-        />
+          {/* Mountain ridge shading */}
+          <path d="M 730 200 L 850 150 L 780 -50 Z" fill="url(#mountainGradientRight)" />

-        {/* Mountain ridge shading */}
-        <path
-          d="M 730 200 L 850 150 L 780 -50 Z"
-          fill="url(#mountainGradientRight)"
-        />
+          {/* Tunnel depth/interior (dark entrance) */}
+          <ellipse cx="780" cy="300" rx="50" ry="55" fill="#0a0a0a" />

+          {/* Tunnel arch opening */}
+          <path
+            d="M 780 355 L 730 355 L 730 245 Q 730 235, 780 235 Q 850 235, 850 245 L 850 355 Z"
+            fill="#1a1a1a"
+            stroke="#4a4a4a"
+            strokeWidth="3"
+          />

-        {/* Tunnel depth/interior (dark entrance) */}
-        <ellipse
-          cx="780"
-          cy="300"
-          rx="50"
-          ry="55"
-          fill="#0a0a0a"
-        />
+          {/* Tunnel arch rim (stone bricks) */}
+          <path
+            d="M 730 245 Q 730 235, 780 235 Q 850 235, 850 245"
+            fill="none"
+            stroke="#8b7355"
+            strokeWidth="8"
+            strokeLinecap="round"
+          />

-        {/* Tunnel arch opening */}
-        <path
-          d="M 780 355 L 730 355 L 730 245 Q 730 235, 780 235 Q 850 235, 850 245 L 850 355 Z"
-          fill="#1a1a1a"
-          stroke="#4a4a4a"
-          strokeWidth="3"
-        />
-
-        {/* Tunnel arch rim (stone bricks) */}
-        <path
-          d="M 730 245 Q 730 235, 780 235 Q 850 235, 850 245"
-          fill="none"
-          stroke="#8b7355"
-          strokeWidth="8"
-          strokeLinecap="round"
-        />
-
-        {/* Stone brick texture around arch */}
-        <path
-          d="M 730 245 Q 730 235, 780 235 Q 850 235, 850 245"
-          fill="none"
-          stroke="#654321"
-          strokeWidth="2"
-          strokeDasharray="15,10"
-        />
-      </g>
-    </>
-  )
-})
+          {/* Stone brick texture around arch */}
+          <path
+            d="M 730 245 Q 730 235, 780 235 Q 850 235, 850 245"
+            fill="none"
+            stroke="#654321"
+            strokeWidth="2"
+            strokeDasharray="15,10"
+          />
+        </g>
+      </>
+    )
+  }
+)

 TrainTerrainBackground.displayName = 'TrainTerrainBackground'
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/tests/GameHUD.test.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/tests/GameHUD.test.tsx
@@ -1,40 +1,41 @@
 import { render, screen } from '@testing-library/react'
-import { describe, test, expect, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '../../../lib/gameTypes'
 import { GameHUD } from '../GameHUD'
-import type { Station, Passenger } from '../../../lib/gameTypes'

 // Mock child components
 vi.mock('../../PassengerCard', () => ({
  PassengerCard: ({ passenger }: { passenger: Passenger }) => (
    <div data-testid="passenger-card">{passenger.avatar}</div>
-  )
+  ),
 }))

 vi.mock('../../PressureGauge', () => ({
  PressureGauge: ({ pressure }: { pressure: number }) => (
    <div data-testid="pressure-gauge">{pressure}</div>
-  )
+  ),
 }))

 describe('GameHUD', () => {
  const mockRouteTheme = {
    emoji: '🚂',
-    name: 'Mountain Pass'
+    name: 'Mountain Pass',
  }

  const mockStations: Station[] = [
    { id: 'station-1', name: 'Station 1', position: 20, icon: '🏭' },
-    { id: 'station-2', name: 'Station 2', position: 60, icon: '🏛️' }
+    { id: 'station-2', name: 'Station 2', position: 60, icon: '🏛️' },
  ]

  const mockPassenger: Passenger = {
    id: 'passenger-1',
+    name: 'Test Passenger',
    avatar: '👨',
    originStationId: 'station-1',
    destinationStationId: 'station-2',
    isBoarded: false,
    isDelivered: false,
-    isUrgent: false
+    isUrgent: false,
  }

  const defaultProps = {
@@ -48,9 +49,10 @@ describe('GameHUD', () => {
    currentQuestion: {
      number: 3,
      targetSum: 10,
-      correctAnswer: 7
+      correctAnswer: 7,
+      showAsAbacus: false,
    },
-    currentInput: '7'
+    currentInput: '7',
  }

  test('renders route information', () => {
@@ -120,7 +122,7 @@ describe('GameHUD', () => {
    const passengers = [
      mockPassenger,
      { ...mockPassenger, id: 'passenger-2', avatar: '👩' },
-      { ...mockPassenger, id: 'passenger-3', avatar: '👧' }
+      { ...mockPassenger, id: 'passenger-3', avatar: '👧' },
    ]

    render(<GameHUD {...defaultProps} nonDeliveredPassengers={passengers} />)
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/tests/TrainTerrainBackground.test.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/tests/TrainTerrainBackground.test.tsx
@@ -1,17 +1,20 @@
 import { render } from '@testing-library/react'
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { TrainTerrainBackground } from '../TrainTerrainBackground'

 describe('TrainTerrainBackground', () => {
  const mockGroundCircles = [
    { key: 'ground-1', cx: 10, cy: 150, r: 2 },
-    { key: 'ground-2', cx: 40, cy: 180, r: 3 }
+    { key: 'ground-2', cx: 40, cy: 180, r: 3 },
  ]

  test('renders without crashing', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -21,7 +24,10 @@ describe('TrainTerrainBackground', () => {
  test('renders gradient definitions', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -37,7 +43,10 @@ describe('TrainTerrainBackground', () => {
  test('renders ground layer rects', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -46,7 +55,7 @@ describe('TrainTerrainBackground', () => {

    // Check for ground base layer
    const groundRect = Array.from(rects).find(
-      rect => rect.getAttribute('fill') === '#8B7355' && rect.getAttribute('width') === '900'
+      (rect) => rect.getAttribute('fill') === '#8B7355' && rect.getAttribute('width') === '900'
    )
    expect(groundRect).toBeTruthy()
  })
@@ -54,7 +63,10 @@ describe('TrainTerrainBackground', () => {
  test('renders ground texture circles', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -71,12 +83,16 @@ describe('TrainTerrainBackground', () => {
  test('renders ballast path with correct attributes', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

    const ballastPath = Array.from(container.querySelectorAll('path')).find(
-      path => path.getAttribute('d') === 'M 0 300 L 800 300' && path.getAttribute('stroke') === '#8B7355'
+      (path) =>
+        path.getAttribute('d') === 'M 0 300 L 800 300' && path.getAttribute('stroke') === '#8B7355'
    )
    expect(ballastPath).toBeTruthy()
    expect(ballastPath?.getAttribute('stroke-width')).toBe('40')
@@ -85,7 +101,10 @@ describe('TrainTerrainBackground', () => {
  test('renders left tunnel structure', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -100,7 +119,10 @@ describe('TrainTerrainBackground', () => {
  test('renders right tunnel structure', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -115,12 +137,15 @@ describe('TrainTerrainBackground', () => {
  test('renders mountains with gradient fills', () => {
    const { container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

    // Check for paths with gradient fills
-    const gradientPaths = Array.from(container.querySelectorAll('path')).filter(path =>
+    const gradientPaths = Array.from(container.querySelectorAll('path')).filter((path) =>
      path.getAttribute('fill')?.includes('url(#mountainGradient')
    )
    expect(gradientPaths.length).toBeGreaterThanOrEqual(2)
@@ -141,7 +166,10 @@ describe('TrainTerrainBackground', () => {
  test('memoization: does not re-render with same props', () => {
    const { rerender, container } = render(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

@@ -150,7 +178,10 @@ describe('TrainTerrainBackground', () => {
    // Rerender with same props
    rerender(
      <svg>
-        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={mockGroundCircles} />
+        <TrainTerrainBackground
+          ballastPath="M 0 300 L 800 300"
+          groundTextureCircles={mockGroundCircles}
+        />
      </svg>
    )

--- a/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx
@@ -8,91 +8,101 @@ interface RouteCelebrationProps {
  onContinue: () => void
 }

-export function RouteCelebration({ completedRouteNumber, nextRouteNumber, onContinue }: RouteCelebrationProps) {
+export function RouteCelebration({
+  completedRouteNumber,
+  nextRouteNumber,
+  onContinue,
+}: RouteCelebrationProps) {
  const completedTheme = getRouteTheme(completedRouteNumber)
  const nextTheme = getRouteTheme(nextRouteNumber)

  return (
-    <div style={{
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      background: 'rgba(0, 0, 0, 0.7)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 9999,
-      animation: 'fadeIn 0.3s ease-out'
-    }}>
-      <div style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        borderRadius: '24px',
-        padding: '40px',
-        maxWidth: '500px',
-        textAlign: 'center',
-        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
-        animation: 'scaleIn 0.5s ease-out',
-        color: 'white'
-      }}>
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0, 0, 0, 0.7)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+        animation: 'fadeIn 0.3s ease-out',
+      }}
+    >
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          borderRadius: '24px',
+          padding: '40px',
+          maxWidth: '500px',
+          textAlign: 'center',
+          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+          animation: 'scaleIn 0.5s ease-out',
+          color: 'white',
+        }}
+      >
        {/* Celebration header */}
-        <div style={{
-          fontSize: '64px',
-          marginBottom: '20px',
-          animation: 'bounce 1s ease-in-out infinite'
-        }}>
+        <div
+          style={{
+            fontSize: '64px',
+            marginBottom: '20px',
+            animation: 'bounce 1s ease-in-out infinite',
+          }}
+        >
          🎉
        </div>

-        <h2 style={{
-          fontSize: '32px',
-          fontWeight: 'bold',
-          marginBottom: '16px',
-          textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)'
-        }}>
+        <h2
+          style={{
+            fontSize: '32px',
+            fontWeight: 'bold',
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
+          }}
+        >
          Route Complete!
        </h2>

        {/* Completed route info */}
-        <div style={{
-          background: 'rgba(255, 255, 255, 0.2)',
-          borderRadius: '12px',
-          padding: '16px',
-          marginBottom: '24px'
-        }}>
-          <div style={{ fontSize: '40px', marginBottom: '8px' }}>
-            {completedTheme.emoji}
-          </div>
-          <div style={{ fontSize: '20px', fontWeight: '600' }}>
-            {completedTheme.name}
-          </div>
+        <div
+          style={{
+            background: 'rgba(255, 255, 255, 0.2)',
+            borderRadius: '12px',
+            padding: '16px',
+            marginBottom: '24px',
+          }}
+        >
+          <div style={{ fontSize: '40px', marginBottom: '8px' }}>{completedTheme.emoji}</div>
+          <div style={{ fontSize: '20px', fontWeight: '600' }}>{completedTheme.name}</div>
          <div style={{ fontSize: '16px', opacity: 0.9, marginTop: '4px' }}>
            Route {completedRouteNumber}
          </div>
        </div>

        {/* Next route preview */}
-        <div style={{
-          fontSize: '14px',
-          opacity: 0.9,
-          marginBottom: '8px'
-        }}>
+        <div
+          style={{
+            fontSize: '14px',
+            opacity: 0.9,
+            marginBottom: '8px',
+          }}
+        >
          Next destination:
        </div>
-        <div style={{
-          background: 'rgba(255, 255, 255, 0.15)',
-          borderRadius: '12px',
-          padding: '12px',
-          marginBottom: '24px',
-          border: '2px dashed rgba(255, 255, 255, 0.3)'
-        }}>
-          <div style={{ fontSize: '32px', marginBottom: '4px' }}>
-            {nextTheme.emoji}
-          </div>
-          <div style={{ fontSize: '18px', fontWeight: '600' }}>
-            {nextTheme.name}
-          </div>
+        <div
+          style={{
+            background: 'rgba(255, 255, 255, 0.15)',
+            borderRadius: '12px',
+            padding: '12px',
+            marginBottom: '24px',
+            border: '2px dashed rgba(255, 255, 255, 0.3)',
+          }}
+        >
+          <div style={{ fontSize: '32px', marginBottom: '4px' }}>{nextTheme.emoji}</div>
+          <div style={{ fontSize: '18px', fontWeight: '600' }}>{nextTheme.name}</div>
          <div style={{ fontSize: '14px', opacity: 0.8, marginTop: '4px' }}>
            Route {nextRouteNumber}
          </div>
@@ -111,7 +121,7 @@ export function RouteCelebration({ completedRouteNumber, nextRouteNumber, onCont
            fontWeight: 'bold',
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-            transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-2px)'
@@ -158,4 +168,4 @@ export function RouteCelebration({ completedRouteNumber, nextRouteNumber, onCont
      `}</style>
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx
+++ b/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx
@@ -1,7 +1,8 @@
 'use client'

-import React, { createContext, useContext, useReducer, ReactNode } from 'react'
-import type { GameState, GameAction, AIRacer, DifficultyTracker, Station, Passenger } from '../lib/gameTypes'
+import type React from 'react'
+import { createContext, type ReactNode, useContext, useReducer } from 'react'
+import type { AIRacer, DifficultyTracker, GameAction, GameState, Station } from '../lib/gameTypes'

 const initialDifficultyTracker: DifficultyTracker = {
  pairPerformance: new Map(),
@@ -11,32 +12,32 @@ const initialDifficultyTracker: DifficultyTracker = {
  consecutiveCorrect: 0,
  consecutiveIncorrect: 0,
  learningMode: true,
-  adaptationRate: 0.1
+  adaptationRate: 0.1,
 }

 const initialAIRacers: AIRacer[] = [
  {
    id: 'ai-racer-1',
    position: 0,
-    speed: 0.32,  // Balanced speed for good challenge
+    speed: 0.32, // Balanced speed for good challenge
    name: 'Swift AI',
    personality: 'competitive',
    icon: '🏃‍♂️',
    lastComment: 0,
    commentCooldown: 0,
-    previousPosition: 0
+    previousPosition: 0,
  },
  {
    id: 'ai-racer-2',
    position: 0,
-    speed: 0.20,  // Balanced speed for good challenge
+    speed: 0.2, // Balanced speed for good challenge
    name: 'Math Bot',
    personality: 'analytical',
    icon: '🏃',
    lastComment: 0,
    commentCooldown: 0,
-    previousPosition: 0
-  }
+    previousPosition: 0,
+  },
 ]

 const initialStations: Station[] = [
@@ -45,7 +46,7 @@ const initialStations: Station[] = [
  { id: 'station-2', name: 'Hillside', position: 40, icon: '⛰️' },
  { id: 'station-3', name: 'Canyon View', position: 60, icon: '🏜️' },
  { id: 'station-4', name: 'Meadows', position: 80, icon: '🌾' },
-  { id: 'station-5', name: 'Grand Central', position: 100, icon: '🏛️' }
+  { id: 'station-5', name: 'Grand Central', position: 100, icon: '🏛️' },
 ]

 const initialState: GameState = {
@@ -108,7 +109,7 @@ const initialState: GameState = {
  // UI state
  showScoreModal: false,
  activeSpeechBubbles: new Map(),
-  adaptiveFeedback: null
+  adaptiveFeedback: null,
 }

 function gameReducer(state: GameState, action: GameAction): GameState {
@@ -131,7 +132,7 @@ function gameReducer(state: GameState, action: GameAction): GameState {
    case 'START_COUNTDOWN':
      return { ...state, gamePhase: 'countdown' }

-    case 'BEGIN_GAME':
+    case 'BEGIN_GAME': {
      // Generate first question when game starts
      const generateFirstQuestion = () => {
        let targetSum: number
@@ -143,19 +144,19 @@ function gameReducer(state: GameState, action: GameAction): GameState {
          targetSum = Math.random() > 0.5 ? 5 : 10
        }

-        const newNumber = targetSum === 5
-          ? Math.floor(Math.random() * 5)
-          : Math.floor(Math.random() * 10)
+        const newNumber =
+          targetSum === 5 ? Math.floor(Math.random() * 5) : Math.floor(Math.random() * 10)

        // Decide once whether to show as abacus
-        const showAsAbacus = state.complementDisplay === 'abacus' ||
+        const showAsAbacus =
+          state.complementDisplay === 'abacus' ||
          (state.complementDisplay === 'random' && Math.random() < 0.5)

        return {
          number: newNumber,
          targetSum,
          correctAnswer: targetSum - newNumber,
-          showAsAbacus
+          showAsAbacus,
        }
      }

@@ -165,10 +166,11 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        isGameActive: true,
        gameStartTime: Date.now(),
        questionStartTime: Date.now(),
-        currentQuestion: generateFirstQuestion()
+        currentQuestion: generateFirstQuestion(),
      }
+    }

-    case 'NEXT_QUESTION':
+    case 'NEXT_QUESTION': {
      // Generate new question based on mode
      const generateQuestion = () => {
        let targetSum: number
@@ -198,14 +200,15 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        )

        // Decide once whether to show as abacus
-        const showAsAbacus = state.complementDisplay === 'abacus' ||
+        const showAsAbacus =
+          state.complementDisplay === 'abacus' ||
          (state.complementDisplay === 'random' && Math.random() < 0.5)

        return {
          number: newNumber,
          targetSum,
          correctAnswer: targetSum - newNumber,
-          showAsAbacus
+          showAsAbacus,
        }
      }

@@ -214,13 +217,14 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        previousQuestion: state.currentQuestion,
        currentQuestion: generateQuestion(),
        questionStartTime: Date.now(),
-        currentInput: ''
+        currentInput: '',
      }
+    }

    case 'UPDATE_INPUT':
      return { ...state, currentInput: action.input }

-    case 'SUBMIT_ANSWER':
+    case 'SUBMIT_ANSWER': {
      if (!state.currentQuestion) return state

      const isCorrect = action.answer === state.currentQuestion.correctAnswer
@@ -228,12 +232,12 @@ function gameReducer(state: GameState, action: GameAction): GameState {

      if (isCorrect) {
        // Calculate speed bonus: max(0, 300 - (avgTime * 10))
-        const speedBonus = Math.max(0, 300 - (responseTime / 100))
+        const speedBonus = Math.max(0, 300 - responseTime / 100)

        // Update score: correctAnswers * 100 + streak * 50 + speedBonus
        const newStreak = state.streak + 1
        const newCorrectAnswers = state.correctAnswers + 1
-        const newScore = state.score + 100 + (newStreak * 50) + speedBonus
+        const newScore = state.score + 100 + newStreak * 50 + speedBonus

        return {
          ...state,
@@ -241,26 +245,27 @@ function gameReducer(state: GameState, action: GameAction): GameState {
          streak: newStreak,
          bestStreak: Math.max(state.bestStreak, newStreak),
          score: Math.round(newScore),
-          totalQuestions: state.totalQuestions + 1
+          totalQuestions: state.totalQuestions + 1,
        }
      } else {
        // Incorrect answer - reset streak but keep score
        return {
          ...state,
          streak: 0,
-          totalQuestions: state.totalQuestions + 1
+          totalQuestions: state.totalQuestions + 1,
        }
      }
+    }

    case 'UPDATE_AI_POSITIONS':
      return {
        ...state,
-        aiRacers: state.aiRacers.map(racer => {
-          const update = action.positions.find(p => p.id === racer.id)
+        aiRacers: state.aiRacers.map((racer) => {
+          const update = action.positions.find((p) => p.id === racer.id)
          return update
            ? { ...racer, previousPosition: racer.position, position: update.position }
            : racer
-        })
+        }),
      }

    case 'UPDATE_MOMENTUM':
@@ -275,7 +280,7 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        momentum: action.momentum,
        trainPosition: action.trainPosition,
        pressure: action.pressure,
-        elapsedTime: action.elapsedTime
+        elapsedTime: action.elapsedTime,
      }

    case 'COMPLETE_LAP':
@@ -307,81 +312,83 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        style: state.style,
        timeoutSetting: state.timeoutSetting,
        complementDisplay: state.complementDisplay,
-        gamePhase: 'controls'
+        gamePhase: 'controls',
      }

-    case 'TRIGGER_AI_COMMENTARY':
+    case 'TRIGGER_AI_COMMENTARY': {
      const newBubbles = new Map(state.activeSpeechBubbles)
      newBubbles.set(action.racerId, action.message)
      return {
        ...state,
        activeSpeechBubbles: newBubbles,
        // Update racer's lastComment time and cooldown
-        aiRacers: state.aiRacers.map(racer =>
+        aiRacers: state.aiRacers.map((racer) =>
          racer.id === action.racerId
            ? {
                ...racer,
                lastComment: Date.now(),
-                commentCooldown: Math.random() * 4000 + 2000  // 2-6 seconds
+                commentCooldown: Math.random() * 4000 + 2000, // 2-6 seconds
              }
            : racer
-        )
+        ),
      }
+    }

-    case 'CLEAR_AI_COMMENT':
+    case 'CLEAR_AI_COMMENT': {
      const clearedBubbles = new Map(state.activeSpeechBubbles)
      clearedBubbles.delete(action.racerId)
      return {
        ...state,
-        activeSpeechBubbles: clearedBubbles
+        activeSpeechBubbles: clearedBubbles,
      }
+    }

    case 'UPDATE_DIFFICULTY_TRACKER':
      return {
        ...state,
-        difficultyTracker: action.tracker
+        difficultyTracker: action.tracker,
      }

    case 'UPDATE_AI_SPEEDS':
      return {
        ...state,
-        aiRacers: action.racers
+        aiRacers: action.racers,
      }

    case 'SHOW_ADAPTIVE_FEEDBACK':
      return {
        ...state,
-        adaptiveFeedback: action.feedback
+        adaptiveFeedback: action.feedback,
      }

    case 'CLEAR_ADAPTIVE_FEEDBACK':
      return {
        ...state,
-        adaptiveFeedback: null
+        adaptiveFeedback: null,
      }

    case 'GENERATE_PASSENGERS':
      return {
        ...state,
-        passengers: action.passengers
+        passengers: action.passengers,
      }

    case 'BOARD_PASSENGER':
      return {
        ...state,
-        passengers: state.passengers.map(p =>
+        passengers: state.passengers.map((p) =>
          p.id === action.passengerId ? { ...p, isBoarded: true } : p
-        )
+        ),
      }

    case 'DELIVER_PASSENGER':
      return {
        ...state,
-        passengers: state.passengers.map(p =>
+        passengers: state.passengers.map((p) =>
          p.id === action.passengerId ? { ...p, isDelivered: true } : p
        ),
        deliveredPassengers: state.deliveredPassengers + 1,
-        score: state.score + action.points
+        score: state.score + action.points,
      }

    case 'START_NEW_ROUTE':
@@ -393,20 +400,20 @@ function gameReducer(state: GameState, action: GameAction): GameState {
        deliveredPassengers: 0,
        showRouteCelebration: false,
        momentum: 50, // Give some starting momentum for the new route
-        pressure: 50
+        pressure: 50,
      }

    case 'COMPLETE_ROUTE':
      return {
        ...state,
        cumulativeDistance: state.cumulativeDistance + 100,
-        showRouteCelebration: true
+        showRouteCelebration: true,
      }

    case 'HIDE_ROUTE_CELEBRATION':
      return {
        ...state,
-        showRouteCelebration: false
+        showRouteCelebration: false,
      }

    default:
@@ -429,7 +436,7 @@ interface ComplementRaceProviderProps {
 export function ComplementRaceProvider({ children, initialStyle }: ComplementRaceProviderProps) {
  const [state, dispatch] = useReducer(gameReducer, {
    ...initialState,
-    style: initialStyle || initialState.style
+    style: initialStyle || initialState.style,
  })

  return (
@@ -445,4 +452,4 @@ export function useComplementRace() {
    throw new Error('useComplementRace must be used within ComplementRaceProvider')
  }
  return context
-}
+}
--- a/apps/web/src/app/arcade/complement-race/hooks/tests/usePassengerAnimations.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/usePassengerAnimations.test.ts
@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react'
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { usePassengerAnimations } from '../usePassengerAnimations'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import type { Passenger, Station } from '../../lib/gameTypes'
 import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { usePassengerAnimations } from '../usePassengerAnimations'

 describe('usePassengerAnimations', () => {
  let mockPathRef: React.RefObject<SVGPathElement>
@@ -19,11 +19,11 @@ describe('usePassengerAnimations', () => {

    // Mock track generator
    mockTrackGenerator = {
-      getTrainTransform: vi.fn((path: SVGPathElement, position: number) => ({
+      getTrainTransform: vi.fn((_path: SVGPathElement, position: number) => ({
        x: position * 10,
        y: 300,
-        rotation: 0
-      }))
+        rotation: 0,
+      })),
    } as unknown as RailroadTrackGenerator

    // Create mock stations
@@ -31,35 +31,37 @@ describe('usePassengerAnimations', () => {
      id: 'station-1',
      name: 'Station 1',
      position: 20,
-      icon: '🏭'
+      icon: '🏭',
    }

    mockStation2 = {
      id: 'station-2',
      name: 'Station 2',
      position: 60,
-      icon: '🏛️'
+      icon: '🏛️',
    }

    // Create mock passengers
    mockPassenger1 = {
      id: 'passenger-1',
+      name: 'Passenger 1',
      avatar: '👨',
      originStationId: 'station-1',
      destinationStationId: 'station-2',
      isBoarded: false,
      isDelivered: false,
-      isUrgent: false
+      isUrgent: false,
    }

    mockPassenger2 = {
      id: 'passenger-2',
+      name: 'Passenger 2',
      avatar: '👩',
      originStationId: 'station-1',
      destinationStationId: 'station-2',
      isBoarded: false,
      isDelivered: false,
-      isUrgent: true
+      isUrgent: true,
    }

    vi.clearAllMocks()
@@ -72,11 +74,11 @@ describe('usePassengerAnimations', () => {
        stations: [mockStation1, mockStation2],
        stationPositions: [
          { x: 100, y: 300 },
-          { x: 500, y: 300 }
+          { x: 500, y: 300 },
        ],
        trainPosition: 0,
        trackGenerator: mockTrackGenerator,
-        pathRef: mockPathRef
+        pathRef: mockPathRef,
      })
    )

@@ -92,16 +94,16 @@ describe('usePassengerAnimations', () => {
          stations: [mockStation1, mockStation2],
          stationPositions: [
            { x: 100, y: 300 },
-            { x: 500, y: 300 }
+            { x: 500, y: 300 },
          ],
          trainPosition: 20,
          trackGenerator: mockTrackGenerator,
-          pathRef: mockPathRef
+          pathRef: mockPathRef,
        }),
      {
        initialProps: {
-          passengers: [mockPassenger1]
-        }
+          passengers: [mockPassenger1],
+        },
      }
    )

@@ -134,16 +136,16 @@ describe('usePassengerAnimations', () => {
          stations: [mockStation1, mockStation2],
          stationPositions: [
            { x: 100, y: 300 },
-            { x: 500, y: 300 }
+            { x: 500, y: 300 },
          ],
          trainPosition: 60,
          trackGenerator: mockTrackGenerator,
-          pathRef: mockPathRef
+          pathRef: mockPathRef,
        }),
      {
        initialProps: {
-          passengers: [boardedPassenger]
-        }
+          passengers: [boardedPassenger],
+        },
      }
    )

@@ -173,23 +175,23 @@ describe('usePassengerAnimations', () => {
          stations: [mockStation1, mockStation2],
          stationPositions: [
            { x: 100, y: 300 },
-            { x: 500, y: 300 }
+            { x: 500, y: 300 },
          ],
          trainPosition: 20,
          trackGenerator: mockTrackGenerator,
-          pathRef: mockPathRef
+          pathRef: mockPathRef,
        }),
      {
        initialProps: {
-          passengers: [mockPassenger1, mockPassenger2]
-        }
+          passengers: [mockPassenger1, mockPassenger2],
+        },
      }
    )

    // Both passengers board
    const boardedPassengers = [
      { ...mockPassenger1, isBoarded: true },
-      { ...mockPassenger2, isBoarded: true }
+      { ...mockPassenger2, isBoarded: true },
    ]
    rerender({ passengers: boardedPassengers })

@@ -208,11 +210,11 @@ describe('usePassengerAnimations', () => {
        stations: [mockStation1, mockStation2],
        stationPositions: [
          { x: 100, y: 300 },
-          { x: 500, y: 300 }
+          { x: 500, y: 300 },
        ],
        trainPosition: 20,
        trackGenerator: mockTrackGenerator,
-        pathRef: mockPathRef
+        pathRef: mockPathRef,
      })
    )

@@ -230,16 +232,16 @@ describe('usePassengerAnimations', () => {
          stations: [mockStation1, mockStation2],
          stationPositions: [
            { x: 100, y: 300 },
-            { x: 500, y: 300 }
+            { x: 500, y: 300 },
          ],
          trainPosition: 20,
          trackGenerator: mockTrackGenerator,
-          pathRef: nullPathRef
+          pathRef: nullPathRef,
        }),
      {
        initialProps: {
-          passengers: [mockPassenger1]
-        }
+          passengers: [mockPassenger1],
+        },
      }
    )

@@ -260,12 +262,12 @@ describe('usePassengerAnimations', () => {
          stationPositions: [],
          trainPosition: 20,
          trackGenerator: mockTrackGenerator,
-          pathRef: mockPathRef
+          pathRef: mockPathRef,
        }),
      {
        initialProps: {
-          passengers: [mockPassenger1]
-        }
+          passengers: [mockPassenger1],
+        },
      }
    )

--- a/apps/web/src/app/arcade/complement-race/hooks/tests/useSteamJourney.boarding.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/useSteamJourney.boarding.test.ts
@@ -1,10 +1,10 @@
-import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'

 // Mock sound effects
 vi.mock('../useSoundEffects', () => ({
  useSoundEffects: () => ({
-    playSound: vi.fn()
-  })
+    playSound: vi.fn(),
+  }),
 }))

 /**
@@ -61,7 +61,7 @@ describe('useSteamJourney - Boarding Logic', () => {
    maxCars: number
  ): Passenger[] {
    const updatedPassengers = [...passengers]
-    const currentBoardedPassengers = updatedPassengers.filter(p => p.isBoarded && !p.isDelivered)
+    const currentBoardedPassengers = updatedPassengers.filter((p) => p.isBoarded && !p.isDelivered)

    // Track which cars are assigned in THIS frame to prevent double-boarding
    const carsAssignedThisFrame = new Set<number>()
@@ -70,7 +70,7 @@ describe('useSteamJourney - Boarding Logic', () => {
    updatedPassengers.forEach((passenger, passengerIndex) => {
      if (passenger.isBoarded || passenger.isDelivered) return

-      const station = stations.find(s => s.id === passenger.originStationId)
+      const station = stations.find((s) => s.id === passenger.originStationId)
      if (!station) return

      // Check if any empty car is at this station
@@ -104,12 +104,12 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Train at position 27%, first car at position 20% (station 1)
-    let result = simulateBoardingAtPosition(27, passengers, stations, 1)
+    const result = simulateBoardingAtPosition(27, passengers, stations, 1)

    expect(result[0].isBoarded).toBe(true)
  })
@@ -124,7 +124,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -134,7 +134,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p3',
@@ -144,8 +144,8 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Train at position 34%, cars at: 27%, 20%, 13%
@@ -187,7 +187,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -197,8 +197,8 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Simulate train speeding through station
@@ -220,7 +220,7 @@ describe('useSteamJourney - Boarding Logic', () => {
    // Car 1 at 38%, car 2 at 31% - both way past 20%

    // All passengers should have boarded
-    expect(result.every(p => p.isBoarded)).toBe(true)
+    expect(result.every((p) => p.isBoarded)).toBe(true)
  })

  test('EDGE CASE: passenger left behind when boarding window is missed', () => {
@@ -233,7 +233,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -243,8 +243,8 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Only 1 car, 2 passengers
@@ -271,7 +271,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -281,8 +281,8 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Only 1 car, both passengers at same station
@@ -305,7 +305,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -315,7 +315,7 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p3',
@@ -325,8 +325,8 @@ describe('useSteamJourney - Boarding Logic', () => {
        destinationStationId: 's2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // 3 passengers, 3 cars
@@ -339,12 +339,15 @@ describe('useSteamJourney - Boarding Logic', () => {
    }

    // All passengers should have boarded by the time last car passes
-    const allBoarded = result.every(p => p.isBoarded)
-    const leftBehind = result.filter(p => !p.isBoarded)
+    const allBoarded = result.every((p) => p.isBoarded)
+    const leftBehind = result.filter((p) => !p.isBoarded)

    expect(allBoarded).toBe(true)
    if (!allBoarded) {
-      console.log('Passengers left behind:', leftBehind.map(p => p.name))
+      console.log(
+        'Passengers left behind:',
+        leftBehind.map((p) => p.name)
+      )
    }
  })
 })
--- a/apps/web/src/app/arcade/complement-race/hooks/tests/useSteamJourney.passenger.test.tsx
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/useSteamJourney.passenger.test.tsx
@@ -8,25 +8,22 @@
 * 4. Passengers are delivered to the correct destination
 */

-import { renderHook, act } from '@testing-library/react'
-import { ReactNode } from 'react'
-import { ComplementRaceProvider } from '../../context/ComplementRaceContext'
-import { useSteamJourney } from '../useSteamJourney'
-import { useComplementRace } from '../../context/ComplementRaceContext'
+import { act, renderHook } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { ComplementRaceProvider, useComplementRace } from '../../context/ComplementRaceContext'
 import type { Passenger, Station } from '../../lib/gameTypes'
+import { useSteamJourney } from '../useSteamJourney'

 // Mock sound effects
-jest.mock('../useSoundEffects', () => ({
+vi.mock('../useSoundEffects', () => ({
  useSoundEffects: () => ({
-    playSound: jest.fn()
-  })
+    playSound: vi.fn(),
+  }),
 }))

 // Wrapper component
 const wrapper = ({ children }: { children: ReactNode }) => (
-  <ComplementRaceProvider initialStyle="sprint">
-    {children}
-  </ComplementRaceProvider>
+  <ComplementRaceProvider initialStyle="sprint">{children}</ComplementRaceProvider>
 )

 // Helper to create test passengers
@@ -44,32 +41,35 @@ const createPassenger = (
  destinationStationId,
  isUrgent: false,
  isBoarded,
-  isDelivered
+  isDelivered,
 })

 // Test stations
-const testStations: Station[] = [
+const _testStations: Station[] = [
  { id: 'station-0', name: 'Start', position: 0, icon: '🏁' },
  { id: 'station-1', name: 'Middle', position: 50, icon: '🏢' },
-  { id: 'station-2', name: 'End', position: 100, icon: '🏁' }
+  { id: 'station-2', name: 'End', position: 100, icon: '🏁' },
 ]

 describe('useSteamJourney - Passenger Boarding', () => {
  beforeEach(() => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
  })

  afterEach(() => {
-    jest.runOnlyPendingTimers()
-    jest.useRealTimers()
+    vi.runOnlyPendingTimers()
+    vi.useRealTimers()
  })

  test('passenger boards when train reaches their origin station', () => {
-    const { result } = renderHook(() => {
-      const journey = useSteamJourney()
-      const race = useComplementRace()
-      return { journey, race }
-    }, { wrapper })
+    const { result } = renderHook(
+      () => {
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
+      },
+      { wrapper }
+    )

    // Setup: Add passenger waiting at station-1 (position 50)
    const passenger = createPassenger('p1', 'station-1', 'station-2')
@@ -78,7 +78,7 @@ describe('useSteamJourney - Passenger Boarding', () => {
      result.current.race.dispatch({ type: 'BEGIN_GAME' })
      result.current.race.dispatch({
        type: 'GENERATE_PASSENGERS',
-        passengers: [passenger]
+        passengers: [passenger],
      })
      // Set train position just before station-1
      result.current.race.dispatch({
@@ -86,7 +86,7 @@ describe('useSteamJourney - Passenger Boarding', () => {
        momentum: 50,
        trainPosition: 40, // First car will be at ~33 (40 - 7)
        pressure: 75,
-        elapsedTime: 1000
+        elapsedTime: 1000,
      })
    })

@@ -100,39 +100,42 @@ describe('useSteamJourney - Passenger Boarding', () => {
        momentum: 50,
        trainPosition: 57, // First car at position 50 (57 - 7)
        pressure: 75,
-        elapsedTime: 2000
+        elapsedTime: 2000,
      })
    })

    // Advance timers to trigger the interval
    act(() => {
-      jest.advanceTimersByTime(100)
+      vi.advanceTimersByTime(100)
    })

    // Verify passenger boarded
-    const boardedPassenger = result.current.race.state.passengers.find(p => p.id === 'p1')
+    const boardedPassenger = result.current.race.state.passengers.find((p) => p.id === 'p1')
    expect(boardedPassenger?.isBoarded).toBe(true)
  })

  test('multiple passengers can board at the same station on different cars', () => {
-    const { result } = renderHook(() => {
-      const journey = useSteamJourney()
-      const race = useComplementRace()
-      return { journey, race }
-    }, { wrapper })
+    const { result } = renderHook(
+      () => {
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
+      },
+      { wrapper }
+    )

    // Setup: Three passengers waiting at station-1
    const passengers = [
      createPassenger('p1', 'station-1', 'station-2'),
      createPassenger('p2', 'station-1', 'station-2'),
-      createPassenger('p3', 'station-1', 'station-2')
+      createPassenger('p3', 'station-1', 'station-2'),
    ]

    act(() => {
      result.current.race.dispatch({ type: 'BEGIN_GAME' })
      result.current.race.dispatch({
        type: 'GENERATE_PASSENGERS',
-        passengers
+        passengers,
      })
      // Set train with 3 empty cars approaching station-1 (position 50)
      // Cars at: 50 (57-7), 43 (57-14), 36 (57-21)
@@ -141,26 +144,29 @@ describe('useSteamJourney - Passenger Boarding', () => {
        momentum: 60,
        trainPosition: 57,
        pressure: 90,
-        elapsedTime: 1000
+        elapsedTime: 1000,
      })
    })

    // Advance timers
    act(() => {
-      jest.advanceTimersByTime(100)
+      vi.advanceTimersByTime(100)
    })

    // All three passengers should board (one per car)
-    const boardedCount = result.current.race.state.passengers.filter(p => p.isBoarded).length
+    const boardedCount = result.current.race.state.passengers.filter((p) => p.isBoarded).length
    expect(boardedCount).toBe(3)
  })

  test('passenger is not left behind when train passes quickly', () => {
-    const { result } = renderHook(() => {
-      const journey = useSteamJourney()
-      const race = useComplementRace()
-      return { journey, race }
-    }, { wrapper })
+    const { result } = renderHook(
+      () => {
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
+      },
+      { wrapper }
+    )

    const passenger = createPassenger('p1', 'station-1', 'station-2')

@@ -168,7 +174,7 @@ describe('useSteamJourney - Passenger Boarding', () => {
      result.current.race.dispatch({ type: 'BEGIN_GAME' })
      result.current.race.dispatch({
        type: 'GENERATE_PASSENGERS',
-        passengers: [passenger]
+        passengers: [passenger],
      })
    })

@@ -182,13 +188,13 @@ describe('useSteamJourney - Passenger Boarding', () => {
          momentum: 80,
          trainPosition: pos,
          pressure: 120,
-          elapsedTime: 1000 + pos * 50
+          elapsedTime: 1000 + pos * 50,
        })
-        jest.advanceTimersByTime(50)
+        vi.advanceTimersByTime(50)
      })

      // Check if passenger boarded
-      const boardedPassenger = result.current.race.state.passengers.find(p => p.id === 'p1')
+      const boardedPassenger = result.current.race.state.passengers.find((p) => p.id === 'p1')
      if (boardedPassenger?.isBoarded) {
        // Success! Passenger boarded during the pass
        return
@@ -196,28 +202,31 @@ describe('useSteamJourney - Passenger Boarding', () => {
    }

    // If we get here, passenger was left behind
-    const boardedPassenger = result.current.race.state.passengers.find(p => p.id === 'p1')
+    const boardedPassenger = result.current.race.state.passengers.find((p) => p.id === 'p1')
    expect(boardedPassenger?.isBoarded).toBe(true)
  })

  test('passenger boards on correct car based on availability', () => {
-    const { result } = renderHook(() => {
-      const journey = useSteamJourney()
-      const race = useComplementRace()
-      return { journey, race }
-    }, { wrapper })
+    const { result } = renderHook(
+      () => {
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
+      },
+      { wrapper }
+    )

    // Setup: One passenger already on car 0, another waiting
    const passengers = [
      createPassenger('p1', 'station-0', 'station-2', true, false), // Already boarded on car 0
-      createPassenger('p2', 'station-1', 'station-2') // Waiting at station-1
+      createPassenger('p2', 'station-1', 'station-2'), // Waiting at station-1
    ]

    act(() => {
      result.current.race.dispatch({ type: 'BEGIN_GAME' })
      result.current.race.dispatch({
        type: 'GENERATE_PASSENGERS',
-        passengers
+        passengers,
      })
      // Train at station-1, car 0 occupied, car 1 empty
      result.current.race.dispatch({
@@ -225,30 +234,33 @@ describe('useSteamJourney - Passenger Boarding', () => {
        momentum: 50,
        trainPosition: 57, // Car 0 at 50, Car 1 at 43
        pressure: 75,
-        elapsedTime: 2000
+        elapsedTime: 2000,
      })
    })

    act(() => {
-      jest.advanceTimersByTime(100)
+      vi.advanceTimersByTime(100)
    })

    // p2 should board (on car 1 since car 0 is occupied)
-    const p2 = result.current.race.state.passengers.find(p => p.id === 'p2')
+    const p2 = result.current.race.state.passengers.find((p) => p.id === 'p2')
    expect(p2?.isBoarded).toBe(true)

    // p1 should still be boarded
-    const p1 = result.current.race.state.passengers.find(p => p.id === 'p1')
+    const p1 = result.current.race.state.passengers.find((p) => p.id === 'p1')
    expect(p1?.isBoarded).toBe(true)
    expect(p1?.isDelivered).toBe(false)
  })

  test('passenger is delivered when their car reaches destination', () => {
-    const { result } = renderHook(() => {
-      const journey = useSteamJourney()
-      const race = useComplementRace()
-      return { journey, race }
-    }, { wrapper })
+    const { result } = renderHook(
+      () => {
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
+      },
+      { wrapper }
+    )

    // Setup: Passenger already boarded, heading to station-2 (position 100)
    const passenger = createPassenger('p1', 'station-0', 'station-2', true, false)
@@ -257,7 +269,7 @@ describe('useSteamJourney - Passenger Boarding', () => {
      result.current.race.dispatch({ type: 'BEGIN_GAME' })
      result.current.race.dispatch({
        type: 'GENERATE_PASSENGERS',
-        passengers: [passenger]
+        passengers: [passenger],
      })
      // Move train so car 0 reaches station-2
      result.current.race.dispatch({
@@ -265,16 +277,16 @@ describe('useSteamJourney - Passenger Boarding', () => {
        momentum: 50,
        trainPosition: 107, // Car 0 at position 100 (107 - 7)
        pressure: 75,
-        elapsedTime: 5000
+        elapsedTime: 5000,
      })
    })

    act(() => {
-      jest.advanceTimersByTime(100)
+      vi.advanceTimersByTime(100)
    })

    // Passenger should be delivered
-    const deliveredPassenger = result.current.race.state.passengers.find(p => p.id === 'p1')
+    const deliveredPassenger = result.current.race.state.passengers.find((p) => p.id === 'p1')
    expect(deliveredPassenger?.isDelivered).toBe(true)
  })
 })
--- a/apps/web/src/app/arcade/complement-race/hooks/tests/useTrackManagement.passenger-display.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/useTrackManagement.passenger-display.test.ts
@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react'
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { useTrackManagement } from '../useTrackManagement'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '../../lib/gameTypes'
 import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
-import type { Station, Passenger } from '../../lib/gameTypes'
+import { useTrackManagement } from '../useTrackManagement'

 describe('useTrackManagement - Passenger Display', () => {
  let mockPathRef: React.RefObject<SVGPathElement>
@@ -17,7 +17,11 @@ describe('useTrackManagement - Passenger Display', () => {
    mockPath.getPointAtLength = vi.fn((distance: number) => ({
      x: distance,
      y: 300,
-    }))
+      w: 1,
+      z: 0,
+      matrixTransform: () => new DOMPoint(),
+      toJSON: () => ({ x: distance, y: 300, w: 1, z: 0 }),
+    })) as any
    mockPathRef = { current: mockPath }

    // Mock track generator
@@ -27,13 +31,13 @@ describe('useTrackManagement - Passenger Display', () => {
        referencePath: 'M 0 0',
        ties: [],
        leftRailPath: 'M 0 0',
-        rightRailPath: 'M 0 0'
+        rightRailPath: 'M 0 0',
      })),
      generateTiesAndRails: vi.fn(() => ({
        ties: [],
        leftRailPath: 'M 0 0',
-        rightRailPath: 'M 0 0'
-      }))
+        rightRailPath: 'M 0 0',
+      })),
    } as unknown as RailroadTrackGenerator

    // Mock stations
@@ -53,7 +57,7 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
+        isUrgent: false,
      },
      {
        id: 'p2',
@@ -63,8 +67,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    vi.clearAllMocks()
@@ -80,7 +84,7 @@ describe('useTrackManagement - Passenger Display', () => {
        stations: mockStations,
        passengers: mockPassengers,
        maxCars: 3,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -100,7 +104,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { passengers: mockPassengers, position: 25 } }
    )
@@ -110,7 +114,7 @@ describe('useTrackManagement - Passenger Display', () => {
    expect(result.current.displayPassengers[0].isBoarded).toBe(false)

    // Board first passenger
-    const boardedPassengers = mockPassengers.map(p =>
+    const boardedPassengers = mockPassengers.map((p) =>
      p.id === 'p1' ? { ...p, isBoarded: true } : p
    )

@@ -132,7 +136,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
    )
@@ -151,8 +155,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Change route but train still moving
@@ -175,7 +179,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
    )
@@ -194,8 +198,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Change route and train resets
@@ -218,7 +222,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
    )
@@ -237,8 +241,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Train exits (105%) but route hasn't changed yet
@@ -274,7 +278,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { passengers: mockPassengers, position: 50 } }
    )
@@ -284,7 +288,7 @@ describe('useTrackManagement - Passenger Display', () => {
    expect(result.current.displayPassengers[0].id).toBe('p1')

    // Create new array with same content (different reference)
-    const samePassengersNewRef = mockPassengers.map(p => ({ ...p }))
+    const samePassengersNewRef = mockPassengers.map((p) => ({ ...p }))

    // Update with new reference but same content
    rerender({ passengers: samePassengersNewRef, position: 50 })
@@ -305,7 +309,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { passengers: mockPassengers, position: 25 } }
    )
@@ -315,7 +319,7 @@ describe('useTrackManagement - Passenger Display', () => {
    expect(result.current.displayPassengers[0].isDelivered).toBe(false)

    // Deliver first passenger
-    const deliveredPassengers = mockPassengers.map(p =>
+    const deliveredPassengers = mockPassengers.map((p) =>
      p.id === 'p1' ? { ...p, isBoarded: true, isDelivered: true } : p
    )

@@ -337,7 +341,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { passengers: mockPassengers, position: 25 } }
    )
@@ -346,23 +350,17 @@ describe('useTrackManagement - Passenger Display', () => {
    expect(result.current.displayPassengers).toHaveLength(2)

    // Board p1
-    let updated = mockPassengers.map(p =>
-      p.id === 'p1' ? { ...p, isBoarded: true } : p
-    )
+    let updated = mockPassengers.map((p) => (p.id === 'p1' ? { ...p, isBoarded: true } : p))
    rerender({ passengers: updated, position: 26 })
    expect(result.current.displayPassengers[0].isBoarded).toBe(true)

    // Board p2
-    updated = updated.map(p =>
-      p.id === 'p2' ? { ...p, isBoarded: true } : p
-    )
+    updated = updated.map((p) => (p.id === 'p2' ? { ...p, isBoarded: true } : p))
    rerender({ passengers: updated, position: 52 })
    expect(result.current.displayPassengers[1].isBoarded).toBe(true)

    // Deliver p1
-    updated = updated.map(p =>
-      p.id === 'p1' ? { ...p, isDelivered: true } : p
-    )
+    updated = updated.map((p) => (p.id === 'p1' ? { ...p, isDelivered: true } : p))
    rerender({ passengers: updated, position: 53 })
    expect(result.current.displayPassengers[0].isDelivered).toBe(true)

@@ -384,7 +382,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
    )
@@ -406,8 +404,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // CRITICAL: New passengers, old route, position = 0
@@ -431,7 +429,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
    )
@@ -449,8 +447,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // CRITICAL: New passengers array, same route, position within 0-100
@@ -471,7 +469,7 @@ describe('useTrackManagement - Passenger Display', () => {
          stations: mockStations,
          passengers,
          maxCars: 3,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
    )
@@ -487,8 +485,8 @@ describe('useTrackManagement - Passenger Display', () => {
        destinationStationId: 'station3',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    // Route changes, position goes positive briefly before negative
--- a/apps/web/src/app/arcade/complement-race/hooks/tests/useTrackManagement.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/useTrackManagement.test.ts
@@ -1,15 +1,15 @@
-import { renderHook, act } from '@testing-library/react'
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { useTrackManagement } from '../useTrackManagement'
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '../../lib/gameTypes'
 import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
-import type { Station, Passenger } from '../../lib/gameTypes'
+import { useTrackManagement } from '../useTrackManagement'

 // Mock the landmarks module
 vi.mock('../../lib/landmarks', () => ({
-  generateLandmarks: vi.fn((route: number) => [
+  generateLandmarks: vi.fn((_route: number) => [
    { emoji: '🌲', position: 30, offset: { x: 0, y: -50 }, size: 24 },
-    { emoji: '🏔️', position: 70, offset: { x: 0, y: -80 }, size: 32 }
-  ])
+    { emoji: '🏔️', position: 70, offset: { x: 0, y: -80 }, size: 32 },
+  ]),
 }))

 describe('useTrackManagement', () => {
@@ -24,41 +24,46 @@ describe('useTrackManagement', () => {
    mockPath.getTotalLength = vi.fn(() => 1000)
    mockPath.getPointAtLength = vi.fn((distance: number) => ({
      x: distance,
-      y: 300
-    }))
+      y: 300,
+      w: 1,
+      z: 0,
+      matrixTransform: () => new DOMPoint(),
+      toJSON: () => ({ x: distance, y: 300, w: 1, z: 0 }),
+    })) as any
    mockPathRef = { current: mockPath }

    // Mock track generator
    mockTrackGenerator = {
      generateTrack: vi.fn((route: number) => ({
        referencePath: `M 0 300 L ${route * 100} 300`,
-        ballastPath: `M 0 300 L ${route * 100} 300`
+        ballastPath: `M 0 300 L ${route * 100} 300`,
      })),
      generateTiesAndRails: vi.fn(() => ({
        ties: [
          { x1: 0, y1: 300, x2: 10, y2: 300 },
-          { x1: 20, y1: 300, x2: 30, y2: 300 }
+          { x1: 20, y1: 300, x2: 30, y2: 300 },
        ],
        leftRailPoints: ['0,295', '100,295'],
-        rightRailPoints: ['0,305', '100,305']
-      }))
+        rightRailPoints: ['0,305', '100,305'],
+      })),
    } as unknown as RailroadTrackGenerator

    mockStations = [
      { id: 'station-1', name: 'Station 1', position: 20, icon: '🏭' },
-      { id: 'station-2', name: 'Station 2', position: 60, icon: '🏛️' }
+      { id: 'station-2', name: 'Station 2', position: 60, icon: '🏛️' },
    ]

    mockPassengers = [
      {
        id: 'passenger-1',
+        name: 'Passenger 1',
        avatar: '👨',
        originStationId: 'station-1',
        destinationStationId: 'station-2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    vi.clearAllMocks()
@@ -72,7 +77,9 @@ describe('useTrackManagement', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
+        maxCars: 3,
+        carSpacing: 7,
      })
    )

@@ -89,7 +96,9 @@ describe('useTrackManagement', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
+        maxCars: 3,
+        carSpacing: 7,
      })
    )

@@ -106,7 +115,9 @@ describe('useTrackManagement', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
+        maxCars: 3,
+        carSpacing: 7,
      })
    )

@@ -122,7 +133,9 @@ describe('useTrackManagement', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
+        maxCars: 3,
+        carSpacing: 7,
      })
    )

@@ -141,7 +154,7 @@ describe('useTrackManagement', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
      })
    )

@@ -160,10 +173,10 @@ describe('useTrackManagement', () => {
          trackGenerator: mockTrackGenerator,
          pathRef: mockPathRef,
          stations: mockStations,
-          passengers: mockPassengers
+          passengers: mockPassengers,
        }),
      {
-        initialProps: { route: 1, position: 0 }
+        initialProps: { route: 1, position: 0 },
      }
    )

@@ -186,10 +199,10 @@ describe('useTrackManagement', () => {
          trackGenerator: mockTrackGenerator,
          pathRef: mockPathRef,
          stations: mockStations,
-          passengers: mockPassengers
+          passengers: mockPassengers,
        }),
      {
-        initialProps: { route: 1, position: 0 }
+        initialProps: { route: 1, position: 0 },
      }
    )

@@ -213,10 +226,10 @@ describe('useTrackManagement', () => {
          trackGenerator: mockTrackGenerator,
          pathRef: mockPathRef,
          stations: mockStations,
-          passengers: mockPassengers
+          passengers: mockPassengers,
        }),
      {
-        initialProps: { route: 1, position: -5 }
+        initialProps: { route: 1, position: -5 },
      }
    )

@@ -233,13 +246,14 @@ describe('useTrackManagement', () => {
    const newPassengers: Passenger[] = [
      {
        id: 'passenger-2',
+        name: 'Passenger 2',
        avatar: '👩',
        originStationId: 'station-1',
        destinationStationId: 'station-2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    const { result, rerender } = renderHook(
@@ -252,10 +266,10 @@ describe('useTrackManagement', () => {
          stations: mockStations,
          passengers,
          maxCars: 5,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      {
-        initialProps: { passengers: mockPassengers, position: 50 }
+        initialProps: { passengers: mockPassengers, position: 50 },
      }
    )

@@ -278,8 +292,8 @@ describe('useTrackManagement', () => {
        destinationStationId: 'station-2',
        isBoarded: false,
        isDelivered: false,
-        isUrgent: false
-      }
+        isUrgent: false,
+      },
    ]

    const { result, rerender } = renderHook(
@@ -292,10 +306,10 @@ describe('useTrackManagement', () => {
          stations: mockStations,
          passengers,
          maxCars: 5,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      {
-        initialProps: { passengers: mockPassengers, position: 50 }
+        initialProps: { passengers: mockPassengers, position: 50 },
      }
    )

@@ -314,9 +328,7 @@ describe('useTrackManagement', () => {
  })

  test('updates passengers immediately during same route', () => {
-    const updatedPassengers: Passenger[] = [
-      { ...mockPassengers[0], isBoarded: true }
-    ]
+    const updatedPassengers: Passenger[] = [{ ...mockPassengers[0], isBoarded: true }]

    const { result, rerender } = renderHook(
      ({ passengers, position }) =>
@@ -328,10 +340,10 @@ describe('useTrackManagement', () => {
          stations: mockStations,
          passengers,
          maxCars: 5,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      {
-        initialProps: { passengers: mockPassengers, position: 50 }
+        initialProps: { passengers: mockPassengers, position: 50 },
      }
    )

@@ -345,7 +357,7 @@ describe('useTrackManagement', () => {
  test('returns null when no track data', () => {
    // Create a hook where trackGenerator returns null
    const nullTrackGenerator = {
-      generateTrack: vi.fn(() => null)
+      generateTrack: vi.fn(() => null),
    } as unknown as RailroadTrackGenerator

    const { result } = renderHook(() =>
@@ -355,7 +367,7 @@ describe('useTrackManagement', () => {
        trackGenerator: nullTrackGenerator,
        pathRef: mockPathRef,
        stations: mockStations,
-        passengers: mockPassengers
+        passengers: mockPassengers,
      })
    )

--- a/apps/web/src/app/arcade/complement-race/hooks/tests/useTrainTransforms.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/tests/useTrainTransforms.test.ts
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react'
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { useTrainTransforms } from '../useTrainTransforms'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { useTrainTransforms } from '../useTrainTransforms'

 describe('useTrainTransforms', () => {
  let mockPathRef: React.RefObject<SVGPathElement>
@@ -14,11 +14,11 @@ describe('useTrainTransforms', () => {

    // Mock track generator
    mockTrackGenerator = {
-      getTrainTransform: vi.fn((path: SVGPathElement, position: number) => ({
+      getTrainTransform: vi.fn((_path: SVGPathElement, position: number) => ({
        x: position * 10,
        y: 300,
-        rotation: position / 10
-      }))
+        rotation: position / 10,
+      })),
    } as unknown as RailroadTrackGenerator

    vi.clearAllMocks()
@@ -33,7 +33,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: nullPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -48,14 +48,14 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

    expect(result.current.trainTransform).toEqual({
      x: 500, // 50 * 10
      y: 300,
-      rotation: 5 // 50 / 10
+      rotation: 5, // 50 / 10
    })
  })

@@ -67,7 +67,7 @@ describe('useTrainTransforms', () => {
          trackGenerator: mockTrackGenerator,
          pathRef: mockPathRef,
          maxCars: 5,
-          carSpacing: 7
+          carSpacing: 7,
        }),
      { initialProps: { position: 20 } }
    )
@@ -85,7 +85,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -99,7 +99,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 3,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -113,7 +113,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 10
+        carSpacing: 10,
      })
    )

@@ -128,7 +128,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 3,
-        carSpacing: 10
+        carSpacing: 10,
      })
    )

@@ -145,7 +145,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result1.current.locomotiveOpacity).toBe(0)
@@ -156,7 +156,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result2.current.locomotiveOpacity).toBe(0.5)
@@ -167,7 +167,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result3.current.locomotiveOpacity).toBe(1)
@@ -181,7 +181,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result1.current.locomotiveOpacity).toBe(1)
@@ -192,7 +192,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result2.current.locomotiveOpacity).toBe(0.5)
@@ -203,7 +203,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )
    expect(result3.current.locomotiveOpacity).toBe(0)
@@ -216,7 +216,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -230,7 +230,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 2,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -250,7 +250,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 3,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -267,7 +267,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

@@ -283,7 +283,7 @@ describe('useTrainTransforms', () => {
        trackGenerator: mockTrackGenerator,
        pathRef: mockPathRef,
        maxCars: 5,
-        carSpacing: 7
+        carSpacing: 7,
      })
    )

--- a/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
+import { type CommentaryContext, getAICommentary } from '../components/AISystem/aiCommentary'
 import { useComplementRace } from '../context/ComplementRaceContext'
-import { getAICommentary, type CommentaryContext } from '../components/AISystem/aiCommentary'
 import { useSoundEffects } from './useSoundEffects'

 export function useAIRacers() {
@@ -12,7 +12,7 @@ export function useAIRacers() {

    // Update AI positions every 200ms (line 11690)
    const aiUpdateInterval = setInterval(() => {
-      const newPositions = state.aiRacers.map(racer => {
+      const newPositions = state.aiRacers.map((racer) => {
        // Base speed with random variance (0.6-1.4 range via Math.random() * 0.8 + 0.6)
        const variance = Math.random() * 0.8 + 0.6
        let speed = racer.speed * variance * state.speedMultiplier
@@ -28,7 +28,7 @@ export function useAIRacers() {

        return {
          id: racer.id,
-          position: newPosition
+          position: newPosition,
        }
      })

@@ -55,14 +55,17 @@ export function useAIRacers() {
      }

      // Check for commentary triggers after position updates
-      state.aiRacers.forEach(racer => {
-        const updatedPosition = newPositions.find(p => p.id === racer.id)?.position || racer.position
+      state.aiRacers.forEach((racer) => {
+        const updatedPosition =
+          newPositions.find((p) => p.id === racer.id)?.position || racer.position
        const distanceBehind = state.correctAnswers - updatedPosition
        const distanceAhead = updatedPosition - state.correctAnswers

        // Detect passing events
-        const playerJustPassed = racer.previousPosition > state.correctAnswers && updatedPosition < state.correctAnswers
-        const aiJustPassed = racer.previousPosition < state.correctAnswers && updatedPosition > state.correctAnswers
+        const playerJustPassed =
+          racer.previousPosition > state.correctAnswers && updatedPosition < state.correctAnswers
+        const aiJustPassed =
+          racer.previousPosition < state.correctAnswers && updatedPosition > state.correctAnswers

        // Determine commentary context
        let context: CommentaryContext | null = null
@@ -93,7 +96,7 @@ export function useAIRacers() {
              type: 'TRIGGER_AI_COMMENTARY',
              racerId: racer.id,
              message,
-              context
+              context,
            })

            // Play special turbo sound when AI goes desperate (line 11941)
@@ -106,9 +109,18 @@ export function useAIRacers() {
    }, 200)

    return () => clearInterval(aiUpdateInterval)
-  }, [state.isGameActive, state.aiRacers, state.correctAnswers, state.speedMultiplier, dispatch])
+  }, [
+    state.isGameActive,
+    state.aiRacers,
+    state.correctAnswers,
+    state.speedMultiplier,
+    dispatch, // Play game over sound (line 14193)
+    playSound,
+    state.raceGoal,
+    state.style,
+  ])

  return {
-    aiRacers: state.aiRacers
+    aiRacers: state.aiRacers,
  }
-}
+}
--- a/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts
@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import { useComplementRace } from '../context/ComplementRaceContext'
 import type { PairPerformance } from '../lib/gameTypes'

@@ -12,11 +11,11 @@ export function useAdaptiveDifficulty() {
    const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`

    // Get or create performance data for this pair
-    let pairData: PairPerformance = state.difficultyTracker.pairPerformance.get(pairKey) || {
+    const pairData: PairPerformance = state.difficultyTracker.pairPerformance.get(pairKey) || {
      attempts: 0,
      correct: 0,
      avgTime: 0,
-      difficulty: 1
+      difficulty: 1,
    }

    // Update performance data
@@ -26,7 +25,7 @@ export function useAdaptiveDifficulty() {
    }

    // Update average time (rolling average)
-    const totalTime = (pairData.avgTime * (pairData.attempts - 1)) + responseTime
+    const totalTime = pairData.avgTime * (pairData.attempts - 1) + responseTime
    pairData.avgTime = totalTime / pairData.attempts

    // Calculate pair-specific difficulty (lines 14555-14576)
@@ -59,31 +58,38 @@ export function useAdaptiveDifficulty() {
      ...state.difficultyTracker,
      pairPerformance: newPairPerformance,
      consecutiveCorrect: isCorrect ? state.difficultyTracker.consecutiveCorrect + 1 : 0,
-      consecutiveIncorrect: !isCorrect ? state.difficultyTracker.consecutiveIncorrect + 1 : 0
+      consecutiveIncorrect: !isCorrect ? state.difficultyTracker.consecutiveIncorrect + 1 : 0,
    }

    // Adapt global difficulty (lines 14578-14605)
    if (newTracker.consecutiveCorrect >= 3) {
      // Reduce time limit (increase difficulty)
-      newTracker.currentTimeLimit = Math.max(1000,
-        newTracker.currentTimeLimit - (newTracker.currentTimeLimit * newTracker.adaptationRate))
+      newTracker.currentTimeLimit = Math.max(
+        1000,
+        newTracker.currentTimeLimit - newTracker.currentTimeLimit * newTracker.adaptationRate
+      )
    } else if (newTracker.consecutiveIncorrect >= 2) {
      // Increase time limit (decrease difficulty)
-      newTracker.currentTimeLimit = Math.min(5000,
-        newTracker.currentTimeLimit + (newTracker.baseTimeLimit * newTracker.adaptationRate))
+      newTracker.currentTimeLimit = Math.min(
+        5000,
+        newTracker.currentTimeLimit + newTracker.baseTimeLimit * newTracker.adaptationRate
+      )
    }

    // Update overall difficulty level
-    const avgDifficulty = Array.from(newTracker.pairPerformance.values())
-      .reduce((sum, data) => sum + data.difficulty, 0) /
-      Math.max(1, newTracker.pairPerformance.size)
+    const avgDifficulty =
+      Array.from(newTracker.pairPerformance.values()).reduce(
+        (sum, data) => sum + data.difficulty,
+        0
+      ) / Math.max(1, newTracker.pairPerformance.size)

    newTracker.difficultyLevel = Math.round(avgDifficulty)

    // Exit learning mode after sufficient data (lines 14548-14552)
-    if (newTracker.pairPerformance.size >= 5 &&
-        Array.from(newTracker.pairPerformance.values())
-          .some(data => data.attempts >= 3)) {
+    if (
+      newTracker.pairPerformance.size >= 5 &&
+      Array.from(newTracker.pairPerformance.values()).some((data) => data.attempts >= 3)
+    ) {
      newTracker.learningMode = false
    }

@@ -100,14 +106,17 @@ export function useAdaptiveDifficulty() {
    if (recentQuestions === 0) return 0.5 // Default for first question

    // Use global tracking for recent performance
-    const recentCorrect = Math.max(0, state.correctAnswers - Math.max(0, state.totalQuestions - recentQuestions))
+    const recentCorrect = Math.max(
+      0,
+      state.correctAnswers - Math.max(0, state.totalQuestions - recentQuestions)
+    )
    return recentCorrect / recentQuestions
  }

  // Calculate average response time (lines 14695-14705)
  const calculateAverageResponseTime = (): number => {
    const recentPairs = Array.from(state.difficultyTracker.pairPerformance.values())
-      .filter(data => data.attempts >= 1)
+      .filter((data) => data.attempts >= 1)
      .slice(-5) // Last 5 different pairs encountered

    if (recentPairs.length === 0) return 3000 // Default for learning mode
@@ -127,10 +136,17 @@ export function useAdaptiveDifficulty() {
    // Base speed multipliers for each race mode
    let baseSpeedMultiplier: number
    switch (state.style) {
-      case 'practice': baseSpeedMultiplier = 0.7; break
-      case 'sprint': baseSpeedMultiplier = 0.9; break
-      case 'survival': baseSpeedMultiplier = state.speedMultiplier * state.survivalMultiplier; break
-      default: baseSpeedMultiplier = 0.7
+      case 'practice':
+        baseSpeedMultiplier = 0.7
+        break
+      case 'sprint':
+        baseSpeedMultiplier = 0.9
+        break
+      case 'survival':
+        baseSpeedMultiplier = state.speedMultiplier * state.survivalMultiplier
+        break
+      default:
+        baseSpeedMultiplier = 0.7
    }

    // Calculate adaptive multiplier based on player performance
@@ -141,7 +157,7 @@ export function useAdaptiveDifficulty() {
      adaptiveMultiplier *= 1.6 // Player doing great - speed up AI significantly
    } else if (playerSuccessRate > 0.75) {
      adaptiveMultiplier *= 1.3 // Player doing well - speed up AI moderately
-    } else if (playerSuccessRate > 0.60) {
+    } else if (playerSuccessRate > 0.6) {
      adaptiveMultiplier *= 1.0 // Player doing okay - keep AI at base speed
    } else if (playerSuccessRate > 0.45) {
      adaptiveMultiplier *= 0.75 // Player struggling - slow down AI
@@ -178,7 +194,7 @@ export function useAdaptiveDifficulty() {
        return { ...racer, speed: 0.32 * finalSpeedMultiplier }
      } else {
        // Math Bot (more consistent)
-        return { ...racer, speed: 0.20 * finalSpeedMultiplier }
+        return { ...racer, speed: 0.2 * finalSpeedMultiplier }
      }
    })

@@ -187,12 +203,12 @@ export function useAdaptiveDifficulty() {
    // Debug logging for AI adaptation (every 5 questions)
    if (state.totalQuestions % 5 === 0) {
      console.log('🤖 AI Speed Adaptation:', {
-        playerSuccessRate: Math.round(playerSuccessRate * 100) + '%',
-        avgResponseTime: Math.round(avgResponseTime) + 'ms',
+        playerSuccessRate: `${Math.round(playerSuccessRate * 100)}%`,
+        avgResponseTime: `${Math.round(avgResponseTime)}ms`,
        streak: state.streak,
        adaptiveMultiplier: Math.round(adaptiveMultiplier * 100) / 100,
        swiftAISpeed: updatedRacers[0] ? Math.round(updatedRacers[0].speed * 1000) / 1000 : 0,
-        mathBotSpeed: updatedRacers[1] ? Math.round(updatedRacers[1].speed * 1000) / 1000 : 0
+        mathBotSpeed: updatedRacers[1] ? Math.round(updatedRacers[1].speed * 1000) / 1000 : 0,
      })
    }
  }
@@ -249,23 +265,23 @@ export function useAdaptiveDifficulty() {
  // Get adaptive feedback message (lines 11655-11721)
  const getAdaptiveFeedbackMessage = (
    pairKey: string,
-    isCorrect: boolean,
-    responseTime: number
+    _isCorrect: boolean,
+    _responseTime: number
  ): { message: string; type: 'learning' | 'struggling' | 'mastered' | 'adapted' } | null => {
    const pairData = state.difficultyTracker.pairPerformance.get(pairKey)
-    const [num1, num2, sum] = pairKey.split('_').map(Number)
+    const [num1, num2, _sum] = pairKey.split('_').map(Number)

    // Learning mode messages
    if (state.difficultyTracker.learningMode) {
      const encouragements = [
        "🧠 I'm learning your style! Keep going!",
-        "📊 Building your skill profile...",
-        "🎯 Every answer helps me understand you better!",
-        "🚀 Analyzing your complement superpowers!"
+        '📊 Building your skill profile...',
+        '🎯 Every answer helps me understand you better!',
+        '🚀 Analyzing your complement superpowers!',
      ]
      return {
        message: encouragements[Math.floor(Math.random() * encouragements.length)],
-        type: 'learning'
+        type: 'learning',
      }
    }

@@ -280,11 +296,11 @@ export function useAdaptiveDifficulty() {
          `💪 ${num1}+${num2} needs practice - I'm giving you extra time!`,
          `🎯 Working on ${num1}+${num2} - you've got this!`,
          `⏰ Taking it slower with ${num1}+${num2} - no rush!`,
-          `🧩 ${num1}+${num2} is getting special attention from me!`
+          `🧩 ${num1}+${num2} is getting special attention from me!`,
        ]
        return {
          message: strugglingMessages[Math.floor(Math.random() * strugglingMessages.length)],
-          type: 'struggling'
+          type: 'struggling',
        }
      }

@@ -294,11 +310,11 @@ export function useAdaptiveDifficulty() {
          `⚡ ${num1}+${num2} = MASTERED! Lightning mode activated!`,
          `🔥 You've conquered ${num1}+${num2} - speeding it up!`,
          `🏆 ${num1}+${num2} expert detected! Challenge mode ON!`,
-          `⭐ ${num1}+${num2} is your superpower! Going faster!`
+          `⭐ ${num1}+${num2} is your superpower! Going faster!`,
        ]
        return {
          message: masteredMessages[Math.floor(Math.random() * masteredMessages.length)],
-          type: 'mastered'
+          type: 'mastered',
        }
      }
    }
@@ -307,12 +323,12 @@ export function useAdaptiveDifficulty() {
    if (state.difficultyTracker.consecutiveCorrect >= 3) {
      return {
        message: "🚀 You're on fire! Increasing the challenge!",
-        type: 'adapted'
+        type: 'adapted',
      }
    } else if (state.difficultyTracker.consecutiveIncorrect >= 2) {
      return {
        message: "🤗 Let's slow down a bit - I'm here to help!",
-        type: 'adapted'
+        type: 'adapted',
      }
    }

@@ -324,6 +340,6 @@ export function useAdaptiveDifficulty() {
    getAdaptiveTimeLimit,
    calculateRecentSuccessRate,
    calculateAverageResponseTime,
-    getAdaptiveFeedbackMessage
+    getAdaptiveFeedbackMessage,
  }
-}
+}
--- a/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts
@@ -16,25 +16,27 @@ export function useGameLoop() {
    dispatch({ type: 'NEXT_QUESTION' })
  }, [state.isGameActive, dispatch])

-  const submitAnswer = useCallback((answer: number) => {
-    if (!state.currentQuestion) return
+  const submitAnswer = useCallback(
+    (answer: number) => {
+      if (!state.currentQuestion) return

-    const isCorrect = answer === state.currentQuestion.correctAnswer
+      const isCorrect = answer === state.currentQuestion.correctAnswer

-    if (isCorrect) {
-      // Update score, streak, progress
-      // TODO: Will implement full scoring in next step
-      dispatch({ type: 'SUBMIT_ANSWER', answer })
+      if (isCorrect) {
+        // Update score, streak, progress
+        // TODO: Will implement full scoring in next step
+        dispatch({ type: 'SUBMIT_ANSWER', answer })

-      // Move to next question
-      dispatch({ type: 'NEXT_QUESTION' })
-    } else {
-      // Reset streak
-      // TODO: Will implement incorrect answer handling
-      dispatch({ type: 'SUBMIT_ANSWER', answer })
-    }
-
-  }, [state.currentQuestion, dispatch])
+        // Move to next question
+        dispatch({ type: 'NEXT_QUESTION' })
+      } else {
+        // Reset streak
+        // TODO: Will implement incorrect answer handling
+        dispatch({ type: 'SUBMIT_ANSWER', answer })
+      }
+    },
+    [state.currentQuestion, dispatch]
+  )

  const startCountdown = useCallback(() => {
    // Trigger countdown phase
@@ -62,6 +64,6 @@ export function useGameLoop() {
  return {
    nextQuestion,
    submitAnswer,
-    startCountdown
+    startCountdown,
  }
-}
+}
--- a/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts
@@ -36,10 +36,14 @@ export function usePassengerAnimations({
  stationPositions,
  trainPosition,
  trackGenerator,
-  pathRef
+  pathRef,
 }: UsePassengerAnimationsParams) {
-  const [boardingAnimations, setBoardingAnimations] = useState<Map<string, BoardingAnimation>>(new Map())
-  const [disembarkingAnimations, setDisembarkingAnimations] = useState<Map<string, DisembarkingAnimation>>(new Map())
+  const [boardingAnimations, setBoardingAnimations] = useState<Map<string, BoardingAnimation>>(
+    new Map()
+  )
+  const [disembarkingAnimations, setDisembarkingAnimations] = useState<
+    Map<string, DisembarkingAnimation>
+  >(new Map())
  const previousPassengersRef = useRef<Passenger[]>(passengers)

  // Detect passengers boarding/disembarking and start animations
@@ -50,21 +54,21 @@ export function usePassengerAnimations({
    const currentPassengers = passengers

    // Find newly boarded passengers
-    const newlyBoarded = currentPassengers.filter(curr => {
-      const prev = previousPassengers.find(p => p.id === curr.id)
+    const newlyBoarded = currentPassengers.filter((curr) => {
+      const prev = previousPassengers.find((p) => p.id === curr.id)
      return curr.isBoarded && prev && !prev.isBoarded
    })

    // Find newly delivered passengers
-    const newlyDelivered = currentPassengers.filter(curr => {
-      const prev = previousPassengers.find(p => p.id === curr.id)
+    const newlyDelivered = currentPassengers.filter((curr) => {
+      const prev = previousPassengers.find((p) => p.id === curr.id)
      return curr.isDelivered && prev && !prev.isDelivered
    })

    // Start animation for each newly boarded passenger
-    newlyBoarded.forEach(passenger => {
+    newlyBoarded.forEach((passenger) => {
      // Find origin station
-      const originStation = stations.find(s => s.id === passenger.originStationId)
+      const originStation = stations.find((s) => s.id === passenger.originStationId)
      if (!originStation) return

      const stationIndex = stations.indexOf(originStation)
@@ -72,7 +76,7 @@ export function usePassengerAnimations({
      if (!stationPos) return

      // Find which car this passenger will be in
-      const boardedPassengers = currentPassengers.filter(p => p.isBoarded && !p.isDelivered)
+      const boardedPassengers = currentPassengers.filter((p) => p.isBoarded && !p.isDelivered)
      const carIndex = boardedPassengers.indexOf(passenger)

      // Calculate train car position
@@ -87,10 +91,10 @@ export function usePassengerAnimations({
        toX: carTransform.x,
        toY: carTransform.y,
        carIndex,
-        startTime: Date.now()
+        startTime: Date.now(),
      }

-      setBoardingAnimations(prev => {
+      setBoardingAnimations((prev) => {
        const next = new Map(prev)
        next.set(passenger.id, animation)
        return next
@@ -98,7 +102,7 @@ export function usePassengerAnimations({

      // Remove animation after 800ms
      setTimeout(() => {
-        setBoardingAnimations(prev => {
+        setBoardingAnimations((prev) => {
          const next = new Map(prev)
          next.delete(passenger.id)
          return next
@@ -107,9 +111,9 @@ export function usePassengerAnimations({
    })

    // Start animation for each newly delivered passenger
-    newlyDelivered.forEach(passenger => {
+    newlyDelivered.forEach((passenger) => {
      // Find destination station
-      const destinationStation = stations.find(s => s.id === passenger.destinationStationId)
+      const destinationStation = stations.find((s) => s.id === passenger.destinationStationId)
      if (!destinationStation) return

      const stationIndex = stations.indexOf(destinationStation)
@@ -117,8 +121,8 @@ export function usePassengerAnimations({
      if (!stationPos) return

      // Find which car this passenger was in (before delivery)
-      const prevBoardedPassengers = previousPassengers.filter(p => p.isBoarded && !p.isDelivered)
-      const carIndex = prevBoardedPassengers.findIndex(p => p.id === passenger.id)
+      const prevBoardedPassengers = previousPassengers.filter((p) => p.isBoarded && !p.isDelivered)
+      const carIndex = prevBoardedPassengers.findIndex((p) => p.id === passenger.id)
      if (carIndex === -1) return

      // Calculate train car position at time of disembarking
@@ -132,10 +136,10 @@ export function usePassengerAnimations({
        fromY: carTransform.y,
        toX: stationPos.x,
        toY: stationPos.y - 30,
-        startTime: Date.now()
+        startTime: Date.now(),
      }

-      setDisembarkingAnimations(prev => {
+      setDisembarkingAnimations((prev) => {
        const next = new Map(prev)
        next.set(passenger.id, animation)
        return next
@@ -143,7 +147,7 @@ export function usePassengerAnimations({

      // Remove animation after 800ms
      setTimeout(() => {
-        setDisembarkingAnimations(prev => {
+        setDisembarkingAnimations((prev) => {
          const next = new Map(prev)
          next.delete(passenger.id)
          return next
@@ -157,6 +161,6 @@ export function usePassengerAnimations({

  return {
    boardingAnimations,
-    disembarkingAnimations
+    disembarkingAnimations,
  }
 }
--- a/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts
@@ -19,313 +19,427 @@ export function useSoundEffects() {
  /**
   * Helper function to play multi-note 90s arcade sounds
   */
-  const play90sSound = useCallback((
-    audioContext: AudioContext,
-    notes: Note[],
-    volume: number = 0.15,
-    waveType: OscillatorType = 'sine'
-  ) => {
-    notes.forEach(note => {
-      const oscillator = audioContext.createOscillator()
-      const gainNode = audioContext.createGain()
-      const filterNode = audioContext.createBiquadFilter()
+  const play90sSound = useCallback(
+    (
+      audioContext: AudioContext,
+      notes: Note[],
+      volume: number = 0.15,
+      waveType: OscillatorType = 'sine'
+    ) => {
+      notes.forEach((note) => {
+        const oscillator = audioContext.createOscillator()
+        const gainNode = audioContext.createGain()
+        const filterNode = audioContext.createBiquadFilter()

-      // Create that classic 90s arcade sound chain
-      oscillator.connect(filterNode)
-      filterNode.connect(gainNode)
-      gainNode.connect(audioContext.destination)
+        // Create that classic 90s arcade sound chain
+        oscillator.connect(filterNode)
+        filterNode.connect(gainNode)
+        gainNode.connect(audioContext.destination)

-      // Set wave type for that retro flavor
-      oscillator.type = waveType
+        // Set wave type for that retro flavor
+        oscillator.type = waveType

-      // Add some 90s-style filtering
-      filterNode.type = 'lowpass'
-      filterNode.frequency.setValueAtTime(2000, audioContext.currentTime + note.time)
-      filterNode.Q.setValueAtTime(1, audioContext.currentTime + note.time)
+        // Add some 90s-style filtering
+        filterNode.type = 'lowpass'
+        filterNode.frequency.setValueAtTime(2000, audioContext.currentTime + note.time)
+        filterNode.Q.setValueAtTime(1, audioContext.currentTime + note.time)

-      // Set frequency and add vibrato for that classic arcade wobble
-      oscillator.frequency.setValueAtTime(note.freq, audioContext.currentTime + note.time)
-      if (waveType === 'sawtooth' || waveType === 'square') {
-        // Add slight vibrato for extra 90s flavor
-        oscillator.frequency.exponentialRampToValueAtTime(
-          note.freq * 1.02,
-          audioContext.currentTime + note.time + note.duration * 0.5
+        // Set frequency and add vibrato for that classic arcade wobble
+        oscillator.frequency.setValueAtTime(note.freq, audioContext.currentTime + note.time)
+        if (waveType === 'sawtooth' || waveType === 'square') {
+          // Add slight vibrato for extra 90s flavor
+          oscillator.frequency.exponentialRampToValueAtTime(
+            note.freq * 1.02,
+            audioContext.currentTime + note.time + note.duration * 0.5
+          )
+          oscillator.frequency.exponentialRampToValueAtTime(
+            note.freq,
+            audioContext.currentTime + note.time + note.duration
+          )
+        }
+
+        // Classic arcade envelope - quick attack, moderate decay
+        gainNode.gain.setValueAtTime(0, audioContext.currentTime + note.time)
+        gainNode.gain.exponentialRampToValueAtTime(
+          volume,
+          audioContext.currentTime + note.time + 0.01
        )
-        oscillator.frequency.exponentialRampToValueAtTime(
-          note.freq,
+        gainNode.gain.exponentialRampToValueAtTime(
+          volume * 0.7,
+          audioContext.currentTime + note.time + note.duration * 0.7
+        )
+        gainNode.gain.exponentialRampToValueAtTime(
+          0.001,
          audioContext.currentTime + note.time + note.duration
        )
-      }

-      // Classic arcade envelope - quick attack, moderate decay
-      gainNode.gain.setValueAtTime(0, audioContext.currentTime + note.time)
-      gainNode.gain.exponentialRampToValueAtTime(volume, audioContext.currentTime + note.time + 0.01)
-      gainNode.gain.exponentialRampToValueAtTime(volume * 0.7, audioContext.currentTime + note.time + note.duration * 0.7)
-      gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + note.time + note.duration)
-
-      oscillator.start(audioContext.currentTime + note.time)
-      oscillator.stop(audioContext.currentTime + note.time + note.duration)
-    })
-  }, [])
+        oscillator.start(audioContext.currentTime + note.time)
+        oscillator.stop(audioContext.currentTime + note.time + note.duration)
+      })
+    },
+    []
+  )

  /**
   * Play a sound effect
   * @param type - Sound type (correct, incorrect, countdown, etc.)
   * @param volume - Volume level (0-1), default 0.15
   */
-  const playSound = useCallback((
-    type: 'correct' | 'incorrect' | 'timeout' | 'countdown' | 'race_start' | 'celebration' |
-          'lap_celebration' | 'gameOver' | 'ai_turbo' | 'milestone' | 'streak' | 'combo' |
-          'whoosh' | 'train_chuff' | 'train_whistle' | 'coal_spill' | 'steam_hiss',
-    volume: number = 0.15
-  ) => {
-    try {
-      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+  const playSound = useCallback(
+    (
+      type:
+        | 'correct'
+        | 'incorrect'
+        | 'timeout'
+        | 'countdown'
+        | 'race_start'
+        | 'celebration'
+        | 'lap_celebration'
+        | 'gameOver'
+        | 'ai_turbo'
+        | 'milestone'
+        | 'streak'
+        | 'combo'
+        | 'whoosh'
+        | 'train_chuff'
+        | 'train_whistle'
+        | 'coal_spill'
+        | 'steam_hiss',
+      volume: number = 0.15
+    ) => {
+      try {
+        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()

-      // Track audio contexts for cleanup
-      audioContextsRef.current.push(audioContext)
+        // Track audio contexts for cleanup
+        audioContextsRef.current.push(audioContext)

-      switch (type) {
-        case 'correct':
-          // Classic 90s "power-up" sound - ascending beeps
-          play90sSound(audioContext, [
-            { freq: 523, time: 0, duration: 0.08 },     // C5
-            { freq: 659, time: 0.08, duration: 0.08 },  // E5
-            { freq: 784, time: 0.16, duration: 0.12 }   // G5
-          ], volume, 'sawtooth')
-          break
+        switch (type) {
+          case 'correct':
+            // Classic 90s "power-up" sound - ascending beeps
+            play90sSound(
+              audioContext,
+              [
+                { freq: 523, time: 0, duration: 0.08 }, // C5
+                { freq: 659, time: 0.08, duration: 0.08 }, // E5
+                { freq: 784, time: 0.16, duration: 0.12 }, // G5
+              ],
+              volume,
+              'sawtooth'
+            )
+            break

-        case 'incorrect':
-          // Classic arcade "error" sound - descending buzz
-          play90sSound(audioContext, [
-            { freq: 400, time: 0, duration: 0.15 },
-            { freq: 300, time: 0.05, duration: 0.15 },
-            { freq: 200, time: 0.1, duration: 0.2 }
-          ], volume * 0.8, 'square')
-          break
+          case 'incorrect':
+            // Classic arcade "error" sound - descending buzz
+            play90sSound(
+              audioContext,
+              [
+                { freq: 400, time: 0, duration: 0.15 },
+                { freq: 300, time: 0.05, duration: 0.15 },
+                { freq: 200, time: 0.1, duration: 0.2 },
+              ],
+              volume * 0.8,
+              'square'
+            )
+            break

-        case 'timeout':
-          // Classic "time's up" alarm
-          play90sSound(audioContext, [
-            { freq: 800, time: 0, duration: 0.1 },
-            { freq: 600, time: 0.1, duration: 0.1 },
-            { freq: 800, time: 0.2, duration: 0.1 },
-            { freq: 600, time: 0.3, duration: 0.15 }
-          ], volume, 'square')
-          break
+          case 'timeout':
+            // Classic "time's up" alarm
+            play90sSound(
+              audioContext,
+              [
+                { freq: 800, time: 0, duration: 0.1 },
+                { freq: 600, time: 0.1, duration: 0.1 },
+                { freq: 800, time: 0.2, duration: 0.1 },
+                { freq: 600, time: 0.3, duration: 0.15 },
+              ],
+              volume,
+              'square'
+            )
+            break

-        case 'countdown':
-          // Classic arcade countdown beep
-          play90sSound(audioContext, [
-            { freq: 800, time: 0, duration: 0.15 }
-          ], volume * 0.6, 'sine')
-          break
+          case 'countdown':
+            // Classic arcade countdown beep
+            play90sSound(
+              audioContext,
+              [{ freq: 800, time: 0, duration: 0.15 }],
+              volume * 0.6,
+              'sine'
+            )
+            break

-        case 'race_start':
-          // Epic race start fanfare
-          play90sSound(audioContext, [
-            { freq: 523, time: 0, duration: 0.1 },      // C5
-            { freq: 659, time: 0.1, duration: 0.1 },    // E5
-            { freq: 784, time: 0.2, duration: 0.1 },    // G5
-            { freq: 1046, time: 0.3, duration: 0.3 }    // C6 - triumphant!
-          ], volume * 1.2, 'sawtooth')
-          break
+          case 'race_start':
+            // Epic race start fanfare
+            play90sSound(
+              audioContext,
+              [
+                { freq: 523, time: 0, duration: 0.1 }, // C5
+                { freq: 659, time: 0.1, duration: 0.1 }, // E5
+                { freq: 784, time: 0.2, duration: 0.1 }, // G5
+                { freq: 1046, time: 0.3, duration: 0.3 }, // C6 - triumphant!
+              ],
+              volume * 1.2,
+              'sawtooth'
+            )
+            break

-        case 'celebration':
-          // Classic victory fanfare - like completing a level
-          play90sSound(audioContext, [
-            { freq: 523, time: 0, duration: 0.12 },     // C5
-            { freq: 659, time: 0.12, duration: 0.12 },  // E5
-            { freq: 784, time: 0.24, duration: 0.12 },  // G5
-            { freq: 1046, time: 0.36, duration: 0.24 }, // C6
-            { freq: 1318, time: 0.6, duration: 0.3 }    // E6 - epic finish!
-          ], volume * 1.5, 'sawtooth')
-          break
+          case 'celebration':
+            // Classic victory fanfare - like completing a level
+            play90sSound(
+              audioContext,
+              [
+                { freq: 523, time: 0, duration: 0.12 }, // C5
+                { freq: 659, time: 0.12, duration: 0.12 }, // E5
+                { freq: 784, time: 0.24, duration: 0.12 }, // G5
+                { freq: 1046, time: 0.36, duration: 0.24 }, // C6
+                { freq: 1318, time: 0.6, duration: 0.3 }, // E6 - epic finish!
+              ],
+              volume * 1.5,
+              'sawtooth'
+            )
+            break

-        case 'lap_celebration':
-          // Radical "bonus achieved" sound
-          play90sSound(audioContext, [
-            { freq: 1046, time: 0, duration: 0.08 },    // C6
-            { freq: 1318, time: 0.08, duration: 0.08 }, // E6
-            { freq: 1568, time: 0.16, duration: 0.08 }, // G6
-            { freq: 2093, time: 0.24, duration: 0.15 }  // C7 - totally rad!
-          ], volume * 1.3, 'sawtooth')
-          break
+          case 'lap_celebration':
+            // Radical "bonus achieved" sound
+            play90sSound(
+              audioContext,
+              [
+                { freq: 1046, time: 0, duration: 0.08 }, // C6
+                { freq: 1318, time: 0.08, duration: 0.08 }, // E6
+                { freq: 1568, time: 0.16, duration: 0.08 }, // G6
+                { freq: 2093, time: 0.24, duration: 0.15 }, // C7 - totally rad!
+              ],
+              volume * 1.3,
+              'sawtooth'
+            )
+            break

-        case 'gameOver':
-          // Classic "game over" descending tones
-          play90sSound(audioContext, [
-            { freq: 400, time: 0, duration: 0.2 },
-            { freq: 350, time: 0.2, duration: 0.2 },
-            { freq: 300, time: 0.4, duration: 0.2 },
-            { freq: 250, time: 0.6, duration: 0.3 },
-            { freq: 200, time: 0.9, duration: 0.4 }
-          ], volume, 'triangle')
-          break
+          case 'gameOver':
+            // Classic "game over" descending tones
+            play90sSound(
+              audioContext,
+              [
+                { freq: 400, time: 0, duration: 0.2 },
+                { freq: 350, time: 0.2, duration: 0.2 },
+                { freq: 300, time: 0.4, duration: 0.2 },
+                { freq: 250, time: 0.6, duration: 0.3 },
+                { freq: 200, time: 0.9, duration: 0.4 },
+              ],
+              volume,
+              'triangle'
+            )
+            break

-        case 'ai_turbo':
-          // Sound when AI goes into turbo mode
-          play90sSound(audioContext, [
-            { freq: 200, time: 0, duration: 0.05 },
-            { freq: 400, time: 0.05, duration: 0.05 },
-            { freq: 600, time: 0.1, duration: 0.05 },
-            { freq: 800, time: 0.15, duration: 0.1 }
-          ], volume * 0.7, 'sawtooth')
-          break
+          case 'ai_turbo':
+            // Sound when AI goes into turbo mode
+            play90sSound(
+              audioContext,
+              [
+                { freq: 200, time: 0, duration: 0.05 },
+                { freq: 400, time: 0.05, duration: 0.05 },
+                { freq: 600, time: 0.1, duration: 0.05 },
+                { freq: 800, time: 0.15, duration: 0.1 },
+              ],
+              volume * 0.7,
+              'sawtooth'
+            )
+            break

-        case 'milestone':
-          // Rad milestone sound - like collecting a power-up
-          play90sSound(audioContext, [
-            { freq: 659, time: 0, duration: 0.1 },     // E5
-            { freq: 784, time: 0.1, duration: 0.1 },   // G5
-            { freq: 880, time: 0.2, duration: 0.1 },   // A5
-            { freq: 1046, time: 0.3, duration: 0.15 }  // C6 - awesome!
-          ], volume * 1.1, 'sawtooth')
-          break
+          case 'milestone':
+            // Rad milestone sound - like collecting a power-up
+            play90sSound(
+              audioContext,
+              [
+                { freq: 659, time: 0, duration: 0.1 }, // E5
+                { freq: 784, time: 0.1, duration: 0.1 }, // G5
+                { freq: 880, time: 0.2, duration: 0.1 }, // A5
+                { freq: 1046, time: 0.3, duration: 0.15 }, // C6 - awesome!
+              ],
+              volume * 1.1,
+              'sawtooth'
+            )
+            break

-        case 'streak':
-          // Epic streak sound - getting hot!
-          play90sSound(audioContext, [
-            { freq: 880, time: 0, duration: 0.06 },     // A5
-            { freq: 1046, time: 0.06, duration: 0.06 }, // C6
-            { freq: 1318, time: 0.12, duration: 0.08 }, // E6
-            { freq: 1760, time: 0.2, duration: 0.1 }    // A6 - on fire!
-          ], volume * 1.2, 'sawtooth')
-          break
+          case 'streak':
+            // Epic streak sound - getting hot!
+            play90sSound(
+              audioContext,
+              [
+                { freq: 880, time: 0, duration: 0.06 }, // A5
+                { freq: 1046, time: 0.06, duration: 0.06 }, // C6
+                { freq: 1318, time: 0.12, duration: 0.08 }, // E6
+                { freq: 1760, time: 0.2, duration: 0.1 }, // A6 - on fire!
+              ],
+              volume * 1.2,
+              'sawtooth'
+            )
+            break

-        case 'combo':
-          // Gnarly combo sound - for rapid correct answers
-          play90sSound(audioContext, [
-            { freq: 1046, time: 0, duration: 0.04 },    // C6
-            { freq: 1175, time: 0.04, duration: 0.04 }, // D6
-            { freq: 1318, time: 0.08, duration: 0.04 }, // E6
-            { freq: 1480, time: 0.12, duration: 0.06 }  // F#6
-          ], volume * 0.9, 'square')
-          break
+          case 'combo':
+            // Gnarly combo sound - for rapid correct answers
+            play90sSound(
+              audioContext,
+              [
+                { freq: 1046, time: 0, duration: 0.04 }, // C6
+                { freq: 1175, time: 0.04, duration: 0.04 }, // D6
+                { freq: 1318, time: 0.08, duration: 0.04 }, // E6
+                { freq: 1480, time: 0.12, duration: 0.06 }, // F#6
+              ],
+              volume * 0.9,
+              'square'
+            )
+            break

-        case 'whoosh': {
-          // Cool whoosh sound for fast responses
-          const whooshOsc = audioContext.createOscillator()
-          const whooshGain = audioContext.createGain()
-          const whooshFilter = audioContext.createBiquadFilter()
+          case 'whoosh': {
+            // Cool whoosh sound for fast responses
+            const whooshOsc = audioContext.createOscillator()
+            const whooshGain = audioContext.createGain()
+            const whooshFilter = audioContext.createBiquadFilter()

-          whooshOsc.connect(whooshFilter)
-          whooshFilter.connect(whooshGain)
-          whooshGain.connect(audioContext.destination)
+            whooshOsc.connect(whooshFilter)
+            whooshFilter.connect(whooshGain)
+            whooshGain.connect(audioContext.destination)

-          whooshOsc.type = 'sawtooth'
-          whooshFilter.type = 'highpass'
-          whooshFilter.frequency.setValueAtTime(1000, audioContext.currentTime)
-          whooshFilter.frequency.exponentialRampToValueAtTime(100, audioContext.currentTime + 0.3)
+            whooshOsc.type = 'sawtooth'
+            whooshFilter.type = 'highpass'
+            whooshFilter.frequency.setValueAtTime(1000, audioContext.currentTime)
+            whooshFilter.frequency.exponentialRampToValueAtTime(100, audioContext.currentTime + 0.3)

-          whooshOsc.frequency.setValueAtTime(400, audioContext.currentTime)
-          whooshOsc.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.15)
-          whooshOsc.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.3)
+            whooshOsc.frequency.setValueAtTime(400, audioContext.currentTime)
+            whooshOsc.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.15)
+            whooshOsc.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.3)

-          whooshGain.gain.setValueAtTime(0, audioContext.currentTime)
-          whooshGain.gain.exponentialRampToValueAtTime(volume * 0.6, audioContext.currentTime + 0.02)
-          whooshGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3)
+            whooshGain.gain.setValueAtTime(0, audioContext.currentTime)
+            whooshGain.gain.exponentialRampToValueAtTime(
+              volume * 0.6,
+              audioContext.currentTime + 0.02
+            )
+            whooshGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3)

-          whooshOsc.start(audioContext.currentTime)
-          whooshOsc.stop(audioContext.currentTime + 0.3)
-          break
-        }
-
-        case 'train_chuff': {
-          // Realistic steam train chuffing sound
-          const chuffOsc = audioContext.createOscillator()
-          const chuffGain = audioContext.createGain()
-          const chuffFilter = audioContext.createBiquadFilter()
-
-          chuffOsc.connect(chuffFilter)
-          chuffFilter.connect(chuffGain)
-          chuffGain.connect(audioContext.destination)
-
-          chuffOsc.type = 'sawtooth'
-          chuffFilter.type = 'bandpass'
-          chuffFilter.frequency.setValueAtTime(150, audioContext.currentTime)
-          chuffFilter.Q.setValueAtTime(5, audioContext.currentTime)
-
-          chuffOsc.frequency.setValueAtTime(80, audioContext.currentTime)
-          chuffOsc.frequency.exponentialRampToValueAtTime(120, audioContext.currentTime + 0.05)
-          chuffOsc.frequency.exponentialRampToValueAtTime(60, audioContext.currentTime + 0.2)
-
-          chuffGain.gain.setValueAtTime(0, audioContext.currentTime)
-          chuffGain.gain.exponentialRampToValueAtTime(volume * 0.8, audioContext.currentTime + 0.01)
-          chuffGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.2)
-
-          chuffOsc.start(audioContext.currentTime)
-          chuffOsc.stop(audioContext.currentTime + 0.2)
-          break
-        }
-
-        case 'train_whistle':
-          // Classic steam train whistle
-          play90sSound(audioContext, [
-            { freq: 523, time: 0, duration: 0.3 },     // C5 - long whistle
-            { freq: 659, time: 0.1, duration: 0.4 },   // E5 - harmony
-            { freq: 523, time: 0.3, duration: 0.2 }    // C5 - fade out
-          ], volume * 1.2, 'sine')
-          break
-
-        case 'coal_spill': {
-          // Coal chunks spilling sound effect
-          const coalOsc = audioContext.createOscillator()
-          const coalGain = audioContext.createGain()
-          const coalFilter = audioContext.createBiquadFilter()
-
-          coalOsc.connect(coalFilter)
-          coalFilter.connect(coalGain)
-          coalGain.connect(audioContext.destination)
-
-          coalOsc.type = 'square'
-          coalFilter.type = 'lowpass'
-          coalFilter.frequency.setValueAtTime(300, audioContext.currentTime)
-
-          // Simulate coal chunks falling with random frequency bursts
-          coalOsc.frequency.setValueAtTime(200 + Math.random() * 100, audioContext.currentTime)
-          coalOsc.frequency.exponentialRampToValueAtTime(100 + Math.random() * 50, audioContext.currentTime + 0.1)
-          coalOsc.frequency.exponentialRampToValueAtTime(80 + Math.random() * 40, audioContext.currentTime + 0.3)
-
-          coalGain.gain.setValueAtTime(0, audioContext.currentTime)
-          coalGain.gain.exponentialRampToValueAtTime(volume * 0.6, audioContext.currentTime + 0.01)
-          coalGain.gain.exponentialRampToValueAtTime(volume * 0.3, audioContext.currentTime + 0.15)
-          coalGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.4)
-
-          coalOsc.start(audioContext.currentTime)
-          coalOsc.stop(audioContext.currentTime + 0.4)
-          break
-        }
-
-        case 'steam_hiss': {
-          // Steam hissing sound for locomotive
-          const steamOsc = audioContext.createOscillator()
-          const steamGain = audioContext.createGain()
-          const steamFilter = audioContext.createBiquadFilter()
-
-          steamOsc.connect(steamFilter)
-          steamFilter.connect(steamGain)
-          steamGain.connect(audioContext.destination)
-
-          steamOsc.type = 'triangle'
-          steamFilter.type = 'highpass'
-          steamFilter.frequency.setValueAtTime(2000, audioContext.currentTime)
-
-          steamOsc.frequency.setValueAtTime(4000 + Math.random() * 1000, audioContext.currentTime)
-
-          steamGain.gain.setValueAtTime(0, audioContext.currentTime)
-          steamGain.gain.exponentialRampToValueAtTime(volume * 0.4, audioContext.currentTime + 0.02)
-          steamGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.6)
-
-          steamOsc.start(audioContext.currentTime)
-          steamOsc.stop(audioContext.currentTime + 0.6)
-          break
+            whooshOsc.start(audioContext.currentTime)
+            whooshOsc.stop(audioContext.currentTime + 0.3)
+            break
+          }
+
+          case 'train_chuff': {
+            // Realistic steam train chuffing sound
+            const chuffOsc = audioContext.createOscillator()
+            const chuffGain = audioContext.createGain()
+            const chuffFilter = audioContext.createBiquadFilter()
+
+            chuffOsc.connect(chuffFilter)
+            chuffFilter.connect(chuffGain)
+            chuffGain.connect(audioContext.destination)
+
+            chuffOsc.type = 'sawtooth'
+            chuffFilter.type = 'bandpass'
+            chuffFilter.frequency.setValueAtTime(150, audioContext.currentTime)
+            chuffFilter.Q.setValueAtTime(5, audioContext.currentTime)
+
+            chuffOsc.frequency.setValueAtTime(80, audioContext.currentTime)
+            chuffOsc.frequency.exponentialRampToValueAtTime(120, audioContext.currentTime + 0.05)
+            chuffOsc.frequency.exponentialRampToValueAtTime(60, audioContext.currentTime + 0.2)
+
+            chuffGain.gain.setValueAtTime(0, audioContext.currentTime)
+            chuffGain.gain.exponentialRampToValueAtTime(
+              volume * 0.8,
+              audioContext.currentTime + 0.01
+            )
+            chuffGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.2)
+
+            chuffOsc.start(audioContext.currentTime)
+            chuffOsc.stop(audioContext.currentTime + 0.2)
+            break
+          }
+
+          case 'train_whistle':
+            // Classic steam train whistle
+            play90sSound(
+              audioContext,
+              [
+                { freq: 523, time: 0, duration: 0.3 }, // C5 - long whistle
+                { freq: 659, time: 0.1, duration: 0.4 }, // E5 - harmony
+                { freq: 523, time: 0.3, duration: 0.2 }, // C5 - fade out
+              ],
+              volume * 1.2,
+              'sine'
+            )
+            break
+
+          case 'coal_spill': {
+            // Coal chunks spilling sound effect
+            const coalOsc = audioContext.createOscillator()
+            const coalGain = audioContext.createGain()
+            const coalFilter = audioContext.createBiquadFilter()
+
+            coalOsc.connect(coalFilter)
+            coalFilter.connect(coalGain)
+            coalGain.connect(audioContext.destination)
+
+            coalOsc.type = 'square'
+            coalFilter.type = 'lowpass'
+            coalFilter.frequency.setValueAtTime(300, audioContext.currentTime)
+
+            // Simulate coal chunks falling with random frequency bursts
+            coalOsc.frequency.setValueAtTime(200 + Math.random() * 100, audioContext.currentTime)
+            coalOsc.frequency.exponentialRampToValueAtTime(
+              100 + Math.random() * 50,
+              audioContext.currentTime + 0.1
+            )
+            coalOsc.frequency.exponentialRampToValueAtTime(
+              80 + Math.random() * 40,
+              audioContext.currentTime + 0.3
+            )
+
+            coalGain.gain.setValueAtTime(0, audioContext.currentTime)
+            coalGain.gain.exponentialRampToValueAtTime(
+              volume * 0.6,
+              audioContext.currentTime + 0.01
+            )
+            coalGain.gain.exponentialRampToValueAtTime(
+              volume * 0.3,
+              audioContext.currentTime + 0.15
+            )
+            coalGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.4)
+
+            coalOsc.start(audioContext.currentTime)
+            coalOsc.stop(audioContext.currentTime + 0.4)
+            break
+          }
+
+          case 'steam_hiss': {
+            // Steam hissing sound for locomotive
+            const steamOsc = audioContext.createOscillator()
+            const steamGain = audioContext.createGain()
+            const steamFilter = audioContext.createBiquadFilter()
+
+            steamOsc.connect(steamFilter)
+            steamFilter.connect(steamGain)
+            steamGain.connect(audioContext.destination)
+
+            steamOsc.type = 'triangle'
+            steamFilter.type = 'highpass'
+            steamFilter.frequency.setValueAtTime(2000, audioContext.currentTime)
+
+            steamOsc.frequency.setValueAtTime(4000 + Math.random() * 1000, audioContext.currentTime)
+
+            steamGain.gain.setValueAtTime(0, audioContext.currentTime)
+            steamGain.gain.exponentialRampToValueAtTime(
+              volume * 0.4,
+              audioContext.currentTime + 0.02
+            )
+            steamGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.6)
+
+            steamOsc.start(audioContext.currentTime)
+            steamOsc.stop(audioContext.currentTime + 0.6)
+            break
+          }
        }
+      } catch (_e) {
+        console.log('🎵 Web Audio not supported - missing out on rad 90s sounds!')
      }
-    } catch (e) {
-      console.log('🎵 Web Audio not supported - missing out on rad 90s sounds!')
-    }
-  }, [play90sSound])
+    },
+    [play90sSound]
+  )

  /**
   * Stop all currently playing sounds
@@ -336,7 +450,7 @@ export function useSoundEffects() {
        audioContextsRef.current.forEach((context) => {
          try {
            context.close()
-          } catch (e) {
+          } catch (_e) {
            // Ignore errors
          }
        })
@@ -349,6 +463,6 @@ export function useSoundEffects() {

  return {
    playSound,
-    stopAllSounds
+    stopAllSounds,
  }
 }
--- a/apps/web/src/app/arcade/complement-race/hooks/useSteamJourney.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useSteamJourney.ts
@@ -1,6 +1,6 @@
-import { useEffect, useRef, useMemo } from 'react'
+import { useEffect, useRef } from 'react'
 import { useComplementRace } from '../context/ComplementRaceContext'
-import { generatePassengers, calculateMaxConcurrentPassengers } from '../lib/passengerGenerator'
+import { calculateMaxConcurrentPassengers, generatePassengers } from '../lib/passengerGenerator'
 import { useSoundEffects } from './useSoundEffects'

 /**
@@ -30,7 +30,7 @@ const MOMENTUM_DECAY_RATES = {
  slow: 7.0,
  normal: 9.0,
  fast: 11.0,
-  expert: 13.0
+  expert: 13.0,
 }

 const MOMENTUM_GAIN_PER_CORRECT = 15 // Momentum added for each correct answer
@@ -60,7 +60,7 @@ export function useSteamJourney() {
        const CAR_SPACING = 7
        const maxPassengers = calculateMaxConcurrentPassengers(newPassengers, state.stations)
        const maxCars = Math.max(1, maxPassengers)
-        routeExitThresholdRef.current = 100 + (maxCars * CAR_SPACING)
+        routeExitThresholdRef.current = 100 + maxCars * CAR_SPACING
      }
    }
  }, [state.isGameActive, state.style, state.stations, state.passengers.length, dispatch])
@@ -104,7 +104,7 @@ export function useSteamJourney() {
        momentum: newMomentum,
        trainPosition,
        pressure,
-        elapsedTime: elapsed
+        elapsedTime: elapsed,
      })

      // Check for passengers that should board
@@ -112,7 +112,7 @@ export function useSteamJourney() {
      const CAR_SPACING = 7 // Must match SteamTrainJourney component
      const maxPassengers = calculateMaxConcurrentPassengers(state.passengers, state.stations)
      const maxCars = Math.max(1, maxPassengers)
-      const currentBoardedPassengers = state.passengers.filter(p => p.isBoarded && !p.isDelivered)
+      const currentBoardedPassengers = state.passengers.filter((p) => p.isBoarded && !p.isDelivered)

      // Debug logging flag - enable when debugging passenger boarding issues
      // TO ENABLE: Change this to true, save, and the logs will appear in the browser console
@@ -137,18 +137,22 @@ export function useSteamJourney() {
        console.log(`  Distance Tolerance: 5`)

        console.log('\n🚉 STATIONS:')
-        state.stations.forEach(station => {
+        state.stations.forEach((station) => {
          console.log(`  ${station.emoji} ${station.name} (ID: ${station.id})`)
          console.log(`    Position: ${station.position}`)
        })

        console.log('\n👥 ALL PASSENGERS:')
        state.passengers.forEach((p, idx) => {
-          const origin = state.stations.find(s => s.id === p.originStationId)
-          const dest = state.stations.find(s => s.id === p.destinationStationId)
+          const origin = state.stations.find((s) => s.id === p.originStationId)
+          const dest = state.stations.find((s) => s.id === p.destinationStationId)
          console.log(`  [${idx}] ${p.name} (ID: ${p.id})`)
-          console.log(`    Status: ${p.isDelivered ? 'DELIVERED' : p.isBoarded ? 'BOARDED' : 'WAITING'}`)
-          console.log(`    Route: ${origin?.emoji} ${origin?.name} (pos ${origin?.position}) → ${dest?.emoji} ${dest?.name} (pos ${dest?.position})`)
+          console.log(
+            `    Status: ${p.isDelivered ? 'DELIVERED' : p.isBoarded ? 'BOARDED' : 'WAITING'}`
+          )
+          console.log(
+            `    Route: ${origin?.emoji} ${origin?.name} (pos ${origin?.position}) → ${dest?.emoji} ${dest?.name} (pos ${dest?.position})`
+          )
          console.log(`    Urgent: ${p.isUrgent}`)
        })

@@ -161,7 +165,7 @@ export function useSteamJourney() {
        console.log('\n🔍 CURRENTLY BOARDED PASSENGERS:')
        currentBoardedPassengers.forEach((p, carIndex) => {
          const carPos = Math.max(0, trainPosition - (carIndex + 1) * CAR_SPACING)
-          const dest = state.stations.find(s => s.id === p.destinationStationId)
+          const dest = state.stations.find((s) => s.id === p.destinationStationId)
          const distToDest = Math.abs(carPos - (dest?.position || 0))
          console.log(`  Car ${carIndex}: ${p.name}`)
          console.log(`    Car position: ${carPos.toFixed(2)}`)
@@ -176,7 +180,7 @@ export function useSteamJourney() {
      currentBoardedPassengers.forEach((passenger, carIndex) => {
        if (!passenger || passenger.isDelivered) return

-        const station = state.stations.find(s => s.id === passenger.destinationStationId)
+        const station = state.stations.find((s) => s.id === passenger.destinationStationId)
        if (!station) return

        // Calculate this passenger's car position
@@ -190,7 +194,7 @@ export function useSteamJourney() {
      })

      // Build a map of which cars are occupied (excluding passengers being delivered this frame)
-      const occupiedCars = new Map<number, typeof currentBoardedPassengers[0]>()
+      const occupiedCars = new Map<number, (typeof currentBoardedPassengers)[0]>()
      currentBoardedPassengers.forEach((passenger, arrayIndex) => {
        // Don't count a car as occupied if its passenger is being delivered this frame
        if (!passengersToDeliver.has(passenger.id)) {
@@ -203,8 +207,8 @@ export function useSteamJourney() {
        if (passengersToDeliver.size === 0) {
          console.log('  None')
        } else {
-          passengersToDeliver.forEach(id => {
-            const p = state.passengers.find(passenger => passenger.id === id)
+          passengersToDeliver.forEach((id) => {
+            const p = state.passengers.find((passenger) => passenger.id === id)
            console.log(`  - ${p?.name} (ID: ${id})`)
          })
        }
@@ -225,14 +229,16 @@ export function useSteamJourney() {
      const carsAssignedThisFrame = new Set<number>()

      // Find waiting passengers whose origin station has an empty car nearby
-      state.passengers.forEach(passenger => {
+      state.passengers.forEach((passenger) => {
        if (passenger.isBoarded || passenger.isDelivered) return

-        const station = state.stations.find(s => s.id === passenger.originStationId)
+        const station = state.stations.find((s) => s.id === passenger.originStationId)
        if (!station) return

        if (DEBUG_PASSENGER_BOARDING) {
-          console.log(`\n  Passenger: ${passenger.name} waiting at ${station.emoji} ${station.name} (pos ${station.position})`)
+          console.log(
+            `\n  Passenger: ${passenger.name} waiting at ${station.emoji} ${station.name} (pos ${station.position})`
+          )
        }

        // Check if any empty car is at this station
@@ -251,7 +257,9 @@ export function useSteamJourney() {
            console.log(`    Car ${carIndex} @ pos ${carPosition.toFixed(2)}:`)
            console.log(`      Distance to station: ${distance.toFixed(2)}`)
            console.log(`      In range (<5): ${inRange}`)
-            console.log(`      Occupied: ${isOccupied}${isOccupied ? ` (by ${occupant?.name})` : ''}`)
+            console.log(
+              `      Occupied: ${isOccupied}${isOccupied ? ` (by ${occupant?.name})` : ''}`
+            )
            console.log(`      Assigned this frame: ${isAssigned}`)
            console.log(`      Can board: ${!isOccupied && !isAssigned && inRange}`)
          }
@@ -269,7 +277,7 @@ export function useSteamJourney() {
            }
            dispatch({
              type: 'BOARD_PASSENGER',
-              passengerId: passenger.id
+              passengerId: passenger.id,
            })
            // Mark this car as assigned in this frame
            carsAssignedThisFrame.add(carIndex)
@@ -292,7 +300,7 @@ export function useSteamJourney() {
      currentBoardedPassengers.forEach((passenger, carIndex) => {
        if (!passenger || passenger.isDelivered) return

-        const station = state.stations.find(s => s.id === passenger.destinationStationId)
+        const station = state.stations.find((s) => s.id === passenger.destinationStationId)
        if (!station) return

        // Calculate this passenger's car position
@@ -302,23 +310,31 @@ export function useSteamJourney() {
        // If this car is at the destination station (within 5% tolerance), deliver
        if (distance < 5) {
          if (DEBUG_PASSENGER_BOARDING) {
-            console.log(`  ✅ DELIVERING ${passenger.name} from Car ${carIndex} to ${station.emoji} ${station.name}`)
-            console.log(`    Car position: ${carPosition.toFixed(2)}, Station: ${station.position}, Distance: ${distance.toFixed(2)}`)
+            console.log(
+              `  ✅ DELIVERING ${passenger.name} from Car ${carIndex} to ${station.emoji} ${station.name}`
+            )
+            console.log(
+              `    Car position: ${carPosition.toFixed(2)}, Station: ${station.position}, Distance: ${distance.toFixed(2)}`
+            )
          }
          const points = passenger.isUrgent ? 20 : 10
          dispatch({
            type: 'DELIVER_PASSENGER',
            passengerId: passenger.id,
-            points
+            points,
          })
        } else if (DEBUG_PASSENGER_BOARDING) {
-          console.log(`  ⏳ ${passenger.name} in Car ${carIndex} heading to ${station.emoji} ${station.name}`)
-          console.log(`    Car position: ${carPosition.toFixed(2)}, Station: ${station.position}, Distance: ${distance.toFixed(2)}`)
+          console.log(
+            `  ⏳ ${passenger.name} in Car ${carIndex} heading to ${station.emoji} ${station.name}`
+          )
+          console.log(
+            `    Car position: ${carPosition.toFixed(2)}, Station: ${station.position}, Distance: ${distance.toFixed(2)}`
+          )
        }
      })

      if (DEBUG_PASSENGER_BOARDING) {
-        console.log('\n' + '='.repeat(80))
+        console.log(`\n${'='.repeat(80)}`)
        console.log('END OF DEBUG LOG')
        console.log('='.repeat(80))
      }
@@ -327,7 +343,10 @@ export function useSteamJourney() {
      // Use stored threshold (stable for entire route)
      const ENTIRE_TRAIN_EXIT_THRESHOLD = routeExitThresholdRef.current

-      if (trainPosition >= ENTIRE_TRAIN_EXIT_THRESHOLD && state.trainPosition < ENTIRE_TRAIN_EXIT_THRESHOLD) {
+      if (
+        trainPosition >= ENTIRE_TRAIN_EXIT_THRESHOLD &&
+        state.trainPosition < ENTIRE_TRAIN_EXIT_THRESHOLD
+      ) {
        // Play celebration whistle
        playSound('train_whistle', 0.6)
        setTimeout(() => {
@@ -339,7 +358,7 @@ export function useSteamJourney() {
        dispatch({
          type: 'START_NEW_ROUTE',
          routeNumber: nextRoute,
-          stations: state.stations
+          stations: state.stations,
        })

        // Generate new passengers
@@ -349,20 +368,30 @@ export function useSteamJourney() {
        // Calculate and store new exit threshold for next route
        const newMaxPassengers = calculateMaxConcurrentPassengers(newPassengers, state.stations)
        const newMaxCars = Math.max(1, newMaxPassengers)
-        routeExitThresholdRef.current = 100 + (newMaxCars * CAR_SPACING)
+        routeExitThresholdRef.current = 100 + newMaxCars * CAR_SPACING
      }
    }, UPDATE_INTERVAL)

    return () => clearInterval(interval)
-  }, [state.isGameActive, state.style, state.momentum, state.trainPosition, state.pressure, state.elapsedTime, state.timeoutSetting, state.passengers, state.stations, state.currentRoute, dispatch, playSound])
+  }, [
+    state.isGameActive,
+    state.style,
+    state.momentum,
+    state.trainPosition,
+    state.timeoutSetting,
+    state.passengers,
+    state.stations,
+    state.currentRoute,
+    dispatch,
+    playSound,
+  ])

  // Auto-regenerate passengers when all are delivered
  useEffect(() => {
    if (!state.isGameActive || state.style !== 'sprint') return

    // Check if all passengers are delivered
-    const allDelivered = state.passengers.length > 0 &&
-      state.passengers.every(p => p.isDelivered)
+    const allDelivered = state.passengers.length > 0 && state.passengers.every((p) => p.isDelivered)

    if (allDelivered) {
      // Generate new passengers after a short delay
@@ -380,7 +409,7 @@ export function useSteamJourney() {

    // This effect triggers when correctAnswers increases
    // We use a ref to track previous value to detect changes
-  }, [state.correctAnswers, state.style])
+  }, [state.style])

  // Function to boost momentum (called when answer is correct)
  const boostMomentum = () => {
@@ -392,7 +421,7 @@ export function useSteamJourney() {
      momentum: newMomentum,
      trainPosition: state.trainPosition, // Keep current position
      pressure: state.pressure,
-      elapsedTime: state.elapsedTime
+      elapsedTime: state.elapsedTime,
    })
  }

@@ -414,7 +443,7 @@ export function useSteamJourney() {
      { top: '#60a5fa', bottom: '#93c5fd' }, // Midday - bright blue
      { top: '#3b82f6', bottom: '#f59e0b' }, // Afternoon - blue to orange
      { top: '#7c3aed', bottom: '#f97316' }, // Dusk - purple to orange
-      { top: '#1e1b4b', bottom: '#312e81' }  // Night - dark purple
+      { top: '#1e1b4b', bottom: '#312e81' }, // Night - dark purple
    ]

    return gradients[period] || gradients[0]
@@ -423,6 +452,6 @@ export function useSteamJourney() {
  return {
    boostMomentum,
    getTimeOfDayPeriod,
-    getSkyGradient
+    getSkyGradient,
  }
-}
+}
--- a/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
-import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'
-import type { Station, Passenger } from '../lib/gameTypes'
+import type { Passenger, Station } from '../lib/gameTypes'
 import { generateLandmarks, type Landmark } from '../lib/landmarks'
+import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'

 interface UseTrackManagementParams {
  currentRoute: number
@@ -21,10 +21,12 @@ export function useTrackManagement({
  pathRef,
  stations,
  passengers,
-  maxCars,
-  carSpacing
+  maxCars: _maxCars,
+  carSpacing: _carSpacing,
 }: UseTrackManagementParams) {
-  const [trackData, setTrackData] = useState<ReturnType<typeof trackGenerator.generateTrack> | null>(null)
+  const [trackData, setTrackData] = useState<ReturnType<
+    typeof trackGenerator.generateTrack
+  > | null>(null)
  const [tiesAndRails, setTiesAndRails] = useState<{
    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>
    leftRailPath: string
@@ -37,7 +39,9 @@ export function useTrackManagement({

  // Track previous route data to maintain visuals during transition
  const previousRouteRef = useRef(currentRoute)
-  const [pendingTrackData, setPendingTrackData] = useState<ReturnType<typeof trackGenerator.generateTrack> | null>(null)
+  const [pendingTrackData, setPendingTrackData] = useState<ReturnType<
+    typeof trackGenerator.generateTrack
+  > | null>(null)
  const displayRouteRef = useRef(currentRoute) // Track which route's passengers are being displayed

  // Generate landmarks when route changes
@@ -101,7 +105,7 @@ export function useTrackManagement({
  // Calculate station positions when path is ready
  useEffect(() => {
    if (pathRef.current) {
-      const positions = stations.map(station => {
+      const positions = stations.map((station) => {
        const pathLength = pathRef.current!.getTotalLength()
        const distance = (station.position / 100) * pathLength
        const point = pathRef.current!.getPointAtLength(distance)
@@ -109,23 +113,23 @@ export function useTrackManagement({
      })
      setStationPositions(positions)
    }
-  }, [trackData, stations, pathRef])
+  }, [stations, pathRef])

  // Calculate landmark positions when path is ready
  useEffect(() => {
    if (pathRef.current && landmarks.length > 0) {
-      const positions = landmarks.map(landmark => {
+      const positions = landmarks.map((landmark) => {
        const pathLength = pathRef.current!.getTotalLength()
        const distance = (landmark.position / 100) * pathLength
        const point = pathRef.current!.getPointAtLength(distance)
        return {
          x: point.x + landmark.offset.x,
-          y: point.y + landmark.offset.y
+          y: point.y + landmark.offset.y,
        }
      })
      setLandmarkPositions(positions)
    }
-  }, [trackData, landmarks, pathRef])
+  }, [landmarks, pathRef])

  return {
    trackData,
@@ -133,6 +137,6 @@ export function useTrackManagement({
    stationPositions,
    landmarks,
    landmarkPositions,
-    displayPassengers
+    displayPassengers,
  }
 }
--- a/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'

 interface TrainTransform {
@@ -25,9 +25,13 @@ export function useTrainTransforms({
  trackGenerator,
  pathRef,
  maxCars,
-  carSpacing
+  carSpacing,
 }: UseTrainTransformsParams) {
-  const [trainTransform, setTrainTransform] = useState<TrainTransform>({ x: 50, y: 300, rotation: 0 })
+  const [trainTransform, setTrainTransform] = useState<TrainTransform>({
+    x: 50,
+    y: 300,
+    rotation: 0,
+  })

  // Update train position and rotation
  useEffect(() => {
@@ -40,7 +44,13 @@ export function useTrainTransforms({
  // Calculate train car transforms (each car follows behind the locomotive)
  const trainCars = useMemo((): TrainCarTransform[] => {
    if (!pathRef.current) {
-      return Array.from({ length: maxCars }, () => ({ x: 0, y: 0, rotation: 0, position: 0, opacity: 0 }))
+      return Array.from({ length: maxCars }, () => ({
+        x: 0,
+        y: 0,
+        rotation: 0,
+        position: 0,
+        opacity: 0,
+      }))
    }

    return Array.from({ length: maxCars }).map((_, carIndex) => {
@@ -65,13 +75,13 @@ export function useTrainTransforms({
      else if (carPosition >= fadeOutEnd) {
        opacity = 0
      } else if (carPosition > fadeOutStart) {
-        opacity = 1 - ((carPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart))
+        opacity = 1 - (carPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart)
      }

      return {
        ...trackGenerator.getTrainTransform(pathRef.current!, carPosition),
        position: carPosition,
-        opacity
+        opacity,
      }
    })
  }, [trainPosition, trackGenerator, pathRef, maxCars, carSpacing])
@@ -93,7 +103,7 @@ export function useTrainTransforms({
    else if (trainPosition >= fadeOutEnd) {
      return 0
    } else if (trainPosition > fadeOutStart) {
-      return 1 - ((trainPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart))
+      return 1 - (trainPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart)
    }

    return 1 // Default to fully visible
@@ -102,6 +112,6 @@ export function useTrainTransforms({
  return {
    trainTransform,
    trainCars,
-    locomotiveOpacity
+    locomotiveOpacity,
  }
 }
--- a/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts
@@ -19,9 +19,6 @@ export interface TrackElements {
 }

 export class RailroadTrackGenerator {
-  private viewWidth: number
-  private viewHeight: number
-
  constructor(viewWidth = 800, viewHeight = 600) {
    this.viewWidth = viewWidth
    this.viewHeight = viewHeight
@@ -39,7 +36,7 @@ export class RailroadTrackGenerator {
      referencePath: pathData,
      ties: [],
      leftRailPoints: [],
-      rightRailPoints: []
+      rightRailPoints: [],
    }
  }

@@ -59,13 +56,13 @@ export class RailroadTrackGenerator {
    // Base waypoints - tracks span from left tunnel (x=20) to right tunnel (x=780)
    // viewBox is "-50 -50 900 700", so x ranges from -50 to 850
    const baseWaypoints: Waypoint[] = [
-      { x: 20, y: 300 },   // Start at left tunnel center
-      { x: 120, y: 260 },  // Emerging from left tunnel
-      { x: 240, y: 200 },  // Climb into hills
-      { x: 380, y: 170 },  // Mountain pass
-      { x: 520, y: 220 },  // Descent to valley
-      { x: 660, y: 160 },  // Bridge over canyon
-      { x: 780, y: 300 }   // Enter right tunnel center
+      { x: 20, y: 300 }, // Start at left tunnel center
+      { x: 120, y: 260 }, // Emerging from left tunnel
+      { x: 240, y: 200 }, // Climb into hills
+      { x: 380, y: 170 }, // Mountain pass
+      { x: 520, y: 220 }, // Descent to valley
+      { x: 660, y: 160 }, // Bridge over canyon
+      { x: 780, y: 300 }, // Enter right tunnel center
    ]

    // Add deterministic randomness based on route number (but keep start/end fixed)
@@ -82,7 +79,7 @@ export class RailroadTrackGenerator {

      return {
        x: point.x + randomX,
-        y: point.y + randomY
+        y: point.y + randomY,
      }
    })
  }
@@ -240,7 +237,7 @@ export class RailroadTrackGenerator {
    return {
      x: point.x,
      y: point.y,
-      rotation: angleDegrees
+      rotation: angleDegrees,
    }
  }
-}
+}
--- a/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts
@@ -1,6 +1,13 @@
 export type GameMode = 'friends5' | 'friends10' | 'mixed'
 export type GameStyle = 'practice' | 'sprint' | 'survival'
-export type TimeoutSetting = 'preschool' | 'kindergarten' | 'relaxed' | 'slow' | 'normal' | 'fast' | 'expert'
+export type TimeoutSetting =
+  | 'preschool'
+  | 'kindergarten'
+  | 'relaxed'
+  | 'slow'
+  | 'normal'
+  | 'fast'
+  | 'expert'
 export type ComplementDisplay = 'number' | 'abacus' | 'random' // How to display the complement number

 export interface ComplementQuestion {
@@ -117,7 +124,7 @@ export interface GameState {

  // UI state
  showScoreModal: boolean
-  activeSpeechBubbles: Map<string, string>  // racerId -> message
+  activeSpeechBubbles: Map<string, string> // racerId -> message
  adaptiveFeedback: { message: string; type: string } | null
 }

@@ -132,7 +139,7 @@ export type GameAction =
  | { type: 'NEXT_QUESTION' }
  | { type: 'SUBMIT_ANSWER'; answer: number }
  | { type: 'UPDATE_INPUT'; input: string }
-  | { type: 'UPDATE_AI_POSITIONS'; positions: Array<{id: string, position: number}> }
+  | { type: 'UPDATE_AI_POSITIONS'; positions: Array<{ id: string; position: number }> }
  | { type: 'TRIGGER_AI_COMMENTARY'; racerId: string; message: string; context: string }
  | { type: 'CLEAR_AI_COMMENT'; racerId: string }
  | { type: 'UPDATE_DIFFICULTY_TRACKER'; tracker: DifficultyTracker }
@@ -141,7 +148,13 @@ export type GameAction =
  | { type: 'CLEAR_ADAPTIVE_FEEDBACK' }
  | { type: 'UPDATE_MOMENTUM'; momentum: number }
  | { type: 'UPDATE_TRAIN_POSITION'; position: number }
-  | { type: 'UPDATE_STEAM_JOURNEY'; momentum: number; trainPosition: number; pressure: number; elapsedTime: number }
+  | {
+      type: 'UPDATE_STEAM_JOURNEY'
+      momentum: number
+      trainPosition: number
+      pressure: number
+      elapsedTime: number
+    }
  | { type: 'COMPLETE_LAP'; racerId: string }
  | { type: 'PAUSE_RACE' }
  | { type: 'RESUME_RACE' }
@@ -153,4 +166,4 @@ export type GameAction =
  | { type: 'DELIVER_PASSENGER'; passengerId: string; points: number }
  | { type: 'START_NEW_ROUTE'; routeNumber: number; stations: Station[] }
  | { type: 'COMPLETE_ROUTE' }
-  | { type: 'HIDE_ROUTE_CELEBRATION' }
+  | { type: 'HIDE_ROUTE_CELEBRATION' }
--- a/apps/web/src/app/arcade/complement-race/lib/landmarks.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/landmarks.ts
@@ -93,11 +93,11 @@ export function generateLandmarks(routeNumber: number): Landmark[] {
      position,
      offset: {
        x: offsetSide * offsetDistance,
-        y: random(i + 5) * 20 - 10
+        y: random(i + 5) * 20 - 10,
      },
-      size
+      size,
    })
  }

  return landmarks
-}
+}
--- a/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts
@@ -2,44 +2,143 @@ import type { Passenger, Station } from './gameTypes'

 // Names and avatars organized by gender presentation
 const MASCULINE_NAMES = [
-  'Ahmed', 'Bob', 'Carlos', 'Elias', 'Ethan', 'George', 'Ian', 'Kevin',
-  'Marcus', 'Oliver', 'Victor', 'Xavier', 'Raj', 'David', 'Miguel', 'Jin'
+  'Ahmed',
+  'Bob',
+  'Carlos',
+  'Elias',
+  'Ethan',
+  'George',
+  'Ian',
+  'Kevin',
+  'Marcus',
+  'Oliver',
+  'Victor',
+  'Xavier',
+  'Raj',
+  'David',
+  'Miguel',
+  'Jin',
 ]

 const FEMININE_NAMES = [
-  'Alice', 'Bella', 'Diana', 'Devi', 'Fatima', 'Fiona', 'Hannah', 'Julia',
-  'Laura', 'Nina', 'Petra', 'Rosa', 'Tessa', 'Uma', 'Wendy', 'Zara', 'Yuki'
+  'Alice',
+  'Bella',
+  'Diana',
+  'Devi',
+  'Fatima',
+  'Fiona',
+  'Hannah',
+  'Julia',
+  'Laura',
+  'Nina',
+  'Petra',
+  'Rosa',
+  'Tessa',
+  'Uma',
+  'Wendy',
+  'Zara',
+  'Yuki',
 ]

 const GENDER_NEUTRAL_NAMES = [
-  'Alex', 'Charlie', 'Jordan', 'Morgan', 'Quinn', 'Riley', 'Sam', 'Taylor'
+  'Alex',
+  'Charlie',
+  'Jordan',
+  'Morgan',
+  'Quinn',
+  'Riley',
+  'Sam',
+  'Taylor',
 ]

 // Masculine-presenting avatars
 const MASCULINE_AVATARS = [
-  '👨', '👨🏻', '👨🏼', '👨🏽', '👨🏾', '👨🏿',
-  '👴', '👴🏻', '👴🏼', '👴🏽', '👴🏾', '👴🏿',
-  '👦', '👦🏻', '👦🏼', '👦🏽', '👦🏾', '👦🏿',
-  '🧔', '🧔🏻', '🧔🏼', '🧔🏽', '🧔🏾', '🧔🏿',
-  '👨‍🦱', '👨🏻‍🦱', '👨🏼‍🦱', '👨🏽‍🦱', '👨🏾‍🦱', '👨🏿‍🦱',
-  '👨‍🦰', '👨🏻‍🦰', '👨🏼‍🦰', '👨🏽‍🦰', '👨🏾‍🦰', '👨🏿‍🦰',
-  '👱', '👱🏻', '👱🏼', '👱🏽', '👱🏾', '👱🏿'
+  '👨',
+  '👨🏻',
+  '👨🏼',
+  '👨🏽',
+  '👨🏾',
+  '👨🏿',
+  '👴',
+  '👴🏻',
+  '👴🏼',
+  '👴🏽',
+  '👴🏾',
+  '👴🏿',
+  '👦',
+  '👦🏻',
+  '👦🏼',
+  '👦🏽',
+  '👦🏾',
+  '👦🏿',
+  '🧔',
+  '🧔🏻',
+  '🧔🏼',
+  '🧔🏽',
+  '🧔🏾',
+  '🧔🏿',
+  '👨‍🦱',
+  '👨🏻‍🦱',
+  '👨🏼‍🦱',
+  '👨🏽‍🦱',
+  '👨🏾‍🦱',
+  '👨🏿‍🦱',
+  '👨‍🦰',
+  '👨🏻‍🦰',
+  '👨🏼‍🦰',
+  '👨🏽‍🦰',
+  '👨🏾‍🦰',
+  '👨🏿‍🦰',
+  '👱',
+  '👱🏻',
+  '👱🏼',
+  '👱🏽',
+  '👱🏾',
+  '👱🏿',
 ]

 // Feminine-presenting avatars
 const FEMININE_AVATARS = [
-  '👩', '👩🏻', '👩🏼', '👩🏽', '👩🏾', '👩🏿',
-  '👵', '👵🏻', '👵🏼', '👵🏽', '👵🏾', '👵🏿',
-  '👧', '👧🏻', '👧🏼', '👧🏽', '👧🏾', '👧🏿',
-  '👩‍🦱', '👩🏻‍🦱', '👩🏼‍🦱', '👩🏽‍🦱', '👩🏾‍🦱', '👩🏿‍🦱',
-  '👩‍🦰', '👩🏻‍🦰', '👩🏼‍🦰', '👩🏽‍🦰', '👩🏾‍🦰', '👩🏿‍🦰',
-  '👱‍♀️', '👱🏻‍♀️', '👱🏼‍♀️', '👱🏽‍♀️', '👱🏾‍♀️', '👱🏿‍♀️'
+  '👩',
+  '👩🏻',
+  '👩🏼',
+  '👩🏽',
+  '👩🏾',
+  '👩🏿',
+  '👵',
+  '👵🏻',
+  '👵🏼',
+  '👵🏽',
+  '👵🏾',
+  '👵🏿',
+  '👧',
+  '👧🏻',
+  '👧🏼',
+  '👧🏽',
+  '👧🏾',
+  '👧🏿',
+  '👩‍🦱',
+  '👩🏻‍🦱',
+  '👩🏼‍🦱',
+  '👩🏽‍🦱',
+  '👩🏾‍🦱',
+  '👩🏿‍🦱',
+  '👩‍🦰',
+  '👩🏻‍🦰',
+  '👩🏼‍🦰',
+  '👩🏽‍🦰',
+  '👩🏾‍🦰',
+  '👩🏿‍🦰',
+  '👱‍♀️',
+  '👱🏻‍♀️',
+  '👱🏼‍♀️',
+  '👱🏽‍♀️',
+  '👱🏾‍♀️',
+  '👱🏿‍♀️',
 ]

 // Gender-neutral avatars
-const NEUTRAL_AVATARS = [
-  '🧑', '🧑🏻', '🧑🏼', '🧑🏽', '🧑🏾', '🧑🏿'
-]
+const NEUTRAL_AVATARS = ['🧑', '🧑🏻', '🧑🏼', '🧑🏽', '🧑🏾', '🧑🏿']

 /**
 * Generate 3-5 passengers with random names and destinations
@@ -102,7 +201,7 @@ export function generatePassengers(stations: Station[]): Passenger[] {
      originStation = nonDepotStations[Math.floor(Math.random() * nonDepotStations.length)]

      // Pick a station ahead of origin (higher position)
-      const stationsAhead = stations.filter(s => s.position > originStation.position)
+      const stationsAhead = stations.filter((s) => s.position > originStation.position)
      destination = stationsAhead[Math.floor(Math.random() * stationsAhead.length)]
    }

@@ -117,7 +216,7 @@ export function generatePassengers(stations: Station[]): Passenger[] {
      destinationStationId: destination.id,
      isUrgent,
      isBoarded: false,
-      isDelivered: false
+      isDelivered: false,
    })
  }

@@ -145,7 +244,7 @@ export function findBoardablePassengers(
    // Skip if already boarded or delivered
    if (passenger.isBoarded || passenger.isDelivered) continue

-    const station = stations.find(s => s.id === passenger.originStationId)
+    const station = stations.find((s) => s.id === passenger.originStationId)
    if (!station) continue

    if (isTrainAtStation(trainPosition, station.position)) {
@@ -170,7 +269,7 @@ export function findDeliverablePassengers(
    // Only check boarded passengers
    if (!passenger.isBoarded || passenger.isDelivered) continue

-    const station = stations.find(s => s.id === passenger.destinationStationId)
+    const station = stations.find((s) => s.id === passenger.destinationStationId)
    if (!station) continue

    if (isTrainAtStation(trainPosition, station.position)) {
@@ -199,8 +298,8 @@ export function calculateMaxConcurrentPassengers(
  const events: StationEvent[] = []

  for (const passenger of passengers) {
-    const originStation = stations.find(s => s.id === passenger.originStationId)
-    const destStation = stations.find(s => s.id === passenger.destinationStationId)
+    const originStation = stations.find((s) => s.id === passenger.originStationId)
+    const destStation = stations.find((s) => s.id === passenger.destinationStationId)

    if (originStation && destStation) {
      events.push({ position: originStation.position, isBoarding: true })
@@ -229,4 +328,4 @@ export function calculateMaxConcurrentPassengers(
  }

  return maxCount
-}
+}
--- a/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts
@@ -13,7 +13,7 @@ export const ROUTE_THEMES = [
  { name: 'River Valley', emoji: '🏞️' },
  { name: 'Highland Pass', emoji: '🗻' },
  { name: 'Lakeside Journey', emoji: '🏔️' },
-  { name: 'Grand Circuit', emoji: '🎪' }
+  { name: 'Grand Circuit', emoji: '🎪' },
 ]

 /**
@@ -23,4 +23,4 @@ export const ROUTE_THEMES = [
 export function getRouteTheme(routeNumber: number): { name: string; emoji: string } {
  const index = (routeNumber - 1) % ROUTE_THEMES.length
  return ROUTE_THEMES[index]
-}
+}
--- a/apps/web/src/app/arcade/complement-race/page.tsx
+++ b/apps/web/src/app/arcade/complement-race/page.tsx
@@ -1,8 +1,8 @@
 'use client'

 import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceProvider } from './context/ComplementRaceContext'
 import { ComplementRaceGame } from './components/ComplementRaceGame'
+import { ComplementRaceProvider } from './context/ComplementRaceContext'

 export default function ComplementRacePage() {
  return (
@@ -12,4 +12,4 @@ export default function ComplementRacePage() {
      </ComplementRaceProvider>
    </PageWithNav>
  )
-}
+}
--- a/apps/web/src/app/arcade/complement-race/practice/page.tsx
+++ b/apps/web/src/app/arcade/complement-race/practice/page.tsx
@@ -1,8 +1,8 @@
 'use client'

 import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceProvider } from '../context/ComplementRaceContext'
 import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '../context/ComplementRaceContext'

 export default function PracticeModePage() {
  return (
--- a/apps/web/src/app/arcade/complement-race/sprint/page.tsx
+++ b/apps/web/src/app/arcade/complement-race/sprint/page.tsx
@@ -1,8 +1,8 @@
 'use client'

 import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceProvider } from '../context/ComplementRaceContext'
 import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '../context/ComplementRaceContext'

 export default function SprintModePage() {
  return (
--- a/apps/web/src/app/arcade/complement-race/survival/page.tsx
+++ b/apps/web/src/app/arcade/complement-race/survival/page.tsx
@@ -1,8 +1,8 @@
 'use client'

 import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceProvider } from '../context/ComplementRaceContext'
 import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '../context/ComplementRaceContext'

 export default function SurvivalModePage() {
  return (
--- a/apps/web/src/app/arcade/matching/components/EmojiPicker.tsx
+++ b/apps/web/src/app/arcade/matching/components/EmojiPicker.tsx
@@ -1,9 +1,9 @@
 'use client'

-import { useState, useMemo } from 'react'
-import { PLAYER_EMOJIS } from '../../../../constants/playerEmojis'
-import { css } from '../../../../../styled-system/css'
 import emojiData from 'emojibase-data/en/data.json'
+import { useMemo, useState } from 'react'
+import { css } from '../../../../../styled-system/css'
+import { PLAYER_EMOJIS } from '../../../../constants/playerEmojis'

 // Proper TypeScript interface for emojibase-data structure
 interface EmojibaseEmoji {
@@ -37,11 +37,11 @@ const EMOJI_GROUPS = {
  6: { name: 'Activities', icon: '⚽' },
  7: { name: 'Objects', icon: '💡' },
  8: { name: 'Symbols', icon: '❤️' },
-  9: { name: 'Flags', icon: '🏁' }
+  9: { name: 'Flags', icon: '🏁' },
 } as const

 // Create a map of emoji to their searchable data and group
-const emojiMap = new Map<string, { keywords: string[], group: number }>()
+const emojiMap = new Map<string, { keywords: string[]; group: number }>()
 ;(emojiData as EmojibaseEmoji[]).forEach((emoji) => {
  if (emoji.emoji) {
    // Handle emoticon field which can be string, array, or undefined
@@ -58,9 +58,9 @@ const emojiMap = new Map<string, { keywords: string[], group: number }>()
      keywords: [
        emoji.label?.toLowerCase(),
        ...(emoji.tags || []).map((tag: string) => tag.toLowerCase()),
-        ...emoticons
+        ...emoticons,
      ].filter(Boolean),
-      group: emoji.group
+      group: emoji.group,
    })
  }
 })
@@ -83,7 +83,12 @@ function getEmojiKeywords(emoji: string): string[] {
  return ['misc', 'other']
 }

-export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber }: EmojiPickerProps) {
+export function EmojiPicker({
+  currentEmoji,
+  onEmojiSelect,
+  onClose,
+  playerNumber,
+}: EmojiPickerProps) {
  const [searchFilter, setSearchFilter] = useState('')
  const [selectedCategory, setSelectedCategory] = useState<number | null>(null)
  const [hoveredEmoji, setHoveredEmoji] = useState<string | null>(null)
@@ -96,7 +101,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
  // Calculate which categories have emojis
  const availableCategories = useMemo(() => {
    const categoryCounts: Record<number, number> = {}
-    PLAYER_EMOJIS.forEach(emoji => {
+    PLAYER_EMOJIS.forEach((emoji) => {
      const data = emojiMap.get(emoji)
      if (data && data.group !== undefined) {
        categoryCounts[data.group] = (categoryCounts[data.group] || 0) + 1
@@ -104,7 +109,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
    })
    return Object.keys(EMOJI_GROUPS)
      .map(Number)
-      .filter(groupId => categoryCounts[groupId] > 0)
+      .filter((groupId) => categoryCounts[groupId] > 0)
  }, [])

  const displayEmojis = useMemo(() => {
@@ -113,7 +118,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber

    // Apply category filter first (unless searching)
    if (isCategoryFiltered) {
-      emojis = emojis.filter(emoji => {
+      emojis = emojis.filter((emoji) => {
        const data = emojiMap.get(emoji)
        return data && data.group === selectedCategory
      })
@@ -126,11 +131,9 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber

    const searchTerm = searchFilter.toLowerCase().trim()

-    const results = PLAYER_EMOJIS.filter(emoji => {
+    const results = PLAYER_EMOJIS.filter((emoji) => {
      const keywords = getEmojiKeywords(emoji)
-      return keywords.some(keyword =>
-        keyword && keyword.includes(searchTerm)
-      )
+      return keywords.some((keyword) => keyword?.includes(searchTerm))
    })

    // Sort results by relevance
@@ -139,22 +142,22 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
      const bKeywords = getEmojiKeywords(b)

      // Exact match priority
-      const aExact = aKeywords.some(k => k === searchTerm)
-      const bExact = bKeywords.some(k => k === searchTerm)
+      const aExact = aKeywords.some((k) => k === searchTerm)
+      const bExact = bKeywords.some((k) => k === searchTerm)

      if (aExact && !bExact) return -1
      if (!aExact && bExact) return 1

      // Word boundary matches (start of word)
-      const aStartsWithTerm = aKeywords.some(k => k && k.startsWith(searchTerm))
-      const bStartsWithTerm = bKeywords.some(k => k && k.startsWith(searchTerm))
+      const aStartsWithTerm = aKeywords.some((k) => k?.startsWith(searchTerm))
+      const bStartsWithTerm = bKeywords.some((k) => k?.startsWith(searchTerm))

      if (aStartsWithTerm && !bStartsWithTerm) return -1
      if (!aStartsWithTerm && bStartsWithTerm) return 1

      // Score by number of matching keywords
-      const aScore = aKeywords.filter(k => k && k.includes(searchTerm)).length
-      const bScore = bKeywords.filter(k => k && k.includes(searchTerm)).length
+      const aScore = aKeywords.filter((k) => k?.includes(searchTerm)).length
+      const bScore = bKeywords.filter((k) => k?.includes(searchTerm)).length

      return bScore - aScore
    })
@@ -163,52 +166,59 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
  }, [searchFilter, isSearching, selectedCategory, isCategoryFiltered])

  return (
-    <div className={css({
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      background: 'rgba(0, 0, 0, 0.8)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 1000,
-      animation: 'fadeIn 0.2s ease',
-      padding: '20px'
-    })}>
-      <div className={css({
-        background: 'white',
-        borderRadius: '20px',
-        padding: '24px',
-        width: '90vw',
-        height: '90vh',
-        maxWidth: '1200px',
-        maxHeight: '800px',
-        boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
-        position: 'relative',
-        overflow: 'hidden',
+    <div
+      className={css({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0, 0, 0, 0.8)',
        display: 'flex',
-        flexDirection: 'column'
-      })}>
-
-        {/* Header */}
-        <div className={css({
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        animation: 'fadeIn 0.2s ease',
+        padding: '20px',
+      })}
+    >
+      <div
+        className={css({
+          background: 'white',
+          borderRadius: '20px',
+          padding: '24px',
+          width: '90vw',
+          height: '90vh',
+          maxWidth: '1200px',
+          maxHeight: '800px',
+          boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
+          position: 'relative',
+          overflow: 'hidden',
          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: '16px',
-          borderBottom: '2px solid',
-          borderColor: 'gray.100',
-          paddingBottom: '12px',
-          flexShrink: 0
-        })}>
-          <h3 className={css({
-            fontSize: '18px',
-            fontWeight: 'bold',
-            color: 'gray.800',
-            margin: 0
-          })}>
+          flexDirection: 'column',
+        })}
+      >
+        {/* Header */}
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '16px',
+            borderBottom: '2px solid',
+            borderColor: 'gray.100',
+            paddingBottom: '12px',
+            flexShrink: 0,
+          })}
+        >
+          <h3
+            className={css({
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: 'gray.800',
+              margin: 0,
+            })}
+          >
            Choose Character for Player {playerNumber}
          </h3>
          <button
@@ -219,7 +229,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              cursor: 'pointer',
              color: 'gray.500',
              _hover: { color: 'gray.700' },
-              padding: '4px'
+              padding: '4px',
            })}
            onClick={onClose}
          >
@@ -228,35 +238,36 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
        </div>

        {/* Current Selection & Search */}
-        <div className={css({
-          display: 'flex',
-          alignItems: 'center',
-          gap: '16px',
-          marginBottom: '16px',
-          flexShrink: 0
-        })}>
-          <div className={css({
-            padding: '8px 12px',
-            background: playerNumber === 1
-              ? 'linear-gradient(135deg, #74b9ff, #0984e3)'
-              : playerNumber === 2
-              ? 'linear-gradient(135deg, #fd79a8, #e84393)'
-              : playerNumber === 3
-              ? 'linear-gradient(135deg, #a78bfa, #8b5cf6)'
-              : 'linear-gradient(135deg, #fbbf24, #f59e0b)',
-            borderRadius: '12px',
-            color: 'white',
+        <div
+          className={css({
            display: 'flex',
            alignItems: 'center',
-            gap: '8px',
-            flexShrink: 0
-          })}>
-            <div className={css({ fontSize: '24px' })}>
-              {currentEmoji}
-            </div>
-            <div className={css({ fontSize: '12px', fontWeight: 'bold' })}>
-              Current
-            </div>
+            gap: '16px',
+            marginBottom: '16px',
+            flexShrink: 0,
+          })}
+        >
+          <div
+            className={css({
+              padding: '8px 12px',
+              background:
+                playerNumber === 1
+                  ? 'linear-gradient(135deg, #74b9ff, #0984e3)'
+                  : playerNumber === 2
+                    ? 'linear-gradient(135deg, #fd79a8, #e84393)'
+                    : playerNumber === 3
+                      ? 'linear-gradient(135deg, #a78bfa, #8b5cf6)'
+                      : 'linear-gradient(135deg, #fbbf24, #f59e0b)',
+              borderRadius: '12px',
+              color: 'white',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              flexShrink: 0,
+            })}
+          >
+            <div className={css({ fontSize: '24px' })}>{currentEmoji}</div>
+            <div className={css({ fontSize: '12px', fontWeight: 'bold' })}>Current</div>
          </div>

          <input
@@ -274,22 +285,24 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              _focus: {
                outline: 'none',
                borderColor: 'blue.400',
-                boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.1)'
-              }
+                boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.1)',
+              },
            })}
          />

          {isSearching && (
-            <div className={css({
-              fontSize: '12px',
-              color: 'gray.600',
-              flexShrink: 0,
-              padding: '4px 8px',
-              background: displayEmojis.length > 0 ? 'green.100' : 'red.100',
-              borderRadius: '8px',
-              border: '1px solid',
-              borderColor: displayEmojis.length > 0 ? 'green.300' : 'red.300'
-            })}>
+            <div
+              className={css({
+                fontSize: '12px',
+                color: 'gray.600',
+                flexShrink: 0,
+                padding: '4px 8px',
+                background: displayEmojis.length > 0 ? 'green.100' : 'red.100',
+                borderRadius: '8px',
+                border: '1px solid',
+                borderColor: displayEmojis.length > 0 ? 'green.300' : 'red.300',
+              })}
+            >
              {displayEmojis.length > 0 ? `✓ ${displayEmojis.length} found` : '✗ No matches'}
            </div>
          )}
@@ -297,21 +310,23 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber

        {/* Category Tabs */}
        {!isSearching && (
-          <div className={css({
-            display: 'flex',
-            gap: '8px',
-            overflowX: 'auto',
-            paddingBottom: '8px',
-            marginBottom: '12px',
-            flexShrink: 0,
-            '&::-webkit-scrollbar': {
-              height: '6px'
-            },
-            '&::-webkit-scrollbar-thumb': {
-              background: '#cbd5e1',
-              borderRadius: '3px'
-            }
-          })}>
+          <div
+            className={css({
+              display: 'flex',
+              gap: '8px',
+              overflowX: 'auto',
+              paddingBottom: '8px',
+              marginBottom: '12px',
+              flexShrink: 0,
+              '&::-webkit-scrollbar': {
+                height: '6px',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                background: '#cbd5e1',
+                borderRadius: '3px',
+              },
+            })}
+          >
            <button
              onClick={() => setSelectedCategory(null)}
              className={css({
@@ -327,8 +342,8 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
                transition: 'all 0.2s ease',
                _hover: {
                  background: selectedCategory === null ? '#dbeafe' : '#f9fafb',
-                  transform: 'translateY(-1px)'
-                }
+                  transform: 'translateY(-1px)',
+                },
              })}
            >
              ✨ All
@@ -336,28 +351,31 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
            {availableCategories.map((groupId) => {
              const group = EMOJI_GROUPS[groupId as keyof typeof EMOJI_GROUPS]
              return (
-              <button
-                key={groupId}
-                onClick={() => setSelectedCategory(Number(groupId))}
-                className={css({
-                  padding: '8px 16px',
-                  borderRadius: '20px',
-                  border: selectedCategory === Number(groupId) ? '2px solid #3b82f6' : '2px solid #e5e7eb',
-                  background: selectedCategory === Number(groupId) ? '#eff6ff' : 'white',
-                  color: selectedCategory === Number(groupId) ? '#1e40af' : '#6b7280',
-                  fontSize: '13px',
-                  fontWeight: '600',
-                  cursor: 'pointer',
-                  whiteSpace: 'nowrap',
-                  transition: 'all 0.2s ease',
-                  _hover: {
-                    background: selectedCategory === Number(groupId) ? '#dbeafe' : '#f9fafb',
-                    transform: 'translateY(-1px)'
-                  }
-                })}
-              >
-                {group.icon} {group.name}
-              </button>
+                <button
+                  key={groupId}
+                  onClick={() => setSelectedCategory(Number(groupId))}
+                  className={css({
+                    padding: '8px 16px',
+                    borderRadius: '20px',
+                    border:
+                      selectedCategory === Number(groupId)
+                        ? '2px solid #3b82f6'
+                        : '2px solid #e5e7eb',
+                    background: selectedCategory === Number(groupId) ? '#eff6ff' : 'white',
+                    color: selectedCategory === Number(groupId) ? '#1e40af' : '#6b7280',
+                    fontSize: '13px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    whiteSpace: 'nowrap',
+                    transition: 'all 0.2s ease',
+                    _hover: {
+                      background: selectedCategory === Number(groupId) ? '#dbeafe' : '#f9fafb',
+                      transform: 'translateY(-1px)',
+                    },
+                  })}
+                >
+                  {group.icon} {group.name}
+                </button>
              )
            })}
          </div>
@@ -365,177 +383,198 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber

        {/* Search Mode Header */}
        {isSearching && displayEmojis.length > 0 && (
-          <div className={css({
-            padding: '8px 12px',
-            background: 'blue.50',
-            border: '1px solid',
-            borderColor: 'blue.200',
-            borderRadius: '8px',
-            marginBottom: '12px',
-            flexShrink: 0
-          })}>
-            <div className={css({
-              fontSize: '14px',
-              fontWeight: 'bold',
-              color: 'blue.700',
-              marginBottom: '4px'
-            })}>
+          <div
+            className={css({
+              padding: '8px 12px',
+              background: 'blue.50',
+              border: '1px solid',
+              borderColor: 'blue.200',
+              borderRadius: '8px',
+              marginBottom: '12px',
+              flexShrink: 0,
+            })}
+          >
+            <div
+              className={css({
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: 'blue.700',
+                marginBottom: '4px',
+              })}
+            >
              🔍 Search Results for "{searchFilter}"
            </div>
-            <div className={css({
-              fontSize: '12px',
-              color: 'blue.600'
-            })}>
-              Showing {displayEmojis.length} of {PLAYER_EMOJIS.length} emojis • Clear search to see all
+            <div
+              className={css({
+                fontSize: '12px',
+                color: 'blue.600',
+              })}
+            >
+              Showing {displayEmojis.length} of {PLAYER_EMOJIS.length} emojis • Clear search to see
+              all
            </div>
          </div>
        )}

        {/* Default Mode Header */}
        {!isSearching && (
-          <div className={css({
-            padding: '8px 12px',
-            background: 'gray.50',
-            border: '1px solid',
-            borderColor: 'gray.200',
-            borderRadius: '8px',
-            marginBottom: '12px',
-            flexShrink: 0
-          })}>
-            <div className={css({
-              fontSize: '14px',
-              fontWeight: 'bold',
-              color: 'gray.700',
-              marginBottom: '4px'
-            })}>
+          <div
+            className={css({
+              padding: '8px 12px',
+              background: 'gray.50',
+              border: '1px solid',
+              borderColor: 'gray.200',
+              borderRadius: '8px',
+              marginBottom: '12px',
+              flexShrink: 0,
+            })}
+          >
+            <div
+              className={css({
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: 'gray.700',
+                marginBottom: '4px',
+              })}
+            >
              {selectedCategory !== null
                ? `${EMOJI_GROUPS[selectedCategory as keyof typeof EMOJI_GROUPS].icon} ${EMOJI_GROUPS[selectedCategory as keyof typeof EMOJI_GROUPS].name}`
                : '📝 All Available Characters'}
            </div>
-            <div className={css({
-              fontSize: '12px',
-              color: 'gray.600'
-            })}>
-              {displayEmojis.length} emojis {selectedCategory !== null ? 'in category' : 'available'} • Use search to find specific emojis
+            <div
+              className={css({
+                fontSize: '12px',
+                color: 'gray.600',
+              })}
+            >
+              {displayEmojis.length} emojis{' '}
+              {selectedCategory !== null ? 'in category' : 'available'} • Use search to find
+              specific emojis
            </div>
          </div>
        )}

        {/* Emoji Grid - Only show when there are emojis to display */}
        {displayEmojis.length > 0 && (
-          <div className={css({
-            flex: 1,
-            overflowY: 'auto',
-            minHeight: 0,
-            '&::-webkit-scrollbar': {
-              width: '10px'
-            },
-            '&::-webkit-scrollbar-track': {
-              background: '#f1f5f9',
-              borderRadius: '5px'
-            },
-            '&::-webkit-scrollbar-thumb': {
-              background: '#cbd5e1',
-              borderRadius: '5px',
-              '&:hover': {
-                background: '#94a3b8'
-              }
-            }
-          })}>
-            <div className={css({
-              display: 'grid',
-              gridTemplateColumns: 'repeat(16, 1fr)',
-              gap: '4px',
-              padding: '4px',
-              '@media (max-width: 1200px)': {
-                gridTemplateColumns: 'repeat(14, 1fr)'
+          <div
+            className={css({
+              flex: 1,
+              overflowY: 'auto',
+              minHeight: 0,
+              '&::-webkit-scrollbar': {
+                width: '10px',
              },
-              '@media (max-width: 1000px)': {
-                gridTemplateColumns: 'repeat(12, 1fr)'
+              '&::-webkit-scrollbar-track': {
+                background: '#f1f5f9',
+                borderRadius: '5px',
              },
-              '@media (max-width: 800px)': {
-                gridTemplateColumns: 'repeat(10, 1fr)'
+              '&::-webkit-scrollbar-thumb': {
+                background: '#cbd5e1',
+                borderRadius: '5px',
+                '&:hover': {
+                  background: '#94a3b8',
+                },
              },
-              '@media (max-width: 600px)': {
-                gridTemplateColumns: 'repeat(8, 1fr)'
-              }
-            })}>
-            {displayEmojis.map(emoji => {
-              const isSelected = emoji === currentEmoji
-              const getSelectedBg = () => {
-                if (!isSelected) return 'transparent'
-                if (playerNumber === 1) return 'blue.100'
-                if (playerNumber === 2) return 'pink.100'
-                if (playerNumber === 3) return 'purple.100'
-                return 'yellow.100'
-              }
-              const getSelectedBorder = () => {
-                if (!isSelected) return 'transparent'
-                if (playerNumber === 1) return 'blue.400'
-                if (playerNumber === 2) return 'pink.400'
-                if (playerNumber === 3) return 'purple.400'
-                return 'yellow.400'
-              }
-              const getHoverBg = () => {
-                if (!isSelected) return 'gray.100'
-                if (playerNumber === 1) return 'blue.200'
-                if (playerNumber === 2) return 'pink.200'
-                if (playerNumber === 3) return 'purple.200'
-                return 'yellow.200'
-              }
-              return (
-                <button
-                  key={emoji}
-                  className={css({
-                    aspectRatio: '1',
-                    background: getSelectedBg(),
-                    border: '2px solid',
-                    borderColor: getSelectedBorder(),
-                    borderRadius: '6px',
-                    fontSize: '20px',
-                    cursor: 'pointer',
-                    transition: 'all 0.1s ease',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    _hover: {
-                      background: getHoverBg(),
-                      transform: 'scale(1.15)',
-                      zIndex: 1,
-                      fontSize: '24px'
-                    }
-                  })}
-                  onMouseEnter={(e) => {
-                    const rect = e.currentTarget.getBoundingClientRect()
-                    setHoveredEmoji(emoji)
-                    setHoverPosition({
-                      x: rect.left + rect.width / 2,
-                      y: rect.top
-                    })
-                  }}
-                  onMouseLeave={() => setHoveredEmoji(null)}
-                  onClick={() => {
-                    onEmojiSelect(emoji)
-                  }}
-                >
-                  {emoji}
-                </button>
-              )
            })}
+          >
+            <div
+              className={css({
+                display: 'grid',
+                gridTemplateColumns: 'repeat(16, 1fr)',
+                gap: '4px',
+                padding: '4px',
+                '@media (max-width: 1200px)': {
+                  gridTemplateColumns: 'repeat(14, 1fr)',
+                },
+                '@media (max-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(12, 1fr)',
+                },
+                '@media (max-width: 800px)': {
+                  gridTemplateColumns: 'repeat(10, 1fr)',
+                },
+                '@media (max-width: 600px)': {
+                  gridTemplateColumns: 'repeat(8, 1fr)',
+                },
+              })}
+            >
+              {displayEmojis.map((emoji) => {
+                const isSelected = emoji === currentEmoji
+                const getSelectedBg = () => {
+                  if (!isSelected) return 'transparent'
+                  if (playerNumber === 1) return 'blue.100'
+                  if (playerNumber === 2) return 'pink.100'
+                  if (playerNumber === 3) return 'purple.100'
+                  return 'yellow.100'
+                }
+                const getSelectedBorder = () => {
+                  if (!isSelected) return 'transparent'
+                  if (playerNumber === 1) return 'blue.400'
+                  if (playerNumber === 2) return 'pink.400'
+                  if (playerNumber === 3) return 'purple.400'
+                  return 'yellow.400'
+                }
+                const getHoverBg = () => {
+                  if (!isSelected) return 'gray.100'
+                  if (playerNumber === 1) return 'blue.200'
+                  if (playerNumber === 2) return 'pink.200'
+                  if (playerNumber === 3) return 'purple.200'
+                  return 'yellow.200'
+                }
+                return (
+                  <button
+                    key={emoji}
+                    className={css({
+                      aspectRatio: '1',
+                      background: getSelectedBg(),
+                      border: '2px solid',
+                      borderColor: getSelectedBorder(),
+                      borderRadius: '6px',
+                      fontSize: '20px',
+                      cursor: 'pointer',
+                      transition: 'all 0.1s ease',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      _hover: {
+                        background: getHoverBg(),
+                        transform: 'scale(1.15)',
+                        zIndex: 1,
+                        fontSize: '24px',
+                      },
+                    })}
+                    onMouseEnter={(e) => {
+                      const rect = e.currentTarget.getBoundingClientRect()
+                      setHoveredEmoji(emoji)
+                      setHoverPosition({
+                        x: rect.left + rect.width / 2,
+                        y: rect.top,
+                      })
+                    }}
+                    onMouseLeave={() => setHoveredEmoji(null)}
+                    onClick={() => {
+                      onEmojiSelect(emoji)
+                    }}
+                  >
+                    {emoji}
+                  </button>
+                )
+              })}
            </div>
          </div>
        )}

        {/* No results message */}
        {isSearching && displayEmojis.length === 0 && (
-          <div className={css({
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            textAlign: 'center',
-            color: 'gray.500'
-          })}>
+          <div
+            className={css({
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              textAlign: 'center',
+              color: 'gray.500',
+            })}
+          >
            <div className={css({ fontSize: '48px', marginBottom: '16px' })}>🔍</div>
            <div className={css({ fontSize: '18px', fontWeight: 'bold', marginBottom: '8px' })}>
              No emojis found for "{searchFilter}"
@@ -552,7 +591,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
                padding: '8px 16px',
                fontSize: '12px',
                cursor: 'pointer',
-                _hover: { background: 'blue.600' }
+                _hover: { background: 'blue.600' },
              })}
              onClick={() => setSearchFilter('')}
            >
@@ -562,17 +601,20 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
        )}

        {/* Quick selection hint */}
-        <div className={css({
-          marginTop: '8px',
-          padding: '6px 12px',
-          background: 'gray.50',
-          borderRadius: '8px',
-          fontSize: '11px',
-          color: 'gray.600',
-          textAlign: 'center',
-          flexShrink: 0
-        })}>
-          💡 Powered by emojibase-data • Try: "face", "smart", "heart", "animal", "food" • Click to select
+        <div
+          className={css({
+            marginTop: '8px',
+            padding: '6px 12px',
+            background: 'gray.50',
+            borderRadius: '8px',
+            fontSize: '11px',
+            color: 'gray.600',
+            textAlign: 'center',
+            flexShrink: 0,
+          })}
+        >
+          💡 Powered by emojibase-data • Try: "face", "smart", "heart", "animal", "food" • Click to
+          select
        </div>
      </div>

@@ -586,7 +628,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
            transform: 'translateX(-50%)',
            pointerEvents: 'none',
            zIndex: 10000,
-            animation: 'magnifyIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)'
+            animation: 'magnifyIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
          }}
        >
          {/* Outer glow ring */}
@@ -596,7 +638,7 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              inset: '-20px',
              borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%)',
-              animation: 'pulseGlow 2s ease-in-out infinite'
+              animation: 'pulseGlow 2s ease-in-out infinite',
            }}
          />

@@ -606,7 +648,8 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
              borderRadius: '24px',
              padding: '20px',
-              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(59, 130, 246, 0.6), inset 0 2px 4px rgba(255,255,255,0.8)',
+              boxShadow:
+                '0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(59, 130, 246, 0.6), inset 0 2px 4px rgba(255,255,255,0.8)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
@@ -615,34 +658,46 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              minWidth: '160px',
              minHeight: '160px',
              position: 'relative',
-              animation: 'emojiFloat 3s ease-in-out infinite'
+              animation: 'emojiFloat 3s ease-in-out infinite',
            }}
          >
            {/* Sparkle effects */}
-            <div style={{
-              position: 'absolute',
-              top: '10px',
-              right: '10px',
-              fontSize: '20px',
-              animation: 'sparkle 1.5s ease-in-out infinite',
-              animationDelay: '0s'
-            }}>✨</div>
-            <div style={{
-              position: 'absolute',
-              bottom: '15px',
-              left: '15px',
-              fontSize: '16px',
-              animation: 'sparkle 1.5s ease-in-out infinite',
-              animationDelay: '0.5s'
-            }}>✨</div>
-            <div style={{
-              position: 'absolute',
-              top: '20px',
-              left: '20px',
-              fontSize: '12px',
-              animation: 'sparkle 1.5s ease-in-out infinite',
-              animationDelay: '1s'
-            }}>✨</div>
+            <div
+              style={{
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                fontSize: '20px',
+                animation: 'sparkle 1.5s ease-in-out infinite',
+                animationDelay: '0s',
+              }}
+            >
+              ✨
+            </div>
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '15px',
+                left: '15px',
+                fontSize: '16px',
+                animation: 'sparkle 1.5s ease-in-out infinite',
+                animationDelay: '0.5s',
+              }}
+            >
+              ✨
+            </div>
+            <div
+              style={{
+                position: 'absolute',
+                top: '20px',
+                left: '20px',
+                fontSize: '12px',
+                animation: 'sparkle 1.5s ease-in-out infinite',
+                animationDelay: '1s',
+              }}
+            >
+              ✨
+            </div>

            {hoveredEmoji}
          </div>
@@ -659,14 +714,16 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
              borderLeft: '14px solid transparent',
              borderRight: '14px solid transparent',
              borderTop: '14px solid white',
-              filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))'
+              filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))',
            }}
          />
        </div>
      )}

      {/* Add magnifying animations */}
-      <style dangerouslySetInnerHTML={{ __html: `
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
        @keyframes magnifyIn {
          from {
            opacity: 0;
@@ -705,7 +762,9 @@ export function EmojiPicker({ currentEmoji, onEmojiSelect, onClose, playerNumber
            transform: scale(1) rotate(180deg);
          }
        }
-      ` }} />
+      `,
+        }}
+      />
    </div>
  )
 }
@@ -724,4 +783,4 @@ if (typeof document !== 'undefined' && !document.getElementById('emoji-picker-an
  style.id = 'emoji-picker-animations'
  style.textContent = fadeInAnimation
  document.head.appendChild(style)
-}
+}
--- a/apps/web/src/app/arcade/matching/components/GameCard.tsx
+++ b/apps/web/src/app/arcade/matching/components/GameCard.tsx
@@ -1,10 +1,9 @@
 'use client'

-import { AbacusReact } from '@soroban/abacus-react'
-import { useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { css } from '../../../../../styled-system/css'
 import { useGameMode } from '../../../../contexts/GameModeContext'
 import type { GameCardProps } from '../context/types'
-import { css } from '../../../../../styled-system/css'

 export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false }: GameCardProps) {
  const appConfig = useAbacusConfig()
@@ -12,13 +11,13 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false

  // Get active players array for mapping numeric IDs to actual players
  const activePlayers = Array.from(activePlayerIds)
-    .map(id => playerMap.get(id))
+    .map((id) => playerMap.get(id))
    .filter((p): p is NonNullable<typeof p> => p !== undefined)

  // Helper to get player index from ID (0-based)
  const getPlayerIndex = (playerId: string | undefined): number => {
    if (!playerId) return -1
-    return activePlayers.findIndex(p => p.id === playerId)
+    return activePlayers.findIndex((p) => p.id === playerId)
  }

  const cardBackStyles = css({
@@ -36,7 +35,7 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
    textShadow: '1px 1px 2px rgba(0,0,0,0.3)',
    cursor: disabled ? 'default' : 'pointer',
    userSelect: 'none',
-    transition: 'all 0.2s ease'
+    transition: 'all 0.2s ease',
  })

  const cardFrontStyles = css({
@@ -53,7 +52,7 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
    justifyContent: 'center',
    padding: '8px',
    overflow: 'hidden',
-    transition: 'all 0.2s ease'
+    transition: 'all 0.2s ease',
  })

  // Dynamic styling based on card type and state
@@ -85,7 +84,7 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
    if (isMatched) {
      // Show player emoji for matched cards in multiplayer mode
      if (card.matchedBy) {
-        const matchedPlayer = activePlayers.find(p => p.id === card.matchedBy)
+        const matchedPlayer = activePlayers.find((p) => p.id === card.matchedBy)
        return matchedPlayer?.emoji || '✓'
      }
      return '✓' // Default checkmark for single player
@@ -126,9 +125,12 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
        height: '100%',
        cursor: disabled || isMatched ? 'default' : 'pointer',
        transition: 'transform 0.2s ease',
-        _hover: disabled || isMatched ? {} : {
-          transform: 'translateY(-2px)'
-        }
+        _hover:
+          disabled || isMatched
+            ? {}
+            : {
+                transform: 'translateY(-2px)',
+              },
      })}
      onClick={disabled || isMatched ? undefined : onClick}
    >
@@ -140,25 +142,25 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
          textAlign: 'center',
          transition: 'transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)',
          transformStyle: 'preserve-3d',
-          transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
+          transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
        })}
      >
        {/* Card Back (hidden/face-down state) */}
        <div
          className={cardBackStyles}
          style={{
-            background: getCardBackGradient()
+            background: getCardBackGradient(),
          }}
        >
-          <div className={css({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '4px'
-          })}>
-            <div className={css({ fontSize: '32px' })}>
-              {getCardBackIcon()}
-            </div>
+          <div
+            className={css({
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '4px',
+            })}
+          >
+            <div className={css({ fontSize: '32px' })}>{getCardBackIcon()}</div>
            {isMatched && (
              <div className={css({ fontSize: '14px', opacity: 0.9 })}>
                {card.matchedBy ? 'Claimed!' : 'Matched!'}
@@ -176,71 +178,80 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
              ? getPlayerIndex(card.matchedBy) === 0
                ? '0 0 20px rgba(116, 185, 255, 0.4)' // Blue glow for player 1
                : getPlayerIndex(card.matchedBy) === 1
-                ? '0 0 20px rgba(253, 121, 168, 0.4)' // Pink glow for player 2
-                : '0 0 20px rgba(72, 187, 120, 0.4)' // Default green glow
+                  ? '0 0 20px rgba(253, 121, 168, 0.4)' // Pink glow for player 2
+                  : '0 0 20px rgba(72, 187, 120, 0.4)' // Default green glow
              : isFlipped
-              ? '0 0 15px rgba(102, 126, 234, 0.3)'
-              : 'none'
+                ? '0 0 15px rgba(102, 126, 234, 0.3)'
+                : 'none',
          }}
        >
          {/* Player Badge for matched cards */}
          {isMatched && card.matchedBy && (
            <>
              {/* Explosion Ring */}
-              <div className={css({
-                position: 'absolute',
-                top: '6px',
-                right: '6px',
-                width: '32px',
-                height: '32px',
-                borderRadius: '50%',
-                border: '3px solid',
-                borderColor: getPlayerIndex(card.matchedBy) === 0 ? '#74b9ff' : '#fd79a8',
-                animation: 'explosionRing 0.6s ease-out',
-                zIndex: 9
-              })} />
+              <div
+                className={css({
+                  position: 'absolute',
+                  top: '6px',
+                  right: '6px',
+                  width: '32px',
+                  height: '32px',
+                  borderRadius: '50%',
+                  border: '3px solid',
+                  borderColor: getPlayerIndex(card.matchedBy) === 0 ? '#74b9ff' : '#fd79a8',
+                  animation: 'explosionRing 0.6s ease-out',
+                  zIndex: 9,
+                })}
+              />

              {/* Main Badge */}
-              <div className={css({
-                position: 'absolute',
-                top: '6px',
-                right: '6px',
-                width: '32px',
-                height: '32px',
-                borderRadius: '50%',
-                background: getPlayerIndex(card.matchedBy) === 0
-                  ? 'linear-gradient(135deg, #74b9ff, #0984e3)'
-                  : 'linear-gradient(135deg, #fd79a8, #e84393)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '18px',
-                boxShadow: getPlayerIndex(card.matchedBy) === 0
-                  ? '0 0 20px rgba(116, 185, 255, 0.6), 0 0 40px rgba(116, 185, 255, 0.4)'
-                  : '0 0 20px rgba(253, 121, 168, 0.6), 0 0 40px rgba(253, 121, 168, 0.4)',
-                animation: 'epicClaim 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-                zIndex: 10,
-                '&::before': {
-                  content: '""',
+              <div
+                className={css({
                  position: 'absolute',
-                  top: '-2px',
-                  left: '-2px',
-                  right: '-2px',
-                  bottom: '-2px',
+                  top: '6px',
+                  right: '6px',
+                  width: '32px',
+                  height: '32px',
                  borderRadius: '50%',
-                  background: getPlayerIndex(card.matchedBy) === 0
-                    ? 'linear-gradient(45deg, #74b9ff, #a29bfe, #6c5ce7, #74b9ff)'
-                    : 'linear-gradient(45deg, #fd79a8, #fdcb6e, #e17055, #fd79a8)',
-                  animation: 'spinningHalo 2s linear infinite',
-                  zIndex: -1
-                }
-              })}>
-                <span className={css({
-                  animation: 'emojiBlast 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both',
-                  filter: 'drop-shadow(0 0 8px rgba(255,255,255,0.8))'
-                })}>
+                  background:
+                    getPlayerIndex(card.matchedBy) === 0
+                      ? 'linear-gradient(135deg, #74b9ff, #0984e3)'
+                      : 'linear-gradient(135deg, #fd79a8, #e84393)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: '18px',
+                  boxShadow:
+                    getPlayerIndex(card.matchedBy) === 0
+                      ? '0 0 20px rgba(116, 185, 255, 0.6), 0 0 40px rgba(116, 185, 255, 0.4)'
+                      : '0 0 20px rgba(253, 121, 168, 0.6), 0 0 40px rgba(253, 121, 168, 0.4)',
+                  animation: 'epicClaim 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                  zIndex: 10,
+                  '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    top: '-2px',
+                    left: '-2px',
+                    right: '-2px',
+                    bottom: '-2px',
+                    borderRadius: '50%',
+                    background:
+                      getPlayerIndex(card.matchedBy) === 0
+                        ? 'linear-gradient(45deg, #74b9ff, #a29bfe, #6c5ce7, #74b9ff)'
+                        : 'linear-gradient(45deg, #fd79a8, #fdcb6e, #e17055, #fd79a8)',
+                    animation: 'spinningHalo 2s linear infinite',
+                    zIndex: -1,
+                  },
+                })}
+              >
+                <span
+                  className={css({
+                    animation: 'emojiBlast 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both',
+                    filter: 'drop-shadow(0 0 8px rgba(255,255,255,0.8))',
+                  })}
+                >
                  {card.matchedBy
-                    ? activePlayers.find(p => p.id === card.matchedBy)?.emoji || '✓'
+                    ? activePlayers.find((p) => p.id === card.matchedBy)?.emoji || '✓'
                    : '✓'}
                </span>
              </div>
@@ -258,24 +269,26 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
                    background: '#ffeaa7',
                    borderRadius: '50%',
                    animation: `sparkle${i + 1} 1.5s ease-out`,
-                    zIndex: 8
+                    zIndex: 8,
                  })}
                />
              ))}
            </>
          )}
          {card.type === 'abacus' ? (
-            <div className={css({
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '100%',
-              height: '100%',
-              '& svg': {
-                maxWidth: '100%',
-                maxHeight: '100%'
-              }
-            })}>
+            <div
+              className={css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+                '& svg': {
+                  maxWidth: '100%',
+                  maxHeight: '100%',
+                },
+              })}
+            >
              <AbacusReact
                value={card.number}
                columns="auto"
@@ -289,56 +302,68 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false
              />
            </div>
          ) : card.type === 'number' ? (
-            <div className={css({
-              fontSize: '32px',
-              fontWeight: 'bold',
-              color: 'gray.800',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            })}>
+            <div
+              className={css({
+                fontSize: '32px',
+                fontWeight: 'bold',
+                color: 'gray.800',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              })}
+            >
              {card.number}
            </div>
          ) : card.type === 'complement' ? (
-            <div className={css({
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '4px'
-            })}>
-              <div className={css({
-                fontSize: '28px',
-                fontWeight: 'bold',
-                color: 'gray.800'
-              })}>
+            <div
+              className={css({
+                textAlign: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '4px',
+              })}
+            >
+              <div
+                className={css({
+                  fontSize: '28px',
+                  fontWeight: 'bold',
+                  color: 'gray.800',
+                })}
+              >
                {card.number}
              </div>
-              <div className={css({
-                fontSize: '16px',
-                color: 'gray.600',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '4px'
-              })}>
+              <div
+                className={css({
+                  fontSize: '16px',
+                  color: 'gray.600',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                })}
+              >
                <span>{card.targetSum === 5 ? '✋' : '🔟'}</span>
                <span>Friends</span>
              </div>
              {card.complement !== undefined && (
-                <div className={css({
-                  fontSize: '12px',
-                  color: 'gray.500'
-                })}>
+                <div
+                  className={css({
+                    fontSize: '12px',
+                    color: 'gray.500',
+                  })}
+                >
                  + {card.complement} = {card.targetSum}
                </div>
              )}
            </div>
          ) : (
-            <div className={css({
-              fontSize: '24px',
-              color: 'gray.500'
-            })}>
+            <div
+              className={css({
+                fontSize: '24px',
+                color: 'gray.500',
+              })}
+            >
              ?
            </div>
          )}
@@ -347,18 +372,20 @@ export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false

      {/* Match animation overlay */}
      {isMatched && (
-        <div className={css({
-          position: 'absolute',
-          top: '-5px',
-          left: '-5px',
-          right: '-5px',
-          bottom: '-5px',
-          borderRadius: '16px',
-          background: 'linear-gradient(45deg, transparent, rgba(72, 187, 120, 0.3), transparent)',
-          animation: 'pulse 2s infinite',
-          pointerEvents: 'none',
-          zIndex: 1
-        })} />
+        <div
+          className={css({
+            position: 'absolute',
+            top: '-5px',
+            left: '-5px',
+            right: '-5px',
+            bottom: '-5px',
+            borderRadius: '16px',
+            background: 'linear-gradient(45deg, transparent, rgba(72, 187, 120, 0.3), transparent)',
+            animation: 'pulse 2s infinite',
+            pointerEvents: 'none',
+            zIndex: 1,
+          })}
+        />
      )}
    </div>
  )
@@ -522,4 +549,4 @@ if (typeof document !== 'undefined' && !document.getElementById('memory-card-ani
  style.id = 'memory-card-animations'
  style.textContent = globalCardAnimations
  document.head.appendChild(style)
-}
+}
--- a/apps/web/src/app/arcade/matching/components/GamePhase.tsx
+++ b/apps/web/src/app/arcade/matching/components/GamePhase.tsx
@@ -1,58 +1,64 @@
 'use client'

-import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
+import { css } from '../../../../../styled-system/css'
 import { useGameMode } from '../../../../contexts/GameModeContext'
+import { pluralizeWord } from '../../../../utils/pluralization'
+import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
 import { MemoryGrid } from './MemoryGrid'
 import { PlayerStatusBar } from './PlayerStatusBar'
-import { css } from '../../../../../styled-system/css'
-import { pluralizeWord } from '../../../../utils/pluralization'

 export function GamePhase() {
-  const { state, resetGame, activePlayers } = useArcadeMemoryPairs()
+  const { state, resetGame: _resetGame, activePlayers } = useArcadeMemoryPairs()
  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode()

  // Convert Map to array and create mapping from numeric index to player
-  const playersArray = Array.from(playerMap.values())
+  const _playersArray = Array.from(playerMap.values())
  const activePlayersArray = Array.from(activePlayerIds)
-    .map(id => playerMap.get(id))
+    .map((id) => playerMap.get(id))
    .filter((p): p is NonNullable<typeof p> => p !== undefined)

  // Map player ID (UUID string) to actual player data using array index
-  const currentPlayerIndex = activePlayers.findIndex(id => id === state.currentPlayer)
-  const currentPlayerData = currentPlayerIndex >= 0 ? activePlayersArray[currentPlayerIndex] : undefined
-  const activePlayerData = activePlayersArray
+  const currentPlayerIndex = activePlayers.indexOf(state.currentPlayer)
+  const _currentPlayerData =
+    currentPlayerIndex >= 0 ? activePlayersArray[currentPlayerIndex] : undefined
+  const _activePlayerData = activePlayersArray

  return (
-    <div className={css({
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column'
-    })}>
-
-      {/* Minimal Game Header */}
-      <div className={css({
+    <div
+      className={css({
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: { base: '8px 12px', sm: '10px 16px', md: '12px 20px' },
-        background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08))',
-        borderRadius: '12px',
-        marginBottom: { base: '12px', sm: '16px', md: '20px' },
-        border: '1px solid rgba(102, 126, 234, 0.15)',
-        flexShrink: 0
-      })}>
-
-        {/* Game Mode Indicator - Compact */}
-        <div className={css({
+        flexDirection: 'column',
+      })}
+    >
+      {/* Minimal Game Header */}
+      <div
+        className={css({
          display: 'flex',
+          justifyContent: 'space-between',
          alignItems: 'center',
-          gap: '8px',
-          fontSize: { base: '14px', sm: '15px' },
-          fontWeight: 'bold',
-          color: 'gray.600'
-        })}>
+          padding: { base: '8px 12px', sm: '10px 16px', md: '12px 20px' },
+          background:
+            'linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08))',
+          borderRadius: '12px',
+          marginBottom: { base: '12px', sm: '16px', md: '20px' },
+          border: '1px solid rgba(102, 126, 234, 0.15)',
+          flexShrink: 0,
+        })}
+      >
+        {/* Game Mode Indicator - Compact */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            fontSize: { base: '14px', sm: '15px' },
+            fontWeight: 'bold',
+            color: 'gray.600',
+          })}
+        >
          <span className={css({ fontSize: { base: '16px', sm: '18px' } })}>
            {state.gameType === 'abacus-numeral' ? '🧮' : '🤝'}
          </span>
@@ -62,52 +68,60 @@ export function GamePhase() {
          {state.gameMode === 'multiplayer' && (
            <>
              <span className={css({ color: 'gray.400' })}>•</span>
-              <span>⚔️ {activePlayers.length}{pluralizeWord(activePlayers.length, 'P')}</span>
+              <span>
+                ⚔️ {activePlayers.length}
+                {pluralizeWord(activePlayers.length, 'P')}
+              </span>
            </>
          )}
        </div>
-
      </div>

      {/* Player Status Bar */}
      <PlayerStatusBar />

      {/* Memory Grid - The main game area */}
-      <div className={css({
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: 0,
-        overflow: 'hidden'
-      })}>
+      <div
+        className={css({
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: 0,
+          overflow: 'hidden',
+        })}
+      >
        <MemoryGrid />
      </div>

      {/* Quick Tip - Only show when game is starting and on larger screens */}
      {state.moves === 0 && (
-        <div className={css({
-          textAlign: 'center',
-          marginTop: '12px',
-          padding: '8px 16px',
-          background: 'rgba(248, 250, 252, 0.7)',
-          borderRadius: '8px',
-          border: '1px solid rgba(226, 232, 240, 0.6)',
-          display: { base: 'none', lg: 'block' },
-          flexShrink: 0
-        })}>
-          <p className={css({
-            fontSize: '13px',
-            color: 'gray.600',
-            margin: 0,
-            fontWeight: 'medium'
-          })}>
-            💡 {state.gameType === 'abacus-numeral'
+        <div
+          className={css({
+            textAlign: 'center',
+            marginTop: '12px',
+            padding: '8px 16px',
+            background: 'rgba(248, 250, 252, 0.7)',
+            borderRadius: '8px',
+            border: '1px solid rgba(226, 232, 240, 0.6)',
+            display: { base: 'none', lg: 'block' },
+            flexShrink: 0,
+          })}
+        >
+          <p
+            className={css({
+              fontSize: '13px',
+              color: 'gray.600',
+              margin: 0,
+              fontWeight: 'medium',
+            })}
+          >
+            💡{' '}
+            {state.gameType === 'abacus-numeral'
              ? 'Match abacus beads with numbers'
-              : 'Find pairs that add to 5 or 10'
-            }
+              : 'Find pairs that add to 5 or 10'}
          </p>
        </div>
      )}
    </div>
  )
-}
+}
--- a/apps/web/src/app/arcade/matching/components/MemoryGrid.tsx
+++ b/apps/web/src/app/arcade/matching/components/MemoryGrid.tsx
@@ -1,11 +1,10 @@
 'use client'

-import { useState, useEffect, useMemo } from 'react'
-import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
-import { GameCard } from './GameCard'
-import { getGridConfiguration } from '../utils/cardGeneration'
+import { useEffect, useMemo, useState } from 'react'
 import { css } from '../../../../../styled-system/css'
-import { gamePlurals } from '../../../../utils/pluralization'
+import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
+import { getGridConfiguration } from '../utils/cardGeneration'
+import { GameCard } from './GameCard'

 // Helper function to calculate optimal grid dimensions
 function calculateOptimalGrid(cards: number, aspectRatio: number, config: any) {
@@ -59,7 +58,10 @@ function useGridDimensions(gridConfig: any, totalCards: number) {
      const aspectRatio = window.innerWidth / window.innerHeight
      return calculateOptimalGrid(totalCards, aspectRatio, gridConfig)
    }
-    return { columns: gridConfig.mobileColumns || 3, rows: Math.ceil(totalCards / (gridConfig.mobileColumns || 3)) }
+    return {
+      columns: gridConfig.mobileColumns || 3,
+      rows: Math.ceil(totalCards / (gridConfig.mobileColumns || 3)),
+    }
  })

  useEffect(() => {
@@ -81,29 +83,28 @@ function useGridDimensions(gridConfig: any, totalCards: number) {
 export function MemoryGrid() {
  const { state, flipCard } = useArcadeMemoryPairs()

-  if (!state.gameCards.length) {
-    return null
-  }
-
+  // Hooks must be called before early return
  const gridConfig = useMemo(() => getGridConfiguration(state.difficulty), [state.difficulty])
  const gridDimensions = useGridDimensions(gridConfig, state.gameCards.length)

+  if (!state.gameCards.length) {
+    return null
+  }

  const handleCardClick = (cardId: string) => {
    flipCard(cardId)
  }

-
  return (
-    <div className={css({
-      padding: { base: '12px', sm: '16px', md: '20px' },
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: { base: '12px', sm: '16px', md: '20px' }
-    })}>
-
-
+    <div
+      className={css({
+        padding: { base: '12px', sm: '16px', md: '20px' },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: { base: '12px', sm: '16px', md: '20px' },
+      })}
+    >
      {/* Cards Grid - Consistent r×c Layout */}
      <div
        style={{
@@ -115,18 +116,23 @@ export function MemoryGrid() {
          padding: '0 8px',
          // Consistent grid ensuring all cards fit in r×c layout
          gridTemplateColumns: `repeat(${gridDimensions.columns}, 1fr)`,
-          gridTemplateRows: `repeat(${gridDimensions.rows}, 1fr)`
+          gridTemplateRows: `repeat(${gridDimensions.rows}, 1fr)`,
        }}
      >
-        {state.gameCards.map(card => {
-          const isFlipped = state.flippedCards.some(c => c.id === card.id) || card.matched
+        {state.gameCards.map((card) => {
+          const isFlipped = state.flippedCards.some((c) => c.id === card.id) || card.matched
          const isMatched = card.matched

          // Smart card filtering for abacus-numeral mode
          let isValidForSelection = true
          let isDimmed = false

-          if (state.gameType === 'abacus-numeral' && state.flippedCards.length === 1 && !isFlipped && !isMatched) {
+          if (
+            state.gameType === 'abacus-numeral' &&
+            state.flippedCards.length === 1 &&
+            !isFlipped &&
+            !isMatched
+          ) {
            const firstFlippedCard = state.flippedCards[0]

            // If first card is abacus, only numeral cards should be clickable
@@ -141,8 +147,12 @@ export function MemoryGrid() {
            }
            // Also check if it's a potential match by number
            else if (
-              (firstFlippedCard.type === 'abacus' && card.type === 'number' && card.number !== firstFlippedCard.number) ||
-              (firstFlippedCard.type === 'number' && card.type === 'abacus' && card.number !== firstFlippedCard.number)
+              (firstFlippedCard.type === 'abacus' &&
+                card.type === 'number' &&
+                card.number !== firstFlippedCard.number) ||
+              (firstFlippedCard.type === 'number' &&
+                card.type === 'abacus' &&
+                card.number !== firstFlippedCard.number)
            ) {
              // Don't completely disable, but could add subtle visual hint for non-matching numbers
              // For now, keep all valid type combinations clickable
@@ -161,13 +171,14 @@ export function MemoryGrid() {
                // Dimming effect for invalid cards
                opacity: isDimmed ? 0.3 : 1,
                transition: 'opacity 0.3s ease',
-                filter: isDimmed ? 'grayscale(0.7)' : 'none'
-              })}>
+                filter: isDimmed ? 'grayscale(0.7)' : 'none',
+              })}
+            >
              <GameCard
                card={card}
                isFlipped={isFlipped}
                isMatched={isMatched}
-                onClick={() => isValidForSelection ? handleCardClick(card.id) : undefined}
+                onClick={() => (isValidForSelection ? handleCardClick(card.id) : undefined)}
                disabled={state.isProcessingMove || !isValidForSelection}
              />
            </div>
@@ -177,26 +188,30 @@ export function MemoryGrid() {

      {/* Mismatch Feedback */}
      {state.showMismatchFeedback && (
-        <div className={css({
-          position: 'fixed',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          background: 'linear-gradient(135deg, #ff6b6b, #ee5a24)',
-          color: 'white',
-          padding: '16px 24px',
-          borderRadius: '16px',
-          fontSize: '18px',
-          fontWeight: 'bold',
-          boxShadow: '0 8px 25px rgba(255, 107, 107, 0.4)',
-          zIndex: 1000,
-          animation: 'shake 0.5s ease-in-out'
-        })}>
-          <div className={css({
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px'
-          })}>
+        <div
+          className={css({
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            background: 'linear-gradient(135deg, #ff6b6b, #ee5a24)',
+            color: 'white',
+            padding: '16px 24px',
+            borderRadius: '16px',
+            fontSize: '18px',
+            fontWeight: 'bold',
+            boxShadow: '0 8px 25px rgba(255, 107, 107, 0.4)',
+            zIndex: 1000,
+            animation: 'shake 0.5s ease-in-out',
+          })}
+        >
+          <div
+            className={css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+            })}
+          >
            <span>❌</span>
            <span>Not a match! Try again.</span>
          </div>
@@ -205,18 +220,19 @@ export function MemoryGrid() {

      {/* Processing Overlay */}
      {state.isProcessingMove && (
-        <div className={css({
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background: 'rgba(0,0,0,0.1)',
-          zIndex: 999,
-          pointerEvents: 'none'
-        })} />
+        <div
+          className={css({
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0,0,0,0.1)',
+            zIndex: 999,
+            pointerEvents: 'none',
+          })}
+        />
      )}
-
    </div>
  )
 }
@@ -236,4 +252,4 @@ if (typeof document !== 'undefined' && !document.getElementById('memory-grid-ani
  style.id = 'memory-grid-animations'
  style.textContent = shakeAnimation
  document.head.appendChild(style)
-}
+}
--- a/apps/web/src/app/arcade/matching/components/MemoryPairsGame.tsx
+++ b/apps/web/src/app/arcade/matching/components/MemoryPairsGame.tsx
@@ -1,16 +1,16 @@
 'use client'

-import { useEffect, useRef } from 'react'
 import { useRouter } from 'next/navigation'
-import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
-import { useFullscreen } from '../../../../contexts/FullscreenContext'
+import { useEffect, useRef } from 'react'
+import { PageWithNav } from '@/components/PageWithNav'
 import { useArcadeRedirect } from '@/hooks/useArcadeRedirect'
-import { SetupPhase } from './SetupPhase'
+import { css } from '../../../../../styled-system/css'
+import { StandardGameLayout } from '../../../../components/StandardGameLayout'
+import { useFullscreen } from '../../../../contexts/FullscreenContext'
+import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
 import { GamePhase } from './GamePhase'
 import { ResultsPhase } from './ResultsPhase'
-import { StandardGameLayout } from '../../../../components/StandardGameLayout'
-import { PageWithNav } from '@/components/PageWithNav'
-import { css } from '../../../../../styled-system/css'
+import { SetupPhase } from './SetupPhase'

 export function MemoryPairsGame() {
  const router = useRouter()
@@ -47,37 +47,40 @@ export function MemoryPairsGame() {
      }}
    >
      <StandardGameLayout>
-      <div
-        ref={gameRef}
-        className={css({
-          flex: 1,
-          padding: { base: '12px', sm: '16px', md: '20px' },
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          position: 'relative',
-          overflow: 'auto'
-        })}>
-        {/* Note: Fullscreen restore prompt removed - client-side navigation preserves fullscreen */}
+        <div
+          ref={gameRef}
+          className={css({
+            flex: 1,
+            padding: { base: '12px', sm: '16px', md: '20px' },
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            position: 'relative',
+            overflow: 'auto',
+          })}
+        >
+          {/* Note: Fullscreen restore prompt removed - client-side navigation preserves fullscreen */}

-        <main className={css({
-          width: '100%',
-          maxWidth: '1200px',
-          background: 'rgba(255,255,255,0.95)',
-          borderRadius: { base: '12px', md: '20px' },
-          padding: { base: '12px', sm: '16px', md: '24px', lg: '32px' },
-          boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden'
-        })}>
-          {state.gamePhase === 'setup' && <SetupPhase />}
-          {state.gamePhase === 'playing' && <GamePhase />}
-          {state.gamePhase === 'results' && <ResultsPhase />}
-        </main>
-      </div>
-    </StandardGameLayout>
+          <main
+            className={css({
+              width: '100%',
+              maxWidth: '1200px',
+              background: 'rgba(255,255,255,0.95)',
+              borderRadius: { base: '12px', md: '20px' },
+              padding: { base: '12px', sm: '16px', md: '24px', lg: '32px' },
+              boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
+            })}
+          >
+            {state.gamePhase === 'setup' && <SetupPhase />}
+            {state.gamePhase === 'playing' && <GamePhase />}
+            {state.gamePhase === 'results' && <ResultsPhase />}
+          </main>
+        </div>
+      </StandardGameLayout>
    </PageWithNav>
  )
-}
+}
--- a/apps/web/src/app/arcade/matching/components/PlayerStatusBar.tsx
+++ b/apps/web/src/app/arcade/matching/components/PlayerStatusBar.tsx
@@ -2,9 +2,8 @@

 import { css } from '../../../../../styled-system/css'
 import { useGameMode } from '../../../../contexts/GameModeContext'
-import { useUserProfile } from '../../../../contexts/UserProfileContext'
-import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
 import { gamePlurals } from '../../../../utils/pluralization'
+import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'

 interface PlayerStatusBarProps {
  className?: string
@@ -16,7 +15,7 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {

  // Get active players array
  const activePlayersData = Array.from(activePlayerIds)
-    .map(id => playerMap.get(id))
+    .map((id) => playerMap.get(id))
    .filter((p): p is NonNullable<typeof p> => p !== undefined)

  // Map active players to display data with scores
@@ -26,7 +25,7 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
    displayName: player.name,
    displayEmoji: player.emoji,
    score: state.scores[player.id] || 0,
-    consecutiveMatches: state.consecutiveMatches?.[player.id] || 0
+    consecutiveMatches: state.consecutiveMatches?.[player.id] || 0,
  }))

  // Get celebration level based on consecutive matches
@@ -40,41 +39,52 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
  if (activePlayers.length <= 1) {
    // Simple single player indicator
    return (
-      <div className={`${css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        background: 'white',
-        rounded: 'lg',
-        p: { base: '2', md: '3' },
-        border: '2px solid',
-        borderColor: 'blue.200',
-        mb: { base: '2', md: '3' },
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-      })} ${className || ''}`}>
-        <div className={css({
+      <div
+        className={`${css({
          display: 'flex',
+          justifyContent: 'center',
          alignItems: 'center',
-          gap: { base: '2', md: '3' }
-        })}>
-          <div className={css({
-            fontSize: { base: 'xl', md: '2xl' }
-          })}>
+          background: 'white',
+          rounded: 'lg',
+          p: { base: '2', md: '3' },
+          border: '2px solid',
+          borderColor: 'blue.200',
+          mb: { base: '2', md: '3' },
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        })} ${className || ''}`}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: { base: '2', md: '3' },
+          })}
+        >
+          <div
+            className={css({
+              fontSize: { base: 'xl', md: '2xl' },
+            })}
+          >
            {activePlayers[0]?.displayEmoji || '🚀'}
          </div>
-          <div className={css({
-            fontSize: { base: 'sm', md: 'md' },
-            fontWeight: 'bold',
-            color: 'gray.700'
-          })}>
+          <div
+            className={css({
+              fontSize: { base: 'sm', md: 'md' },
+              fontWeight: 'bold',
+              color: 'gray.700',
+            })}
+          >
            {activePlayers[0]?.displayName || 'Player 1'}
          </div>
-          <div className={css({
-            fontSize: { base: 'xs', md: 'sm' },
-            color: 'blue.600',
-            fontWeight: 'medium'
-          })}>
-            {gamePlurals.pair(state.matchedPairs)} of {state.totalPairs} • {gamePlurals.move(state.moves)}
+          <div
+            className={css({
+              fontSize: { base: 'xs', md: 'sm' },
+              color: 'blue.600',
+              fontWeight: 'medium',
+            })}
+          >
+            {gamePlurals.pair(state.matchedPairs)} of {state.totalPairs} •{' '}
+            {gamePlurals.move(state.moves)}
          </div>
        </div>
      </div>
@@ -83,27 +93,33 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {

  // For multiplayer, show competitive status bar
  return (
-    <div className={`${css({
-      background: 'linear-gradient(135deg, #f8fafc, #e2e8f0)',
-      rounded: 'xl',
-      p: { base: '2', md: '3' },
-      border: '2px solid',
-      borderColor: 'gray.200',
-      mb: { base: '3', md: '4' }
-    })} ${className || ''}`}>
-      <div className={css({
-        display: 'grid',
-        gridTemplateColumns: activePlayers.length <= 2
-          ? 'repeat(2, 1fr)'
-          : activePlayers.length === 3
-          ? 'repeat(3, 1fr)'
-          : 'repeat(2, 1fr) repeat(2, 1fr)',
-        gap: { base: '2', md: '3' },
-        alignItems: 'center'
-      })}>
+    <div
+      className={`${css({
+        background: 'linear-gradient(135deg, #f8fafc, #e2e8f0)',
+        rounded: 'xl',
+        p: { base: '2', md: '3' },
+        border: '2px solid',
+        borderColor: 'gray.200',
+        mb: { base: '3', md: '4' },
+      })} ${className || ''}`}
+    >
+      <div
+        className={css({
+          display: 'grid',
+          gridTemplateColumns:
+            activePlayers.length <= 2
+              ? 'repeat(2, 1fr)'
+              : activePlayers.length === 3
+                ? 'repeat(3, 1fr)'
+                : 'repeat(2, 1fr) repeat(2, 1fr)',
+          gap: { base: '2', md: '3' },
+          alignItems: 'center',
+        })}
+      >
        {activePlayers.map((player) => {
          const isCurrentPlayer = player.id === state.currentPlayer
-          const isLeading = player.score === Math.max(...activePlayers.map(p => p.score)) && player.score > 0
+          const isLeading =
+            player.score === Math.max(...activePlayers.map((p) => p.score)) && player.score > 0
          const celebrationLevel = getCelebrationLevel(player.consecutiveMatches)

          return (
@@ -119,123 +135,150 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
                  ? `linear-gradient(135deg, ${player.color || '#3b82f6'}15, ${player.color || '#3b82f6'}25, ${player.color || '#3b82f6'}15)`
                  : 'white',
                border: isCurrentPlayer ? '4px solid' : '2px solid',
-                borderColor: isCurrentPlayer
-                  ? (player.color || '#3b82f6')
-                  : 'gray.200',
+                borderColor: isCurrentPlayer ? player.color || '#3b82f6' : 'gray.200',
                boxShadow: isCurrentPlayer
-                  ? '0 0 0 2px white, 0 0 0 6px ' + (player.color || '#3b82f6') + '40, 0 12px 32px rgba(0,0,0,0.2)'
+                  ? '0 0 0 2px white, 0 0 0 6px ' +
+                    (player.color || '#3b82f6') +
+                    '40, 0 12px 32px rgba(0,0,0,0.2)'
                  : '0 2px 4px rgba(0,0,0,0.1)',
                transition: 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                position: 'relative',
                transform: isCurrentPlayer ? 'scale(1.08) translateY(-4px)' : 'scale(1)',
                zIndex: isCurrentPlayer ? 10 : 1,
                animation: isCurrentPlayer
-                  ? (celebrationLevel === 'legendary' ? 'legendary-celebration 0.8s ease-out, turn-entrance 0.6s ease-out'
-                     : celebrationLevel === 'epic' ? 'epic-celebration 0.7s ease-out, turn-entrance 0.6s ease-out'
-                     : celebrationLevel === 'great' ? 'great-celebration 0.6s ease-out, turn-entrance 0.6s ease-out'
-                     : 'turn-entrance 0.6s ease-out')
-                  : 'none'
+                  ? celebrationLevel === 'legendary'
+                    ? 'legendary-celebration 0.8s ease-out, turn-entrance 0.6s ease-out'
+                    : celebrationLevel === 'epic'
+                      ? 'epic-celebration 0.7s ease-out, turn-entrance 0.6s ease-out'
+                      : celebrationLevel === 'great'
+                        ? 'great-celebration 0.6s ease-out, turn-entrance 0.6s ease-out'
+                        : 'turn-entrance 0.6s ease-out'
+                  : 'none',
              })}
            >
-
              {/* Leading crown with sparkle */}
              {isLeading && (
-                <div className={css({
-                  position: 'absolute',
-                  top: isCurrentPlayer ? '-3' : '-1',
-                  right: isCurrentPlayer ? '-3' : '-1',
-                  background: 'linear-gradient(135deg, #ffd700, #ffaa00)',
-                  rounded: 'full',
-                  w: isCurrentPlayer ? '10' : '6',
-                  h: isCurrentPlayer ? '10' : '6',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: isCurrentPlayer ? 'lg' : 'xs',
-                  zIndex: 10,
-                  animation: 'none',
-                  boxShadow: '0 0 20px rgba(255, 215, 0, 0.6)'
-                })}>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    top: isCurrentPlayer ? '-3' : '-1',
+                    right: isCurrentPlayer ? '-3' : '-1',
+                    background: 'linear-gradient(135deg, #ffd700, #ffaa00)',
+                    rounded: 'full',
+                    w: isCurrentPlayer ? '10' : '6',
+                    h: isCurrentPlayer ? '10' : '6',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: isCurrentPlayer ? 'lg' : 'xs',
+                    zIndex: 10,
+                    animation: 'none',
+                    boxShadow: '0 0 20px rgba(255, 215, 0, 0.6)',
+                  })}
+                >
                  👑
                </div>
              )}

              {/* Subtle turn indicator */}
              {isCurrentPlayer && (
-                <div className={css({
-                  position: 'absolute',
-                  top: '-2',
-                  left: '-2',
-                  background: player.color || '#3b82f6',
-                  rounded: 'full',
-                  w: '4',
-                  h: '4',
-                  animation: 'gentle-sway 2s ease-in-out infinite',
-                  zIndex: 5
-                })} />
+                <div
+                  className={css({
+                    position: 'absolute',
+                    top: '-2',
+                    left: '-2',
+                    background: player.color || '#3b82f6',
+                    rounded: 'full',
+                    w: '4',
+                    h: '4',
+                    animation: 'gentle-sway 2s ease-in-out infinite',
+                    zIndex: 5,
+                  })}
+                />
              )}

              {/* Living, breathing player emoji */}
-              <div className={css({
-                fontSize: isCurrentPlayer ? { base: '2xl', md: '3xl' } : { base: 'lg', md: 'xl' },
-                flexShrink: 0,
-                animation: isCurrentPlayer
-                  ? 'float 3s ease-in-out infinite'
-                  : 'breathe 5s ease-in-out infinite',
-                transform: isCurrentPlayer ? 'scale(1.2)' : 'scale(1)',
-                transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
-                textShadow: isCurrentPlayer ? '0 0 20px currentColor' : 'none',
-                cursor: 'pointer',
-                '&:hover': {
-                  transform: isCurrentPlayer ? 'scale(1.3)' : 'scale(1.1)',
-                  animation: 'gentle-sway 1s ease-in-out infinite'
-                }
-              })}>
+              <div
+                className={css({
+                  fontSize: isCurrentPlayer ? { base: '2xl', md: '3xl' } : { base: 'lg', md: 'xl' },
+                  flexShrink: 0,
+                  animation: isCurrentPlayer
+                    ? 'float 3s ease-in-out infinite'
+                    : 'breathe 5s ease-in-out infinite',
+                  transform: isCurrentPlayer ? 'scale(1.2)' : 'scale(1)',
+                  transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
+                  textShadow: isCurrentPlayer ? '0 0 20px currentColor' : 'none',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    transform: isCurrentPlayer ? 'scale(1.3)' : 'scale(1.1)',
+                    animation: 'gentle-sway 1s ease-in-out infinite',
+                  },
+                })}
+              >
                {player.displayEmoji}
              </div>

              {/* Enhanced player info */}
-              <div className={css({
-                flex: 1,
-                minWidth: 0
-              })}>
-                <div className={css({
-                  fontSize: isCurrentPlayer ? { base: 'md', md: 'lg' } : { base: 'xs', md: 'sm' },
-                  fontWeight: 'black',
-                  color: isCurrentPlayer ? 'gray.900' : 'gray.700',
-                  animation: 'none',
-                  textShadow: isCurrentPlayer ? '0 0 10px currentColor' : 'none'
-                })}>
+              <div
+                className={css({
+                  flex: 1,
+                  minWidth: 0,
+                })}
+              >
+                <div
+                  className={css({
+                    fontSize: isCurrentPlayer ? { base: 'md', md: 'lg' } : { base: 'xs', md: 'sm' },
+                    fontWeight: 'black',
+                    color: isCurrentPlayer ? 'gray.900' : 'gray.700',
+                    animation: 'none',
+                    textShadow: isCurrentPlayer ? '0 0 10px currentColor' : 'none',
+                  })}
+                >
                  {player.displayName}
                </div>
-                <div className={css({
-                  fontSize: isCurrentPlayer ? { base: 'sm', md: 'md' } : { base: '2xs', md: 'xs' },
-                  color: isCurrentPlayer ? (player.color || '#3b82f6') : 'gray.500',
-                  fontWeight: isCurrentPlayer ? 'black' : 'semibold',
-                  animation: 'none'
-                })}>
+                <div
+                  className={css({
+                    fontSize: isCurrentPlayer
+                      ? { base: 'sm', md: 'md' }
+                      : { base: '2xs', md: 'xs' },
+                    color: isCurrentPlayer ? player.color || '#3b82f6' : 'gray.500',
+                    fontWeight: isCurrentPlayer ? 'black' : 'semibold',
+                    animation: 'none',
+                  })}
+                >
                  {gamePlurals.pair(player.score)}
                  {isCurrentPlayer && (
-                    <span className={css({
-                      color: 'red.600',
-                      fontWeight: 'black',
-                      fontSize: isCurrentPlayer ? { base: 'sm', md: 'lg' } : 'inherit',
-                      animation: 'none',
-                      textShadow: '0 0 15px currentColor'
-                    })}>
+                    <span
+                      className={css({
+                        color: 'red.600',
+                        fontWeight: 'black',
+                        fontSize: isCurrentPlayer ? { base: 'sm', md: 'lg' } : 'inherit',
+                        animation: 'none',
+                        textShadow: '0 0 15px currentColor',
+                      })}
+                    >
                      {' • Your turn'}
                    </span>
                  )}
                  {player.consecutiveMatches > 1 && (
-                    <div className={css({
-                      fontSize: { base: '2xs', md: 'xs' },
-                      color: celebrationLevel === 'legendary' ? 'purple.600' :
-                             celebrationLevel === 'epic' ? 'orange.600' :
-                             celebrationLevel === 'great' ? 'green.600' : 'gray.500',
-                      fontWeight: 'black',
-                      animation: isCurrentPlayer ? 'streak-pulse 1s ease-in-out infinite' : 'none',
-                      textShadow: isCurrentPlayer ? '0 0 10px currentColor' : 'none'
-                    })}>
+                    <div
+                      className={css({
+                        fontSize: { base: '2xs', md: 'xs' },
+                        color:
+                          celebrationLevel === 'legendary'
+                            ? 'purple.600'
+                            : celebrationLevel === 'epic'
+                              ? 'orange.600'
+                              : celebrationLevel === 'great'
+                                ? 'green.600'
+                                : 'gray.500',
+                        fontWeight: 'black',
+                        animation: isCurrentPlayer
+                          ? 'streak-pulse 1s ease-in-out infinite'
+                          : 'none',
+                        textShadow: isCurrentPlayer ? '0 0 10px currentColor' : 'none',
+                      })}
+                    >
                      🔥 {player.consecutiveMatches} streak!
                    </div>
                  )}
@@ -244,15 +287,17 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {

              {/* Simple score display for current player */}
              {isCurrentPlayer && (
-                <div className={css({
-                  background: 'blue.500',
-                  color: 'white',
-                  px: { base: '2', md: '3' },
-                  py: { base: '1', md: '2' },
-                  rounded: 'md',
-                  fontSize: { base: 'sm', md: 'md' },
-                  fontWeight: 'bold'
-                })}>
+                <div
+                  className={css({
+                    background: 'blue.500',
+                    color: 'white',
+                    px: { base: '2', md: '3' },
+                    py: { base: '1', md: '2' },
+                    rounded: 'md',
+                    fontSize: { base: 'sm', md: 'md' },
+                    fontWeight: 'bold',
+                  })}
+                >
                  {player.score}
                </div>
              )}
@@ -452,4 +497,4 @@ if (typeof document !== 'undefined' && !document.getElementById('player-status-a
  style.id = 'player-status-animations'
  style.textContent = epicAnimations
  document.head.appendChild(style)
-}
+}
--- a/apps/web/src/app/arcade/matching/components/ResultsPhase.tsx
+++ b/apps/web/src/app/arcade/matching/components/ResultsPhase.tsx
@@ -1,11 +1,10 @@
 'use client'

 import { useRouter } from 'next/navigation'
-import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
-import { useGameMode } from '../../../../contexts/GameModeContext'
-import { useUserProfile } from '../../../../contexts/UserProfileContext'
-import { formatGameTime, getMultiplayerWinner, getPerformanceAnalysis } from '../utils/gameScoring'
 import { css } from '../../../../../styled-system/css'
+import { useGameMode } from '../../../../contexts/GameModeContext'
+import { useArcadeMemoryPairs } from '../context/ArcadeMemoryPairsContext'
+import { formatGameTime, getMultiplayerWinner, getPerformanceAnalysis } from '../utils/gameScoring'

 export function ResultsPhase() {
  const router = useRouter()
@@ -14,163 +13,188 @@ export function ResultsPhase() {

  // Get active player data array
  const activePlayerData = Array.from(activePlayerIds)
-    .map(id => playerMap.get(id))
+    .map((id) => playerMap.get(id))
    .filter((p): p is NonNullable<typeof p> => p !== undefined)
    .map((player) => ({
      ...player,
      displayName: player.name,
-      displayEmoji: player.emoji
+      displayEmoji: player.emoji,
    }))

-  const gameTime = state.gameEndTime && state.gameStartTime
-    ? state.gameEndTime - state.gameStartTime
-    : 0
+  const gameTime =
+    state.gameEndTime && state.gameStartTime ? state.gameEndTime - state.gameStartTime : 0

  const analysis = getPerformanceAnalysis(state)
-  const multiplayerResult = gameMode === 'multiplayer' ? getMultiplayerWinner(state, activePlayers) : null
+  const multiplayerResult =
+    gameMode === 'multiplayer' ? getMultiplayerWinner(state, activePlayers) : null

  return (
-    <div className={css({
-      textAlign: 'center',
-      padding: { base: '16px', md: '20px' },
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      overflow: 'auto'
-    })}>
-
+    <div
+      className={css({
+        textAlign: 'center',
+        padding: { base: '16px', md: '20px' },
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        overflow: 'auto',
+      })}
+    >
      {/* Celebration Header */}
-      <div className={css({
-        marginBottom: { base: '16px', md: '24px' }
-      })}>
-        <h2 className={css({
-          fontSize: { base: '32px', md: '48px' },
-          marginBottom: { base: '8px', md: '12px' },
-          color: 'green.600',
-          fontWeight: 'bold'
-        })}>
+      <div
+        className={css({
+          marginBottom: { base: '16px', md: '24px' },
+        })}
+      >
+        <h2
+          className={css({
+            fontSize: { base: '32px', md: '48px' },
+            marginBottom: { base: '8px', md: '12px' },
+            color: 'green.600',
+            fontWeight: 'bold',
+          })}
+        >
          🎉 Game Complete! 🎉
        </h2>

        {gameMode === 'single' ? (
-          <p className={css({
-            fontSize: { base: '16px', md: '20px' },
-            color: 'gray.700',
-            marginBottom: { base: '12px', md: '16px' }
-          })}>
+          <p
+            className={css({
+              fontSize: { base: '16px', md: '20px' },
+              color: 'gray.700',
+              marginBottom: { base: '12px', md: '16px' },
+            })}
+          >
            Congratulations!
          </p>
-        ) : multiplayerResult && (
-          <div className={css({ marginBottom: { base: '12px', md: '16px' } })}>
-            {multiplayerResult.isTie ? (
-              <p className={css({
-                fontSize: { base: '18px', md: '24px' },
-                color: 'purple.600',
-                fontWeight: 'bold'
-              })}>
-                🤝 It's a tie!
-              </p>
-            ) : multiplayerResult.winners.length === 1 ? (
-              <p className={css({
-                fontSize: { base: '18px', md: '24px' },
-                color: 'blue.600',
-                fontWeight: 'bold'
-              })}>
-                🏆 {activePlayerData.find(p => p.id === multiplayerResult.winners[0])?.displayName || `Player ${multiplayerResult.winners[0]}`} Wins!
-              </p>
-            ) : (
-              <p className={css({
-                fontSize: { base: '18px', md: '24px' },
-                color: 'purple.600',
-                fontWeight: 'bold'
-              })}>
-                🏆 {multiplayerResult.winners.length} Champions!
-              </p>
-            )}
-          </div>
+        ) : (
+          multiplayerResult && (
+            <div className={css({ marginBottom: { base: '12px', md: '16px' } })}>
+              {multiplayerResult.isTie ? (
+                <p
+                  className={css({
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'purple.600',
+                    fontWeight: 'bold',
+                  })}
+                >
+                  🤝 It's a tie!
+                </p>
+              ) : multiplayerResult.winners.length === 1 ? (
+                <p
+                  className={css({
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'blue.600',
+                    fontWeight: 'bold',
+                  })}
+                >
+                  🏆{' '}
+                  {activePlayerData.find((p) => p.id === multiplayerResult.winners[0])
+                    ?.displayName || `Player ${multiplayerResult.winners[0]}`}{' '}
+                  Wins!
+                </p>
+              ) : (
+                <p
+                  className={css({
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'purple.600',
+                    fontWeight: 'bold',
+                  })}
+                >
+                  🏆 {multiplayerResult.winners.length} Champions!
+                </p>
+              )}
+            </div>
+          )
        )}

        {/* Star Rating */}
-        <div className={css({
-          fontSize: { base: '24px', md: '32px' },
-          marginBottom: { base: '8px', md: '12px' }
-        })}>
+        <div
+          className={css({
+            fontSize: { base: '24px', md: '32px' },
+            marginBottom: { base: '8px', md: '12px' },
+          })}
+        >
          {'⭐'.repeat(analysis.starRating)}
          {'☆'.repeat(5 - analysis.starRating)}
        </div>

-        <div className={css({
-          fontSize: { base: '20px', md: '24px' },
-          fontWeight: 'bold',
-          color: 'orange.600'
-        })}>
+        <div
+          className={css({
+            fontSize: { base: '20px', md: '24px' },
+            fontWeight: 'bold',
+            color: 'orange.600',
+          })}
+        >
          Grade: {analysis.grade}
        </div>
      </div>

      {/* Game Statistics */}
-      <div className={css({
-        display: 'grid',
-        gridTemplateColumns: { base: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
-        gap: { base: '8px', md: '12px' },
-        marginBottom: { base: '16px', md: '24px' },
-        maxWidth: '800px',
-        margin: '0 auto'
-      })}>
-
-        <div className={css({
-          background: 'linear-gradient(135deg, #667eea, #764ba2)',
-          color: 'white',
-          padding: { base: '12px', md: '16px' },
-          borderRadius: { base: '8px', md: '12px' },
-          textAlign: 'center'
-        })}>
+      <div
+        className={css({
+          display: 'grid',
+          gridTemplateColumns: { base: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
+          gap: { base: '8px', md: '12px' },
+          marginBottom: { base: '16px', md: '24px' },
+          maxWidth: '800px',
+          margin: '0 auto',
+        })}
+      >
+        <div
+          className={css({
+            background: 'linear-gradient(135deg, #667eea, #764ba2)',
+            color: 'white',
+            padding: { base: '12px', md: '16px' },
+            borderRadius: { base: '8px', md: '12px' },
+            textAlign: 'center',
+          })}
+        >
          <div className={css({ fontSize: { base: '20px', md: '28px' }, fontWeight: 'bold' })}>
            {state.matchedPairs}
          </div>
-          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>
-            Pairs
-          </div>
+          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>Pairs</div>
        </div>

-        <div className={css({
-          background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
-          color: 'white',
-          padding: { base: '12px', md: '16px' },
-          borderRadius: { base: '8px', md: '12px' },
-          textAlign: 'center'
-        })}>
+        <div
+          className={css({
+            background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
+            color: 'white',
+            padding: { base: '12px', md: '16px' },
+            borderRadius: { base: '8px', md: '12px' },
+            textAlign: 'center',
+          })}
+        >
          <div className={css({ fontSize: { base: '20px', md: '28px' }, fontWeight: 'bold' })}>
            {state.moves}
          </div>
-          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>
-            Moves
-          </div>
+          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>Moves</div>
        </div>

-        <div className={css({
-          background: 'linear-gradient(135deg, #ff6b6b, #ee5a24)',
-          color: 'white',
-          padding: { base: '12px', md: '16px' },
-          borderRadius: { base: '8px', md: '12px' },
-          textAlign: 'center'
-        })}>
+        <div
+          className={css({
+            background: 'linear-gradient(135deg, #ff6b6b, #ee5a24)',
+            color: 'white',
+            padding: { base: '12px', md: '16px' },
+            borderRadius: { base: '8px', md: '12px' },
+            textAlign: 'center',
+          })}
+        >
          <div className={css({ fontSize: { base: '20px', md: '28px' }, fontWeight: 'bold' })}>
            {formatGameTime(gameTime)}
          </div>
-          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>
-            Time
-          </div>
+          <div className={css({ fontSize: { base: '11px', md: '14px' }, opacity: 0.9 })}>Time</div>
        </div>

-        <div className={css({
-          background: 'linear-gradient(135deg, #55a3ff, #003d82)',
-          color: 'white',
-          padding: { base: '12px', md: '16px' },
-          borderRadius: { base: '8px', md: '12px' },
-          textAlign: 'center'
-        })}>
+        <div
+          className={css({
+            background: 'linear-gradient(135deg, #55a3ff, #003d82)',
+            color: 'white',
+            padding: { base: '12px', md: '16px' },
+            borderRadius: { base: '8px', md: '12px' },
+            textAlign: 'center',
+          })}
+        >
          <div className={css({ fontSize: { base: '20px', md: '28px' }, fontWeight: 'bold' })}>
            {Math.round(analysis.statistics.accuracy)}%
          </div>
@@ -182,35 +206,50 @@ export function ResultsPhase() {

      {/* Multiplayer Scores */}
      {gameMode === 'multiplayer' && multiplayerResult && (
-        <div className={css({
-          display: 'flex',
-          justifyContent: 'center',
-          gap: { base: '12px', md: '16px' },
-          marginBottom: { base: '16px', md: '24px' },
-          flexWrap: 'wrap'
-        })}>
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'center',
+            gap: { base: '12px', md: '16px' },
+            marginBottom: { base: '16px', md: '24px' },
+            flexWrap: 'wrap',
+          })}
+        >
          {activePlayerData.map((player) => {
            const score = multiplayerResult.scores[player.id] || 0
            const isWinner = multiplayerResult.winners.includes(player.id)

            return (
-              <div key={player.id} className={css({
-                background: isWinner
-                  ? 'linear-gradient(135deg, #ffd700, #ff8c00)'
-                  : 'linear-gradient(135deg, #c0c0c0, #808080)',
-                color: 'white',
-                padding: { base: '12px', md: '16px' },
-                borderRadius: { base: '8px', md: '12px' },
-                textAlign: 'center',
-                minWidth: { base: '100px', md: '120px' }
-              })}>
-                <div className={css({ fontSize: { base: '32px', md: '40px' }, marginBottom: '4px' })}>
+              <div
+                key={player.id}
+                className={css({
+                  background: isWinner
+                    ? 'linear-gradient(135deg, #ffd700, #ff8c00)'
+                    : 'linear-gradient(135deg, #c0c0c0, #808080)',
+                  color: 'white',
+                  padding: { base: '12px', md: '16px' },
+                  borderRadius: { base: '8px', md: '12px' },
+                  textAlign: 'center',
+                  minWidth: { base: '100px', md: '120px' },
+                })}
+              >
+                <div
+                  className={css({ fontSize: { base: '32px', md: '40px' }, marginBottom: '4px' })}
+                >
                  {player.displayEmoji}
                </div>
-                <div className={css({ fontSize: { base: '11px', md: '12px' }, marginBottom: '2px', opacity: 0.9 })}>
+                <div
+                  className={css({
+                    fontSize: { base: '11px', md: '12px' },
+                    marginBottom: '2px',
+                    opacity: 0.9,
+                  })}
+                >
                  {player.displayName}
                </div>
-                <div className={css({ fontSize: { base: '24px', md: '32px' }, fontWeight: 'bold' })}>
+                <div
+                  className={css({ fontSize: { base: '24px', md: '32px' }, fontWeight: 'bold' })}
+                >
                  {score}
                </div>
                {isWinner && (
@@ -223,13 +262,15 @@ export function ResultsPhase() {
      )}

      {/* Action Buttons */}
-      <div className={css({
-        display: 'flex',
-        justifyContent: 'center',
-        gap: { base: '12px', md: '16px' },
-        flexWrap: 'wrap',
-        marginTop: 'auto'
-      })}>
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'center',
+          gap: { base: '12px', md: '16px' },
+          flexWrap: 'wrap',
+          marginTop: 'auto',
+        })}
+      >
        <button
          className={css({
            background: 'linear-gradient(135deg, #667eea, #764ba2)',
@@ -244,8 +285,8 @@ export function ResultsPhase() {
            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
            _hover: {
              transform: 'translateY(-2px)',
-              boxShadow: '0 6px 16px rgba(102, 126, 234, 0.6)'
-            }
+              boxShadow: '0 6px 16px rgba(102, 126, 234, 0.6)',
+            },
          })}
          onClick={resetGame}
        >
@@ -266,8 +307,8 @@ export function ResultsPhase() {
            boxShadow: '0 4px 12px rgba(167, 139, 250, 0.4)',
            _hover: {
              transform: 'translateY(-2px)',
-              boxShadow: '0 6px 16px rgba(167, 139, 250, 0.6)'
-            }
+              boxShadow: '0 6px 16px rgba(167, 139, 250, 0.6)',
+            },
          })}
          onClick={() => {
            console.log('🔄 ResultsPhase: Exiting session and navigating to arcade')
@@ -280,4 +321,4 @@ export function ResultsPhase() {
      </div>
    </div>
  )
-}
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
semantic-release-bot	caebefdce8	chore(release): 2.3.1 [skip ci] ## [2.3.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.3.0...v2.3.1) (2025-10-07) ### Bug Fixes * add missing DOMPoint properties to getPointAtLength mock ([`1e17278`](`1e17278f94`)) * add missing name property to Passenger test mocks ([`f8ca248`](`f8ca248844`)) * add non-null assertions to skillConfiguration utilities ([`9c71092`](`9c71092278`)) * add optional chaining to stepBeadHighlights access ([`a5fac5c`](`a5fac5c75c`)) * add showAsAbacus property to ComplementQuestion type ([`4adcc09`](`4adcc09643`)) * add userId to optimistic player in useCreatePlayer ([`5310463`](`5310463bec`)) * change TypeScript moduleResolution from bundler to node ([`327aee0`](`327aee0b4b`)) * convert Jest mocks to Vitest in useSteamJourney tests ([`e067271`](`e06727160c`)) * convert player IDs from number to string in arcade tests ([`72db1f4`](`72db1f4a2c`)) * rewrite layout.nav.test to match actual RootLayout props ([`a085de8`](`a085de816f`)) * update useArcadeGuard tests with proper useViewerId mock ([`4eb49d1`](`4eb49d1d44`)) * use Object.defineProperty for NODE_ENV in middleware tests ([`e73191a`](`e73191a729`)) * wrap Buffer in Uint8Array for Next.js Response API ([`98384d2`](`98384d264e`)) ### Documentation * add explicit package.json script references to regime docs ([`3353bca`](`3353bcadc2`)) * establish mandatory code quality regime for Claude Code ([`dd11043`](`dd1104310f`)) * expand quality regime to define "done" for all work ([`f92f7b5`](`f92f7b592a`))	2025-10-07 20:45:07 +00:00
Thomas Hallock	a5fac5c75c	fix: add optional chaining to stepBeadHighlights access Add optional chaining (?.) when accessing stepBeadHighlights to handle cases where it may be undefined. Provides fallback to empty array when stepBeadHighlights is not present, preventing potential runtime errors. Fixes potential TS18048 error in progressive-test-suite. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:39:12 -05:00
Thomas Hallock	9c71092278	fix: add non-null assertions to skillConfiguration utilities Add ! non-null assertion operator to target.basic, target.advanced, and target.expert property accesses. These objects are conditionally created earlier in the function and are guaranteed to exist when accessed. The assertions inform TypeScript of this runtime guarantee. Fixes 9 TS18046 errors in skillConfiguration.ts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:59 -05:00
Thomas Hallock	5310463bec	fix: add userId to optimistic player in useCreatePlayer Add temporary userId property to optimistic player object to satisfy Player type requirements. The Player type requires userId, but createPlayer only accepts name/emoji/color. The optimistic update now includes a temporary userId that gets replaced by the server response. Fixes 1 TS2741 error in useUserPlayers.ts:108. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:53 -05:00
Thomas Hallock	4eb49d1d44	fix: update useArcadeGuard tests with proper useViewerId mock Replace invalid userId parameter with proper useViewerId mock that returns a UseQueryResult object. The useArcadeGuard hook uses useViewerId() which returns a React Query result object, not a plain string. Updated mocks return {data, isLoading, error} to match the actual hook. Also fixed all renderHook call syntax errors from previous automated replacements. Fixes ~15 TypeScript errors in useArcadeGuard.test.ts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:46 -05:00
Thomas Hallock	a085de816f	fix: rewrite layout.nav.test to match actual RootLayout props Remove tests for non-existent 'nav' slot prop and rewrite tests to match the actual RootLayout implementation. The RootLayout component only accepts children, not a nav prop. Updated tests verify the actual component behavior with ClientProviders wrapper. Fixes 2 TS2322 errors in layout.nav.test.tsx. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:38 -05:00
Thomas Hallock	72db1f4a2c	fix: convert player IDs from number to string in arcade tests Change all player ID values from numeric (1) to string ("1") to match the arcade session schema. The arcade session system uses string IDs for players, not numbers. This aligns test data with production types. Fixes 8 TS2322 errors in arcade session tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:28 -05:00
Thomas Hallock	1e17278f94	fix: add missing DOMPoint properties to getPointAtLength mock Add w, z, matrixTransform, and toJSON properties to mock getPointAtLength return value to satisfy DOMPoint interface. The SVGPathElement.getPointAtLength() method returns a full DOMPoint object, not just {x, y}. This fix ensures the mock matches the real interface. Fixes 2 TS2322 errors in useTrackManagement tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:38:13 -05:00
Thomas Hallock	f8ca248844	fix: add missing name property to Passenger test mocks Add required name property to Passenger mock objects in usePassengerAnimations and useTrackManagement tests. The Passenger interface requires a name property. Adding it to test mocks ensures type correctness. Fixes 5 TS2741 errors in passenger-related tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:16:29 -05:00
Thomas Hallock	4adcc09643	fix: add showAsAbacus property to ComplementQuestion type Import ComplementQuestion type from gameTypes and add showAsAbacus property to test mocks and component interfaces. The ComplementQuestion interface requires showAsAbacus as a required property. Using the imported type ensures consistency and fixes missing property errors. Fixes ~34 TS2741 errors in complement-race components/tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:16:22 -05:00
Thomas Hallock	e06727160c	fix: convert Jest mocks to Vitest in useSteamJourney tests Replace jest.mock() and jest.* calls with vi.mock() and vi.* for Vitest compatibility. This project uses Vitest, not Jest. The Jest namespace was causing TS2694 "namespace cannot be used as a value" errors. Fixes ~20 TypeScript errors in passenger test files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:16:14 -05:00
Thomas Hallock	98384d264e	fix: wrap Buffer in Uint8Array for Next.js Response API Wrap Buffer objects with new Uint8Array() to satisfy Next.js Response BodyInit type requirements. Next.js 13+ requires BodyInit types (not Buffer) for Response constructors. This change maintains binary compatibility while satisfying the type checker. Fixes 3 TS2345 errors in API routes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:16:06 -05:00
Thomas Hallock	e73191a729	fix: use Object.defineProperty for NODE_ENV in middleware tests Replace direct NODE_ENV assignments with Object.defineProperty to avoid "Cannot assign to read-only property" TypeScript errors. This allows tests to safely override the readonly NODE_ENV environment variable for testing different environments. Fixes 4 TS2540 errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:15:58 -05:00
Thomas Hallock	327aee0b4b	fix: change TypeScript moduleResolution from bundler to node Change moduleResolution from "bundler" to "node" for better compatibility with pnpm workspace package resolution. This helps TypeScript better resolve workspace dependencies while maintaining compatibility with Next.js. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 15:15:49 -05:00
Thomas Hallock	3353bcadc2	docs: add explicit package.json script references to regime docs Update .claude documentation to reference the actual npm scripts from package.json, making it crystal clear what commands to run and what they do under the hood. Added: - Exact script definitions from package.json - What each script does (tsc, Biome, ESLint) - Tool descriptions (TypeScript, Biome, ESLint) - Quick reference sections for fast lookup Why: Makes it easier for Claude Code sessions to know exactly which commands to run without ambiguity. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 12:54:25 -05:00
Thomas Hallock	f92f7b592a	docs: expand quality regime to define "done" for all work Update regime documentation to clarify that quality checks must pass not just before commits, but before declaring ANY work complete. "Done" means: - npm run pre-commit passes (0 errors, 0 warnings) - All TypeScript errors fixed - All code formatted - All linting passed Quality checks required before: - Committing code - Saying work is "done" or "complete" - Marking tasks as finished - Telling the user something is "working" or "fixed" This ensures quality standards are maintained throughout development, not just at commit time. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 12:53:31 -05:00
Thomas Hallock	dd1104310f	docs: establish mandatory code quality regime for Claude Code Add comprehensive documentation and tooling to enforce code quality checks before every commit. This regime persists across all Claude Code sessions via `.claude/` directory files. The Regime (mandatory before every commit): 1. TypeScript type checking (0 errors) 2. Biome formatting (auto-applied) 3. Linting with auto-fix (0 errors, 0 warnings) 4. Final verification Implementation: - `.claude/CLAUDE.md`: Quick reference for Claude Code sessions - `.claude/CODE_QUALITY_REGIME.md`: Detailed regime documentation - `npm run pre-commit`: Single command to run all checks Why no pre-commit hooks: Avoided for religious reasons. Claude Code is responsible for enforcing quality checks through session-persistent documentation. Usage: ```bash # Before every commit npm run pre-commit # Or run steps individually npm run type-check npm run format npm run lint:fix npm run lint ``` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 12:52:29 -05:00
semantic-release-bot	ddbaf55aa2	chore(release): 2.3.0 [skip ci] ## [2.3.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.2.1...v2.3.0) (2025-10-07) ### Features * add Biome + ESLint linting setup ([`fc1838f`](`fc1838f4f5`)) ### Styles * apply Biome formatting to entire codebase ([`60d70cd`](`60d70cd2f2`))	2025-10-07 17:49:19 +00:00
Thomas Hallock	60d70cd2f2	style: apply Biome formatting to entire codebase Run Biome formatter on all files to ensure consistent code style: - Single quotes for JS/TS - Double quotes for JSX - 2-space indentation - 100 character line width - Semicolons as needed - ES5 trailing commas This is the result of running: npx @biomejs/biome format . --write 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 12:48:26 -05:00
Thomas Hallock	fc1838f4f5	feat: add Biome + ESLint linting setup Add Biome for formatting and general linting, with minimal ESLint configuration for React Hooks rules only. This provides: - Fast formatting via Biome (10-100x faster than Prettier) - General JS/TS linting via Biome - React Hooks validation via ESLint (rules-of-hooks) - Import organization via Biome Configuration files: - biome.jsonc: Biome config with custom rule overrides - eslint.config.js: Minimal flat config for React Hooks only - .gitignore: Added Biome cache exclusion - LINTING.md: Documentation for the setup Scripts added to package.json: - npm run lint: Check all files - npm run lint:fix: Auto-fix issues - npm run format: Format all files - npm run check: Full Biome check 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 12:48:26 -05:00
semantic-release-bot	3c245d29fa	chore(release): 2.2.1 [skip ci] ## [2.2.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.2.0...v2.2.1) (2025-10-07) ### Bug Fixes * remove remaining typst-dependent files ([`d1b9b72`](`d1b9b72cfc`))	2025-10-07 15:47:29 +00:00
Thomas Hallock	d1b9b72cfc	fix: remove remaining typst-dependent files Remove preview API route and template-demo page that still referenced the deleted typst-soroban library. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:46:46 -05:00
semantic-release-bot	3c00ebfe2f	chore(release): 2.2.0 [skip ci] ## [2.2.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.3...v2.2.0) (2025-10-07) ### Features * remove typst-related code and routes ([`be6fb1a`](`be6fb1a881`))	2025-10-07 15:42:43 +00:00
Thomas Hallock	be6fb1a881	feat: remove typst-related code and routes Remove all typst-related files, API routes, and components. This completes the typst dependency removal. Removed: - apps/web/src/app/api/typst-svg/route.ts - apps/web/src/app/api/typst-template/route.ts - apps/web/src/lib/typst-soroban.ts - apps/web/src/components/TypstSoroban.tsx - apps/web/src/app/test-typst/ - apps/web/src/app/typst-gallery/ - apps/web/src/app/typst-playground/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:41:44 -05:00
semantic-release-bot	e157bbff43	chore(release): 2.1.3 [skip ci] ## [2.1.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.2...v2.1.3) (2025-10-07) ### Bug Fixes * remove .npmrc from Dockerfile COPY ([`e71c2b4`](`e71c2b4da8`))	2025-10-07 15:37:01 +00:00
Thomas Hallock	e71c2b4da8	fix: remove .npmrc from Dockerfile COPY .npmrc no longer exists after reverting to default pnpm mode. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:36:10 -05:00
semantic-release-bot	40cbe96385	chore(release): 2.1.2 [skip ci] ## [2.1.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.1...v2.1.2) (2025-10-07) ### Bug Fixes * revert to default pnpm mode for Docker compatibility ([`bd0092e`](`bd0092e69a`))	2025-10-07 15:34:15 +00:00
Thomas Hallock	bd0092e69a	fix: revert to default pnpm mode for Docker compatibility Hoisted mode is incompatible with Docker's overlay filesystem. Remove .npmrc and regenerate lockfile with default isolated mode. This maintains semantic-release functionality while allowing Docker builds to succeed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:33:26 -05:00
semantic-release-bot	f9262a2c83	chore(release): 2.1.1 [skip ci] ## [2.1.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.1.0...v2.1.1) (2025-10-07) ### Bug Fixes * ignore all node_modules in Docker ([`4792dde`](`4792dde1be`))	2025-10-07 15:28:57 +00:00
Thomas Hallock	4792dde1be	fix: ignore all node_modules in Docker Docker overlay filesystem conflicts with local node_modules structure, regardless of whether it's hoisted mode or not. Ignore all node_modules and rely on the base stage installation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:28:09 -05:00
semantic-release-bot	f91248b0bb	chore(release): 2.1.0 [skip ci] ## [2.1.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.0.7...v2.1.0) (2025-10-07) ### Features * remove typst dependencies ([`eedce28`](`eedce28572`))	2025-10-07 15:23:47 +00:00
Thomas Hallock	eedce28572	feat: remove typst dependencies Remove @myriaddreamin/typst-* packages that are no longer needed. This eliminates Docker overlay conflicts with hoisted node_modules. Removed packages (-365): - @myriaddreamin/typst-all-in-one.ts - @myriaddreamin/typst-ts-renderer - @myriaddreamin/typst-ts-web-compiler - @myriaddreamin/typst.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-07 10:22:48 -05:00